Accordion Data Tables

Charts

Charts from this template use Flotr2 library. Flotr2 is a library for drawing HTML5 charts and graphs. It is a branch of flotr which removesthe Prototype dependency and includes many improvements.

To use Flotr2, include the flotr2.min.js script in your page and create a visible <div> with positive width and height.
A graph is drawn with the Flotr.draw(container, data, options) method.

Features

How to create a Chart?

1. Create a new function, in this mode:

(function () {

  // Some code to be here...
  
})();

2. Define some variables.

var
	container = document.getElementById('my_graph_example_doc'), //Container ID
	d1 = [[0, 2], [1, 0],[2, 12], [3, 10], [4, 9],[4.5, 11], [5, 9],[7, 12],[8, 8], [9, 16]], // First data series
	d2 = [[0, 0],[1, 5], [2, 3], [3, 6], [4, 3.5],[5, 8], [6, 3.9], [7, 9], [8, 6], [9, 10]],  // Second data series
	graph; //This variable allow us to draw the chart. Add also other variables here, separated by comma(,)

Data series work in this mode:

newVariable = [[X1, Y1], [X2, Y2],[X3, Y3], ..., [Xn, Yn]]

3. Create the graph:

graph = Flotr.draw(container, [ d1, d2], {

	//Options here
	
  });

3. Add some options:

graph = Flotr.draw(container, [ d1, d2], {

	xaxis: {
	  minorTickFreq: 4 	// number of minor ticks between major ticks for autogenerated ticks
	}, //end of xaxis
	
	grid: {
	  minorVerticalLines	: true 	// whether to show gridlines in vertical direction. true or false
	}, //end of grid
	
	mouse: {
	  track: true,  // true to track the mouse, no tracking otherwise
	  radius: 13,  // radius of the track point
	}, //end of mouse
	
	colors: ['#CE4D60', '#9851CE'],  // Some custom colors(optional). // end of colors
	shadowSize: 0, //My preference, to set graph shadow to 0.  // end of shadowSize
	
  });

4. Final code:

(function () {

var
	container = document.getElementById('my_graph_example_doc'), //Container ID
	d1 = [[0, 2], [1, 0],[2, 12], [3, 10], [4, 9],[4.5, 11], [5, 9],[7, 12],[8, 8], [9, 16]], // First data series
	d2 = [[0, 0],[1, 5], [2, 3], [3, 6], [4, 3.5],[5, 8], [6, 3.9], [7, 9], [8, 6], [9, 10]],  // Second data series
	graph; //This variable allow us to draw the chart. Add also other variables here, separated by comma(,)
	
graph = Flotr.draw(container, [ d1, d2], {

	xaxis: {
	  minorTickFreq: 4 	// number of minor ticks between major ticks for autogenerated ticks
	}, //end of xaxis
	
	grid: {
	  minorVerticalLines	: true 	// whether to show gridlines in vertical direction. true or false
	}, //end of grid
	
	mouse: {
	  track: true,  // true to track the mouse, no tracking otherwise
	  radius: 13,  // radius of the track point
	}, //end of mouse
	
	colors: ['#CE4D60', '#9851CE'],  // Some custom colors(optional). // end of colors
	shadowSize: 0, //My preference, to set graph shadow to 0.  // end of shadowSize
	
  });
  
})();

5. Create the graph in a DIV with the ID from initialization script "my_graph_example_doc" and a valid width and height :

 <div id="my_graph_example_doc" style="width: 100%; height: 200px"></div>

It's good to know!

Basically you can create a chart with zero options. Pretty cool :) Bellow is an example of the same graph but without any options.

(function () {

var
	container = document.getElementById('my_graph_example_doc2'), //Container ID
	d1 = [[0, 2], [1, 0],[2, 12], [3, 10], [4, 9],[4.5, 11], [5, 9],[7, 12],[8, 8], [9, 16]], // First data series
	d2 = [[0, 0],[1, 5], [2, 3], [3, 6], [4, 3.5],[5, 8], [6, 3.9], [7, 9], [8, 6], [9, 10]],  // Second data series
	graph; //This variable allow us to draw the chart. Add also other variables here, separated by comma(,)
	
graph = Flotr.draw(container, [ d1, d2]);
  
})();

Options

