HTML5 Canvas Charts with jqPlot

 

As web frameworks progress for broader future appeal and use, jQuery has been expanding with various plug-ins from notifications to exporting and even to include the flexibility of charting static data as well as dynamic JSON-formatted objects. jqPlot is a jQuery plug-in that allows for data to be represented in various charts and graphs such as line graphs, bar charts, pie charts as well as scattered points on several axes if desired. Tooltips, trend line computation, data point highlighting, text, along with animation customization and styling is available for implementing and developing a vibrant graphical presentation. Within the body of the HTML DOM, a div tag is required as a container for positioning the plot. The function used to create a plot is

$.jqPlot(target, data, options);

The parameters for this function is as follows:

  • target - id of the div tag where the plot will be rendered
  • data - array(s) of values for a series
  • options - (optional) object with user defined attributes for the plot

For customizing the plot’s real estate, a number of jqPlot plug-ins maybe included in your html after the jqPlot js plug-in to add rendering and non-rendering properties like bar renderer, highlighter, cursor, and point labels.

<script language="javascript" type="text/javascript" src="dist/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/jquery.jqplot.css" />
<!--For the bar graph, highlighter, cursor, and point labels-->
<script type="text/javascript" src="dist/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.pointLabels.min.js"></script>

The options parameter provides all of the descriptors to customize the output of the data and plot properties.

var options = {
        animate: true, // Turns on animation for all series in this plot.
        // Will animate plot on calls to plot1.replot({resetAxes:true})
        animateReplot: true,
        cursor: { //Cursor attributes
            show: true,
            zoom: false,
            looseZoom: true,
            showHorizontalLine:false,
            showTooltip: false
        },
        series:[ 
            {  //array1 : bar chart
                label:'user',
                color:'#96EDFA',
                renderer: $.jqplot.BarRenderer,
                xaxis: 'xaxis',
                rendererOptions: {
                // Speed up the animation a little bit.
                // This is a number of milliseconds.  
                // Default for bar series is 3000.  
                animation: {
                    speed: 2500
                 },
                    barWidth: 40, //Create the bar
                    barPadding: -15,
                    barMargin: 0,
                    highlightMouseOver: false
                }
            },
            {  //array2 : point
                label:'team',
                color:'green',
                showLine: false, // Remove the line from the 
                xaxis: 'xaxis',
                rendererOptions: {
                    ………….
                }
            },
            {   //array3 : point
                label:'division',
                color:'blue',
                showLine: false, // Remove the line from the
                xaxis: 'x2axis',
                rendererOptions: {
                    ………….
                }
            },
            {   //array4 : point
                label:'business group',
                ………….
            }
        ],
        legend: {   // Show the legend and puts it outside the grid
            show: true,
            placement: 'outsideGrid'
        },
        axesDefaults: {
            pad: 0
        },
        axes: {
            xaxis: {  // These options will set up the x axis like a category axis.
                tickInterval: 1,
                drawMajorGridlines: false,
                drawMinorGridlines: false,
                drawMajorTickMarks: false,
                rendererOptions: {
                    tickInset: 0.5,
                    minorTicks: 1
                }
            },
            x2axis: {
                showTicks: false,
                ………….
            },
            yaxis: {
                rendererOptions: {
                    forceTickAt0: true
                }
            }
        },
        highlighter: {//On mouseover highlighter attributes
            show: true, 
            showLabel: true, 
            tooltipAxes: 'x',
            tooltipLocation : 'ne'
        }
};
$.jqplot("target div", [array1, array2, array3, array4], options);

The jqPlot plug-in is implemented through the use of the HTML5 Canvas element which allows for dynamic, scriptable rendering of 2D shapes and bitmaps. Canvas is supported in the latest version of modern browsers such as Chrome, Safari, FireFox, Opera and various mobile browsers except for versions below Internet Explorer (IE) 9.0. A script called excanvas.js is needed to provide support to these versions of IE that doesn’t support Canvas.

jqPlot is a free open source project that provides various hooks to creating an interactive range of plots with numerous plug-ins at your disposal. For more information on jqPlot navigate to http://www.jqplot.com/index.php .

 
Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.