Google Charts: Switching between Line and Column charts

StackOverflow https://stackoverflow.com/questions/21170147

Question

I have a dashboard with some Google Analytics metrics being pulled in. I want to chart these metrics on a Day-By-Day, Month-By-Month, and Week-By-Week chart. The Day-By-Day chart in a Line Chart, but the others are Column Charts.

I'm able to get the chart to draw initially as a Line or Bar Chart, and then get it to redraw as a different type, but after that it won't redraw again!

This is a basic, simplified example I've set up to explain my situation:

<!DOCTYPE html>


<head>
    <title>Test</title>

     <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});

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

        function initialize() {

            var chart = new google.visualization.ColumnChart(document.getElementById('chart-div'));
            var line = new google.visualization.LineChart(document.getElementById('chart-div'));
            var data = [];
            data[0] = new google.visualization.DataTable();

            data[0].addColumn('string', 'x');
            data[0].addColumn('number', 'A');
            data[0].addColumn('number', 'B');
            data[0].addRow(['A', 123, 40]);
            data[0].addRow(['B', 17, 20]); 

            data[1] = new google.visualization.DataTable();

            data[1].addColumn('string', 'x');
            data[1].addColumn('number', 'C');
            data[1].addColumn('number', 'D');
            data[1].addRow(['C', 222, 13]);
            data[1].addRow(['D', 542, 80]); 

            var options = {
                width: 400,
                height: 240,
                vAxis: {minValue:0, maxValue:1000},
                animation: {
                    duration: 1000,
                    easing: 'out'
                }
            };

            var barsButton = document.getElementById('b1');
            var lineButton = document.getElementById('b2');

            function drawChart() {
                chart.draw(data[0], options);
            }

            function drawLine() {
                line.draw(data[1], options);
            }

            barsButton.onclick = function() {
                drawBars();
            }

            lineButton.onclick = function() {
                drawLine();
            }

            drawChart();
        }
    </script>
</head>

<body>
    <input type = 'button' id = 'b1' value = 'Draw Column Chart' />
    <input type = 'button' id = 'b2' value = 'Draw Line Chart' />
    <div id="chart-div"></div>
</body>

Was it helpful?

Solution

You should use the ChartWrapper object

This way you only need one charting object

 var chart = new google.visualization.ChartWrapper({
     containerId: 'chart-div'
 });

and then you can change its type with the .setChartType method

 var barsButton = document.getElementById('b1');
 var lineButton = document.getElementById('b2');

 chart.setOptions(options);

 function drawBars() {
     chart.setChartType('ColumnChart');
     chart.setDataTable(data[0]);
     chart.draw();
 }

 function drawLine() {
     chart.setChartType('LineChart');
     chart.setDataTable(data[1]);
     chart.draw();
 }

 barsButton.onclick = function () {
     drawBars();
 }

 lineButton.onclick = function () {
     drawLine();
 }
 drawBars();

Demo at http://jsfiddle.net/gaby/Xmj6j/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top