Friday, May 23, 2014

How to update dynamically jqplot

How to update a jqplot dynamically
Call js function redrawPlot with the new data as a parameter to update chart. Example
redrawPlot([13,17,19,11,14,16,18,12,15]);


<script  type="text/javascript">
var plot;

function createPlot(series){
        plot = $.jqplot('chartdiv', [series]);
}

 function redrawPlot(series){
        if(plot){
            createPlot(series);
            plot.replot();
        }

    }

Let's assume we have jqplot created like this
$(document).ready(function(){
  plot = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>


How to create horizontal bar jqplot with two stacked series

Create jqplot horizontal bar with 2 stacked series please use js snippet below:<br /> Point labels will be displayed only for the second series right most position.<br />










URL for jqplot  Download

You will need following libs

<script language="javascript" type="text/javascript" charset="utf8" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" charset="utf8" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" charset="utf8" src="jqplot.pointLabels.min.js"></script>

var series1 = [12,12,13];
var series2 = [23,24,25];
var series3 = ['title1', 'title2', 'title3'];
 plot = $.jqplot('chartdiv', [series1, series2], {title: 'Plot Title',
            // Tell the plot to stack the bars.
            animate: !$.jqplot.use_excanvas,
            stackSeries: true,
            series:[
                {label:'', pointLabels:{labels: ['','','']}},
                {label:'', pointLabels:{labels: series3}}
            ],
            grid:{borderColor:'transparent',shadow:false,drawBorder:false,shadowColor:'transparent'},
            seriesColors: ["#FF6600","#993300"],
            seriesDefaults:{
                pointLabels:{
                    stackedValue : true,
                    show: true
                },
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {
                    barMargin: 20,
                    barDirection: 'horizontal',
                    barPadding: 15,
                    barWidth: 20
                  }
            },
            axes: {
                xaxis: {
                    rendererOptions: {
                        drawBaseline: false
                    },
                    tickOptions: {
                        showGridline: false,
                        showMark: false,
                        showLabel: false,
                        shadow: false
                    }
                },
                yaxis: {
                    rendererOptions: {
                        drawBaseline: false
                    },
                    tickOptions: {
                        showGridline: false,
                        showMark: false,
                        showLabel: false,
                        shadow: false
                    }
                }
            }
        });

Thursday, May 22, 2014

How to highlight bar in jqplot

To highlight bar in jqplot use function below

    function barHighlight(plot, sidx, pidx, points)
    {
        var s = plot.series[sidx];
        var canvas = plot.plugins.barRenderer.highlightCanvas;
        canvas._ctx.clearRect(0,0,canvas._ctx.canvas.width, canvas._ctx.canvas.height);
        s._highlightedPoint = pidx;
        plot.plugins.barRenderer.highlightedSeriesIndex = sidx;
        var opts = {fillStyle: s.highlightColors[pidx]};
        s.renderer.shapeRenderer.draw(canvas._ctx, points, opts);
        canvas = null;
    }

    function barUnhighlight(plot)
    {
        var canvas = plot.plugins.barRenderer.highlightCanvas;
        canvas._ctx.clearRect(0,0, canvas._ctx.canvas.width, canvas._ctx.canvas.height);
        for (var i=0; i<plot.series.length; i++) {
            plot.series[i]._highlightedPoint = null;
        }
        plot.plugins.barRenderer.highlightedSeriesIndex = null;
        plot.target.trigger('jqplotDataUnhighlight');
        canvas =  null;
    }

How to update jqplot title dynamically

How to update jqplopt title using js
To update jqplot title use this:

plot.title['text'] = "Put any text here";
plot.replot();

we should have definition of jqplot smth like this
var plot = $.jqplot(...);