Synchronized charts Angular

[quentinR]

Hello everyone, I just discovered your very usefull chart library and I’m able to create dynamically some charts but after 3 hours trying to make the “rangeChanged” options to sync my charts it still not working.

The thing is that, like i said before, i’m generating my charts dynamically inside a for loop and I’m pushing them inside a charts array.

 
    charts : CanvasJS.chart[] = [];

    ngAfterViewInit() {
        this.drawChart();
    }

drawChart(){
for (var a = 0; a < 4; a++) {
                    let chartTemp = new CanvasJS.Chart("chartContainer" + a, {
                        zoomEnabled: true,
                        animationEnabled: true,
                        exportEnabled: true,
                        axisY: {
                            stripLines: [
                                {
                                    value: maxValueTemp,
                                    label: "Max : " + maxValueTemp + " " + this.sensor.channels[a].unit.unitInit,
                                },
                                {
                                    value: minValueTemp,
                                    label: "Min : " + minValueTemp + " " + this.sensor.channels[a].unit.unitInit,
                                }
                            ],
                            valueFormatString: "####"
                        },
                        data: [
                            {
                                type: "line",
                                dataPoints: dataPointsList[a]
                            }],
                        rangeChanged: this.syncHandler,
                        options: {
                            scales: {
                                xAxes: [{
                                    type: 'time',
                                    time: {
                                        unit: 'month'
                                    }
                                }]
                            }
                        }
                    });
                    this.charts.push(chartTemp);
                    chartTemp.render();               
            }
} 

 syncHandler(e) {
        console.log(this.charts); // error message "charts contains only undefined element"
        for (var i = 0; i < this.charts.length; i++) {
            var chart = this.charts[i];
            
            if (!chart.options.axisX)
                chart.options.axisX = {};

            if (!chart.options.axisY)
                chart.options.axisY = {};

            if (e.trigger === "reset") {

                chart.options.axisX.viewportMinimum = chart.options.axisX.viewportMaximum = null;
                chart.options.axisY.viewportMinimum = chart.options.axisY.viewportMaximum = null;

                chart.render();

            } else if (chart !== e.chart) {

                chart.options.axisX.viewportMinimum = e.axisX[0].viewportMinimum;
                chart.options.axisX.viewportMaximum = e.axisX[0].viewportMaximum;

                chart.options.axisY.viewportMinimum = e.axisY[0].viewportMinimum;
                chart.options.axisY.viewportMaximum = e.axisY[0].viewportMaximum;

                chart.render();

            }
        }
    }

The problem is that the syncHandler function is getting an array with undefined elements and I cant figure it out

Thanks for your help

[Indranil]

@quentinr,

In the code sample that you have shared, syncHandler() is being called using regular functions, for which this keyword will represent the object that called the function, which is chart object in your case. As chart object doesn’t have the definition for charts it is being shown as undefined. Using arrow function to call syncHandler method should work fine in your case as this keyword refers to class AppComponent on using arrow function. Please refer to this tutorial for more information on the same. Also kindly check this StackBlitz demo for updated code.

___________
Indranil Deo
Team CanvasJS

[quentinR]

It works :)
Thanks for your help and your explanation it really helped me

[quentinR]

Just one more thing, is it possible to update striplines on syncHandler()? Like getting the dataPoints array of the current view.
I updated your stackblitz to give you an example of what I am trying to do.
https://stackblitz.com/edit/canvasjs-sync-charts-evxlxp?file=src/app/app.component.ts

[Indranil]

@quentinr,

On zooming/panning you can find the maximum and minimum value within the current viewport and update the stripLines with the same value using set(). Please take a look at this updated Stackblitz.

___________
Indranil Deo
Team CanvasJS