Home forums Chart Support Synchronized charts Angular

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #32189

    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

    #32198

    @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

    #32199

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

    #32200

    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

    #32220

    @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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.