jeudi 7 mai 2020

How to make AmCharts work with External Data Source in Ember Glimmer Component?

Has anyone managed to get an AmCharts trend working on an external data source in an Ember Glimmer component?

I can make it work with static data (exactly the same as response from WebAPI), but on an external data source the chart never loads the data.

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);

export default class TrendComponent extends Component {




    render() {


        let chart = am4core.create("chartdiv", am4charts.XYChart);
        chart.paddingRight = 20;


        chart.dataSource.url = 'https://localhost/plot';


        let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.renderer.grid.template.location = 0;


        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.tooltip.disabled = true;
        valueAxis.renderer.minWidth = 35;

        let series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.dateX = "Timestamp";
        series.dataFields.valueY = "Value";

        chart.cursor = new am4charts.XYCursor();

        let scrollbarX = new am4charts.XYChartScrollbar();
        scrollbarX.series.push(series);
        chart.scrollbarX = scrollbarX;

      }



Aucun commentaire:

Enregistrer un commentaire