alexxlagutin
commented
4 years ago Hi @ljcag If this issue is still relevant, please provide your vue-google-charts code example
Open ljcag opened 4 years ago
alexxlagutin
commented
4 years ago Hi @ljcag If this issue is still relevant, please provide your vue-google-charts code example
ljcag
commented
4 years ago I used GCharts like this:
<template>
<div class="jumbotron-fluid">
<div class="d-flex flex-wrap flex-md-nowrap pt-4">
<h1>Dashboard</h1>
</div>
<div class="well">
<GChart
:settings="{ packages: ['calendar']}"
type="Calendar"
:options="{colorAxis: {minValue: 0}}"
:data="chartData"
/>
</div>
</div>
</template>
<script>
import { GChart } from 'vue-google-charts';
export default {
name: 'Dashboard',
components: {
GChart
},
data: function() {
return {
chartData: []
}
},
created () {
this.fetchChartData()
},
methods: {
fetchChartData () {
fetch('//127.0.0.1/api/getChartData')
.then( async (response) => {
let chartData = await response.json();
chartData.forEach((element, index) => {
chartData[index][0] = new Date(element[0]);
});
this.chartData = chartData;
})
.catch((error) => {
console.error(error);
})
}
}
}
</script>This works fine, but after moving to another view in my Single-Page-Application and resizing the window / opening the dev tools, Vue crashes. I don't think the issue lies in your wrapper, as your component is properly destructed, I think the problem is with Google charts.
I use a google charts calendar in a dashboard to visualize some activity. After I move to a new view with vue router and use devTools and/or resize my browser window, my site crashes. Google chrome is unable to recover and has to be closed using Taskmanager. In Firefox I'm able to stop the script and get following warning:
I also got this error using corecharts like LineChart or ColumnChart. When I use devTools and/or resize on the dashboard, where the charts are actually used, nothing crashes, so the error only occurs in different Views.