Loading json into chart.js

Question

I want to load jsonData via ajax into a chart.js object.

My problem is by refering the jsondata as string to chart.js

I think the ajax().responseText retrieves a string but chart.js data expects an array?

I'm doing the same with google chart and it works very well.

Here is my code:

<html>
    <head>
    <script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="./jslib.js"></script>
    <script type="text/javascript" src="./Chart.min.js"></script>
    </head>

    <body>
        <div class="container">
          <h2>Chart Test</h2>
          <div>
            <canvas id="myChart"></canvas>
          </div>
        </div>
         <script type="text/javascript">
            var jsonData = $.ajax({
                type: "POST",
                data: { "ibrconfig_id": 26}, 
                url: "./ibrlib.php",
                dataType:"json",
                async: false
                }).responseText;   
            //document.write(jsonData);//   this returns: { labels: ["1","2"], datasets: [ { label: "Taster", data: [0,0], backgroundColor: "rgba(153,255,51,0.6)" } ] }    
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, 
            {
                type: 'bar',
                data: jsonData
            });

            /*
            This works very fine
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, 
            {
                type: 'bar',
                data: { labels: ["1","2"], datasets: [ { label: "Taster", data: [0,0], backgroundColor: "rgba(153,255,51,0.6)" } ] }
            }); 
            */      
        </script>
    </body>
</html>

How can I handle this? Thank you very much for your time!

Julian · Accepted Answer · 2017-03-03 10:45:10Z

1

Ok I got it. thank you andr1o

my jsonData was wrong.

{ labels: ["1","2"], datasets: [ { label: "Taster", data: [0,0], backgroundColor: "rgba(153,255,51,0.6)" } ] }

no i changed it to

 { "labels": ["1","2"], "datasets": [ { "label": "Taster", "data": [0,0], "backgroundColor": "rgba(153,255,51,0.6)" } ] }

answered Mar 3, 2017 at 10:45

Julian

273 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andr1o · Accepted Answer · 2017-03-03 10:09:14Z

0

Use JSON.parse(jsonData) to make an Object from json string

answered Mar 3, 2017 at 10:09

andr1o

2693 silver badges7 bronze badges

2 Comments

Julian Over a year ago

doesn't work ... var objData = JSON.parse(jsonData); type: 'bar', data: objData

andr1o Over a year ago

can you show contents of objData? you can use console.log(objData) for that, you'll output in web inspector

Collectives™ on Stack Overflow

Loading json into chart.js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related