Google chart formatting

I have the following script which I need to modify a little. Here is the json:

[
    {"User1":{"v": 50.00,"f": "£100"}},
    {"User2":{"v": 10.00,"f": "£20"}},
    {"User3":{"v": 10.00,"f": "£20"}},
    {"User4":{"v": 10.00,"f": "£20"}},
    {"User5":{"v": 20.00,"f": "£40"}}
]

and here is the script:

<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChartAjax);

    function drawChartAjax() {
        $.ajax({ 
            url: 'chart_json.aspx', 
            type: 'POST', 
            dataType: 'json', 
            success: function(data) { 
                drawChart(data); 
            } 
        });
    }

    function drawChart(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'User');
        data.addColumn('number', 'v');
        data.addRows(json.length);
        for(var j in json) {
            for(var k in json[j]) {
                data.setValue(parseInt(j), 0, k);
                data.setValue(parseInt(j), 1, json[j][k].v);
            }
        }
        var chart = new google.visualization.PieChart( document.getElementById('chart_div') );
        chart.draw(data, {width: 500, height: 300, is3D: true, title: 'Work In Progress'});
    }
</script>
</head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

This works by giving me a nice piechart, How do I get the "f" value into the chart too from the JSON data?

for(var k in json[j]) { data.setValue(parseInt(j), 0, k); data.setValue(parseInt(j), 1, json[j][k].v); data.setValue(parseInt(j), 2, parseInt(json[j][k].f.substring(1))); // <- new line }

I get a type mismatch error.

oshirowanen 2010-07-16 16:05:20

Ah - because the data is not numeric (because of the pound symbol). You can either make it numeric (server or client side), or change the data type for column f from 'number' to 'string'.

sje397 2010-07-16 16:20:05

I updated my answer to show how to insert that data keeping the 'number' data type. It just chops off the first character (the pound symbol) and then parses the string to an int.

sje397 2010-07-16 16:27:34

That works almost perfectly! But just need to display the "£" symbol too once the chart has been created. Is that possible at all?

oshirowanen 2010-07-22 09:26:29

Looks like I don't need the percentage in the json data, the google chart is able to work out the percentage automatically based on the £ value! But still need to display the £ symbol somehow.

oshirowanen 2010-07-22 09:37:30

The 'v' in `addColumn('number', 'v')` is the column name - so putting a pound symbol in there might help.

sje397 2010-07-22 10:20:12

Figured it out. var formatter = new google.visualization.NumberFormat({prefix: '£'});formatter.format(data, 1);

oshirowanen 2010-07-22 11:14:35

ansaurus

tags:

views:

answers:

Google chart formatting

related questions