| (function () { | |
| var ExampleList = function () { | |
| // Map of examples. | |
| this.examples = {}; | |
| }; | |
| ExampleList.prototype = { | |
| add : function (example) { | |
| this.examples[example.key] = example; | |
| }, | |
| get : function (key) { | |
| return key ? (this.examples[key] || null) : this.examples; | |
| }, | |
| getType : function (type) { | |
| return Flotr._.select(this.examples, function (example) { | |
| return (example.type === type); | |
| }); | |
| } | |
| } | |
| Flotr.ExampleList = new ExampleList(); | |
| })(); | |
| (function () { | |
| Flotr.ExampleList.add({ | |
| key : 'basic', | |
| name : 'Basic', | |
| callback : basic | |
| }); | |
| function basic (container) { | |
| var | |
| d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series | |
| d2 = [], // Second data series | |
| i, graph; | |
| // Generate first data set | |
| for (i = 0; i < 14; i += 0.5) { | |
| d2.push([i, Math.sin(i)]); | |
| } | |
| // Draw Graph | |
| graph = Flotr.draw(container, [ d1, d2 ], { | |
| xaxis: { | |
| minorTickFreq: 4 | |
| }, | |
| grid: { | |
| minorVerticalLines: true | |
| } | |
| }); | |
| } | |
| })(); | |
| (function () { | |
| Flotr.ExampleList.add({ | |
| key : 'basic-stacked', | |
| name : 'Basic Stacked', | |
| callback : basic_stacked, | |
| type : 'test' | |
| }); | |
| function basic_stacked (container) { | |
| var | |
| d1 = [[0, 3], [4, 8], [8, 2], [9, 3]], // First data series | |
| d2 = [[0, 2], [4, 3], [8, 8], [9, 4]], // Second data series | |
| i, graph; | |
| // Draw Graph | |
| graph = Flotr.draw(container, [ d1, d2 ], { | |
| lines: { | |
| show : true, | |
| stacked: true | |
| }, | |
| xaxis: { | |
| minorTickFreq: 4 | |
| }, | |
| grid: { | |
| minorVerticalLines: true | |
| } | |
| }); | |
| } | |
| })(); | |
| (function () { | |
| Flotr.ExampleList.add({ | |
| key : 'basic-stepped', | |
| name : 'Basic Stepped', | |
| callback : basic_stepped, | |
| type : 'test' | |
| }); | |
| function basic_stepped (container) { | |
| var | |
| d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series | |
| d2 = [], // Second data series | |
| i, graph; | |
| // Generate first data set | |
| for (i = 0; i < 14; i += 0.5) { | |
| d2.push([i, Math.sin(i)]); | |
| } | |
| // Draw Graph | |
| graph = Flotr.draw(container, [ d1, d2 ], { | |
| lines: { | |
| steps : true, | |
| show : true | |
| }, | |
| xaxis: { | |
| minorTickFreq: 4 | |
| }, | |
| yaxis: { | |
| autoscale: true | |
| }, | |
| grid: { | |
| minorVerticalLines: true | |
| }, | |
| mouse : { | |
| track : true, | |
| relative : true | |
| } | |
| }); | |
| } | |
| })(); | |
| (function () { | |
| Flotr.ExampleList.add({ | |
| key : 'basic-axis', | |
| name : 'Basic Axis', | |
| callback : basic_axis | |
| }); | |
| function basic_axis (container) { | |
| var | |
| d1 = [], | |
| d2 = [], | |
| d3 = [], | |
| d4 = [], | |
| d5 = [], // Data | |
| ticks = [[ 0, "Lower"], 10, 20, 30, [40, "Upper"]], // Ticks for the Y-Axis | |
| graph; | |
| for(var i = 0; i <= 10; i += 0.1){ | |
| d1.push([i, 4 + Math.pow(i,1.5)]); | |
| d2.push([i, Math.pow(i,3)]); | |
| d3.push([i, i*5+3*Math.sin(i*4)]); | |
| d4.push([i, i]); | |
| if( i.toFixed(1)%1 == 0 ){ | |
| d5.push([i, 2*i]); | |
| } | |
| } | |
| d3[30][1] = null; | |
| d3[31][1] = null; | |
| function ticksFn (n) { return '('+n+')'; } | |
| graph = Flotr.draw(container, [ | |
| { data : d1, label : 'y = 4 + x^(1.5)', lines : { fill : true } }, | |
| { data : d2, label : 'y = x^3'}, | |
| { data : d3, label : 'y = 5x + 3sin(4x)'}, | |
| { data : d4, label : 'y = x'}, | |
| { data : d5, label : 'y = 2x', lines : { show : true }, points : { show : true } } | |
| ], { | |
| xaxis : { | |
| noTicks : 7, // Display 7 ticks. | |
| tickFormatter : ticksFn, // Displays tick values between brackets. | |
| min : 1, // Part of the series is not displayed. | |
| max : 7.5 // Part of the series is not displayed. | |
| }, | |
| yaxis : { | |
| ticks : ticks, // Set Y-Axis ticks | |
| max : 40 // Maximum value along Y-Axis | |
| }, | |
| grid : { | |
| verticalLines : false, | |
| backgroundColor : { | |
| colors : [[0,'#fff'], [1,'#ccc']], | |
| start : 'top', | |
| end : 'bottom' | |
| } | |
| }, | |
| legend : { | |
| position : 'nw' | |
| }, | |
| title : 'Basic Axis example', | |
| subtitle : 'This is a subtitle' | |
| }); | |
| } | |
| })(); | |
| (function () { | |
| Flotr.ExampleList.add({ | |
| key : 'basic-bars', | |
| name : 'Basic Bars', | |
| callback : basic_bars | |
| }); | |
| Flotr.ExampleList.add({ | |
| key : 'basic-bars-horizontal', | |
| name : 'Horizontal Bars', | |
| args : [true], | |
| callback : basic_bars, | |
| tolerance : 5 | |
| }); | |
| function basic_bars (container, horizontal) { | |
| var | |
| horizontal = (horizontal ? true : false), // Show horizontal bars | |
| d1 = [], // First data series | |
| d2 = [], // Second data series | |
| point, // Data point variable declaration | |
| i; | |
| for (i = 0; i < 4; i++) { | |
| if (horizontal) { | |
| point = [Math.ceil(Math.random()*10), i]; | |
| } else { | |
| point = [i, Math.ceil(Math.random()*10)]; | |
| } | |
| d1.push(point); | |
| if (horizontal) { | |
| point = [Math.ceil(Math.random()*10), i+0.5]; | |
| } else { | |
| point = [i+0.5, Math.ceil(Math.random()*10)]; | |
| } | |
| d2.push(point); | |
| }; | |
| // Draw the graph | |
| Flotr.draw( | |
| container, | |
| [d1, d2], | |
| { | |
| bars : { | |
| show : true, | |
| horizontal : horizontal, | |
| shadowSize : 0, | |
| barWidth : 0.5 | |
| }, | |
| mouse : { | |
| track : true, | |
| relative : true | |
| }, | |
| yaxis : { | |
| min : 0, | |
| autoscaleMargin : 1 | |
| } | |
| } | |
| ); | |
| } | |
| })(); | |
| (function () { | |
| Flotr.ExampleList.add({ | |
| key : 'basic-bar-stacked', | |
| name : 'Stacked Bars', | |
| callback : bars_stacked | |
| }); | |
| Flotr.ExampleList.add({ | |
| key : 'basic-stacked-horizontal', | |
| name : 'Stacked Horizontal Bars', | |
| args : [true], | |
| callback : bars_stacked, | |
| tolerance : 5 | |
| }); | |
| function bars_stacked (container, horizontal) { | |
| var | |
| d1 = [], | |
| d2 = [], | |
| d3 = [], | |
| graph, i; | |
| for (i = -10; i < 10; i++) { | |
| if (horizontal) { | |
| d1.push([Math.random(), i]); | |
| d2.push([Math.random(), i]); | |
| d3.push([Math.random(), i]); | |
| } else { | |
| d1.push([i, Math.random()]); | |
| d2.push([i, Math.random()]); | |
| d3.push([i, Math.random()]); | |
| } | |
| } | |
| graph = Flotr.draw(container,[ | |
| { data : d1, label : 'Serie 1' }, | |
| { data : d2, label : 'Serie 2' }, | |
| { data : d3, label : 'Serie 3' } | |
| ], { | |
| legend : { | |
| backgroundColor : '#D2E8FF' // Light blue | |
| }, | |
| bars : { | |
| show : true, | |
| stacked : true, | |
| horizontal : horizontal, | |
| barWidth : 0.6, | |
| lineWidth : 1, | |
| shadowSize : 0 | |
| }, | |
| grid : { | |
| verticalLines : horizontal, | |
| horizontalLines : !horizontal | |
| } | |
| }); | |
| } | |
| })(); | |
| (function () { | |
| Flotr.ExampleList.add({ | |
| key : 'basic-pie', | |
| name : 'Basic Pie', | |
| callback : basic_pie | |
| }); | |
| function basic_pie (container) { | |
| var | |
| d1 = [[0, 4]], | |
| d2 = [[0, 3]], | |
| d3 = [[0, 1.03]], | |
| d4 = [[0, 3.5]], | |
| graph; | |
| graph = Flotr.draw(container, [ | |
| { data : d1, label : 'Comedy' }, | |
| { data : d2, label : 'Action' }, | |
| { data : d3, label : 'Romance', | |
| pie : { | |
| explode : 50 | |
| } | |
| }, | |
| { data : d4, label : 'Drama' } | |
| ], { | |
| HtmlText : false, | |
| grid : { | |
| verticalLines : false, | |
| horizontalLines : false | |
| }, | |
| xaxis : { showLabels : false }, | |
| yaxis : { showLabels : false }, | |
| pie : { | |
| show : true, | |
| explode : 6 | |
| }, | |
| mouse : { track : true }, | |
| legend : { | |
| position : 'se', | |
| backgroundColor : '#D2E8FF' | |
| } | |
| }); | |
| } | |
| })(); | |
| (function () { | |
| Flotr.ExampleList.add({ | |
| key : 'basic-radar', | |
| name : 'Basic Radar', | |
| callback : basic_radar | |
| }); | |
| function basic_radar (container) { | |
| // Fill series s1 and s2. | |
| var | |
| s1 = { label : 'Actual', data : [[0, 3], [1, 8], [2, 5], [3, 5], [4, 3], [5, 9]] }, | |
| s2 = { label : 'Target', data : [[0, 8], [1, 7], [2, 8], [3, 2], [4, 4], [5, 7]] }, | |
| graph, ticks; | |
| // Radar Labels | |
| ticks = [ | |
| [0, "Statutory"], | |
| [1, "External"], | |
| [2, "Videos"], | |
| [3, "Yippy"], | |
| [4, "Management"], | |
| [5, "oops"] | |
| ]; | |
| &n |