how to use JSON Data in chart.js?

Question

hi i have been trying to use data from MYSQL database and use them to create graphical chart with chart.js. i encoded data into JSON data( through a php file name data1.php), now i need to convert these Json data back to array using Jquery or javascript.. i dont have much knowledge about AJAX.. so could u help me out??

data1.php produces JSON data as

[{"company_name":"project A","present_worth":"81531.946062978"},{"company_name":"project B","present_worth":"67313.916593765"},{"company_name":"project c","present_worth":"92440.723376746"}]

i need value of present_worth in an array

this is the script used to create bargraph.. instead of custom data (for eg data : [65,59,90,81,56,55,40])given here i want an array here with JSON data.

<script type="text/javascript">

        function bar(){

        var barChartData = {
            labels :["January","February","March","April","May","June","July"],datasets : [
                {
                    fillColor : "rgba(220,280,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : [65,59,90,81,56,55,40]

                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    data : [28,48,40,19,96,27,100]
                }
            ]
        };
    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
}
</script>

So you want to iterate through the JSON/Array and data (Chart.js) should be present_worth? — Wikunia
– Wikunia, Commented Jul 11, 2014 at 12:14
Have a look here: http://stackoverflow.com/questions/24682843/can-i-move-array-from-php-to-javascript-retrive-from-mysql-database/24683197#24683197 it's the same issue. — peter_the_oak
– peter_the_oak, Commented Jul 11, 2014 at 12:23
yea i want to use json data.. extract present_worth and save it in new array and use that array in place of data:[....] — Sajan Shakya
– Sajan Shakya, Commented Jul 14, 2014 at 15:11

Wikunia · Accepted Answer · 2014-07-11 12:28:33Z

7

I am not quite sure if you mean this:

var chartjsData = [];
for (var i = 0; i < json.length; i++) {
    chartjsData.push(json[i].present_worth);  
}

http://jsfiddle.net/rnX2Z/1/

Otherwise comment ;)

answered Jul 11, 2014 at 12:28

Wikunia

1,6021 gold badge18 silver badges38 bronze badges

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

Comments

Sabba Keynejad · Accepted Answer · 2015-04-01 09:05:05Z

1

So this a JSON data example,

var data = '{"name":"tom","Second":"smith","age":"20","height":"180"}'

Create a Variable to Parse the data

var obj9 = JSON.parse(data);

Then make another Variable to store your specific data. (.age, this is relative to your data set, eg .name, .height)

var cat = obj9.age;

Then you can use the the variable cat in your graph data.

data : [cat9,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

Hope that helps.

Find out more about JSON http://www.w3schools.com/json/default.asp

answered Apr 1, 2015 at 9:05

Sabba Keynejad

8,6412 gold badges29 silver badges22 bronze badges

Collectives™ on Stack Overflow

how to use JSON Data in chart.js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related