The chart editor, as seen in Spreadsheet visualizations, can become part of a coded visualization. With the chart editor option, users can set their own style and chart type preferences. The editor is the same editor used by Spreadsheets and Fusion Tables. To make chart editor an option, a button to open the editor must be created in the standard HTML form method.
<input type='button' onclick='openEditor()' value='Open Editor'>
The remaining methods to implement the editor are primarily the same as with other button-controlled charts.
However, one small programming requirement in addition to the editor-specific button itself, is to include the chartedit library package to be loaded by google.load.
google.load('visualization', '1', {packages:['charteditor']});To create the chart itself, the ChartWrapper class is used. Finally, to alert the application when the editor button has been pushed, an event listener is used. The creation of the listener is in the same form as other event handlers. The listener is created with the addListener code, and is encapsulated in its own function, openEditor().Since the Open Editor button has been defined as equal to 'openEditor()' and its onclick event in the <body> tag, pressing the Open Editor button will trigger addListener to execute the openEditor() function.
function openEditor() {
// Handler for the "Open Editor" button.
var editor = new google.visualization.ChartEditor();
google.visualization.events.addListener(editor, 'ok',
function() {
wrapper = editor.getChartWrapper();
wrapper.draw(document.getElementById('visualization'));
});
editor.openDialog(wrapper);
}The following is the complete HTML for a chart with editor capabilities. The data for this example is imported from a Google Spreadsheet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization with Editor
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['charteditor']});
</script>
<script type="text/javascript">
var wrapper;
//Use ChartWrapper to create chart
function init() {
wrapper = new google.visualization.ChartWrapper({
dataSourceUrl: 'https://docs.google.com/spreadsheet/tq?key=0AhnmGz1SteeGdEVsNlNWWkoxU3ZRQjlmbDdTTjF2dHc&range=A1%3AD20&headers=-1',
containerId: 'visualization',
chartType: 'SteppedAreaChart'
});
wrapper.draw();
}
function openEditor() {
// Handler for the "Open Editor" button.
var editor = new google.visualization.ChartEditor();
google.visualization.events.addListener(editor, 'ok',
function() {
wrapper = editor.getChartWrapper();
wrapper.draw(document.getElementById('visualization'));
});
editor.openDialog(wrapper);
}
google.setOnLoadCallback(init);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<input type='button' onclick='openEditor()' value='Open Editor'>
<div id='visualization' style="width:600px;height:400px">
</body>
</html>Note
You can have a look at the live example at http://gvisapi-packt.appspot.com/ch7-examples/ch7-editor.html.
You will have the chart editor documentation at https://developers.google.com/chart/interactive/docs/reference#google_visualization_charteditor.