複数のcsvファイルのタイムスタンプデータをハイチャートに追加

Question

9/30/2015 6:39:14 PM,20.709217のようなタイムスタンプデータを持つ2つのcsvファイルからデータを追加しようとしています。 ファイルからこれらの値を読み込み、文字列をhighchartsが受け付ける日付/時刻形式に変換しようとしています。

すべてのファイルについて、この変換データをグラフにプッシュするデータ配列に追加しています。

これは、次のエラー得られます。ここではInvalid value for <path> attribute d="M 687.5 "

を私がしようとしているコードされていますjsfiddle

私のCSVデータファイルは以下の通りです。

Data1.csv

9/30/2015 6:39:14 PM,20.709217 
9/29/2015 6:38:16 PM,32.215775 
9/28/2015 6:38:16 PM,32.215775 

Data2.csv

9/30/2015 6:39:14 PM,24.709217 
9/29/2015 6:38:16 PM,18.012775 
9/28/2015 6:38:16 PM,33.245775 

が親切これで私を助けて。

Answer 1

$.get()は非同期なので、drawChartを呼び出すと、data1配列が完全に設定されていないため、ajax呼び出しが完了しません。

drawChartコールを$.get()コールの最後に移動する必要があります。ここで

は、作業コードです：ここで

var options1 = { 
    chart: { 
    renderTo: 'container' 
    }, 
    title: { 
    text: '' 
    }, 
    xAxis: { 
    title: { 
     text: 'Select on Parameters to change data in chart.' 
    }, 
    }, 
    vAxis: { 
    title: { 
     text: '' 
    }, 
    }, 
    tooltip: { 
    enabled: true, 
    shared: true 
    }, 
    series: [] 
}; 

var drawChart = function(data, type, name, color) { 
    var newSeriesData = { 
    name: name, 
    type: type, 
    data: data, 
    color: color 
    }; 

    options1.series.push(newSeriesData); 

    var chart = new Highcharts.Chart(options1); 
}; 


var data1 = [ 
    [] 
    ], 
    data2 = [ 
    [] 
    ]; 

$.get('data1.csv', function(csv) { 
    var lines = csv.trim().split('\n'); 
    console.log("CSV: ", csv); 

    $.each(lines, function(lineNo, line) { 
    var items = line.split(','); 
    console.log('Item1:', items[0]) 
    if ((line !== " ")) { 

     var datetime = new Date(items[0]); 
     console.log("Datetime variable: ", datetime); 
     var value = parseFloat(items[1]); 

     var year = datetime.getFullYear(); 
     var month = datetime.getUTCMonth(); 
     var day = datetime.getDay(); 
     var hour = datetime.getHours(); 
     var min = datetime.getMinutes(); 

     var thisDate = Date.UTC(year, month, day, hour, min); 
     console.log("Date: ", thisDate); 
     console.log("Value: ", value); 
     //      console.log("Date Generated: ",thisDate); 
     data1.push([thisDate, value]); 

    } 
    }); 

    $.each(lines, function(lineNo, line) { 
    var items = line.split(','); 
    console.log('Item1:', items[0]) 
    if ((line !== " ")) { 

     var datetime = new Date(items[0]); 
     console.log("Datetime variable: ", datetime); 
     var value = parseFloat(items[1]); 

     var year = datetime.getFullYear(); 
     var month = datetime.getUTCMonth(); 
     var day = datetime.getDay(); 
     var hour = datetime.getHours(); 
     var min = datetime.getMinutes(); 

     var thisDate = Date.UTC(year, month, day, hour, min); 
     console.log("Date: ", thisDate); 
     console.log("Value: ", value); 
     //      console.log("Date Generated: ",thisDate); 
     data1.push([thisDate, value]); 

    } 
    }); 
    console.log("Data1 Array: ", data1); 
    drawChart(data1, 'line', 'DC Voltage (V)', 'red'); 
}); 

は、コンソールの出力に含まです：

CSV: 9/30/2015 6:39:14 PM,20.709217 
9/29/2015 6:38:16 PM,32.215775 
9/28/2015 6:38:16 PM,32.215775 
Item1: 9/30/2015 6:39:14 PM 
Datetime variable: Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été)) 
    "Datetime variable: " 
    [date] Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été)) 

Date: 1441305540000 
Value: 20.709217 
Item1: 9/29/2015 6:38:16 PM 
Datetime variable: Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été)) 
    "Datetime variable: " 
    [date] Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été)) 

Date: 1441219080000 
Value: 32.215775 
Item1: 9/28/2015 6:38:16 PM 
Datetime variable: Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été)) 
    "Datetime variable: " 
    [date] Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été)) 

Date: 1441132680000 
Value: 32.215775 
Item1: 9/30/2015 6:39:14 PM 
Datetime variable: Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été)) 
    "Datetime variable: " 
    [date] Wed Sep 30 2015 18:39:14 GMT+0200 (Paris, Madrid (heure d’été)) 

Date: 1441305540000 
Value: 20.709217 
Item1: 9/29/2015 6:38:16 PM 
Datetime variable: Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été)) 
    "Datetime variable: " 
    [date] Tue Sep 29 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été)) 

Date: 1441219080000 
Value: 32.215775 
Item1: 9/28/2015 6:38:16 PM 
Datetime variable: Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été)) 
    "Datetime variable: " 
    [date] Mon Sep 28 2015 18:38:16 GMT+0200 (Paris, Madrid (heure d’été)) 

Date: 1441132680000 
Value: 32.215775 
Data1 Array: ,1441305540000,20.709217,1441219080000,32.215775,1441132680000,32.215775,1441305540000,20.709217,1441219080000,32.215775,1441132680000,32.215775 
    "Data1 Array: " 
    [ 
     0: [ ], 
     1: [ ], 
     2: [ ], 
     3: [ ], 
     4: [ ], 
     5: [ ], 
     6: [ ], 
     length: 7 
    ] 

Highcharts error #15: www.highcharts.com/errors/15 
Highcharts error #15: www.highcharts.com/errors/15 
Highcharts error #15: www.highcharts.com/errors/15 
Highcharts error #15: www.highcharts.com/errors/15