Testing ChartEditor

by Kennet Gliese

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
<button type="button" id="editButton">Edit chart</button>

JavaScript

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

function drawChartAndEditButton() {
    // Simulated data loaded from the database
    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 = 'LineChart';
    var options = { 'title': 'testing' };
    // This is string i get from the basebase, its basicly just the options runned throu JSON.stringify(). 
    var chartType = JSON.parse('{"hAxis":{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},"legend":"right","title":"Quarterly Performance view","vAxes":[{"title":null,"minValue":null,"maxValue":null,"useFormatFromData":true,"viewWindow":{"max":null,"min":null},"logScale":false},{"useFormatFromData":true,"viewWindow":{"max":null,"min":null},"minValue":null,"maxValue":null,"logScale":false}],"isStacked":false,"animation":{"duration":500},"booleanRole":"certainty","height":300,"width":600}')
    var chartWrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: data,
        options: options
    });
    chartWrapper.draw($('#chart_div')[0]);
 
    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() {
       ...