Использование amcharts и получение ошибки javascript

Question

Я использую amcharts для небольшого приложения для личного использования. Я получил статическую локальную копию работать так, как я хотел, но когда я сделал некоторые изменения, чтобы сделать его динамичным я не получаю

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

В serial.js линии 46, позиция 364.

Код:

// 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");

Выборочные данные:

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

Рассматривая формат данных, это не ожидаемый формат для dataProvider. dataProvider - это массив объектов, как вы можете видеть от the demos on AmCharts' site. У вас есть объект, содержащий два массива объектов в рядах 1 и 2, которые не будут работать. Это, как данные должны выглядеть:

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

Fiddle

Если несколько серий предназначены для сравнения в том же графике, то вы должны смотреть в how to create a stock chart, который, кажется, больше в соответствии с тем, что вы пытаетесь сделать. Массивы серии «1» и «серия 2» могут быть выражены как DataSet объектов.

Вот quick and dirty fiddle, который использует ваши данные в биржевой диаграмме, используя большую часть вашего кода, чтобы вы начали.