CODEWITHSUNDEEP
javascriptjqueryflot
Keith M
Keith M

Reputation: 1239

Javascript flot not showing data series

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
        }]
    }
}
});

Upvotes: 0

Views: 885

Answers (3)

Ricardo França
Ricardo França

Reputation: 3003

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

Upvotes: 0

piotrwest
piotrwest

Reputation: 2166

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/

Upvotes: 1

slashsharp
slashsharp

Reputation: 2833

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

Upvotes: 1

Related Questions