Blog

  • Introduction : 

    CategoryAxisRenderer  for jqPlot to render a category style axis, with equal pixel spacing between y data values of a series.

    The CategoryAxisRenderer is a lot better at displaying discreet groupings of data as opposed to a true time series.

    Sample Here :

    
     
     
    var supplier1 =[10,20,30,40]; var supplier2 =[11,8,40,60]; var xaxisDates = ["Jan 11", "Feb 20", "Mar 21" , "Apr 23"] plot2 = $JQ.jqplot('chart2', [ supplier1, supplier2 ], { // chart2 is container where ghaph will be draw title : title2, // Series options are specified as an array of objects, one object // for each series. series : [ { // Change our line width and use a diamond shaped marker. lineWidth : 2, color : '#4472C4', label : ' ' }, { // Don't show a line, just show markers. // Make the markers 7 pixels with an 'x' style lineWidth : 2, color : '#70ad47', label : '' }, ], highlighter : { show : true, showMarker : false, fontSize : '16px', tooltipContentEditor : function(str, seriesIndex, pointIndex, plot) { var seriesValue; if (seriesIndex == 1) seriesValue = supplier1[pointIndex]; else seriesValue = supplier2[pointIndex]; return xaxisDates[pointIndex] + ': ' + seriesValue; }, }, seriesDefaults:{ pointLabels: { show: false }, rendererOptions: { fillToZero: true, shadow: false, } }, grid : { background : 'white', drawBorder : true, borderColor : 'white', shadow : false, gridLineColor : '#dddddd', gridLineWidth : 1 }, axes : { yaxis : { min : 0, }, xaxis : { borderColor : '#ccc', borderWidth : 0, renderer : $JQ.jqplot.CategoryAxisRenderer, ticks :xaxisDates, tickOptions : { showGridline : false } } }, });

     

Tags: jqPlotCategoryAxisRenderer

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com