Search code examples
jquerygraphbar-chartflotlinegraph

draw flot graph with bar and line


I am trying to create a bar graph with a target line, using flot and jQuery.

The target remains the same each month, while the data moves up and down. I can create the bars without issue but I can't get the line to display. I'm not sure what I'm missing

I've uploaded the code which is causing me issue here:

https://jsfiddle.net/bigbadbaboonboy/r7j0k9gz/

<div id="risla-graph" class="graph"></div>

#risla-graph {
margin: 0 auto;
text-align: center;
width: 80%;
height: 400px;
}

var datasets = [{"label":"ALL RiSLA","data":[{"0":1451606400000,"1":73.83},
{"0":1454284800000,"1":69.21},{"0":1456790400000,"1":88.33},
{"0":1459465200000,"1":85.99},{"0":1462057200000,"1":82.32},
{"0":1464735600000,"1":0}],"series":{"lines":{"show":false}},"idx":0},
{"label":"Target","color":"#006E2E","data":[{"0":1451606400000,"1":92},
{"0":1454284800000,"1":92},{"0":1456790400000,"1":92},
{"0":1459465200000,"1":92},{"0":1462057200000,"1":92},
{"0":1464735600000,"1":0}],"series":{"lines":
{"show":true,"steps":true,"linewidth":1}},"bars":{"show":false},"legend":
{"show":false},"idx":1}];

var options = {"series":{"stack":0,"lines":
{"show":false,"steps":false},"bars":{"show":true,"fill":1,"align":"center"
,"lineWidth":0,"barWidth":518400000.0000001}}
,"xaxis":{"mode":"time","timeformat":"%b %y"
,"tickSize":[1,"month"]},"yaxis":{"min":64.21,"max":97}
,"grid":{"clickable":true,"hoverable":true},"legend":{"show":false}};

plot = $.plot($('#risla-graph'),  datasets, options);

Solution

  • In your datasets array you're enclosing your lines options in a series object.

    series: {
        lines: {
            show: true,
            steps: true,
            linewidth:1
        }
    }
    

    The correct way to specify options for lines in the data object is without the series object (per Flot's api.md):

    {
        color: color or number
        data: rawdata
        label: string
        lines: specific lines options
        bars: specific bars options
        points: specific points options
        xaxis: number
        yaxis: number
        clickable: boolean
        hoverable: boolean
        shadowSize: number
        highlightColor: color or number
    }
    

    I've updated your JSFiddle to work.