Manage multiple highchart charts in a single webpage

Question

I am having multiple highchart charts of various types(Bar,Pie, Scatter type) in a single web page. Currently I am creating config object for each graph like,

{ chart : {}, blah blah, } 

And feeding them to a custom function which will just call HighCharts.chart(). But this results in duplication of code. I want to manage all this chart rendering logic centrally.

Any Idea on how to do this?

Answer 1

You can use jQuery.extend() and Highcharts.setOptions.
So first you'll make the first object which will be extended by all your charts, this object will contain your Highchart default functions.

You can do it using namespacing.
The following way is good when you have very different charts.

Default graphic:

var defaultChart = {     chartContent: null,     highchart: null,     defaults: {          chart: {             alignTicks: false,             borderColor: '#656565',             borderWidth: 1,             zoomType: 'x',             height: 400,             width: 800         },          series: []      },      // here you'll merge the defauls with the object options      init: function(options) {          this.highchart= jQuery.extend({}, this.defaults, options);         this.highchart.chart.renderTo = this.chartContent;     },      create: function() {          new Highcharts.Chart(this.highchart);     }  }; 

Now, if you want to make a column chart, you'll extend defaultChart

var columnChart = {      chartContent: '#yourChartContent',     options: {          // your chart options     }  };  columnChart = jQuery.extend(true, {}, defaultChart, columnChart);  // now columnChart has all defaultChart functions  // now you'll init the object with your chart options  columnChart.init(columnChart.options);  // when you want to create the chart you just call  columnChart.create(); 

If you have similar charts use Highcharts.setOptions which will apply the options for all created charts after this.

// `options` will be used by all charts Highcharts.setOptions(options);  // only data options var chart1 = Highcharts.Chart({     chart: {         renderTo: 'container1'     },     series: [] });  var chart2 = Highcharts.Chart({     chart: {         renderTo: 'container2'     },     series: [] }); 

Reference

• http://api.highcharts.com/highcharts#Highcharts.setOptions%28%29

COMPLETE DEMO

Answer 2

I know this has already been answered, but I feel that it can be taken yet further. I'm still newish to JavaScript and jQuery, so if anyone finds anything wrong, or thinks that this approach breaks guidelines or rules-of-thumb of some kind, I'd be grateful for feedback.

Building on the principles described by Ricardo Lohmann, I've created a jQuery plugin, which (in my opinion) allows Highcharts to work more seamlessly with jQuery (i.e. the way that jQuery works with other HTML objects).

I've never liked the fact that you have to supply an object ID to Highcharts before it draws the chart. So with the plug-in, I can assign the chart to the standard jQuery selector object, without having to give the containing <div> an id value.

(function($){     var chartType = {         myArea : {             chart: { type: 'area' },             title: { text: 'Example Line Chart' },             xAxis: { /* xAxis settings... */ },             yAxis: { /* yAxis settings... */ },             /* etc. */             series: []         },         myColumn : {             chart: { type: 'column' },             title: { text: 'Example Column Chart' },             xAxis: { /* xAxis settings... */ },             yAxis: { /* yAxis settings... */ },             /* etc. */             series: []         }     };     var methods = {         init:             function (chartName, options) {                 return this.each(function(i) {                     optsThis = options[i];                     chartType[chartName].chart.renderTo = this;                     optsHighchart = $.extend (true, {}, chartType[chartName], optsThis);                     new Highcharts.Chart (optsHighchart);                 });             }     };     $.fn.cbhChart = function (action,objSettings) {         if ( chartType[action] ) {             return methods.init.apply( this, arguments );         } else if ( methods[action] ) {             return methods[method].apply(this,Array.prototype.slice.call(arguments,1));         } else if ( typeof action === 'object' || !action ) {             $.error( 'Invalid arguments to plugin: jQuery.cbhChart' );         } else {            $.error( 'Action "' +  action + '" does not exist on jQuery.cbhChart' );         }     }; })(jQuery); 

With this plug-in, I can now assign a chart as follows:

$('.columnChart').cbhChart('myColumn', optionsArray); 

This is a simplistic example of course; for a real example, you'd have to create more complex chart-properties. But it's the principles that concern us here, and I find that this approach addresses the original question. It re-uses code, while still allowing for individual chart alterations to be applied progressively on top of each other.

In principle, it also allows you to group together multiple Ajax calls into one, pushing each graph's options and data into a single JavaScript array.

The obligatory jFiddle example is here: http://jsfiddle.net/3GYHg/1/

Criticism welcome!!