CODEWITHSUNDEEP
javascriptphpgoogle-visualization
Divyang
Divyang

Reputation: 49

Stacked bar chart using google charts api

I have successfully made a google bar chart showing based on values from mysql. Now i want to make it stacked chart.

I have seen many examples and came through the fact that this effect is generated using the chart paramaeters like chco, cht, chd etc alongwith the charts api url, i.e., something like this:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

I was trying to make the chart using the basic method to make a bar chart using mysql, that is fetching data from mysql and encoding it in json and sending the same to chart script, like:

Chart Code:

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var json = $.ajax({
            url: 'get_json_rank.php', // make this url point to the data file
            dataType: 'json',
            async: false
        }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(json);
        var options = {
            legend: { position: 'none' },
            is3D: 'true',
            width: 500,
            height: 320,
            colors:['#4D515D'],
            hAxis: {
                textPosition:'none',
                title: "Restaurants"},
            vAxis: {
                title: "Business Growth",
                }
        };
        // Instantiate and draw our chart, passing in some options.
        //do not forget to check ur div ID
        var chart = new google.visualization.BarChart(document.getElementById('rank_chart'));
        chart.draw(data, options);

        setInterval(drawChart, 500 );
    }
</script>

I want to add the following parameters in the chart in which the php variables must be included as they represent the men and women ratio in the bar: 

        cht='bhs',
        chco='4D89F9','C6D9FD'
        chd='t:'+ <?php echo $a; ?> +'|'+ <?php echo $b;?>,
        chds='0,160'

Now can somebody let me know how to turn this simple bar graph into stacked. Any help wud be appreciated.

Upvotes: 1

Views: 1413

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

You get stacked bar chart using option:

isStacked: true

is3D: 'true' is option used for pie chart.

Options chco, cht, chd... are for image charts which are deprecated. See google Image charts

Upvotes: 1

Related Questions