Я пытаюсь загрузить внешние json данные в обычный график amcharts. Если я вставлю точно такие же данные Json в свойство chart.data , он будет работать отлично. Но когда я использую свойство chart.dataSource.url и вызываю страницу с такими же данными json, она не работает.
SNIPPET WITH DATA INSIDE JAVASCRIPT - WORKING
var chart
var valueAxis
var valueAxisAll
// Create chart instance
chart = am4core.create("chartdiv", am4charts.XYChart);
// Themes begin
am4core.useTheme(am4themes_animated);
// Increase contrast by taking evey second color
//chart.colors.step = 2;
// Create Category axes
// var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
/*
categoryAxis.baseInterval = {
timeUnit: "day",
count: 1
};
*/
//categoryAxis.skipEmptyPeriods = true;
// categoryAxis.dataFields.category = headers[0];
//categoryAxis.renderer.labels.template.rotation = -45;
//categoryAxis.renderer.grid.template.location = 0;
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";
// Create Value axis series
valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
//create series
var series = chart.series.push(new am4charts.LineSeries());
//set x & y
series.dataFields.valueY ="value";
series.dataFields.dateX = "date";
series.name = "Rýchlost v km/h";
//series.fillOpacity = 0.3;
series.strokeWidth = 2;
series.stroke = "#4484CE";
series.tensionX = 1; //smoothen between 0 & 1
series.yAxis = valueAxis;
var myBullets = series.bullets.push(new am4charts.CircleBullet());
myBullets.hideBulletsCount= 10;
series.bullets.push(new am4charts.CircleBullet());
series.minBulletDistance = 25;
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.tooltip.autoTextColor = false;
series.tooltip.label.fill = "#3f4652";
series.tooltip.getFillFromObject = false;
series.tooltip.fillOpacity = 1.0;
series.tooltip.background.fillOpacity = 1.0;
//valueAxis settings
//valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 2;
//valueAxis.renderer.line.stroke = series.stroke;
//valueAxis.renderer.labels.template.fill = series.stroke;
valueAxis.renderer.opposite = false;
//valueAxis.renderer.grid.template.disabled = true;
valueAxis.cursorTooltipEnabled = false;
var gradient = new am4core.LinearGradient();
gradient.addColor(am4core.color("green"));
gradient.addColor(am4core.color("yellow"));
gradient.addColor(am4core.color("red"));
gradient.rotation = 270;
//rect.fill = gradient;
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = 100;
range.contents.stroke = chart.colors.getIndex(1);
range.contents.fill = gradient;
range.contents.fillOpacity = 0.4;
chart.data = [{"date":"2020-07-27 15:27:10","value":14.3},
{"date":"2020-07-27 15:28:10","value":12.5},
{"date":"2020-07-27 15:29:10","value":13.9},
{"date":"2020-07-27 15:30:10","value":8.6},
{"date":"2020-07-27 15:31:10","value":5.8},
{"date":"2020-07-27 16:27:11","value":12.9},
{"date":"2020-07-27 17:27:11","value":17.6},
{"date":"2020-07-27 17:35:11","value":15.8},
{"date":"2020-07-27 17:45:11","value":19.2},
{"date":"2020-07-27 17:58:11","value":22.5},
{"date":"2020-07-27 18:28:23","value":20.8},
{"date":"2020-07-27 18:38:23","value":18.6},
{"date":"2020-07-27 18:40:23","value":24.8},
{"date":"2020-07-27 18:55:23","value":25.9},
{"date":"2020-07-28 10:28:23","value":33.8},
{"date":"2020-07-28 10:35:59","value":30.4},
{"date":"2020-07-28 10:45:59","value":28.6},
{"date":"2020-07-28 15:56:59","value":35.9},
{"date":"2020-07-28 15:58:59","value":37.5},
{"date":"2020-07-28 16:00:59","value":24.2},
{"date":"2020-07-28 16:27:48","value":32.4},
{"date":"2020-07-28 16:35:48","value":35.2},
{"date":"2020-07-28 16:42:48","value":39.6},
{"date":"2020-07-28 16:45:48","value":40.3},
{"date":"2020-07-28 16:48:48","value":40.6},
{"date":"2020-07-28 16:50:12","value":39.6},
{"date":"2020-07-28 16:51:12","value":35.7},
{"date":"2020-07-28 16:52:12","value":28.5},
{"date":"2020-07-28 16:53:12","value":22.6},
{"date":"2020-07-28 16:54:12","value":15.6},
];
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv" style="width: 90%; height: 300px" ;></div>
СНИПЕТ С ВНЕШНИМ JSON ЗАГРУЗКА ДАННЫХ - НЕ РАБОТАЕТ
var chart
var valueAxis
var valueAxisAll
// Create chart instance
chart = am4core.create("chartdiv_wind", am4charts.XYChart);
// Themes begin
am4core.useTheme(am4themes_animated);
// Increase contrast by taking evey second color
//chart.colors.step = 2;
// Create Category axes
// var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
/*
categoryAxis.baseInterval = {
timeUnit: "day",
count: 1
};
*/
//categoryAxis.skipEmptyPeriods = true;
// categoryAxis.dataFields.category = headers[0];
//categoryAxis.renderer.labels.template.rotation = -45;
//categoryAxis.renderer.grid.template.location = 0;
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";
// Create Value axis series
valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
//create series
var series = chart.series.push(new am4charts.LineSeries());
//set x & y
series.dataFields.valueY ="value";
series.dataFields.dateX = "date";
series.name = "Rýchlost v km/h";
//series.fillOpacity = 0.3;
series.strokeWidth = 2;
series.stroke = "#4484CE";
series.tensionX = 1; //smoothen between 0 & 1
series.yAxis = valueAxis;
var myBullets = series.bullets.push(new am4charts.CircleBullet());
myBullets.hideBulletsCount= 10;
series.bullets.push(new am4charts.CircleBullet());
series.minBulletDistance = 25;
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.tooltip.autoTextColor = false;
series.tooltip.label.fill = "#3f4652";
series.tooltip.getFillFromObject = false;
series.tooltip.fillOpacity = 1.0;
series.tooltip.background.fillOpacity = 1.0;
//valueAxis settings
//valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 2;
//valueAxis.renderer.line.stroke = series.stroke;
//valueAxis.renderer.labels.template.fill = series.stroke;
valueAxis.renderer.opposite = false;
//valueAxis.renderer.grid.template.disabled = true;
valueAxis.cursorTooltipEnabled = false;
var gradient = new am4core.LinearGradient();
gradient.addColor(am4core.color("green"));
gradient.addColor(am4core.color("yellow"));
gradient.addColor(am4core.color("red"));
gradient.rotation = 270;
//rect.fill = gradient;
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = 100;
range.contents.stroke = chart.colors.getIndex(1);
range.contents.fill = gradient;
range.contents.fillOpacity = 0.4;
chart.dataSource.url = "datatemp.asp?co=5";
chart.dataSource.parser = new am4core.JSONParser();
chart.dataSource.parser.options.emptyAs = 0;
chart.dataSource.reloadFrequency = 10000;
chart.dataSource.incremental = true;
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss"
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv_wind" style="width: 90%; height: 300px" ;></div>
Вот пример данных из datatemp. asp? Co = 5
[{"date":"2020-07-27 15:27:10","value":14.3},
{"date":"2020-07-27 15:28:10","value":12.5},
{"date":"2020-07-27 15:29:10","value":13.9},
{"date":"2020-07-27 15:30:10","value":8.6},
{"date":"2020-07-27 15:31:10","value":5.8},
{"date":"2020-07-27 16:27:11","value":12.9},
{"date":"2020-07-27 17:27:11","value":17.6},
{"date":"2020-07-27 17:35:11","value":15.8},
{"date":"2020-07-27 17:45:11","value":19.2},
{"date":"2020-07-27 17:58:11","value":22.5},
{"date":"2020-07-27 18:28:23","value":20.8},
{"date":"2020-07-27 18:38:23","value":18.6},
{"date":"2020-07-27 18:40:23","value":24.8},
{"date":"2020-07-27 18:55:23","value":25.9},
{"date":"2020-07-28 10:28:23","value":33.8},
{"date":"2020-07-28 10:35:59","value":30.4},
{"date":"2020-07-28 10:45:59","value":28.6},
{"date":"2020-07-28 15:56:59","value":35.9},
{"date":"2020-07-28 15:58:59","value":37.5},
{"date":"2020-07-28 16:00:59","value":24.2},
{"date":"2020-07-28 16:27:48","value":32.4},
{"date":"2020-07-28 16:35:48","value":35.2},
{"date":"2020-07-28 16:42:48","value":39.6},
{"date":"2020-07-28 16:45:48","value":40.3},
{"date":"2020-07-28 16:48:48","value":40.6},
{"date":"2020-07-28 16:50:12","value":39.6},
{"date":"2020-07-28 16:51:12","value":35.7},
{"date":"2020-07-28 16:52:12","value":28.5},
{"date":"2020-07-28 16:53:12","value":22.6},
{"date":"2020-07-28 16:54:12","value":15.6},
];
Спасибо за вашу помощь !!!