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