Previous Examples Next
0
1
2
3
4
5
6
7
8
9
10
0
2
4
6
8
10

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]]);
});
Plot With Options
1
2
3
4
5
6
7
8
9
0
2
4
6
8
10

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]]
  
One Selector, Multiple Plots
-1
0
1
2
3
4
5
6
7
-3
-2
-1
0
1
2
3

One Selector, Multiple Plots
-1
0
1
2
3
4
5
6
7
-6
-4
-2
0
2
4
6

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" />