Testing ChartEditor

by dlaliberte

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" ></div>
<button type="button" id="editButton">Edit chart</button>

JavaScript

google.charts.load("visualization", "current", {
    packages: ["corechart", "charteditor"]
});
google.charts.setOnLoadCallback(drawChartAndEditButton);

function drawChartAndEditButton() {

    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
    ]);
    var chartType = 'ColumnChart';
    var options = { 'title': 'testing' };
    var chartWrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        containerId: 'chart_div',
        dataTable: data,
        options: options,
        view: { columns: [0, 1, 2] }
    });
    chartWrapper.draw();
 
    var chartEditor = new google.visualization.ChartEditor();
  
    redrawChartEditor = function () {
        // Modify current chartWrapper.
        chartWrapper = chartEditor.getChartWrapper(); 
        
        // This should not be necessary
        var chartOptions = chartWrapper.getOptions();
        chartWrapper.setOptions(chartOptions);
        
        chartEditor.getChartWrapper().draw();
    };
    
    google.visualization.events.addListener(chartEditor, 'ok',
                                            redrawChartEditor);
    
    function editChart() {
        chartEditor.openDialog(chartWrapper, {});
    }
    
    document.getElementById('editButton').onclick = editChart;
    
}