Question

I'm using some code based on jqplot which draws a barchart and allows toggling the series of the chart by clicking on the legendnames, see function code below.

Is it possible to control the series of various charts by means of only one legend? If so, how?

function drawBarchart(name,ticks,labels,s11,s12,s21,s22){

        var plot1 = $.jqplot(name, [s11,s12,s21,s22], { //'chart1' -> define wrapper <div id='chart1'> </div>
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
            grid:{borderColor:'transparent',shadow:false,drawBorder:false,shadowColor:'transparent'},
            seriesDefaults:{renderer:$.jqplot.BarRenderer, //choose bar chart
                rendererOptions: {fillToZero: true},
                pointLabels: { show: true, location: 'e', edgeTolerance: -15 } //adds values+labels to bars
            },//seriesDefaults
            // Custom labels for the series are specified with the "label"
            // option on the series option.  Here a series option object
            // is specified for each series.
            series:[ //define labels
                {label:labels[0], shadow: false},
                {label:labels[1], shadow: false},
                {label:labels[2], shadow: false},
            ],//series
            // Show the legend and put it outside the grid, but inside the
            // plot container, shrinking the grid to accomodate the legend.
            // A value of "outside" would not shrink the grid and allow
            // the legend to overflow the container.
            legend: {
                show: true,
                placement: 'outsideGrid',
                renderer: $.jqplot.EnhancedLegendRenderer //enables toggling data and legends
            },//legend
            axes: {
            // Use a category axis on the x axis and use our custom ticks.
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks,
                    tickOptions: {showGridline: false}
                },//xaxis
                // Pad the y axis just a little so bars can get close to, but
                // not touch, the grid boundaries.  1.2 is the default padding.
                yaxis: {
                    showTicks:false,
                    label: 'axis1',
                    pad: 1.05,
                    tickOptions: { showGridline: false}
                },//yaxis

                y2axis: {
                    showTicks:false,
                    label: 'axis2',
                    pad: 1.05,
                    tickOptions: {showGridline: false}
                }//yaxis

            },//axes

            series:[
                {yaxis:'yaxis', label:'s11[0]'},
                {yaxis:'y2axis', label:'s11[1]'},
                {yaxis:'yaxis', label:'s12[0]'},
                {yaxis:'y2axis', label:'s12[1]'},
                {yaxis:'y2axis', label:'s21'},
                {yaxis:'y2axis', label:'s22'},


            ]
      }); //$.jqplot('chart1', [s1, s2, s3],
    }//barchart
Was it helpful?

Solution

I have done it. here is the implementation on your code Jsfiddle Link

Take into consideration that you have to draw Legends by your self and not by using jqplot. if you can do that then my code will take care of the rest.

$(document).ready(function () {
    var graphObj = [];
    var s11 = [["a",1],["b",1],["c",5],["d",2]];
    var s12 = [["a",2],["b",2],["c",6],["d",5]];
    var s21 = [["a",3],["b",3],["c",7],["d",1]];
    var s22 = [["a",4],["b",4],["c",8],["d",8]];
    drawBarchart("chart1", s11, s12, s21, s22, 0);
    drawBarchart("chart2", s11, s12, s21, s22, 1);

    $(".jqplot-table-legend tr").click(function(){
        var index = this.rowIndex;
        for(var j =0; j<graphObj.length; j++){
            graphObj[j].series[index].show = !graphObj[j].series[index].show;
            graphObj[j].redraw();
        }
    });

    function drawBarchart(name, s11, s12, s21, s22, i) {

        graphObj[i] =  $.jqplot(name, [s11, s12, s21, s22], {
            // The "seriesDefaults" option is an options object that will
            // be applied to all series in the chart.
            grid: {
                borderColor: 'transparent',
                shadow: false,
                drawBorder: false,
                shadowColor: 'transparent'
            },
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer, //choose bar chart
                rendererOptions: {
                    fillToZero: true
                },
                pointLabels: {
                    show: false,
                    location: 'e',
                    edgeTolerance: -15
                } //adds values+labels to bars
            }, //seriesDefaults
            // Custom labels for the series are specified with the "label"
            // option on the series option.  Here a series option object
            // is specified for each series.

            // Show the legend and put it outside the grid, but inside the
            // plot container, shrinking the grid to accomodate the legend.
            // A value of "outside" would not shrink the grid and allow
            // the legend to overflow the container.

            axes: {
                // Use a category axis on the x axis and use our custom ticks.
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    tickOptions: {
                        showGridline: false
                    }
                }, //xaxis
                // Pad the y axis just a little so bars can get close to, but
                // not touch, the grid boundaries.  1.2 is the default padding.
                yaxis: {
                    showTicks: false,
                    label: 'axis1',
                    pad: 1.05,
                    tickOptions: {
                        showGridline: false
                    }
                }, //yaxis

                y2axis: {
                    showTicks: false,
                    label: 'axis2',
                    pad: 1.05,
                    tickOptions: {
                        showGridline: false
                    }
                } //yaxis

            }, //axes

            series: [{
                yaxis: 'yaxis',
                label: 's11[0]'
            }, {
                yaxis: 'y2axis',
                label: 's11[1]'
            }, {
                yaxis: 'yaxis',
                label: 's12[0]'
            }, {
                yaxis: 'y2axis',
                label: 's12[1]'
            }, {
                yaxis: 'y2axis',
                label: 's21'
            }, {
                yaxis: 'y2axis',
                label: 's22'
            },


            ]
        }); 
    } 
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top