0

I have a problem while making a CanvasJS chart. "Uncaught SyntaxError: invalid date" show up.

I am fetching data from csv file. Data in this file looks like that:

2020-07-11T23:11:52,23.45

2020-07-14T21:06:39,25.02

2020-07-14T21:08:05,25.07

2020-07-14T21:10:00,25.13

2020-07-14T21:12:10,25.04

I also wanna make datepicker, but the chart does not wanna show up.

getData()

    var dataPoints = [];
    var xlabels = [];

    var chart;
    chart = new CanvasJS.Chart("chartContainer",
        {
            title: {
                text: "Chart "
            },
            data: [
                {
                    type: "line",
                    dataPoints: xlabels
                }
            ]
        });
    chart.render();

    var axisXMin = chart.axisX[0].get("minimum");
    var axisXMax = chart.axisX[0].get("maximum");


    async function getData(){

        var response =await fetch('data.csv');
        var data = await response.text();
        var table = data.split('\n').slice(1);
        table.forEach(row =>{
            var columns = row.split(',');
            var date = new Date(columns[0]);
            var xValue = date;
            var yValue = columns[1];

            xlabels.push(date);
            dataPoints.push({
                x: xValue,
                y: yValue
            });

        });


    }


    $( function() {
        $("#fromDate").val(CanvasJS.formatDate(axisXMin, "DD MMM YYYY"));
        $("#toDate").val(CanvasJS.formatDate(axisXMax, "DD MMM YYYY"));
        $("#fromDate").datepicker({dateFormat: "d M yy"});
        $("#toDate").datepicker({dateFormat: "d M yy"});
    });

    $("#date-selector").change( function() {
        var minValue = $( "#fromDate" ).val();
        var maxValue = $ ( "#toDate" ).val();

        if(new Date(minValue).getTime() < new Date(maxValue).getTime()){
            chart.axisX[0].set("minimum", new Date(minValue));
            chart.axisX[0].set("maximum", new Date(maxValue));
        }
    });

    $(".period").click( function() {
        var period = this.id;
        var minValue;
        minValue = new Date(axisXMax);

        switch(period){
            case "1m":
                minValue.setMonth(minValue.getMonth() - 1);
                break;
            case "3m":
                minValue.setMonth(minValue.getMonth() - 3);
                break;
            case "6m":
                minValue.setMonth(minValue.getMonth() - 6);
                break;
            case "1y":
                minValue.setYear(minValue.getFullYear() - 1);
                break;
            default:
                minValue = axisXMin;
        }

        chart.axisX[0].set("minimum", new Date(minValue));
        chart.axisX[0].set("maximum", new Date(axisXMax));
    });
 #update-nav {
            width: 100%;
            height: 30px;
        }
        #range-selector {
            width: 50%;
            float: left;
        }
        #date-selector {
            width: 50%;
            float: right;
        }
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="update-nav">
    <div id="range-selector">
        <input type="button" id="1m" class="period ui-button" value="1m" />
        <input type="button" id="3m" class="period ui-button" value="3m"/>
        <input type="button" id="6m" class="period ui-button" value="6m"/>
        <input type="button" id="1y" class="period ui-button" value="1y"/>
        <input type="button" id="all" class="period ui-button" value="All"/>
    </div>
    <div id="date-selector" class="">
        From:<input type="text" id="fromDate"  class="ui-widget">
        To:<input type="text" id="toDate"  class="ui-widget">
    </div>
</div>
<br/>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

1 Answer 1

0

Problem resolved:

Change datapoints to something else and use it in datapoint, and parse the y-value to float using parseFloat() and rendering the chart inside getData() should work fine in your case.

var dps = []; var xlabels = [];

var chart;
chart = new CanvasJS.Chart("chartContainer",{
    title: {
        text: "Chart with Date Selector"
    },
    data: [
        {
            type: "line",
            dataPoints: dps
        }
    ]
});


var axisXMin, axisXMax;


async function getData(){

    var response =await fetch('data.csv');
    var data = await response.text();
    var table = data.split('\n').slice(1);
    table.forEach(row =>{
        var columns = row.split(',');
        var date = new Date(columns[0]);
        var xValue = date;
        var yValue = parseFloat(columns[1]);
        console.log(columns[0]);
        xlabels.push(date);
        dps.push({
            x: xValue,
            y: yValue
        });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.