Amcharts verwenden und Javascriptfehler erhalten

Question

Ich benutze Amcharts für eine kleine App für den persönlichen Gebrauch. Ich habe eine statische lokale Kopie arbeiten, um die Art, wie ich wollte, aber wenn ich einige Änderungen vorgenommen, um es dynamischer Ich bin nicht

bekommen

SCRIPT5007: Unable to get property 'time' of undefined or null reference 

Bei serial.js Linie 46, Position 364.

Der Code:

// SERIAL CHART 
 
    chart = new AmCharts.AmSerialChart(); 
 

 
    chart.dataProvider = chartData; 
 
    chart.categoryField = "date"; 
 
    chart.balloon.bulletSize = 5; 
 

 
    // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens 
 
    chart.addListener("dataUpdated", zoomChart); 
 

 
    // AXES 
 
    // category 
 
    var categoryAxis = chart.categoryAxis; 
 
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 
 
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD 
 
    categoryAxis.minorGridEnabled = true; 
 
    categoryAxis.axisColor = "#DADADA"; 
 
    categoryAxis.twoLineMode = true; 
 
    categoryAxis.dateFormats = [{ 
 
        period: 'fff', 
 
        format: 'JJ:NN:SS' 
 
       }, { 
 
        period: 'ss', 
 
        format: 'JJ:NN:SS' 
 
       }, { 
 
        period: 'mm', 
 
        format: 'JJ:NN' 
 
       }, { 
 
        period: 'hh', 
 
        format: 'JJ:NN' 
 
       }, { 
 
        period: 'DD', 
 
        format: 'DD' 
 
       }, { 
 
        period: 'WW', 
 
        format: 'DD' 
 
       }, { 
 
        period: 'MM', 
 
        format: 'MMM' 
 
       }, { 
 
        period: 'YYYY', 
 
        format: 'YYYY' 
 
    }]; 
 

 
    // first value axis (on the left) 
 
    var valueAxis = new AmCharts.ValueAxis(); 
 
    valueAxis.axisColor = "#FF6600"; 
 
    valueAxis.axisThickness = 2; 
 
    chart.addValueAxis(valueAxis); 
 

 
    // GRAPHS (one per line you want to make which for us is one line per user 
 
    var users = listUsers(); 
 
    var bulletList=["round", "square", "triangleUp", "triangleDown", "triangleLeft", "triangleRight", "bubble", "diamond"]; 
 
    var colorList=["#00FF00", "#FF0000", "#0000FF", "#FF00FF", "#FFFF00", "#00FFFF", "#000000"]; 
 
    var bulletIndex = 0; 
 
    var colorIndex = 0; 
 
    for(var user in users) { 
 
    var graph = new AmCharts.AmGraph(); 
 
    graph.valueAxis = valueAxis; // we have to indicate which value axis should be used 
 
    graph.title = users[user]; 
 
    graph.valueField = users[user]; 
 
    graph.bullet = bulletList[bulletIndex++]; 
 
    graph.hideBulletsCount = 30; 
 
    graph.bulletBorderThickness = 1; 
 
    graph.lineColor = colorList[colorIndex++]; 
 
    chart.addGraph(graph); 
 

 
    if(bulletIndex >= bulletList.length) { 
 
     bulletIndex = 0; 
 
    } 
 
    if(colorIndex >= colorList.length) { 
 
     colorIndex = 0; 
 
    } 
 
    } 
 

 
    // CURSOR 
 
    var chartCursor = new AmCharts.ChartCursor(); 
 
    chartCursor.cursorAlpha = 0.1; 
 
    chartCursor.fullWidth = true; 
 
    chartCursor.valueLineBalloonEnabled = true; 
 
    chart.addChartCursor(chartCursor); 
 

 
    // SCROLLBAR 
 
    var chartScrollbar = new AmCharts.ChartScrollbar(); 
 
    chart.addChartScrollbar(chartScrollbar); 
 

 
    // LEGEND 
 
    var legend = new AmCharts.AmLegend(); 
 
    legend.marginLeft = 110; 
 
    legend.useGraphSettings = true; 
 
    chart.addLegend(legend); 
 

 
    // WRITE 
 
    chart.write("chartdiv");

Die Abtastdaten:

var allData = { 
    "series1" : [ { 
    "date" : new Date("01/05/2017"), 
    "Brian" : 290, 
    "Lisa" : 188 
    }, { 
    "date" : new Date("01/06/2017"), 
    "Brian" : 289, 
    "Lisa" : 188 
    }, { 
    "date" : new Date("01/07/2017"), 
    "Brian" : 288, 
    "Lisa" : 187 
    } ], 
    "series2" : [ { 
    "date" : new Date("01/05/2017"), 
    "Brian" : 28.9, 
    "Lisa" : 18.8 
    }, { 
    "date" : new Date("01/06/2017"), 
    "Brian" : 28.9, 
    "Lisa" : 18.8 
    }, { 
    "date" : new Date("01/07/2017"), 
    "Brian" : 28.8, 
    "Lisa" : 18.7 
    } ] 
} 

Answer 1

Mit Blick auf Ihr Datenformat ist es nicht das erwartete Format für die dataProvider. Die dataProvider ist eine Anordnung von Objekten, wie Sie von the demos on AmCharts' site sehen können. Sie haben ein Objekt mit zwei Arrays von Objekten in Serie1 und Serie2, die nicht funktionieren. Dies ist, wie die Daten aussehen sollen:

[{ 
    "date": <your string date, millisecond timestamp, or date object>, 
    "Brian": <value>, 
    "Lisa": <value> 
}, 
// ... etc 
] 

Fiddle

Wenn die mehr Reihen innerhalb der gleichen Grafik werden sollen verglichen, dann sollten Sie suchen in how to create a stock chart, die mehr im Einklang zu sein scheint, mit dem, was du versuchst es zu tun. Die Arrays "series1" und "serial2" können als DataSet Objekte ausgedrückt werden.

Hier ist ein quick and dirty fiddle, der Ihre Daten in eine Kursliste implementiert und den Großteil Ihres Codes nutzt, um Ihnen den Einstieg zu erleichtern.