CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
SNAG
SNAG

Reputation: 2113

Google Charts Pie Chart always showing 100%

I am using the following code to to draw a piechart. problem is it is always showing a full circle. The code works fine for a line chart (commented). Is the data format that I'm using wrong in someway? JSFiddle here

   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var json_data = new google.visualization.DataTable('{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":"5","f":null}]},{"c":[{"v":"Medium","f":null},{"v":"101","f":null}]},{"c":[{"v":"Light","f":null},{"v":"18","f":null}]}]}');

        //var chart = new google.visualization.LineChart(document.getElementById('donutchart'));
        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        var options = {
            title: '',
            chartArea: {
                left: 40,
                top: 10,
                width: "90%",
                height: "80%"
            },
            legend: {
                position: "none"
            },
            colors: ['#468ba9', "#67696c"],
            pieHole: 0.4,
        };
        chart.draw(json_data, options);

    }
</script>
<body>
    <div id="donutchart" style="width: 300px; height: 300px;"></div>
</body>

EDIT: I would need a solution with json data as I cannot change to input data

Upvotes: 1

Views: 1421

Answers (2)

SNAG
SNAG

Reputation: 2113

As per dlaliberte's comment, though i had declared "Deals" to be of type number, the data passed was of type string.

Thus 

{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":"5","f":null}]},{"c":[{"v":"Medium","f":null},{"v":"101","f":null}]},{"c":[{"v":"Light","f":null},{"v":"18","f":null}]}]}

should become

{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":5,"f":null}]},{"c":[{"v":"Medium","f":null},{"v":101,"f":null}]},{"c":[{"v":"Light","f":null},{"v":18,"f":null}]}]}

JS Fiddle: http://jsfiddle.net/Hzr47/2/

Upvotes: 1

Ash
Ash

Reputation: 2605

This is because you tried to trick google !!

I just changed your data in to a more simpler collection. Also, I took the liberty to add one extra colour for your third pie in this case.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {

 var json_data = google.visualization.arrayToDataTable([
      ['Class', 'Deals'],
      ['Heavy',     5],
      ['Medium',      101],
      ['Light',  18]
    ]);


    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    var options = {
        title: '',
        chartArea: {
            left: 40,
            top: 10,
            width: "90%",
            height: "80%"
        },
        legend: {
            position: "none"
        },
        colors: ['#468ba9', "#67696c", "#6cc96c"],
        pieHole: 0.4,
    };
    chart.draw(json_data, options);

}
</script>
<body>
<div id="donutchart" style="width: 300px; height: 300px;"></div>
</body>

Upvotes: 0

Related Questions