Googol charts: how to use getcharttype()

Question

Thank you for your answer... I'm ALMOST there :) I declared wrapper as global var, I used the getChartType method but still I'm not getting what I need.

so I have these 2 functions now:

var wrapper

function loadEditor() {
  // Create the chart to edit.
  var table = new google.visualization.Table(document.getElementById('table_div'));

if (sorttest == 1) {
    var data = new google.visualization.DataTable(<?=$jsonTableA01?>)
} else {
    var data = new google.visualization.DataTable(<?=$jsonTableB01?>)
}



  wrapper = new google.visualization.ChartWrapper({

     dataTable: data,
     left:1,
     options: {
     'chartArea': {width: '60%', left: 45},
     'legend' :'none',

     'title':'Number of Newly Opened Roles per <?echo $_SESSION['Display']?>'
     }

  });


  chartEditor = new google.visualization.ChartEditor();
  google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
  chartEditor.openDialog(wrapper, {});
 }

 function sortABC() {

  var table = new google.visualization.Table(document.getElementById('table_div'));
 var CurrChartType = wrapper.getChartType();
sorttest = 1;

  var data = new google.visualization.DataTable(<?=$jsonTableA01?>);
 var wrapper = new google.visualization.ChartWrapper({
    'chartType': CurrChartType,
     dataTable: data,
     left:1,
     options: {
     'chartArea': {width: '60%', left: 45},
     'legend' :'none',

     'title':'Number of Newly Opened Roles per <?echo $_SESSION['Display']?>'
     } 
  });

I get an error on the 2nd line of sortABC()

     var CurrChartType = wrapper.getChartType();

but have no idea why...

please help Bro.. :)

Answer 1

You could determine the chart type using google.visualization.ChartWrapper.getChartType method. In your case you could declare wrapper as global variable (it will be initialized once google.visualization.ChartWrapper is created) to make it accessible in sortABC function. Then you could get current chart type.

The following example demonstrates how to get/set chart type of Google Chart.

Complete example

google.load('visualization', '1.0', { packages: ['charteditor'] });
google.setOnLoadCallback(loadEditor);
var chartEditor = null;
var wrapper = null;

function loadEditor() {
    // Create the chart to edit.
    wrapper = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'dataSourceUrl': 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
        'query': 'SELECT A,D WHERE D > 100 ORDER BY D',
        'options': { 'title': 'Population Density (people/km^2)', 'legend': 'none' }
    });

    chartEditor = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
    chartEditor.openDialog(wrapper, {});
}

// On "OK" save the chart to a <div> on the page.
function redrawChart() {
    chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    initChartPanel();
}



function initChartPanel() {
    document.getElementById('chartpanel_div').style.visibility = 'visible';
    var chartTypes = chartEditor.getChartTypes();
    var select = document.getElementById('charttypes_select');
    for (var i = 0; i < chartTypes.length; i++) {
        var opt = document.createElement('option');
        opt.innerHTML = chartTypes[i];
        opt.value = chartTypes[i];
        select.appendChild(opt);
    }
    document.getElementById('chart_info').innerHTML = wrapper.getChartType();
}


function changeChartType(sel) {
    var chartType = sel.value;
    wrapper.setChartType(chartType);
    wrapper.draw(document.getElementById('vis_div'));
    document.getElementById('chart_info').innerHTML = wrapper.getChartType();
}

 #chart_info {
            font-weight: bold;
 }

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart_panel" id="chartpanel_div" style=" visibility: hidden" >
            <select id="charttypes_select" onchange="changeChartType(this)"></select>
            Current Chart Type:<span id="chart_info"></span>
</div>
          
<div id="vis_div" style="height: 400px; width: 600px;"></div>