Quite good looking graph derived from d3.js http://c3js.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

116 lines
4.0 KiB

(function() {
var extra = {};
c3.chart.internal.fn.additionalConfig = {
data_pairs: [],
};
c3.chart.internal.fn.beforeInit = function (config) {
var that = this;
// update internals only when chart type is "bubble"
if (config.data.type !== 'bubble') {
return;
}
// Set extra to ba able to be used in other part
this.extra = extra;
extra.getKey = function (x, y) {
return x + '::' + y;
};
this.config.data_type = 'scatter';
this.config.axis_x_padding = 0;
this.config.axis_y_padding = 0;
this.config.axis_x_tick_centered = true;
this.config.axis_x_tick_format = function (d) {
return extra.names[d];
};
this.config.axis_y_tick_format = function (d) {
return extra.names[d];
};
if (!config.color || !config.color.pattern) {
this.config.color_pattern = ['#1f77b4'];
}
this.config.point_r = function (d) {
var names = extra.names, values = extra.values, base_length = extra.base_length,
x = names[d.x], y = d.id,
key = extra.getKey(x, y), value = !values[key] ? 0 : values[key],
max, max_r, max_area, a, area, r;
if (!base_length) {
base_length = extra.base_length = d3.min([
that.svg.select('.c3-axis.c3-axis-y path').node().getTotalLength(),
that.svg.select('.c3-axis.c3-axis-x path').node().getTotalLength(),
]);
}
max = d3.max(Object.keys(values).map(function (key) { return values[key]; }));
max_r = (base_length / (names.length * 2));
max_area = max_r * max_r * Math.PI;
a = max_area / max;
area = value * a;
r = Math.sqrt(area / Math.PI);
return r;
};
this.config.point_sensitivity = 25;
this.config.point_focus_expand_enabled = false;
this.config.legend_show = false;
if (!config.tooltip || !config.tooltip.contents) {
this.config.tooltip_contents = function (d, defaultTitleFormat, defaultValueFormat, color) {
var x = extra.names[d[0].x], y = d[0].name, v = extra.values[extra.getKey(x, y)], text;
text = "<table class='" + this.CLASS.tooltip + "'>";
text += "<tr><th colspan='2'>" + x + "&nbsp;/&nbsp;" + y + "</th></tr>";
text += "<tr><td class='value'>" + (!v ? 0 : v) + "</td></tr>";
text += "</table>";
return text;
};
}
// construct bubble chart data and setup config based on the values
var xs = this.config.data_pairs.map(function (pair) { return pair.x; }),
ys = this.config.data_pairs.map(function (pair) { return pair.y; });
extra.names = d3.set(xs.concat(ys)).values().sort();
this.config.axis_y_tick_values = extra.names.map(function (name, i) { return i; });
var data_xs = {};
extra.names.forEach(function (name) {
data_xs[name] = name + '_x';
});
var data_columns_xs = Object.keys(data_xs).map(function (key) {
return [data_xs[key]].concat(extra.names.map(function (name, i) { return i; }));
});
var data_columns_values = extra.names.map(function (name, i) {
return [name].concat(extra.names.map(function (name) { return i; }));
});
this.config.data_xs = data_xs;
this.config.data_columns = data_columns_xs.concat(data_columns_values);
var values = {};
this.config.data_pairs.forEach(function (pair) {
if (!pair.x || !pair.y) {
throw "x and y are required in data.";
}
values[extra.getKey(pair.x, pair.y)] = pair.value;
});
extra.values = values;
this.config.axis_x_min = this.config.axis_y_min = -0.5;
this.config.axis_x_max = this.config.axis_y_max = extra.names.length - 0.5;
};
})(window);