Bar Chart not displaying when using chart.js

Question

I am trying to display a bar chart using chart.js.

The data JSON is in another file called barchart.txt from where I am reading it in my function. It looks like the format of data is incorrect because when I put alert on first line of function, even that doesn't work.

Both barchart.txt and Default.aspx are at same location.

barchart.txt

{
       labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
    {
              label: "Dataset Testing",
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
              ],
        borderWidth: 1,
        data: [65, 59, 80, 81, 56, 55, 40],
    }
       ]
}

Default.aspx

<html>
    <canvas id="mybarChart1"></canvas>
</html>

<script>
    $.getJSON("barchart.txt", function (data)
            {
                alert("here");
                var ctx = document.getElementById("mybarChart1");
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: data,
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            });
</script>

I have pasted code of barchart.txt above. I am just learning JSON so I did another example json2.txt in which I wrote some sample data and reading it and it works fine. Similarly if I copy paste JSON from barchart.txt to Default.aspx and save it in variable like var mydata = {whole data here} then it works fine. — Frank Martin
– Frank Martin, Commented Apr 20, 2017 at 14:43

ɢʀᴜɴᴛ · Accepted Answer · 2017-04-20 15:26:09Z

The issue solely lies in your barchart.txt , Obviously, that's not a valid JSON object. A proper JSON object would look something like, {"key": "string"} , you can refer here to learn more about JSON.

also, you should probably change your barchart file's extension from .txt to .json

so, the data inside your barchart.json file should look like this ...

{
    "labels": ["January", "February", "March", "April", "May", "June", "July"],
    "datasets": [{
        "label": "Dataset Testing",
        "backgroundColor": [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1,
        "data": [65, 59, 80, 81, 56, 55, 40]
    }]
}

Gyunesh Shefkedov · Accepted Answer · 2017-04-20 15:26:13Z

Your json is not valid. You can validate it here http://jsonlint.com/

{
"labels": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July"
],
"datasets": [
    {
        "label": "Dataset Testing",
        "backgroundColor": [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1,
        "data": [
            65,
            59,
            80,
            81,
            56,
            55,
            40
        ]
    }
]}

Try with the above json

Collectives™ on Stack Overflow

Bar Chart not displaying when using chart.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related