Javascript flot not showing data series

Question

I'm using flot to display some data on a bar graph. But my data isn't displaying for some reason, and I have no idea why.

My data series is correct as far as I can see, but it still won't show.

JsFiddle: http://jsfiddle.net/9jhpyne4/1/

Code:

var plotData = [
    [1, 12.35],
    [2, 34.6],
    [3, 56.7],
    [4, 4.35]
]; 

$.plot($("#main-chart"), plotData, {
bars: {
    show: true,
    lineWidth: 0,
    fill: true,
    fillColor: {
        colors: [{
            opacity: 0.8
        }, {
            opacity: 0.1
        }]
    }
}
});

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

The console throw an error regarding your #main-chart width & height as invalid.

Changing your width & height from percentage to pixel based seems to fixed the error.

HTML

<div id="main-chart" style="width:200px;height:200px;"></div>

Here's your updated fiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 30 '15 at 19:40

slashsharp

2,823
2
19
26

1

Looks like the graph frame is displaying now, but I don't see any of the data points in your JSFiddle. – Maximillian Laumeister Aug 30 '15 at 19:42
as @MaximillianLaumeister pointed out, it is now displaying the graph, but not the data – Keith M Aug 30 '15 at 19:43

score 1 · Accepted Answer · answered Aug 30 '15 at 19:48

1

Data which you pass to plot function needs to have some metadata (like label and color):

var data = [
    [1, 12.35],
    [2, 34.6],
    [3, 56.7],
    [4, 4.35]
];
var dataset = [{ label: "a label", data: data, color: "red" }];

https://jsfiddle.net/9jhpyne4/3/

answered Aug 30 '15 at 19:48

piotrwest

2,098
23
35

You don't really need the object with the metadata. The only mandatory thing is the additional array around the `data` array. (All in all the data needs three stages of arrays: data point, data series and data overall, the last one was missing here.) – Raidri Aug 31 '15 at 08:48

score 0 · Answer 3 · answered Aug 30 '15 at 20:12

0

You need to specify the width and height.

<div id="main-chart" style="width:200px;height:200px;"></div>

And You need to change a little your plotData variable to:

var plotData = [
[[1,0], [1, 12.35]],
[[2,0], [2, 34.6]],
[[3,0], [3, 56.7]],
[[4,0], [4, 4.35]]];

You can see a complete example here: here

answered Aug 30 '15 at 20:12

Ricardo França

2,923
2
18
18

This has already been answered. Also your example works, but isn't the correct way of doing it according to the docs – Keith M Aug 30 '15 at 20:17

Javascript flot not showing data series

3 Answers3

HTML