Home Forums Chart Support Cannot render the line chart

Cannot render the line chart

Viewing 2 posts - 1 through 2 (of 2 total)
  • #27952

    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, 10 months ago by laputatc. Reason: more detail
    #27977

    @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

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

You must be logged in to reply to this topic.