Waterfall chart using default bar colors.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | $(document).ready( function (){ var line1 = [14, 3, 4, -3, 5, 2, -3, -7]; var ticks = [ '2008' , 'Apricots' , 'Tomatoes' , 'Potatoes' , 'Rhubarb' , 'Squash' , 'Grapes' , 'Peanuts' , '2009' ]; var plot1 = $.jqplot( 'chart1' , [line1], { title: 'Crop Yield Charnge, 2008 to 2009' , seriesDefaults:{ renderer:$.jqplot.BarRenderer, rendererOptions:{ waterfall: true , varyBarColor: true }, pointLabels: { hideZeros: true }, yaxis: 'y2axis' }, axes:{ xaxis:{ renderer:$.jqplot.CategoryAxisRenderer, ticks:ticks, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: -90, fontSize: '10pt' , showMark: false , showGridline: false } }, y2axis: { min: 0, tickInterval: 5 } } }); }); |
Waterfall chart using custom colors and "useNegativeColors" set to "false".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | $(document).ready( function (){ var line1 = [14, 3, 4, -3, 5, 2, -3, -7]; var ticks = [ '2008' , 'Apricots' , 'Tomatoes' , 'Potatoes' , 'Rhubarb' , 'Squash' , 'Grapes' , 'Peanuts' , '2009' ]; var plot2 = $.jqplot( 'chart2' , [line1], { title: 'Crop Yield Charnge, 2008 to 2009' , seriesColors:[ '#333333' , '#999999' , '#3EA140' , '#3EA140' , '#3EA140' , '#783F16' , '#783F16' , '#783F16' , '#333333' ], seriesDefaults:{ renderer:$.jqplot.BarRenderer, rendererOptions:{ waterfall: true , varyBarColor: true , useNegativeColors: false }, pointLabels: { hideZeros: true }, yaxis: 'y2axis' }, axes:{ xaxis:{ renderer:$.jqplot.CategoryAxisRenderer, ticks:ticks, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: -90, fontSize: '10pt' , showMark: false , showGridline: false } }, y2axis: { min: 0, tickInterval: 5 } } }); }); |
The charts on this page depend on the following files:
< script type = "text/javascript" src = "../jquery.min.js" ></ script > < script type = "text/javascript" src = "../jquery.jqplot.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.barRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.categoryAxisRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasAxisTickRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasTextRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.pointLabels.min.js" ></ script > < link rel = "stylesheet" type = "text/css" hrf = "../jquery.jqplot.min.css" /> |