Cannot render the line chart

[laputatc]

Hi all :

I would like to render the somple line chart, but failure , it only show the chart and no line inside , the below is my code:
at in viewer

$('#cmdGenChart').on('click', function () {
         var url = '@Url.Action("GetElecticChartList", "Home")';
            $.post(url, { datefr: $("#txtDateFr").val(), dateto: $("#txtDateTo").val() },
                function (data) {
                    console.log(JSON.stringify(data));
// Sample output : [{"x":"2019-12-01T17:53:37.35","y":4314.67000004776},{"x":"2019-12-01T18:15:25.333","y":4327.71000004804},{"x":"2019-12-01T17:50:16.75","y":4312.67000004771},{"x":"2019-12-01T17:55:12.653","y":4315.62000004778},{"x":"2019-12-01T17:58:32.257","y":4317.61000004782},{"x":"2019-12-01T17:58:33.257","y":4317.62000004782},{"x":"2019-12-01T18:00:14.56","y":4318.63000004785}]

                    dataPoints = data;

                    chart = new CanvasJS.Chart("chartContainer", {
                        animationEnabled: true,
                        theme: "light1",//light1

                        title: {
                            text: "Alliance PLC Real Time Chart"
                        },
                        axisY: {
                            title: "Voltage / Amp (m)"
                        },
                        axisX: {
                            title: "Run Time",
                            valueFormatString: "HH:mm:ss"
                        },
                        data: [
                          {
                            // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
                            type: "line",
                            xValueFormatString: "HH:mm:ss",
                            xValueType: "dateTime",
                            dataPoints: dataPoints
                          }
                        ]
                    });

                    chart.render();
        
                },'json')
});

from my sample data , it is

[{"x":"2019-12-01T17:53:37.35","y":4314.67000004776},{"x":"2019-12-01T18:15:25.333","y":4327.71000004804},{"x":"2019-12-01T17:50:16.75","y":4312.67000004771},{"x":"2019-12-01T17:55:12.653","y":4315.62000004778},{"x":"2019-12-01T17:58:32.257","y":4317.61000004782},{"x":"2019-12-01T17:58:33.257","y":4317.62000004782},{"x":"2019-12-01T18:00:14.56","y":4318.63000004785}]

Is that something is wrong ? thank you

• This topic was modified 4 years, 3 months ago by laputatc. Reason: more detail

[Manoj Mohan]

@laputatc,

The x value that you are passing in the dataPoints is a string and it accepts only numeric or date Object. Passing x value as a numeric or date object should work fine in your case.

—-
Manoj Mohan
Team CanvasJS