chartseries.js jquery plugin

August 3, 2011 by Oscar

This widget allows you to create highcharts series in a easy and effortless way.

Features:

Easy way to create any xAxis, yAxis or Highchart series
Adds basic default options if none of them are being passed on
Easily to add Highchart additional options as a parameter

createSerie Parameters:

type : ‘string’: String that defines the series type like ‘line’ or ‘column’
data : []: Array with the corresponding data for the serie
options : {}: Object with additional options to be passed on the series like {color: “#0044d6″}
yAxisIndex : Integer: In case we are using multiple yAxis this number defines the corresponding yAxis
name : ‘string’: String that defines the series name

createyAxis Parameters:

name : ‘string’: String that defines the yseries name
maxvalue : Number: Defines the max value on the axis, null if we don’t want to have any axis limit
axisColor : ‘string’: Defines axis color
options : {}: Object with additional options to be passed on the axis like {formatter: function(){return “$” + this.value}}

createxAxis Parameters:

categories : []: Array that defines the corresponding values on the x axis
axisWidth : Number: Defines the value for the axis line width
axisColor : ‘string’: Defines axis color
options : {}: Object with additional options to be passed on the axis like {formatter: function(){return “$” + this.value}}

    
          //yAxis creation
options.yAxis = $.createyAxis('xMen Born', null, "#0044d6");
 
//Series creation
var series = [];
series.push($.createSerie('line', [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], {color: "#0044d6", borderColor: "#fe541f", borderWidth: 0.8, name: 'Tokyo'}));
series.push($.createSerie('line', [10.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], {color: "#00d656", borderColor: "#a63af8", borderWidth: 0.8, name: 'New York'}));    
series.push($.createSerie('line', [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0], {color: "#d600bd", lineWidth: 0.8, name: 'Berlin!'}));
series.push($.createSerie('line', [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8], null, null, 'London'));
 
options.series = series;
 
chart = new Highcharts.Chart(options);
 
// jsfiddle: http://jsfiddle.net/ozipi/AnLbW/2/

          view raw
          gistfile1.js
          This Gist brought to you by GitHub.