lundi 26 février 2018

Chart.js | Trouble refreshing line chart with "setInterval"

Wondering if anyone can help me out please.

I'm having trouble getting a Chart.js LineChart (with AJAX data) to refresh every "X" seconds. I've tried to put the code below in a function inside a setInterval and eventhough it does refresh, it redraws itself in a "zoomed-in" manner...

I want the chart to refresh itself every 10 seconds.

Code:

        $.ajax({
            type: "POST",
            url: '@Url.Action("ChartRT")',
            contentType: "application/json",
            dataType: "json",
            success:
            function (chartsdata_RT) {
                var aData = chartsdata_RT;
                var aLabels = aData.map(c => c.Period);
                var aDatasets1 = aData.map(c => c.FAILED);
                var aDatasets2 = aData.map(c => c.OTHER);
                var aDatasets3 = aData.map(c => c.DELIVERED);
                var aDatasets4 = aData.map(c => c.PENDING);
                var dataT = {
                    labels: aLabels,
                    datasets: [
                        {
                            label: "FAILED",
                            data: aDatasets1,
                            borderColor: '#ff0000',
                            backgroundColor: "rgba(255, 0, 0, 0.3)",
                            fill: 'true'
                        },
                        {
                            label: "OTHER",
                            data: aDatasets2,
                            borderColor: '#3366ff',
                            backgroundColor: "rgba(32, 162, 219, 0.3)",
                        },
                        {
                            label: "DELIVERED",
                            data: aDatasets3,
                            borderColor: '#009900',
                            backgroundColor: "rgba(0, 102, 0, 0.3)",
                        },
                        {
                            label: "PENDING",
                            data: aDatasets4,
                            borderColor: '#ff9900',
                            backgroundColor: "rgba(255, 153, 219, 0.3)",
                        }

                    ]
                };

                var ctx = $("#chart_last2hours").get(0).getContext("2d");
                ctx.canvas.height = "50";
                var myNewChart = new Chart(ctx, {
                    type: 'line',
                    data: dataT,
                    options: {
                        legend: {
                            display: true,
                            position: 'right',
                            fullWidth: false,
                            labels: {
                                fontColor: '#484848',
                                fontsize: 10,
                                boxWidth: 20,
                                padding: 5,
                                lineWideth: 0
                            }
                        }

                    }

                });
            }



        });




Aucun commentaire:

Enregistrer un commentaire