CODEWITHSUNDEEP
javascriptgraphflot
user3850808
user3850808

Reputation: 13

Flotchart issues joining bar and line graph

I want to create a chart using flotchart combining both line and bar graphs. I have been able to create both separately but I'm having problems joining them.

This is the code I'm using to display only the graphs:

    var dataset = [{ label: "Eficiencia", data: data }];

    var datasetSubtotal = [{ label: "Subtotal", data: dataSubtotal }]; // this has the data for the line I want to add.

    var placeholder = $("#chartdiv");

    var options = {
        series: {
            bars: {
                show: true
            },
        },
        bars: {
            align: "center",
            barWidth: 0.5
        },
        legend:
            {
                noColumns: 0,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
        xaxis: {
            axisLabel: "Operadores",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
            ticks: ticks,
        },
        yaxis: {
            axisLabel: "Eficiencia por fuente",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
            min:0, max: 100,  tickSize: 5
        },
        grid: {
            hoverable: true,
            borderWidth: 2,
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        },
        margin: {
            top: 40,
            left: 10,
            bottom: 10,
            right: 10,
        }
    };

    $.plot(placeholder, dataset, options);

I also tried plotting it differently, but it's always getting either only one graphic at each time, or both with the same data. This is one of the failed examples.

    $.plot(placeholder, datasetSubtotal, { lines: { show: true } });

    $.plot(placeholder, [
        {
            data: datasetSubtotal,
            lines:{show:true, steps:true}
        },
        {
            data: dataset,
            bars:{show:true}
        }
    ],options);

Upvotes: 1

Views: 246

Answers (1)

Mark
Mark

Reputation: 108512

Check the docs on Data Format, in particular how to set up a series object.

You need to configure one series as lines, the other as bars:

var dataset = { 
    label: "Eficiencia", 
    data: data, 
    lines: {
        show: false
    },
    bars: {
        show: true
    }
 };

 var datasetSubtotal = { 
    label: "Subtotal", 
    data: dataSubtotal , 
    lines: {
        show: true
    },
    bars: {
        show: false
    }
 };

Then remove:

series: {
    bars: {
       show: true
    },
},

from your options.

And plot with:

$.plot(placeholder, [dataset, datasetSubtotal], options);

Here's a fiddle demonstration.

Upvotes: 2

Related Questions