mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-10-24 02:04:04 +08:00
Charts: Refactor nvd3 wrappers, remove excluded wrappers
This commit is contained in:
Aysam Guerler
File diff suppressed because one or more lines are too long
@@ -1,20 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Regular',
|
||||
category : 'Bar diagrams',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis',
|
||||
is_label : true,
|
||||
is_auto : true
|
||||
},
|
||||
y : {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
@@ -1,20 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'column', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
-25
@@ -1,25 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Horizontal',
|
||||
category : 'Bar diagrams',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis',
|
||||
is_label : true,
|
||||
is_auto : true
|
||||
},
|
||||
y : {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
x_axis_type : {
|
||||
init : 'hide'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
-20
@@ -1,20 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'bar', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
-25
@@ -1,25 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Stacked horizontal',
|
||||
category : 'Bar diagrams',
|
||||
keywords : 'highcharts',
|
||||
settings : {
|
||||
x_axis_type : {
|
||||
init : 'hide'
|
||||
}
|
||||
},
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis',
|
||||
is_label : true,
|
||||
is_auto : true
|
||||
},
|
||||
y : {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
-24
@@ -1,24 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
// finalize configuration
|
||||
chart.settings.set('plotoptions_series_stacking', 'normal');
|
||||
|
||||
// draw chart
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'bar', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,20 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Stacked',
|
||||
category : 'Bar diagrams',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis',
|
||||
is_label : true,
|
||||
is_auto : true
|
||||
},
|
||||
y : {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
@@ -1,25 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
// finalize configuration
|
||||
chart.settings.set('plotoptions_series_stacking', 'normal');
|
||||
|
||||
// draw chart
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'column', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,138 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, {
|
||||
title : 'Box plot',
|
||||
category : 'Data processing (requires \'charts\' tool from Toolshed)',
|
||||
library : 'Highcharts',
|
||||
tag : 'div',
|
||||
execute : 'boxplot',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
y : {
|
||||
title : 'Observations',
|
||||
is_numeric : true
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
separator_label : {
|
||||
title : 'X axis',
|
||||
type : 'separator'
|
||||
},
|
||||
x_axis_label : {
|
||||
title : 'Axis label',
|
||||
info : 'Provide a label for the axis.',
|
||||
type : 'text',
|
||||
init : 'X-axis',
|
||||
placeholder : 'Axis label'
|
||||
},
|
||||
separator_tick : {
|
||||
title : 'Y axis',
|
||||
type : 'separator'
|
||||
},
|
||||
y_axis_label : {
|
||||
title : 'Axis label',
|
||||
info : 'Provide a label for the axis.',
|
||||
type : 'text',
|
||||
init : 'Y-axis',
|
||||
placeholder : 'Axis label'
|
||||
},
|
||||
y_axis_type : {
|
||||
title : 'Axis value type',
|
||||
info : 'Select the value type of the axis.',
|
||||
type : 'select',
|
||||
init : 'auto',
|
||||
data : [
|
||||
{
|
||||
label : '-- Do not show values --',
|
||||
value : 'hide',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Auto',
|
||||
value : 'auto',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Float',
|
||||
value : 'f',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Exponent',
|
||||
value : 'e',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Integer',
|
||||
value : 'd',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Percentage',
|
||||
value : 'p',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Rounded',
|
||||
value : 'r',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'SI-prefix',
|
||||
value : 's',
|
||||
show : ['y_axis_tick']
|
||||
}
|
||||
]
|
||||
},
|
||||
y_axis_tick : {
|
||||
title : 'Axis tick format',
|
||||
info : 'Select the tick format for the axis.',
|
||||
type : 'select',
|
||||
init : '.1',
|
||||
data : [
|
||||
{
|
||||
label : '0.00001',
|
||||
value : '.5'
|
||||
},
|
||||
{
|
||||
label : '0.0001',
|
||||
value : '.4'
|
||||
},
|
||||
{
|
||||
label : '0.001',
|
||||
value : '.3'
|
||||
},
|
||||
{
|
||||
label : '0.01',
|
||||
value : '.2'
|
||||
},
|
||||
{
|
||||
label : '0.1',
|
||||
value : '.1'
|
||||
},
|
||||
{
|
||||
label : '1',
|
||||
value : '1'
|
||||
}
|
||||
]
|
||||
},
|
||||
y_axis_grid : {
|
||||
title : 'Axis grid',
|
||||
info : 'Would you like to show grid lines for this axis?',
|
||||
type : 'radiobutton',
|
||||
init : '1',
|
||||
data : [
|
||||
{
|
||||
label : 'On',
|
||||
value : '1'
|
||||
},
|
||||
{
|
||||
label : 'Off',
|
||||
value : '0'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
@@ -1,79 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/highcharts-config', 'plugin/charts/highcharts/common/wrapper'], function(configmaker, Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary, callback) {
|
||||
// configure request
|
||||
var index = 0;
|
||||
for (var i in request_dictionary.groups) {
|
||||
var group = request_dictionary.groups[i];
|
||||
group.columns = null;
|
||||
group.columns = {
|
||||
x: {
|
||||
index: index++
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hide legend
|
||||
chart.settings.set('legend_enabled', 'false')
|
||||
|
||||
// create configuration
|
||||
this.hc_config = configmaker(chart, callback);
|
||||
|
||||
// request data
|
||||
var self = this;
|
||||
this.app.datasets.request(request_dictionary, function() {
|
||||
// reset data/categories
|
||||
var data = [];
|
||||
var categories = [];
|
||||
|
||||
// loop through data groups
|
||||
for (var key in request_dictionary.groups) {
|
||||
// get group
|
||||
var group = request_dictionary.groups[key];
|
||||
|
||||
// add category
|
||||
categories.push(group.key);
|
||||
|
||||
// format chart data
|
||||
var point = [];
|
||||
for (var key in group.values) {
|
||||
point.push(group.values[key].x);
|
||||
}
|
||||
|
||||
// add to data
|
||||
data.push (point);
|
||||
}
|
||||
|
||||
// categories
|
||||
self.hc_config.xAxis.categories = categories;
|
||||
|
||||
// update data
|
||||
self.hc_config.series.push({
|
||||
type : 'boxplot',
|
||||
data : data
|
||||
});
|
||||
|
||||
// draw plot
|
||||
self.options.canvas[0].highcharts(self.hc_config);
|
||||
|
||||
// set chart state
|
||||
chart.state('ok', 'Box plot drawn.');
|
||||
|
||||
// unregister process
|
||||
chart.deferred.done(process_id);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,249 +0,0 @@
|
||||
define([], function() {
|
||||
|
||||
return {
|
||||
title : '',
|
||||
category : '',
|
||||
library : 'Highcharts',
|
||||
tag : 'div',
|
||||
keywords : 'highcharts',
|
||||
settings : {
|
||||
separator_label : {
|
||||
title : 'X axis',
|
||||
type : 'separator'
|
||||
},
|
||||
x_axis_label : {
|
||||
title : 'Axis label',
|
||||
info : 'Provide a label for the axis.',
|
||||
type : 'text',
|
||||
init : 'X-axis',
|
||||
placeholder : 'Axis label'
|
||||
},
|
||||
x_axis_type : {
|
||||
title : 'Axis value type',
|
||||
info : 'Select the value type of the axis.',
|
||||
type : 'select',
|
||||
init : 'auto',
|
||||
data : [
|
||||
{
|
||||
label : '-- Do not show values --',
|
||||
value : 'hide',
|
||||
hide : ['x_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Auto',
|
||||
value : 'auto',
|
||||
hide : ['x_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Float',
|
||||
value : 'f',
|
||||
show : ['x_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Exponent',
|
||||
value : 'e',
|
||||
show : ['x_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Integer',
|
||||
value : 'd',
|
||||
hide : ['x_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Percentage',
|
||||
value : 'p',
|
||||
show : ['x_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Rounded',
|
||||
value : 'r',
|
||||
show : ['x_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'SI-prefix',
|
||||
value : 's',
|
||||
show : ['x_axis_tick']
|
||||
}
|
||||
]
|
||||
},
|
||||
x_axis_tick : {
|
||||
title : 'Axis tick format',
|
||||
info : 'Select the tick format for the axis.',
|
||||
type : 'select',
|
||||
init : '.1',
|
||||
data : [
|
||||
{
|
||||
label : '0.00001',
|
||||
value : '.5'
|
||||
},
|
||||
{
|
||||
label : '0.0001',
|
||||
value : '.4'
|
||||
},
|
||||
{
|
||||
label : '0.001',
|
||||
value : '.3'
|
||||
},
|
||||
{
|
||||
label : '0.01',
|
||||
value : '.2'
|
||||
},
|
||||
{
|
||||
label : '0.1',
|
||||
value : '.1'
|
||||
},
|
||||
{
|
||||
label : '1',
|
||||
value : '1'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
x_axis_grid : {
|
||||
title : 'Axis grid',
|
||||
info : 'Would you like to show grid lines for this axis?',
|
||||
type : 'radiobutton',
|
||||
init : '0',
|
||||
data : [
|
||||
{
|
||||
label : 'On',
|
||||
value : '1'
|
||||
},
|
||||
{
|
||||
label : 'Off',
|
||||
value : '0'
|
||||
}
|
||||
]
|
||||
},
|
||||
separator_tick : {
|
||||
title : 'Y axis',
|
||||
type : 'separator'
|
||||
},
|
||||
y_axis_label : {
|
||||
title : 'Axis label',
|
||||
info : 'Provide a label for the axis.',
|
||||
type : 'text',
|
||||
init : 'Y-axis',
|
||||
placeholder : 'Axis label'
|
||||
},
|
||||
y_axis_type : {
|
||||
title : 'Axis value type',
|
||||
info : 'Select the value type of the axis.',
|
||||
type : 'select',
|
||||
init : 'auto',
|
||||
data : [
|
||||
{
|
||||
label : '-- Do not show values --',
|
||||
value : 'hide',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Auto',
|
||||
value : 'auto',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Float',
|
||||
value : 'f',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Exponent',
|
||||
value : 'e',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Integer',
|
||||
value : 'd',
|
||||
hide : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Percentage',
|
||||
value : 'p',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'Rounded',
|
||||
value : 'r',
|
||||
show : ['y_axis_tick']
|
||||
},
|
||||
{
|
||||
label : 'SI-prefix',
|
||||
value : 's',
|
||||
show : ['y_axis_tick']
|
||||
}
|
||||
]
|
||||
},
|
||||
y_axis_tick : {
|
||||
title : 'Axis tick format',
|
||||
info : 'Select the tick format for the axis.',
|
||||
type : 'select',
|
||||
init : '.1',
|
||||
data : [
|
||||
{
|
||||
label : '0.00001',
|
||||
value : '.5'
|
||||
},
|
||||
{
|
||||
label : '0.0001',
|
||||
value : '.4'
|
||||
},
|
||||
{
|
||||
label : '0.001',
|
||||
value : '.3'
|
||||
},
|
||||
{
|
||||
label : '0.01',
|
||||
value : '.2'
|
||||
},
|
||||
{
|
||||
label : '0.1',
|
||||
value : '.1'
|
||||
},
|
||||
{
|
||||
label : '1',
|
||||
value : '1'
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
y_axis_grid : {
|
||||
title : 'Axis grid',
|
||||
info : 'Would you like to show grid lines for this axis?',
|
||||
type : 'radiobutton',
|
||||
init : '1',
|
||||
data : [
|
||||
{
|
||||
label : 'On',
|
||||
value : '1'
|
||||
},
|
||||
{
|
||||
label : 'Off',
|
||||
value : '0'
|
||||
}
|
||||
]
|
||||
},
|
||||
separator_legend : {
|
||||
title : 'Others',
|
||||
type : 'separator'
|
||||
},
|
||||
legend_enabled : {
|
||||
title : 'Show legend',
|
||||
info : 'Would you like to add a legend?',
|
||||
type : 'radiobutton',
|
||||
init : 'true',
|
||||
data : [
|
||||
{
|
||||
label : 'Yes',
|
||||
value : 'true'
|
||||
},
|
||||
{
|
||||
label : 'No',
|
||||
value : 'false'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
-103
@@ -1,103 +0,0 @@
|
||||
// dependencies
|
||||
define([], function() {
|
||||
|
||||
// highcharts configuration
|
||||
return function(chart) {
|
||||
|
||||
// get chart settings
|
||||
var settings = chart.settings;
|
||||
|
||||
// initialize config object
|
||||
var hc_config = {
|
||||
chart: {
|
||||
type : '',
|
||||
zoomType : 'xy'
|
||||
},
|
||||
|
||||
title: {
|
||||
text : ''
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled : settings.get('legend_enabled') == undefined || settings.get('legend_enabled') == 'true'
|
||||
},
|
||||
|
||||
credits: {
|
||||
enabled : false
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
title: {
|
||||
text : settings.get('x_axis_label')
|
||||
},
|
||||
stackLabels: {
|
||||
enabled: false,
|
||||
style: {
|
||||
fontWeight : 'bold',
|
||||
color : (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
formatter : function() {
|
||||
var axis_type = settings.get('x_axis_type');
|
||||
if (axis_type == 'auto' || axis_type === undefined)
|
||||
return this.value;
|
||||
var format = d3.format(settings.get('x_axis_tick') + axis_type);
|
||||
return format(this.value);
|
||||
},
|
||||
enabled : !(settings.get('x_axis_type') == 'hide')
|
||||
},
|
||||
gridLineWidth : settings.get('x_axis_grid')
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text : settings.get('y_axis_label')
|
||||
},
|
||||
labels: {
|
||||
formatter : function() {
|
||||
var axis_type = settings.get('y_axis_type');
|
||||
if (axis_type == 'auto' || axis_type === undefined)
|
||||
return this.value;
|
||||
var format = d3.format(settings.get('y_axis_tick') + axis_type);
|
||||
return format(this.value);
|
||||
},
|
||||
enabled : !(settings.get('y_axis_type') == 'hide')
|
||||
},
|
||||
gridLineWidth : settings.get('y_axis_grid')
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation : false,
|
||||
stacking : settings.get('plotoptions_series_stacking')
|
||||
},
|
||||
column: {
|
||||
stacking : settings.get('plotoptions_column_stacking')
|
||||
},
|
||||
area: {
|
||||
stacking : settings.get('plotoptions_area_stacking'),
|
||||
lineColor : '#ffffff',
|
||||
lineWidth : 1,
|
||||
marker: {
|
||||
lineWidth : 1,
|
||||
lineColor : '#ffffff'
|
||||
}
|
||||
},
|
||||
pie: {
|
||||
allowPointSelect : true,
|
||||
cursor : 'pointer',
|
||||
dataLabels: {
|
||||
enabled : false,
|
||||
distance : -1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
// callback
|
||||
return hc_config;
|
||||
};
|
||||
|
||||
});
|
||||
@@ -1,179 +0,0 @@
|
||||
// dependencies
|
||||
define(['utils/utils', 'plugin/charts/highcharts/common/highcharts-config'], function(Utils, configmaker) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// highcharts series
|
||||
hc_series: {
|
||||
name : '',
|
||||
data : [],
|
||||
tooltip: {
|
||||
headerFormat : '<em>{point.key}</em><br/>'
|
||||
}
|
||||
},
|
||||
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, hc_type, chart, request_dictionary, callback)
|
||||
{
|
||||
// request data
|
||||
var self = this;
|
||||
this.app.datasets.request(request_dictionary, function() {
|
||||
// check if this chart has multiple panels
|
||||
if (!chart.definition.use_panels) {
|
||||
// draw all groups into a single panel
|
||||
if (self._drawGroups(hc_type, chart, request_dictionary.groups, self.options.canvas[0], callback)) {
|
||||
chart.state('ok', 'Chart drawn.');
|
||||
}
|
||||
} else {
|
||||
// draw groups in separate panels
|
||||
var valid = true;
|
||||
for (var group_index in request_dictionary.groups) {
|
||||
var group = request_dictionary.groups[group_index];
|
||||
if (!self._drawGroups(hc_type, chart, [group], self.options.canvas[group_index], callback)) {
|
||||
valid = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (valid) {
|
||||
chart.state('ok', 'Multi-panel chart drawn.');
|
||||
}
|
||||
}
|
||||
|
||||
// unregister process
|
||||
chart.deferred.done(process_id);
|
||||
});
|
||||
},
|
||||
|
||||
// draw all data into a single canvas
|
||||
_drawGroups: function(hc_type, chart, groups, canvas, callback) {
|
||||
// create configuration
|
||||
var hc_config = configmaker(chart);
|
||||
|
||||
// fix title
|
||||
if (!chart.definition.use_panels) {
|
||||
hc_config.title.text = chart.get('title');
|
||||
}
|
||||
|
||||
// identify categories
|
||||
this._makeCategories(chart, groups, hc_config);
|
||||
|
||||
// loop through data groups
|
||||
for (var key in groups) {
|
||||
// get group
|
||||
var group = groups[key];
|
||||
|
||||
// reset data
|
||||
var data = [];
|
||||
|
||||
// format chart data
|
||||
for (var value_index in group.values) {
|
||||
// parse data
|
||||
var point = [];
|
||||
for (var column_index in group.values[value_index]) {
|
||||
point.push(group.values[value_index][column_index]);
|
||||
}
|
||||
|
||||
// add to data
|
||||
data.push (point);
|
||||
}
|
||||
|
||||
// highcharts series
|
||||
var hc_series = {
|
||||
name : group.key,
|
||||
type : hc_type,
|
||||
data : data
|
||||
};
|
||||
|
||||
// append series
|
||||
hc_config.series.push(hc_series);
|
||||
}
|
||||
|
||||
// make custom wrapper callback
|
||||
if (callback) {
|
||||
callback(hc_config);
|
||||
}
|
||||
|
||||
// draw plot
|
||||
try {
|
||||
canvas.highcharts(hc_config);
|
||||
return true;
|
||||
} catch (err) {
|
||||
this._handleError(chart, err);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// create categories
|
||||
_makeCategories: function(chart, groups, hc_config) {
|
||||
// hashkeys, arrays and counter for labeled columns
|
||||
var categories = {};
|
||||
var array = {};
|
||||
var counter = {};
|
||||
|
||||
// identify label columns
|
||||
var chart_definition = groups[0];
|
||||
for (var key in chart_definition.columns) {
|
||||
var column_def = chart_definition.columns[key];
|
||||
if (column_def.is_label) {
|
||||
categories[key] = {};
|
||||
array[key] = [];
|
||||
counter[key] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// index all values contained in label columns (for all groups)
|
||||
for (var i in groups) {
|
||||
var group = groups[i];
|
||||
for (var j in group.values) {
|
||||
var value_dict = group.values[j];
|
||||
for (var key in categories) {
|
||||
var value = String(value_dict[key]);
|
||||
if (categories[key][value] === undefined) {
|
||||
categories[key][value] = counter[key]++;
|
||||
array[key].push(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// convert group values into category indeces
|
||||
for (var i in groups) {
|
||||
var group = groups[i];
|
||||
for (var j in group.values) {
|
||||
var value_dict = group.values[j];
|
||||
for (var key in categories) {
|
||||
var value = String(value_dict[key]);
|
||||
value_dict[key] = categories[key][value]
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(array);
|
||||
// add categories to highcharts configuration
|
||||
for (var key in array) {
|
||||
var axis = key + 'Axis';
|
||||
if (hc_config[axis]) {
|
||||
hc_config[axis].categories = array[key];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// handle error
|
||||
_handleError: function(chart, err) {
|
||||
var regex = /\www\.highcharts\.com([^&]+)/;
|
||||
var match = err.match(regex);
|
||||
if (match.length > 0) {
|
||||
chart.state('failed', 'Highcharts error: <a target="_blank" href="http://' + match[0] + '">' + match[0] + '</a>');
|
||||
} else {
|
||||
chart.state('failed', err);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,31 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Heatmap',
|
||||
category : 'Others',
|
||||
use_panels : true,
|
||||
keywords : 'highcharts',
|
||||
columns: {
|
||||
x: {
|
||||
title : 'Column labels',
|
||||
is_label : true,
|
||||
is_numeric : true
|
||||
},
|
||||
y: {
|
||||
title : 'Row labels',
|
||||
is_label : true,
|
||||
is_numeric : true
|
||||
},
|
||||
z: {
|
||||
title : 'Observations',
|
||||
is_numeric : true
|
||||
}
|
||||
},
|
||||
settings: {
|
||||
y_axis_grid : {
|
||||
init : '0'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@@ -1,25 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(HighchartsWrapper) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
var hc = new HighchartsWrapper(this.app, this.options);
|
||||
hc.draw(process_id, 'heatmap', chart, request_dictionary, function(model) {
|
||||
model.colorAxis = {
|
||||
minColor : '#00FF99',
|
||||
maxColor : '#000066'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,30 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Histogram',
|
||||
category : 'Data processing (requires \'charts\' tool from Toolshed)',
|
||||
execute : 'histogram',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
y : {
|
||||
title : 'Observations',
|
||||
is_numeric : true
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
x_axis_label : {
|
||||
init : 'Values'
|
||||
},
|
||||
y_axis_label : {
|
||||
init : 'Density'
|
||||
},
|
||||
y_axis_type : {
|
||||
init : 'f'
|
||||
},
|
||||
y_axis_tick : {
|
||||
init : '.2'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
@@ -1,34 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
// configure request
|
||||
var index = 1;
|
||||
for (var i in request_dictionary.groups) {
|
||||
var group = request_dictionary.groups[i];
|
||||
group.columns = {
|
||||
x: {
|
||||
index: 0
|
||||
},
|
||||
y: {
|
||||
index: index++
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'column', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
-24
@@ -1,24 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Discrete Histogram',
|
||||
category : 'Data processing (requires \'charts\' tool from Toolshed)',
|
||||
execute : 'histogramdiscrete',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
y : {
|
||||
title : 'Observations',
|
||||
is_label : true
|
||||
}
|
||||
},
|
||||
settings : {
|
||||
x_axis_label : {
|
||||
init : 'Labels'
|
||||
},
|
||||
y_axis_label : {
|
||||
init : 'Density'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
-46
@@ -1,46 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
// configure request
|
||||
var tmp_dict = {
|
||||
id : request_dictionary.id,
|
||||
groups : []
|
||||
};
|
||||
|
||||
// configure groups
|
||||
var index = 0;
|
||||
for (var group_index in request_dictionary.groups) {
|
||||
var group = request_dictionary.groups[group_index];
|
||||
tmp_dict.groups.push({
|
||||
key : group.key,
|
||||
columns : {
|
||||
x: {
|
||||
index : 0,
|
||||
is_label : true
|
||||
},
|
||||
y: {
|
||||
index : ++index,
|
||||
is_numeric : true
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// draw chart
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'column', chart, tmp_dict);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Line',
|
||||
category : 'Others',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis',
|
||||
is_label : true,
|
||||
is_auto : true,
|
||||
is_numeric : false
|
||||
},
|
||||
y : {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
@@ -1,20 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'line', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,116 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Pie chart',
|
||||
category : 'Area charts',
|
||||
keywords : 'highcharts',
|
||||
use_panels : true,
|
||||
columns : {
|
||||
label : {
|
||||
title : 'Labels',
|
||||
is_label : true,
|
||||
is_auto : true
|
||||
},
|
||||
y : {
|
||||
title : 'Values',
|
||||
is_numeric : true
|
||||
}
|
||||
},
|
||||
|
||||
settings : {
|
||||
show_legend : {
|
||||
title : 'Show legend',
|
||||
info : 'Would you like to add a legend?',
|
||||
type : 'select',
|
||||
init : 'false',
|
||||
data : [
|
||||
{
|
||||
label : 'Yes',
|
||||
value : 'true'
|
||||
},
|
||||
{
|
||||
label : 'No',
|
||||
value : 'false'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
donut_ratio : {
|
||||
title : 'Donut ratio',
|
||||
info : 'Determine how large the donut hole will be.',
|
||||
type : 'select',
|
||||
init : '0.5',
|
||||
data : [
|
||||
{
|
||||
label : '50%',
|
||||
value : '0.5'
|
||||
},
|
||||
{
|
||||
label : '25%',
|
||||
value : '0.25'
|
||||
},
|
||||
{
|
||||
label : '10%',
|
||||
value : '0.10'
|
||||
},
|
||||
{
|
||||
label : '0%',
|
||||
value : '0'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
label_separator : {
|
||||
type : 'separator',
|
||||
title : 'Label settings'
|
||||
},
|
||||
|
||||
label_type : {
|
||||
title : 'Donut label',
|
||||
info : 'What would you like to show for each slice?',
|
||||
type : 'select',
|
||||
init : 'percent',
|
||||
data : [
|
||||
{
|
||||
label : '-- Nothing --',
|
||||
value : 'hide',
|
||||
hide : 'label_outside'
|
||||
},
|
||||
{
|
||||
label : 'Label column',
|
||||
value : 'key',
|
||||
show : 'label_outside'
|
||||
},
|
||||
{
|
||||
label : 'Value column',
|
||||
value : 'value',
|
||||
show : 'label_outside'
|
||||
},
|
||||
{
|
||||
label : 'Percentage',
|
||||
value : 'percent',
|
||||
show : 'label_outside'
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
label_outside : {
|
||||
title : 'Show outside',
|
||||
info : 'Would you like to show labels outside the donut?',
|
||||
type : 'select',
|
||||
init : 'false',
|
||||
data : [
|
||||
{
|
||||
label : 'Yes',
|
||||
value : 'true'
|
||||
},
|
||||
{
|
||||
label : 'No',
|
||||
value : 'false'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
@@ -1,20 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'pie', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,19 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Scatter plot',
|
||||
category : 'Others',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis',
|
||||
is_numeric : true
|
||||
},
|
||||
y : {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
@@ -1,20 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'scatter', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
define(['plugin/charts/highcharts/common/config'], function(config) {
|
||||
|
||||
return $.extend(true, {}, config, {
|
||||
title : 'Regular',
|
||||
category : 'Area charts',
|
||||
keywords : 'highcharts',
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis',
|
||||
is_label : true,
|
||||
is_auto : true,
|
||||
is_numeric : false
|
||||
},
|
||||
y : {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
@@ -1,20 +0,0 @@
|
||||
// dependencies
|
||||
define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
{
|
||||
// initialize
|
||||
initialize: function(app, options) {
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
// render
|
||||
draw : function(process_id, chart, request_dictionary) {
|
||||
var hc = new Highcharts(this.app, this.options);
|
||||
hc.draw(process_id, 'area', chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.multiBarChart(), chart, request_dictionary);
|
||||
nvd3.draw('multiBarChart', process_id, chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.multiBarHorizontalChart(), chart, request_dictionary);
|
||||
nvd3.draw('multiBarHorizontalChart', process_id, chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.multiBarHorizontalChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3.draw('multiBarHorizontalChart', process_id, chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3_model.stacked(true);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4,6 +4,11 @@ return $.extend(true, {}, nvd3_config, {
|
||||
title : 'Stacked',
|
||||
category : 'Bar diagrams',
|
||||
columns : {
|
||||
x : {
|
||||
title : 'Values for x-axis',
|
||||
is_label : true,
|
||||
is_auto : true
|
||||
},
|
||||
y : {
|
||||
title : 'Values for y-axis',
|
||||
is_numeric : true
|
||||
|
||||
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.multiBarChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3.draw('multiBarChart', process_id, chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3_model.stacked(true);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -210,6 +210,22 @@ return {
|
||||
value : 'false'
|
||||
}
|
||||
]
|
||||
},
|
||||
use_panels : {
|
||||
title : 'Use multi-panels',
|
||||
info : 'Would you like to separate your data into individual panels?',
|
||||
type : 'radiobutton',
|
||||
init : 'false',
|
||||
data : [
|
||||
{
|
||||
label : 'Yes',
|
||||
value : 'true'
|
||||
},
|
||||
{
|
||||
label : 'No',
|
||||
value : 'false'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// dependencies
|
||||
define([], function() {
|
||||
define(['plugin/charts/tools', 'plugin/plugins/nvd3/nv.d3'], function(Tools) {
|
||||
|
||||
// widget
|
||||
return Backbone.View.extend(
|
||||
@@ -9,58 +9,75 @@ return Backbone.View.extend(
|
||||
this.app = app;
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
|
||||
// render
|
||||
draw : function(process_id, nvd3_model, chart, request_dictionary, callback)
|
||||
draw : function(type, process_id, chart, request_dictionary, callback) {
|
||||
var self = this;
|
||||
var plot = Tools.panelHelper({
|
||||
app : this.app,
|
||||
process_id : process_id,
|
||||
canvas : this.options.canvas,
|
||||
chart : chart,
|
||||
request_dictionary : request_dictionary,
|
||||
render : function(chart, groups, canvas) {
|
||||
return self.render(type, chart, groups, canvas, callback)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// render
|
||||
render : function(type, chart, groups, canvas, callback)
|
||||
{
|
||||
// create nvd3 model
|
||||
var d3chart = nv.models[type]();
|
||||
|
||||
// request data
|
||||
var self = this;
|
||||
this.app.datasets.request(request_dictionary, function() {
|
||||
nv.addGraph(function() {
|
||||
nv.addGraph(function() {
|
||||
try {
|
||||
// x axis
|
||||
self._axis(nvd3_model.xAxis, chart.settings.get('x_axis_type'), chart.settings.get('x_axis_tick'));
|
||||
self._axis(d3chart.xAxis, chart.settings.get('x_axis_type'), chart.settings.get('x_axis_tick'));
|
||||
|
||||
// x axis label
|
||||
nvd3_model.xAxis.axisLabel(chart.settings.get('x_axis_label'));
|
||||
d3chart.xAxis.axisLabel(chart.settings.get('x_axis_label'));
|
||||
|
||||
// y axis
|
||||
self._axis(nvd3_model.yAxis, chart.settings.get('y_axis_type'), chart.settings.get('y_axis_tick'));
|
||||
self._axis(d3chart.yAxis, chart.settings.get('y_axis_type'), chart.settings.get('y_axis_tick'));
|
||||
|
||||
// y axis label
|
||||
nvd3_model.yAxis.axisLabel(chart.settings.get('y_axis_label'))
|
||||
d3chart.yAxis.axisLabel(chart.settings.get('y_axis_label'))
|
||||
.axisLabelDistance(30);
|
||||
|
||||
// controls
|
||||
nvd3_model.options({showControls: false});
|
||||
d3chart.options({showControls: false});
|
||||
|
||||
// legend
|
||||
if (nvd3_model.showLegend) {
|
||||
if (d3chart.showLegend) {
|
||||
var legend_visible = true;
|
||||
if (chart.settings.get('show_legend') == 'false') {
|
||||
legend_visible = false;
|
||||
}
|
||||
nvd3_model.showLegend(legend_visible);
|
||||
d3chart.showLegend(legend_visible);
|
||||
}
|
||||
|
||||
// custom callback
|
||||
if (callback) {
|
||||
callback(nvd3_model);
|
||||
callback(d3chart);
|
||||
}
|
||||
|
||||
// parse data to canvas
|
||||
self.options.canvas[0].datum(request_dictionary.groups)
|
||||
.call(nvd3_model);
|
||||
canvas.datum(groups)
|
||||
.call(d3chart);
|
||||
|
||||
|
||||
// refresh on window resize
|
||||
nv.utils.windowResize(nvd3_model.update);
|
||||
|
||||
// set chart state
|
||||
chart.state('ok', 'Chart has been drawn.');
|
||||
|
||||
// unregister process
|
||||
chart.deferred.done(process_id);
|
||||
});
|
||||
nv.utils.windowResize(d3chart.update);
|
||||
} catch (err) {
|
||||
self._handleError(chart, err);
|
||||
}
|
||||
});
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
// make axis
|
||||
@@ -74,6 +91,11 @@ return Backbone.View.extend(
|
||||
default:
|
||||
axis.tickFormat(d3.format(tick + type));
|
||||
}
|
||||
},
|
||||
|
||||
// handle error
|
||||
_handleError: function(chart, err) {
|
||||
chart.state('failed', err);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ return Backbone.View.extend(
|
||||
|
||||
// load nvd3
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.multiBarChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3.draw('multiBarChart', process_id, chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3_model.options({showControls: true});
|
||||
});
|
||||
}
|
||||
|
||||
+1
-1
@@ -39,7 +39,7 @@ return Backbone.View.extend(
|
||||
|
||||
// draw
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.multiBarChart(), chart, tmp_dict, function(nvd3_model) {
|
||||
nvd3.draw('multiBarChart', process_id, chart, tmp_dict, function(nvd3_model) {
|
||||
nvd3_model.options({showControls: false});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.lineChart(), chart, request_dictionary);
|
||||
nvd3.draw('lineChart', process_id, chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.lineWithFocusChart(), chart, request_dictionary);
|
||||
nvd3.draw('lineWithFocusChart', process_id, chart, request_dictionary);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.scatterChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3.draw('scatterChart', process_id, chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3_model.showDistX(true)
|
||||
.showDistY(true)
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.stackedAreaChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3.draw('stackedAreaChart', process_id, chart, request_dictionary, function(nvd3_model) {
|
||||
// make plot
|
||||
nvd3_model.x(function(d) { return d.x })
|
||||
.y(function(d) { return d.y })
|
||||
|
||||
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.stackedAreaChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3.draw('stackedAreaChart', process_id, chart, request_dictionary, function(nvd3_model) {
|
||||
// make plot
|
||||
nvd3_model.x(function(d) { return d.x })
|
||||
.y(function(d) { return d.y })
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ return Backbone.View.extend(
|
||||
draw : function(process_id, chart, request_dictionary)
|
||||
{
|
||||
var nvd3 = new NVD3(this.app, this.options);
|
||||
nvd3.draw(process_id, nv.models.stackedAreaChart(), chart, request_dictionary, function(nvd3_model) {
|
||||
nvd3.draw('stackedAreaChart', process_id, chart, request_dictionary, function(nvd3_model) {
|
||||
// make plot
|
||||
nvd3_model.x(function(d) { return d.x })
|
||||
.y(function(d) { return d.y })
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
// dependencies
|
||||
define(['utils/utils'], function(Utils) {
|
||||
|
||||
// render
|
||||
function panelHelper (options)
|
||||
{
|
||||
// require parameters
|
||||
var process_id = options.process_id;
|
||||
var chart = options.chart;
|
||||
var request_dictionary = options.request_dictionary;
|
||||
var render = options.render;
|
||||
var canvas = options.canvas;
|
||||
var app = options.app;
|
||||
|
||||
// request data
|
||||
var self = this;
|
||||
app.datasets.request(request_dictionary, function() {
|
||||
try {
|
||||
// check if this chart has multiple panels
|
||||
if (!chart.definition.use_panels && chart.settings.get('use_panels') !== 'true') {
|
||||
// draw all groups into a single panel
|
||||
if (render(chart, request_dictionary.groups, canvas[0])) {
|
||||
chart.state('ok', 'Chart drawn.');
|
||||
}
|
||||
} else {
|
||||
// draw groups in separate panels
|
||||
var valid = true;
|
||||
for (var group_index in request_dictionary.groups) {
|
||||
var group = request_dictionary.groups[group_index];
|
||||
if (!render(chart, [group], canvas[group_index])) {
|
||||
valid = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (valid) {
|
||||
chart.state('ok', 'Multi-panel chart drawn.');
|
||||
}
|
||||
}
|
||||
|
||||
// unregister process
|
||||
chart.deferred.done(process_id);
|
||||
} catch (err) {
|
||||
// log
|
||||
console.debug('FAILED: Tools::draw() - ' + err);
|
||||
|
||||
// set chart state
|
||||
chart.state('failed', err);
|
||||
|
||||
// unregister process
|
||||
chart.deferred.done(process_id);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// series maker
|
||||
function makeSeries(group) {
|
||||
// reset data
|
||||
var data = [];
|
||||
|
||||
// format chart data
|
||||
for (var value_index in group.values) {
|
||||
// parse data
|
||||
var point = [];
|
||||
for (var column_index in group.values[value_index]) {
|
||||
point.push(group.values[value_index][column_index]);
|
||||
}
|
||||
|
||||
// add to data
|
||||
data.push (point);
|
||||
}
|
||||
|
||||
// return
|
||||
return data;
|
||||
};
|
||||
|
||||
// category maker
|
||||
function makeCategories(chart, groups) {
|
||||
// hashkeys, arrays and counter for labeled columns
|
||||
var categories = {};
|
||||
var array = {};
|
||||
var counter = {};
|
||||
|
||||
// identify label columns
|
||||
var chart_definition = groups[0];
|
||||
for (var key in chart_definition.columns) {
|
||||
var column_def = chart_definition.columns[key];
|
||||
if (column_def.is_label) {
|
||||
categories[key] = {};
|
||||
array[key] = [];
|
||||
counter[key] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// index all values contained in label columns (for all groups)
|
||||
for (var i in groups) {
|
||||
var group = groups[i];
|
||||
for (var j in group.values) {
|
||||
var value_dict = group.values[j];
|
||||
for (var key in categories) {
|
||||
var value = String(value_dict[key]);
|
||||
if (categories[key][value] === undefined) {
|
||||
categories[key][value] = counter[key];
|
||||
array[key].push([counter[key], value]);
|
||||
counter[key]++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// convert group values into category indeces
|
||||
for (var i in groups) {
|
||||
var group = groups[i];
|
||||
for (var j in group.values) {
|
||||
var value_dict = group.values[j];
|
||||
for (var key in categories) {
|
||||
var value = String(value_dict[key]);
|
||||
value_dict[key] = categories[key][value]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// return dictionary
|
||||
return {
|
||||
categories : categories,
|
||||
array : array,
|
||||
counter : counter
|
||||
}
|
||||
};
|
||||
|
||||
// return
|
||||
return {
|
||||
panelHelper : panelHelper,
|
||||
makeCategories : makeCategories,
|
||||
makeSeries : makeSeries
|
||||
}
|
||||
|
||||
});
|
||||
@@ -11,19 +11,9 @@ define(['plugin/charts/nvd3/bar/config',
|
||||
'plugin/charts/nvd3/histogram_discrete/config',
|
||||
'plugin/charts/nvd3/line/config',
|
||||
'plugin/charts/nvd3/scatter/config',
|
||||
'plugin/charts/nvd3/stackedarea/config',
|
||||
'plugin/charts/highcharts/bar/config',
|
||||
'plugin/charts/highcharts/bar_stacked/config',
|
||||
'plugin/charts/highcharts/bar_horizontal/config',
|
||||
'plugin/charts/highcharts/bar_horizontal_stacked/config',
|
||||
'plugin/charts/highcharts/histogram/config',
|
||||
'plugin/charts/highcharts/histogram_discrete/config',
|
||||
'plugin/charts/highcharts/line/config',
|
||||
'plugin/charts/highcharts/pie/config',
|
||||
'plugin/charts/highcharts/scatter/config',
|
||||
'plugin/charts/highcharts/stackedarea/config',
|
||||
'plugin/charts/highcharts/boxplot/config',
|
||||
'plugin/charts/highcharts/heatmap/config',
|
||||
'plugin/charts/nvd3/stackedarea/config'
|
||||
//'plugin/charts/flot/bar/config',
|
||||
//'plugin/charts/others/boxplot/config',
|
||||
], function(nvd3_bar,
|
||||
nvd3_bar_stacked,
|
||||
nvd3_bar_horizontal,
|
||||
@@ -36,19 +26,9 @@ define(['plugin/charts/nvd3/bar/config',
|
||||
nvd3_histogram_discrete,
|
||||
nvd3_line,
|
||||
nvd3_scatter,
|
||||
nvd3_stackedarea,
|
||||
highcharts_bar,
|
||||
highcharts_bar_stacked,
|
||||
highcharts_bar_horizontal,
|
||||
highcharts_bar_horizontal_stacked,
|
||||
highcharts_histogram,
|
||||
highcharts_histogram_discrete,
|
||||
highcharts_line,
|
||||
highcharts_pie,
|
||||
highcharts_scatter,
|
||||
highcharts_stackedarea,
|
||||
highcharts_boxplot,
|
||||
highcharts_heatmap
|
||||
nvd3_stackedarea
|
||||
//flot_bar,
|
||||
//others_boxplot
|
||||
) {
|
||||
|
||||
// widget
|
||||
@@ -61,26 +41,16 @@ return Backbone.Model.extend(
|
||||
'nvd3_bar_horizontal' : nvd3_bar_horizontal,
|
||||
'nvd3_bar_horizontal_stacked' : nvd3_bar_horizontal_stacked,
|
||||
'nvd3_line_focus' : nvd3_line_focus,
|
||||
'nvd3_stackedarea' : nvd3_stackedarea,
|
||||
'nvd3_stackedarea_full' : nvd3_stackedarea_full,
|
||||
'nvd3_stackedarea_stream' : nvd3_stackedarea_stream,
|
||||
'nvd3_pie' : nvd3_pie,
|
||||
'nvd3_stackedarea' : nvd3_stackedarea,
|
||||
'nvd3_line' : nvd3_line,
|
||||
'nvd3_scatter' : nvd3_scatter,
|
||||
'nvd3_histogram' : nvd3_histogram,
|
||||
'nvd3_histogram_discrete' : nvd3_histogram_discrete,
|
||||
'highcharts_bar' : highcharts_bar,
|
||||
'highcharts_bar_stacked' : highcharts_bar_stacked,
|
||||
'highcharts_bar_horizontal' : highcharts_bar_horizontal,
|
||||
'highcharts_bar_horizontal_stacked' : highcharts_bar_horizontal_stacked,
|
||||
'highcharts_stackedarea' : highcharts_stackedarea,
|
||||
'highcharts_pie' : highcharts_pie,
|
||||
'highcharts_line' : highcharts_line,
|
||||
'highcharts_scatter' : highcharts_scatter,
|
||||
'highcharts_histogram' : highcharts_histogram,
|
||||
'highcharts_histogram_discrete' : highcharts_histogram_discrete,
|
||||
'highcharts_boxplot' : highcharts_boxplot,
|
||||
'highcharts_heatmap' : highcharts_heatmap
|
||||
'nvd3_histogram_discrete' : nvd3_histogram_discrete
|
||||
//'flot_bar' : flot_bar,
|
||||
//'others_boxplot' : others_boxplot
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -139,7 +139,7 @@ return Backbone.View.extend({
|
||||
this.chart_definition = chart.definition;
|
||||
|
||||
// read settings
|
||||
var use_panels = this.chart_definition.use_panels;
|
||||
var use_panels = this.chart_definition.use_panels || (chart.settings.get('use_panels') === 'true');
|
||||
|
||||
// determine number of svg/div-elements to create
|
||||
var n_panels = 1;
|
||||
|
||||
@@ -21,17 +21,9 @@
|
||||
## shared css
|
||||
${h.css( 'base' )}
|
||||
|
||||
## install nv.d3 module
|
||||
${h.javascript_link( app_root + "plugins/nvd3/nv.d3.js" )}
|
||||
## css
|
||||
${h.stylesheet_link( app_root + "plugins/nvd3/nv.d3.css" )}
|
||||
|
||||
## install highcharts module
|
||||
${h.javascript_link( "http://code.highcharts.com/highcharts.js" )}
|
||||
${h.javascript_link( "http://code.highcharts.com/modules/heatmap.js" )}
|
||||
|
||||
## install boxplot module
|
||||
##${h.javascript_link( app_root + "plugins/box.js" )}
|
||||
|
||||
## load merged/minified code
|
||||
${h.javascript_link( app_root + "build-app.js" )}
|
||||
|
||||
@@ -41,7 +33,6 @@
|
||||
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
|
||||
// get configuration
|
||||
var config = {
|
||||
root : '${root}',
|
||||
|
||||
Reference in New Issue
Block a user