Использование CHARTJS с массивом JavaScript

Question

У меня возникли некоторые проблемы со следующим кодом:

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

Как вы уже поняли, я просто пытаюсь «обновить» в CHARTJS chartContainer с новыми значениями, которые я будет считываться из файла CSV. К сожалению, это не работает, когда я использую простой массив JavaScript в качестве источника данных. Использование «concat» - лучший способ, однако, поскольку «push» - это просто беспорядок в этом случае, и мне ничего не удалось создать.

Я хотел бы прочитать файл CSV и создать массив JS вроде этого:

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

Это код, я использую, чтобы сделать свою первую карту (не читая ничего), и кажется, работать просто отлично.

Использование tarr Array для обновления этой диаграммы, чтение CSV-файла - моя проблема.

Y Ось абсолютно вышла из-под контроля! (несколько значений, несколько 0, X Axis повреждены, а не сама диаграмма, поскольку я поместил случайные значения в файл CSV).

My (простой) 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 

Я не понимаю. Любая помощь будет оценена!

Answer 1

Сначала проверьте ваше регулярное выражение csv.split(/\r\n|\n/), вернет ли он массив строк. Если это правильно, вы должны переписать метод так:

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

я переехал var data внутри туалета; заменен concat на push; и заменил число 11 на длину массива.

Доказательство того, что он работает на jsFiddle: http://jsfiddle.net/WL22j/1/