Search code examples
jqueryjqplot

how to add both barchart and line graph in single chart

Hi I am trying to attain both bar and line graph in one chart I was able to show bar graph(multiple vertical bars), need to show line graphs

 $("#chart1").html("");
 var xLabel = 'AREAS';
 var yLabel = 'NUMBERS';
 var yInterval='';
 var yInterval='';
  var S1 = [20, 60, 70, 100];
        var S2 = [70, 50, 30, 20];
        var S3 = [10, 50, 30, 20];
        var ticks = ['NA','APAC', 'EU','LATAM'];
        var yInterval=120;
        var count=120;

    $.jqplot('chart1', [S1, S2, S3], {
                            seriesColors:['#5882FA', '#DF7401', '#A4A4A4'],
                            seriesDefaults: {
                                renderer:$.jqplot.BarRenderer,
                                pointLabels: { show: true },
                                rendererOptions: {
                                        barWidth: 25,
                                        barDirection: 'vertical',
                                        barPadding: 0,
                                        fillToZero: true,
                                        shadowOffset: 0,
                                        shadowDepth: 0
                                    }
                            },
                            axes: {
                                xaxis: {
                                    label: xLabel,
                                    renderer: $.jqplot.CategoryAxisRenderer,
                                    ticks: ticks
                                },
                                yaxis: {
                                  label: yLabel
                                }
                            },
                        });

I was trying to attain like the below chart

enter image description here

Solution

  • If you define 2 additional series for your 2 line graphs:

     // Series for line graphs
 var S4 = [46, 38, 48, 47];
 var S5 = [33, 23, 38, 11];

    And ensure these are passed in as parameters in addition to S1, S2 and S3:

    $.jqplot('graph_stacked', [S1, S2, S3, S4, S5], {

    Then add a series object that defines the renderers you want to use for each of the series. Here the first 3 use the BarRenderer and the last 2 use the LineRenderer:

    series: [{
         label: 'Total Number of Distributors',
         renderer: $.jqplot.BarRenderer
     }, {
         label: 'Number of Distributors with at Least One Registered User',
         renderer: $.jqplot.BarRenderer
     }, {
         label: 'Number of Active Distributors',
         renderer: $.jqplot.BarRenderer
     }, {
         label: 'CMH Coverage %',
         renderer: $.jqplot.LineRenderer
     }, {
         label: 'Distributor Utilization Rate',
         renderer: $.jqplot.LineRenderer
     }]

    Then add the additional colours for the 2 new line graphs:

    seriesColors: ['#5882FA', '#DF7401', '#A4A4A4', '#ff00ff', '#00ffff'],

    Please see here for a demo.

    Edit: Update for the query regarding the y2axis:

    Define a y2axis alongside the existing yaxis. Ensure the showGridline is set to false so it uses the same grid as the yaxis:

     y2axis:{
     label: y2Label,
     min:0,
     max:120,
     tickOptions:{showGridline:false}
 }

    Then modify each series so they use the relevant yaxis renderer. In this case all the bar charts use the yaxis and the line charts use y2axis:

    series: [{
    label: 'Total Number of Distributors',
    renderer: $.jqplot.BarRenderer,
    yaxis: 'yaxis'
 },
 ... 
 {
     label: 'Distributor Utilization Rate',
     renderer: $.jqplot.LineRenderer,
     yaxis: 'y2axis'
}]

    See here for a demo.