Using CHARTJS with a JavaScript Array

Question

I'm having some issues with the following code :

 function processData(csv)
 {
    var allTextLines = csv.split(/\r\n|\n/);
    var tarr = [];

    for (var i=1; i<11; i++) 
    {
        var data = allTextLines[i].split(';');
        if (i==1)
        {
            tarr = [{ commande: data[0], periode: data[1], jours: data[2] }];  
        }

        tarr = tarr.concat([{ commande: data[0], periode: data[1], jours: data[2] }]);
    }   

    $('#chartContainer').dxChart('option', 'dataSource', tarr);
 }

As you may have understood, I'm just trying to "refresh" a CHARTJS chartContainer with new values that I would be reading from a CSV file. Unfortunately, it doesn't seem to work when I use a simple javascript Array as a Datasource. Using "concat" is the best way, though, as "push" is just a mess in this case, and I didn't manage to generate anything.

I'd like to read a CSV file and generate a js Array like this :

var dataSource = [
    { commande: "Commande 001", periode: "2014/01", jours: 12.0 },
    { commande: "Commande 002", periode: "2014/01", jours: 35.0 },

    { commande: "Commande 001", periode: "2014/02", jours: 24.0 },
    { commande: "Commande 002", periode: "2014/02", jours: 68.0 },

    { commande: "Commande 001", periode: "2014/03", jours: 91.0 },
    { commande: "Commande 002", periode: "2014/03", jours: 76.0 },

    { commande: "Commande 001", periode: "2014/04", jours: 53.0 },
    { commande: "Commande 002", periode: "2014/04", jours: 48.0 },

    { commande: "Commande 001", periode: "2014/05", jours: 31.0 },
    { commande: "Commande 002", periode: "2014/05", jours: 10.0 },

    { commande: "Commande 001", periode: "2014/06", jours: 90.0 },
    { commande: "Commande 002", periode: "2014/06", jours: 10.0 },

    { commande: "Total", periode: "2014/01", jours: 47.0 },
    { commande: "Total", periode: "2014/02", jours: 92.0},
    { commande: "Total", periode: "2014/03", jours: 167.0 },
    { commande: "Total", periode: "2014/04", jours: 101.0 },
    { commande: "Total", periode: "2014/05", jours: 41.0 },
    { commande: "Total", periode: "2014/06", jours: 100.0 },                             
];

This is the code I'm using to make my first chart (without reading anything), and it seems to work just fine.

Using the tarr Array to refresh this chart, reading a CSV file is my problem.

Y Axis is absolutely out of control ! (multiple values, multiple 0, X Axis damaged, not the chart itself though, as I put random values in the CSV file).

My (simple) CSV :

commande,periode,jours
Commande 001;2014/01;0.0
Commande 002;2014/01;86.0
Commande 001;2014/02;83.0
Commande 002;2014/02;78.0
Commande 001;2014/03;81.0
Commande 002;2014/03;76.0                  
Commande 001;2014/04;83.0
Commande 002;2014/04;38.0
Commande 001;2014/05;81.0
Commande 002;2014/05;0.0
Commande 001;2014/06;100.0
Commande 002;2014/06;0.0                 
Total;2014/01;72.0
Total;2014/02;61.0
Total;2014/03;57.0
Total;2014/04;11.0
Total;2014/05;81.0
Total;2014/06;100.0

I don't get it. Any help would be appreciated !

vortexwolf · Accepted Answer · 2013-12-18 23:18:49Z

1

At first check your regexp csv.split(/\r\n|\n/) whether it returns an array of lines. IF it is correct, you should rewrite your method so:

function processData(csv)
{
    var allTextLines = csv.split(/\r\n|\n/);
    var tarr = [];

    for (var i = 1; i < allTextLines.length; i++) 
    {
        var data = allTextLines[i].split(';');
        tarr.push({ commande: data[0], periode: data[1], jours: parseFloat(data[2]) });
    }

    $('#chartContainer').dxChart('option', 'dataSource', tarr);
}

I moved var data inside the loo; replaced concat by push ; and replaced the number 11 by the length of the array.

Proof that it works on jsFiddle: http://jsfiddle.net/WL22j/1/

edited Dec 18, 2013 at 23:18

answered Dec 18, 2013 at 16:57

vortexwolf

14.1k2 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ouarflol Over a year ago

Thanks for your answer. Var data inside the loop was a copy/paste mistake, it used to be inside the loop while I was doing my tests (same thing for 11). I edited. I tried to push instead of concat : it doesn't work. Basically, using push produces no chart at all while concat is OK, except for the Y axis which has dumb values : (11 / 57 / 61 / 62 / 0 / 0 / etc.) It's supposed to be a 100% scale !

vortexwolf Over a year ago

In my example push will create the same array as concat, you just used it wrong. Your Y axis looks bad because it takes values from some incorrect property. Specify argumentField and valueField like in example: chartjs.devexpress.com/Documentation/Tutorial/…

Ouarflol Over a year ago

My argumentField and valueField are OK. It's not about creating a new chart (even though...), just about refreshing an existing one. I already have : $("#chartContainer").dxChart({ dataSource: dataSource, commonSeriesSettings: { argumentField: "periode", valueField: "jours" //etc.} It works just fine.

Ouarflol Over a year ago

It's filled with a var dataSource just like the one mentioned in my original post, not a read one.

Ouarflol Over a year ago

Anyways, I'm sorry to say that I can't push (I just tried YOUR code, it produces nothing), while concat seems ok but bad axis.

|

Collectives™ on Stack Overflow

Using CHARTJS with a JavaScript Array

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related