CODEWITHSUNDEEP
javascriptapigoogle-visualization
Phil Jackson
Phil Jackson

Reputation: 10288

Google Chart API - using JS to dynamicaly add data

Morning, I have the data hidden in the page but im not sure how to add it to the addRows function.

This is what I have:

    google.load("visualization", "1", {packages:["corechart"]});
$(document).ready(function(){
    var rowArray = [];
    $('input[name=device_name]').each(function(i){
        var name = $(this).val();
        var amount = $(this).next().val();
        rowArray.push(["'" + name + "'", amount]);
    });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Device');
        data.addColumn('number', 'Amount');
        data.addRows( rowArray );
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {
            width: 600, 
            height: 340, 
            title: 'Handheld Device Usage',
            hAxis: {
                title: 'Mobile Device Name', 
                titleTextStyle: {
                    color: '#404040'
                }
            }
        });
    }
});

Can anyone see where im going wrong?

Regards,

Phil

Upvotes: 0

Views: 7082

Answers (2)

pleasedontbelong
pleasedontbelong

Reputation: 20102

the problem is that amount is a string... I've seen that you're using a js framework so you could probably make a console.log(rowArray); to debug.

a good way to correct that would be if you change this:

var amount = $(this).next().val().toInt();

I've tested it http://jsfiddle.net/TfsFT/1/ and its working. Although i had to change a few things cause i was using Mootools.. and i didn't have the html code :P

Good Luck!

Upvotes: 1

joostschouten
joostschouten

Reputation: 3893

Maybe this will work:

$('input[name=device_name]').each(function(i){
        var name = $(this).val();
        var amount = ($(this).next().val() * 1);
        rowArray.push([name, amount]);
});

Upvotes: 2

Related Questions