CODEWITHSUNDEEP
javascriptjqueryajax
Sam_West
Sam_West

Reputation: 31

Converting a Json value from a string to an integer

I am trying to convert a JSON string into an integer so that I can use this data in a google chart. As of right now I can only get one set of data to be displayed in my chart.

Here is my JQUERY code:

$("#shotsandbigcc").click(function(){
//alert("Button works");     

$("#shotsandbigcc_popup").toggle();

var integer = $("#shotsandbigcc").attr("name");
//alert("integer: " + integer);

$.ajax('includes/test.php', {
    type: 'POST',  // http method
    data: {myData: integer},// data to submit
    dataType: 'json',
    success: function(response){
        google.charts.load('current', {packages: ['corechart', 'bar']});
        google.charts.setOnLoadCallback(drawMultSeries);
        function drawMultSeries() {
            var len = response.length;
            for(var i=0; i<len; i++){
            var year = response[i].Year;
            var ontarget = parseInt(response[i].Shots_on_Target);
            var offtarget = parseInt(response[i].Shots_off_Target);
            alert(ontarget);
            }
            alert(year);
            var data = google.visualization.arrayToDataTable([
                ['Year', 'Shots on Target', 'Shots off Target'],
                [year, ontarget, offtarget],
                [year, ontarget, offtarget]
            ]);
            var options = {
                title: 'Shooting Accuracy',
                chartArea: {width: '50%'},
                hAxis: {
                    title: 'Amount of Shots',
                    minValue: 0
                    },
                vAxis: {
                    title: 'Year'
                }
            };

            var chart = new google.visualization.BarChart(document.getElementById('shotsandbigcc_chart'));
            chart.draw(data, options);
}
                        
}
});
});

The JSON data is in an array which has this format [{"Year":"2019/2020","Shots_on_Target":"302","Shots_off_Target":"578","Accuracy":"0.34"},{"Year":"2020/2021","Shots_on_Target":"74","Shots_off_Target":"93","Accuracy":"0.44"}]

If someone could tell me how I can display both 2019/2020 and 2020/2021 data to be displayed. I would be most grateful as right now only the 2020/2021 data is being displayed. Thank you.

Upvotes: 0

Views: 183

Answers (1)

DETSUP
DETSUP

Reputation: 107

For integet value part: 

var ontarget =  parseInt(response[i].Shots_on_Target);

For your data part:

var vizData = [];
vizData.push(['Year', 'Shots on Target', 'Shots off Target']);
for(var i=0; i<len; i++){
      var year = response[i].Year;
      var ontarget = parseInt(response[i].Shots_on_Target);
      var offtarget = parseInt(response[i].Shots_off_Target);
      vizData.push([year, ontarget, offtarget]);
      alert(ontarget);
     }
 alert(year);
 var data = google.visualization.arrayToDataTable(vizData);

explaination: since in the loop the values are getting updated in every iteration so, the 'year', 'ontarget' and 'offtarget' will have the latest values only. So on every iteration you have to store values so that they do not get overwritten. For that now this code is pushing in array in every iteration preserving the previous values. Which now you can use in the google.visualization function.

Happy Coding!

Upvotes: 1

Related Questions