AM Charts Test
AM Charts - online Chart Maker test
AM Charts hosted url - https://live.amcharts.com/yZjVm/
Get the data
This example from https://www.w3schools.com/js/js_ajax_http_send.asp - and include example SS API url
The XMLHttpRequest Object
Example X Y Chart - external data
<!-- Styles --> <style> #chartdiv { width: 100%; height: 500px; } </style> <!-- Resources --> <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script> <!-- Chart code --> /** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */ // post load manipulation to remove unwanted objects <script> // Create chart instance var chart = am4core.create("chartdiv", am4charts.XYChart); // Set up data source //chart.dataSource.url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"; chart.dataSource.url = "https://api.solarschools.net/v1/data/schemas/83/energy/feed?start=2020-10-14"; chart.dataSource.events.on("parseended", function(ev) { // parsed data is assigned to data source's `data` property var data = ev.target.data; delete data.aggregation; delete data.startTime; delete data.endTime; delete data.totals; } // Create axes //var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "year"; var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "time"; // Create value axis var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series var series1 = chart.series.push(new am4charts.LineSeries()); //series1.dataFields.valueY = "cars"; //series1.dataFields.categoryX = "year"; //series1.name = "Cars"; //series1.strokeWidth = 3; //series1.tensionX = 0.7; //series1.bullets.push(new am4charts.CircleBullet()); series1.dataFields.valueY = "solarGenerated"; series1.dataFields.categoryX = "time"; series1.name = "Solar Generated"; series1.strokeWidth = 3; series1.tensionX = 0.7; var series2 = chart.series.push(new am4charts.LineSeries()); series2.dataFields.valueY = "solarFeedIn"; series2.dataFields.categoryX = "time"; series2.name = "Solar Feed In"; series2.strokeWidth = 3; series2.tensionX = 0.7; //series2.dataFields.valueY = "motorcycles"; //series2.dataFields.categoryX = "year"; //series2.name = "Motorcycles"; //series2.strokeWidth = 3; //series2.tensionX = 0.7; //series2.bullets.push(new am4charts.CircleBullet()); var series3 = chart.series.push(new am4charts.LineSeries()); series3.dataFields.valueY = "solarConsumed"; series3.dataFields.categoryX = "time"; series3.name = "Solar Consumed"; series3.strokeWidth = 3; series3.tensionX = 0.7; //series3.dataFields.valueY = "bicycles"; //series3.dataFields.categoryX = "year"; //series3.name = "Bicycles"; //series3.strokeWidth = 3; //series3.tensionX = 0.7; //series3.bullets.push(new am4charts.CircleBullet()); // Add legend chart.legend = new am4charts.Legend(); </script> <!-- HTML --> <div id="chartdiv"></div>
RAW data from SolarSchools.net
https://api.solarschools.net/v1/data/schemas/83/energy/feed?start=2020-10-14