Combination Charts - Stacked Bar Chart and Line Chart

600 views
Skip to first unread message

Darren Hevers

unread,
Aug 8, 2015, 5:45:20 AM8/8/15
to jqplot-users
Hi Guys

I am trying to create a combination chart which contains a stacked bar chart and a line chart.

I currently have the stacked bar chart working, attached is the code.

The line chart will intersect the stacked bar chart at varying points.

Any suggestions would be greatly appreciated.

Cheers

Darren


StackedBarChart_jqplot.txt

Larry Martell

unread,
Aug 10, 2015, 7:54:19 PM8/10/15
to jqplot-users
Simply create another series and don't specify the BarRenderer for
that series and it will be rendered as a line.

Max Mustermann

unread,
Feb 14, 2016, 2:15:31 PM2/14/16
to jqplot-users
I tried not specifying the renderer for the series I want to plot as a line and also adding "disableStack: true" for that one, but it doesnt work. Following error occurs: 

jqplot.pointLabels.min.js:3
Uncaught TypeError: Cannot read property '0' of undefined

My questions is: Is it actually possible to create a mixture of stacked bar chart and line graph? If so, how?

Larry Martell

unread,
Feb 14, 2016, 2:19:58 PM2/14/16
to jqplot-users
On Sun, Feb 14, 2016 at 2:15 PM, Max Mustermann
<musterma...@gmail.com> wrote:
> I tried not specifying the renderer for the series I want to plot as a line
> and also adding "disableStack: true" for that one, but it doesnt work.
> Following error occurs:
>
> jqplot.pointLabels.min.js:3
> Uncaught TypeError: Cannot read property '0' of undefined
>
> My questions is: Is it actually possible to create a mixture of stacked bar
> chart and line graph? If so, how?

Post your code on jsfiddle so we can look at it.

Max Mustermann

unread,
Feb 14, 2016, 4:48:13 PM2/14/16
to jqplot-users
Hi,
okay, here is my code on jsfiddle:

https://jsfiddle.net/zb1zsnc0/2/

So I guess generally it should be feasable with jqPlot?


Am Samstag, 8. August 2015 11:45:20 UTC+2 schrieb Darren Hevers:

Larry Martell

unread,
Feb 14, 2016, 5:53:22 PM2/14/16
to jqplot-users
On Sun, Feb 14, 2016 at 4:48 PM, Max Mustermann
<musterma...@gmail.com> wrote:
> Hi,
> okay, here is my code on jsfiddle:
>
> https://jsfiddle.net/zb1zsnc0/2/

Your external links are not loading - look in the js console, there
are lots of errors. Fix this up and I will look at it. Also, I noticed
that you reference:

data["views"]["dates"]

But data["views"] does not exist.

Max Mustermann

unread,
Feb 14, 2016, 6:16:25 PM2/14/16
to jqplot-users
Oh, I can fix that tomorrow then. The other was just a copy paste error since I deleted some other code.

But maybe it also helps you if I give you the link on my testserver where I tested that out and some other graphs. The first one is supposed to be the mixed one, you can see the code in Firebug:
http://www.museum-of-dwellings.com/tracking/?pw=jb-ba16
The error I mentioned dissappeared for some reason but its still not working.

Thanks for your help!


Am Samstag, 8. August 2015 11:45:20 UTC+2 schrieb Darren Hevers:

Larry Martell

unread,
Feb 14, 2016, 6:38:18 PM2/14/16
to jqplot-users
On Sun, Feb 14, 2016 at 6:16 PM, Max Mustermann
<musterma...@gmail.com> wrote:
> Oh, I can fix that tomorrow then. The other was just a copy paste error
> since I deleted some other code.
>
> But maybe it also helps you if I give you the link on my testserver where I
> tested that out and some other graphs. The first one is supposed to be the
> mixed one, you can see the code in Firebug:
> http://www.museum-of-dwellings.com/tracking/?pw=jb-ba16
> The error I mentioned dissappeared for some reason but its still not
> working.

I do this in many charts. For the series that are bar charts I do this:

series_options.push({
renderer: $.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
barDirection: 'vertical',
shadowAlpha: 0,
barPadding: 0,
barMargin: 2,
},
});

and in the series that are lines I do this:

series_options.push({
color: '#00CCA3',
showMarker: true,
formatString: "",
highlighter: {
showHighlight: true,
show: true,
sizeAdjust: 2,
tooltipAxes: 'y',
showTooltip: true,
},
});

To debug your issue I would build up the chart one data set at a time
and see at which point it breaks. If that is not informative, then I'd
trace the code into jqPlot and see where it goes wrong there.

Max Mustermann

unread,
Feb 15, 2016, 4:48:26 PM2/15/16
to jqplot-users
Okay, thanks for your help! I fixed it now, the problem is that I passed all the data as seperate series of label and value pairs, now I pass them as an array of one dimensional arrays and add the labels or ticks seperatly in the xaxis.
Reply all
Reply to author
Forward
0 new messages