jqPlot combining a bubble plot and a line plot

Question

Is it possible to combine a bubble-plot and a line-plot in the same chart using jqPlot ?

Based on the discussion in combined line and bar w/ jqplot , I have created a jsfiddle which contains a buble-plot and a bar-plot here : http://jsfiddle.net/85K6K/6/

I am unable to convert the bar plot into line plot. How to do this ?

I tried (changing, removing) the renderer but the plot goes hayway

this is how I setup the series :

var plot2 = $.jqplot('chart', [ p, arr], {
    series: [
        {

                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {
                        barMargin: 10
                    },
                    pointLabels: {
                        show: true,
                    }
                   //showMarker:false

        },
        {
                renderer: $.jqplot.BubbleRenderer,
                rendererOptions: {
                             bubbleAlpha: 0.6,
                             highlightAlpha: 0.8
                        },
                shadow: true,
                shadowAlpha: 0.05
        }],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer
        },
        yaxis: {
            autoscale: true
        }
    }
});

What am I missing

Thanks in advance ...

I have a similar issue- I want to render a histogram as a bar-chart, and then overlay a standard distribution curve that aligns with the mean (so, a bezier curve). Thus far, no success. — Remy Porter, Jan 10 '13 at 13:05

Miklos Aubert · Accepted Answer · 2013-07-27T11:20:01.867

By trial and error, I found that you need to set the forceTickAt0 property to true for the y axis.

http://jsfiddle.net/85K6K/14/

Here's the relevant part :

yaxis: {
    autoscale: true,
    renderer: $.jqplot.LinearAxisRenderer,
    rendererOptions: {
        forceTickAt0: true
    }
}

I think you should consider filing a bug. There are other issues open in their database about the Y Axis failing with a NaN error, which seem related ; but I think your issue is worth posting on its own. With this question and the JSFiddle, it should be sufficiently well documented for the devs to tackle :)

EDIT : I don't know enough about your graph's data to tell if it's relevant, but maybe you want to use the sortMergedLabels property of the CategoryAxisRenderer, to make your graph look like this ?

rendererOptions: {
    sortMergedLabels: true
}

Thanks for the solution. I viewed it on Mozilla and found that it works! (but this does not load on Chrome though) — my account_ram, Jul 31 '13 at 17:34

jqPlot combining a bubble plot and a line plot

1 Answers1