combined line and bar w/ jqplot

Question

Is it possible w/ jqplot to display a line chart that 'overlays' a bar chart?

I have added a series to a stacked barchart and changed the renderer to $.jqplot.LineRender. This displays as a line but it is getting added to the stacked amounts.

score 18 · Accepted Answer · answered May 24 '12 at 10:30

18

Yes it can be done with jqPlot.

A sample showing how a bar chart can be presented on a single plot together with a line chart is presented here, see the 3rd plot from the top.

Here I made a sample to show line and stacked bar charts on a single plot.

answered May 24 '12 at 10:30

Boro

7,913
4
43
85

The jqplot site example looks like what I want to do. Thanks! I might be wrong but your example appears to have the 'issue' I was talking about where the line chart is being added – jjdebarros May 24 '12 at 19:46
Yea you are right it appears to be getting added to the previous series therefore you might be successful to combine it with the approach `jqPlot` guys give in the 3rd plot in the example. I guess that if it is a very annoying issue you can always try setting the values of the line accordingly to negative values that would move it to the wanted position. I will experiment with it tomorrow. Also (+1) for interesting question. – Boro May 24 '12 at 20:07
1

I found a nicer solution. You can disable stacking of a series by setting `disableStack : true` for it. Now it is also added to the code sample. – Boro May 25 '12 at 15:00
IMHO, that example is a better solution for what I am doing as the bar and line chart use the same yaxis. Thanks again! – jjdebarros May 25 '12 at 16:01
Thanks!! I was going crazy creating that type of chart myself. – Pod Sep 20 '12 at 18:15
1

Awesome. +1 for the example. – Andree Feb 06 '13 at 16:04

score 4 · Answer 2 · answered Dec 27 '13 at 11:09

I add this example on jsFiddle, i hope this could be useful to you. It also shows the possibility to draw delimiting lines and areas for a better representation.

enter image description here

there is an article about this topic at this page: http://www.meccanismocomplesso.org/en/mean-mode-median-barchart/

score 0 · Answer 3 · answered Oct 25 '17 at 05:44

 series:[
              {
                    color:'#0070c0',
                    label : 'Barchart',
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {
                          barPadding: 0,
                          barMargin: 0
                    },
                    pointLabels: { show: true }
              },
       {
                    yaxis: 'y2axis',
                    color: '#ff0000',
                    label : 'Line chart ',
                    renderer:$.jqplot.LineRenderer,
                    rendererOptions: {
                          barPadding: 0,
                          barMargin: 0
                    }
              }
        ]

It will draw both line and bar chart

combined line and bar w/ jqplot

3 Answers3

Linked