CODEWITHSUNDEEP
javascriptflot
wingman55
wingman55

Reputation: 119

draw a chart in javascript

I am very new to javascript. I like to draw a chart from the following array:

var sampleData = [
                                    { Period: '1981', Size: 80.01 , Age: 32 },
                                    { Period: '1981', Size: 89.11, Age : 35 }];

I use jquery.flot.js library to draw the chart. Here is the example to draw the chart and it works fine:

var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    $.plot($("#placeholder"), [d1, d2]);

According to example here is my code for drawing the chart :

var myData1 = [];
     for (var i in sampleData) {
        myData.push( sampleData[i].Period, sampleData[i].Size);
    } 
var myData2 = [];
     for (var i in sampleData) {
        myData.push( sampleData[i].Period, sampleData[i].Age);
    }              
$.plot($("#placeholder"), [myData1, myData2 ]);

But with this code my chart doesnot have any line !!!

Can someone point me out where is my fault?

Upvotes: 0

Views: 217

Answers (2)

Mark
Mark

Reputation: 108512

Instead of

myData.push( sampleData[i].Period, sampleData[i].Size);

I think you want

myData.push( [sampleData[i].Period, sampleData[i].Size] );

This will create an array of arrays (where the inner arrays are x,y coordinates).

Upvotes: 2

tlehman
tlehman

Reputation: 5167

It might be your loops: 

 var myData1 = [];
   for (var i in sampleData) {
     myData.push( sampleData[i].Period, sampleData[i].Size);
 } 
 var myData2 = [];
   for (var i in sampleData) {
     myData.push( sampleData[i].Period, sampleData[i].Age);
 }

 $.plot($("#placeholder"), [myData1, myData2 ]);

Inside each of the loops, you push the data into the myData array, but you define myData1 and myData2, change the inside of the loop to myData1.push and myData2.push respectively.

Upvotes: 0

Related Questions