The following are examples of the jqPlot charting plugin for jQuery. There is a brief description of what is shown followed by the actual plot and the javascript commands to create the plot. Changes to the javascript from the previous plot are highlighted.

Table Of Contents

  1. Basic Line.
  2. Title, legend and tick label customizations.
  3. Series color and marker style.
  4. Logarithmic axis.
  5. Multiple lines with daul axes and mixed axis styles.
  6. Turning off shadows..
  7. Changing shadow options..
  8. Changing series options..

The basic syntax of the jqPlot command is: 

 
	$.jqplot('plotContainerId', [dataSeries], {options});
Where the plot is rendered into a container div somewhere on your page such as (note, height and width must be specified): 
 
	<div id="plotContainerId" style="width:400px; height:300px"></div>
If no options are specified, sensible defaults are used. There are Many options. The most complete list of options as well as more basic usage information is found in the API documentation.

First, a basic line plot without any customizations. All default options are used. Note that data can be specified as a simple series or y values (as here), or as a series of [x,y] points.

	
    var yValues = [372.50, 337.99, 307.65, 359.36, 463.29, 526.42, 574.29, 471.18, 
    691.48, 707.00, 515.25, 522.70, 471.38, 449.45, 460.48, 476.39, 378.53, 419.33, 
    417.94, 362.62, 414.86, 372.14, 286.00, 294.15, 220.00, 187.99, 192.79, 190.64, 102.37];
    
    var plot1 = $.jqplot('chart1', [yValues]);
Table Of Contents

You can customize the axes labels with a sprintf format string. Also, a plot title and legend text have been specified. Note that options pertaining to a specific series (here the line), are specified in the series array:

	
    plot2 = $.jqplot('chart2', [yValues], {
        axes:{
            xaxis:{tickOptions:{formatString:'%d'}, min:-2, max:32}
        }, 
        title:'Confidence Variance', 
        series:[
            {label:'Confidence'}
        ]
    });
Table Of Contents

Now changing the line color and marker symbol:

    
    plot3 = $.jqplot('chart3', [yValues], {
        axes:{
            xaxis:{tickOptions:{formatString:'%d'}, min:-2, max:32}
        }, 
        title:'Confidence Variance', 
        series:[
            {label:'Confidence', color:'#5BB77D', markerOptions:{style:'square', size:7}}
        ]
    });
Table Of Contents

The y axis can be changed to logarithmic style. A default base 10 log is used. The method of spacing the ticks on a log axes can be specified. Here they have a "tradtional" distribution, where ticks are displayed at equal powers of 10 with minor ticks added between as needed:

     
    plot4 = $.jqplot('chart4', [yValues], {
        axes:{
            xaxis:{tickOptions:{formatString:'%d'}, min:-2, max:32},
            yaxis:{renderer:$.jqplot.LogAxisRenderer, tickDistribution:'power'}
        }, 
        title:'Confidence Variance', 
        series:[
            {label:'Confidence', color:'#5BB77D', markerOptions:{style:'square', size:7}}
        ]
    });
Table Of Contents

Now add another line on a secondary xaxis and secondary (non log) y axis. Use an equal pixel spacing for tick distribution of the primary logarithmic y axis, so ticks are visually spaced at equal intervals. This allows ticks to line up nicely from the primary to secondary y axes.

     
    var sinPoints = [];
    for (var i=0; i<2*Math.PI; i+=0.2){
       sinPoints.push([i, Math.sin(i)]);
    }
    
    plot5 = $.jqplot('chart5', [yValues, sinPoints], {
        axes:{
            xaxis:{tickOptions:{formatString:'%d'}, min:-2, max:32},
            yaxis:{renderer:$.jqplot.LogAxisRenderer, tickDistribution:'even'}
        }, 
        title:'Confidence Variance',
        series:[
            {label:'Confidence', color:'#5BB77D', markerOptions:{style:'square', size:7}},
            {label:'Preference', xaxis:'x2axis', yaxis:'y2axis'}
        ]
    });
Table Of Contents

Shadow on series, markers and the grid area are on by default. Shadows can be turned off with the appropriate options on the series and grid. Here is a simple cosine wave plot with and without shadows. Note that the legend location has also been changed from it's default to not overlap the line. Legend locations correspond to compass directions (ne, e, se, s, sw, w, nw, n):

    
    var cosPoints = [];
    for (var i=0; i<2*Math.PI; i+=0.2){
       cosPoints.push([i, Math.cos(i)]);
    }

    plot6 = $.jqplot('chart6', [cosPoints], {
        legend:{location:'se'}
    });
    
    plot7 = $.jqplot('chart7', [cosPoints], {
        legend:{location:'se'}, 
        series[
            {shadow:false, markerOptions:{shadow:false}}
        ]
        grid:{shadow:false}
    });
Table Of Contents

Additionally, shadow angle, alpha, depth and offset can be changed to suit particular types of plots.

  
    var cosPoints = [];
    for (var i=0; i<2*Math.PI; i+=0.2){
       cosPoints.push([i, Math.cos(i)]);
    }
    
    plot8 = $.jqplot('chart8', [cosPoints], {
        legend:{location:'se'}, 
        series:[
            {showMarker:false, lineWidth:5, shadowAngle:0, shadowOffset:2, shadowAlpha:.06, shadowDepth:5}
        ]
    });
Table Of Contents

Series have several options that can be changed. Options will vary depending on the series renderer that is used. That is, bar charts rendered with a bar chart plugin (in develoment) will have options that line charts do not have. For the default line/scatter plot, options such as line width, type of marker, and line display can be changed. The default markers are open and filled squares, circles, and diamonds.


    plot9 = $.jqplot('chart9', [cosPoints, sinPoints, powPoints1, powPoints2], {
        legend:{show:false},
        series:[
            {lineWidth:2, markerOptions:{style:'square'}},
            {showLine:false, markerOptions:{style:'diamond'}},
            {markerOptions:{style:'circle'}},
            {lineWidth:5, markerOptions:{style:'filledSquare', size:11}}
        ]
    });
Table Of Contents