I would like to update/modify an existing google chart's options. Let's say I want to apply new options to an existing chart on a button click.
When the button "Modify Chart" is clicked, the chart options are updated (e.g. new colors are set).
What is strange is that the chart type is changed from a Combo Chart to a Line chart. Why is this happening? Even if I pass chartType: 'ComboChart' in the options, the chart type is still changed.
Help much appreciated.
function nuChart(d, t, a, h, x, y, st, is) {
let obj = document.getElementById(d);
if (obj == null) return;
a = eval(a);
if (a.length === 0) { return; }
try {
google.charts.load('current', { 'packages': ['corechart'] });
} catch (error) {
return;
}
google.charts.setOnLoadCallback(drawVisualization);
if (a == '') { return; }
function drawVisualization() {
if (a === undefined) { return; }
let data = google.visualization.arrayToDataTable(a);
let wrapper = new google.visualization.ChartWrapper({
chartType: t,
dataTable: data,
containerId: d,
options: {
title: h,
vAxis: { title: y },
hAxis: { title: x },
seriesType: st,
isStacked: is,
}
});
wrapper.draw();
window[d + '_wrapper'] = wrapper;
}
}
function nuTestChart() {
let a = [
['Month', 'Shane', 'Dave', 'Adam', 'Paul', 'Chris'],
['2019', 100, 200, 300, 400, 500],
['2020', 165, 238, 322, 498, 550],
['2021', 165, 938, 522, 998, 450],
['2022', 135, 1120, 599, 1268, 288]
];
nuChart('google_chart', 'ComboChart', a, 'title', '', '', 'bars', false);
}
nuTestChart();
function nuModifyChart() {
let wrapper = window["google_chart_wrapper"];
wrapper.setOptions({
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
});
wrapper.draw();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button onclick="nuModifyChart()">Modify Chart</button>
<div id="google_chart" data-nu-tab="8" data-nu-form="" class="nuHtml" data-nu-access="0" style="top: 38px; width: 450px; height: 192px; position: absolute; visibility: visible;"></div>The chart type is not changed but the series type (which is still a mystery) Setting the "seriesType" again in the options, will fix it.
wrapper.setOptions({
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
,seriesType: wrapper.m.seriesType
});