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 | $(document).ready( function (){ var line1 = [6.5, 9.2, 14, 19.65, 26.4, 35, 51]; var plot1 = $.jqplot( 'chart1' , [line1], { legend: {show: false }, axes:{ xaxis:{ tickOptions:{ angle: -30 }, tickRenderer:$.jqplot.CanvasAxisTickRenderer, label: 'Core Motor Amperage' , labelOptions:{ fontFamily: 'Helvetica' , fontSize: '14pt' }, labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, yaxis:{ renderer:$.jqplot.LogAxisRenderer, tickOptions:{ labelPosition: 'middle' , angle:-30 }, tickRenderer:$.jqplot.CanvasAxisTickRenderer, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, labelOptions:{ fontFamily: 'Helvetica' , fontSize: '14pt' }, label: 'Core Motor Voltage' } } }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(document).ready( function (){ var line2 = [[ '1/1/2008' , 42], [ '2/14/2008' , 56], [ '3/7/2008' , 39], [ '4/22/2008' , 81]]; var plot2 = $.jqplot( 'chart2' , [line2], { axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer, label: 'Incliment Occurrance' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { // labelPosition: 'middle', angle: 15 } }, yaxis: { label: 'Incliment Factor' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer } } }); }); |
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 | $(document).ready( function (){ var line3 = [[ 'Cup Holder Pinion Bob' , 7], [ 'Generic Fog Lamp Marketing Gimmick' , 9], [ 'HDTV Receiver' , 15], [ '8 Track Control Module' , 12], [ 'SSPFM (Sealed Sludge Pump Fourier Modulator)' , 3], [ 'Transcender/Spice Rack' , 6], [ 'Hair Spray Rear View Mirror Danger Indicator' , 18]]; var plot3 = $.jqplot( 'chart3' , [line3], { series:[{renderer:$.jqplot.BarRenderer}], axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, label: 'Warranty Concern' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: -30, fontFamily: 'Courier New' , fontSize: '9pt' } }, yaxis: { label: 'Occurance' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer } } }); }); |
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | $(document).ready( function (){ var line = [[ 'Cup Holder Pinion Bob' , 7], [ 'Generic Fog Lamp' , 9], [ 'HDTV Receiver' , 15], [ '8 Track Control Module' , 12], [ ' Sludge Pump Fourier Modulator' , 3], [ 'Transcender/Spice Rack' , 6], [ 'Hair Spray Danger Indicator' , 18]]; var line2 = [[ 'Nickle' , 28], [ 'Aluminum' , 13], [ 'Xenon' , 54], [ 'Silver' , 47], [ 'Sulfer' , 16], [ 'Silicon' , 14], [ 'Vanadium' , 23]]; var plot4 = $.jqplot( 'chart4' , [line, line2], { title: 'Concern vs. Occurrance' , series:[{renderer:$.jqplot.BarRenderer}, {xaxis: 'x2axis' , yaxis: 'y2axis' }], axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, label: 'Warranty Concern' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: 30 } }, x2axis: { renderer: $.jqplot.CategoryAxisRenderer, label: 'Metal' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: 30 } }, yaxis: { autoscale: true , label: 'Occurance' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: 30 } }, y2axis: { autoscale: true , label: 'Number' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: 30 } } } }); }); |
The charts on this page depend on the following files:
< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></ script > < script type = "text/javascript" src = "../jquery.jqplot.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.logAxisRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasTextRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasAxisLabelRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasAxisTickRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.dateAxisRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.categoryAxisRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.barRenderer.min.js" ></ script > < link rel = "stylesheet" type = "text/css" hrf = "../jquery.jqplot.min.css" /> |