(/**
 * Flotr Defaults
 */
Flotr.defaultOptions = {
  colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
  ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
  title: null,             // => The graph's title
  subtitle: null,          // => The graph's subtitle
  shadowSize: 4,           // => size of the 'fake' shadow
  defaultType: null,       // => default series type
  HtmlText: true,          // => wether to draw the text using HTML or on the canvas
  fontColor: '#545454',    // => default font color
  fontSize: 7.5,           // => canvas' text font size
  resolution: 1,           // => resolution of the graph, to have printer-friendly graphs !
  parseFloat: true,        // => whether to preprocess data for floats (ie. if input is string)
  xaxis: {
    ticks: null,           // => format: either [1, 3] or [[1, 'a'], 3]
    minorTicks: null,      // => format: either [1, 3] or [[1, 'a'], 3]
    showLabels: true,      // => setting to true will show the axis ticks labels, hide otherwise
    showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
    labelsAngle: 0,        // => labels' angle, in degrees
    title: null,           // => axis title
    titleAngle: 0,         // => axis title's angle, in degrees
    noTicks: 5,            // => number of ticks for automagically generated ticks
    minorTickFreq: null,   // => number of minor ticks between major ticks for autogenerated ticks
    tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
    tickDecimals: null,    // => no. of decimals, null means auto
    min: null,             // => min. value to show, null means set automatically
    max: null,             // => max. value to show, null means set automatically
    autoscale: false,      // => Turns autoscaling on with true
    autoscaleMargin: 0,    // => margin in % to add if auto-setting min/max
    color: null,           // => color of the ticks
    mode: 'normal',        // => can be 'time' or 'normal'
    timeFormat: null,
    scaling: 'linear',     // => Scaling, can be 'linear' or 'logarithmic'
    base: Math.E,
    titleAlign: 'center',
    margin: true           // => Turn off margins with false
  },
  x2axis: {},
  yaxis: {
    ticks: null,           // => format: either [1, 3] or [[1, 'a'], 3]
    minorTicks: null,      // => format: either [1, 3] or [[1, 'a'], 3]
    showLabels: true,      // => setting to true will show the axis ticks labels, hide otherwise
    showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
    labelsAngle: 0,        // => labels' angle, in degrees
    title: null,           // => axis title
    titleAngle: 90,        // => axis title's angle, in degrees
    noTicks: 5,            // => number of ticks for automagically generated ticks
    minorTickFreq: null,   // => number of minor ticks between major ticks for autogenerated ticks
    tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
    tickDecimals: null,    // => no. of decimals, null means auto
    min: null,             // => min. value to show, null means set automatically
    max: null,             // => max. value to show, null means set automatically
    autoscale: false,      // => Turns autoscaling on with true
    autoscaleMargin: 0,    // => margin in % to add if auto-setting min/max
    color: null,           // => The color of the ticks
    scaling: 'linear',     // => Scaling, can be 'linear' or 'logarithmic'
    base: Math.E,
    titleAlign: 'center',
    margin: true           // => Turn off margins with false
  },
  y2axis: {
    titleAngle: 270
  },
  grid: {
    color: '#545454',      // => primary color used for outline and labels
    backgroundColor: null, // => null for transparent, else color
    backgroundImage: null, // => background image. String or object with src, left and top
    watermarkAlpha: 0.4,   // => 
    tickColor: '#DDDDDD',  // => color used for the ticks
    labelMargin: 3,        // => margin in pixels
    verticalLines: true,   // => whether to show gridlines in vertical direction
    minorVerticalLines: null, // => whether to show gridlines for minor ticks in vertical dir.
    horizontalLines: true, // => whether to show gridlines in horizontal direction
    minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
    outlineWidth: 1,       // => width of the grid outline/border in pixels
    outline : 'nsew',      // => walls of the outline to display
    circular: false        // => if set to true, the grid will be circular, must be used when radars are drawn
  },
  mouse: {
    track: false,          // => true to track the mouse, no tracking otherwise
    trackAll: false,
    position: 'se',        // => position of the value box (default south-east)
    relative: false,       // => next to the mouse cursor
    trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
    margin: 5,             // => margin in pixels of the valuebox
    lineColor: '#FF3F19',  // => line color of points that are drawn when mouse comes near a value of a series
    trackDecimals: 1,      // => decimals for the track values
    sensibility: 2,        // => the lower this number, the more precise you have to aim to show a value
    trackY: true,          // => whether or not to track the mouse in the y axis
    radius: 3,             // => radius of the track point
    fillColor: null,       // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
    fillOpacity: 0.4       // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill 
  }
};
)(document.getElementById("graphid_here"));

Accordion Data Tables