replace one amchart with another

Admin 1
Viewed 45

Currently, I have this amchart below.

enter image description here

And I want to create another amchart with the same values. (I just want to replace the graph).

The new graphic is here -> https://www.amcharts.com/demos/line-graph/?theme=material#code

my code Angular:

prepareDataForTemplate(res) {
    this.showLineChart = false;
    if (res.RETURNCODE == 'OKK00') {
        this.lines = [];


        this.dataForChart.data.splice(0, this.dataForChart.data.length);
        this.dataForChart.date.splice(0, this.dataForChart.date.length);
        this.dataForChart.data.push(...res.HISTDEV.VALUE.map(x => x.COURS));
        this.dataForChart.date.push(...res.HISTDEV.VALUE.map(x => x.DATE));
        this.showLineChart = true;

        if (res.HISTDEV.VALUE.length > 0) {
            this.yMin = res.HISTDEV.VALUE[0].COURS;
            this.yMax = res.HISTDEV.VALUE[0].COURS;
            res.HISTDEV.VALUE.map(value => {
                if (value.COURS < this.yMin) {
                    this.yMin = value.COURS;
                }
                if (value.COURS > this.yMax) {
                    this.yMax = value.COURS;
                }
            })
        }


        this.loadChart();


    } else {

    }

}

Then, the method loadChart(), it is the graph that I want to change...

loadChart() {
    let datePipe = this.datePipe;
    let decimalPipe = this.decimalPipe;
    let leleuxNumPipe = this.leleuxNumPipe;

    this.lineChartReturn = {
        tooltip: {
            trigger: 'axis',
            position: function(pt) {
                return [pt[0], '10%'];
            },

            formatter: function(params) {
                return datePipe.transform(params[0].name) + "<br/>" +
                    params[0].marker + " " +
                    params[0].seriesName + " <b>" +
                    leleuxNumPipe.transform(decimalPipe.transform(params[0].value, '1.2-2')) + "</b";
            }


        },
        title: {
            left: 'center',
            text: '',
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            //show: true,
            data: this.dataForChart.date,

            axisLabel: {
                formatter: function(value, index) {
                    return datePipe.transform(value);
                }
            }
        },
        yAxis: {
            type: 'value',
            min: this.yMin,
            max: this.yMax,
            //show: true
            axisLabel: {
                formatter: function(value, index) {
                    return leleuxNumPipe.transform(decimalPipe.transform(value, '1.2-2'))
                }
            }
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
        }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [{
            name: 'Amount',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                color: 'rgba(255, 152, 0, .6)', // 'rgb(255, 70, 131)'
            },
            areaStyle: {
                color: 'rgba(255, 152, 0, 0.15)',
                origin: 'start'
            },
            lineStyle: {
                // width: 1,
                color: 'rgba(255, 152, 0, .6)',
            },
            data: this.dataForChart.data,
        }, ]


    };
}

In the doc amchart -> https://www.amcharts.com/demos/line-graph/?theme=material#code

I don't understand how to I adapt the code from amcharts with my method loadchart() ?

Sorry, if I ask you a lot

angular typescript javascript
1 Answers

I'm pretty new to amcharts myself, but I'll give it a try.

First, I'm assuming that if you have a chart that you want to replace, you can save a reference to it, that would look something like this:

  private chart: am4charts.XYChart;

And when you create your chart for the first time, wherever it is, you can do somthing like this:

this.chart = am4core.createFromConfig(this.lineChartReturn, 'htmlIdReference', am4charts.XYChart);

If your setup looks something like that, then you should be able to just use the dispose function, and then create it again with the new lineChartReturn you generate in loadChart

loadChart() {
    if (this.chart) {
        this.chart.dispose();
    }

    // your current code to generate new this.lineChartReturn

    // Then just create it again using the createFromConfig
    this.chart = am4core.createFromConfig(this.lineChartReturn, 'htmlIdReference', am4charts.XYChart);
}
user_91194880
Related