javascriptangularjschartsgoogle-visualizationpygooglechart

Dynamic google charts configuration

We're planning to use google charts in our project and we use Angular JS for front end. (New to both Angular & Google charts)

Does Google chart provide any readymade UI for configuring each type of chart ?

If user select a chart type, it should show the user the configurations and once user selects , it is applied for that chart.

Ex:

  1. If Pie chart is selected "pieHole" field will be displayed.

  2. If bar chart is selected "isStacked" field will be displayed.

Thanks in advance :)

Solution

  • check out the ChartEditor Class

    The following working snippet opens a chart editor dialog with a populated pie chart

    When the chart editor opens, see the Customize tab for the various chart options

    Click "OK" to save the chart to a <div> on the page 

    google.charts.load('current', {
  callback: function () {
    var chartEditor = null;

    // Create the chart to edit
    var chartWrapper = new google.visualization.ChartWrapper({
      chartType: 'PieChart',
      dataTable: new google.visualization.DataTable({
        "cols": [
          {"label": "Country", "type": "string"},
          {"label": "# of Devices", "type": "number"}
        ],
        "rows": [
          {"c": [{"v": "Canada"}, {"v": 33}]},
          {"c": [{"v": "Mexico"}, {"v": 33}]},
          {"c": [{"v": "USA"}, {"v": 34}]}
        ]
      })
    });
    chartEditor = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
    chartEditor.openDialog(chartWrapper, {});

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('chart_div'));
    }
  },
  packages:['charteditor', 'controls']
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>