StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>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).</p> <p>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 <code><div></code> an <code>id</code> value.</p> <pre class="lang-js prettyprint-override"><code>(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); </code></pre> <p>With this plug-in, I can now assign a chart as follows:</p> <pre class="lang-js prettyprint-override"><code>$('.columnChart').cbhChart('myColumn', optionsArray); </code></pre> <p>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.</p> <p>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.</p> <p>The obligatory jFiddle example is here: <a href="http://jsfiddle.net/3GYHg/1/">http://jsfiddle.net/3GYHg/1/</a></p> <p>Criticism welcome!!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload