1 2 3 4 | $(document).ready( function (){ // Use jQuery selector for a specific element ID. $( '#chart1' ).jqplot([[3,7,9,1,5,3,8,2,5]]); }); |
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 (){ // jQuery selector for elements with a specific class attribute. // Here, there is one div with the class "chart2" $( ".chart2" ).jqplot ([[3,7,9,1,5,3,8,2,5]], { title: "Plot With Options" , axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, seriesDefaults: { rendererOptions: { smooth: true } }, axes: { xaxis: { label: "X Axis" , pad: 0 }, yaxis: { label: "Y Axis" } } }); }); // the jqPlot plot object can be accessed through the jQuery "data" method: // // >>> $('.chart2').data('jqplot').series[0].data // [[1, 3], [2, 7], [3, 9], [4, 1], [5, 5], [6, 3], [7, 8], [8, 2], [9, 5]] |
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 (){ // Some simple loops to build up data arrays. var cosPoints = []; for ( var i=0; i<2*Math.PI; i+=1){ cosPoints.push([i, Math.cos(i)]); } var sinPoints = []; for ( var i=0; i<2*Math.PI; i+=0.4){ sinPoints.push([i, 2*Math.sin(i-.8)]); } var powPoints1 = []; for ( var i=0; i<2*Math.PI; i+=1) { powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]); } var powPoints2 = []; for ( var i=0; i<2*Math.PI; i+=1) { powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]); } // jQuery selector for all divs with a class of "jqplot". // Here, there are two divs that match. By supplying 2 seperate // arrays of data, each plot will have it's own independent series. // Only one options array is supplied, so it will be used for both // plots. $( "div.jqplot" ).jqplot([cosPoints, sinPoints], [powPoints1, powPoints2], { title: "One Selector, Multiple Plots" , seriesDefaults: { rendererOptions: { smooth: true } } }); }); |
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.canvasTextRenderer.min.js" ></ script > < script type = "text/javascript" src = "../plugins/jqplot.canvasAxisLabelRenderer.min.js" ></ script > < link rel = "stylesheet" type = "text/css" hrf = "../jquery.jqplot.min.css" /> |