CODEWITHSUNDEEP
javascriptarrayscsvchartschart.js
Ouarflol
Ouarflol

Reputation: 13

Using CHARTJS with a JavaScript Array

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 !

Upvotes: 1

Views: 1410

Answers (1)

vortexwolf
vortexwolf

Reputation: 14037

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/

Upvotes: 1

Related Questions