Hey guys,
I use Apex charts (www.apexcharts.com) for a web application. In addition, I retrieve data via Axios after the page has loaded and update for the apex chart.
Basically, that works but when I now resize the browser window, the former data that I used as dummy data are restored.
I can’t figure out where exactly the problem is so I hope for some help here.
Apex is provided as a component:
import VueApexCharts from 'vue-apexcharts'
// leave the export, even if you don't use it
export default async ({ Vue }) => {
Vue.component('apexchart', VueApexCharts)
}
Within the vue page the chart is called so:
<apexchart type="pie" :series="series" :options="chartOptions" />
Dummy data for series are defined and options are provided. The hook mounted starts api request and adapt the data.
It works but as I mentioned before when resizing the window dummy data are restored.
<script>
export default {
data() {
return {
projectAnalysis: {},
series: [100, 400],
chartOptions: {
chart: {
id: "samplesGender",
fontFamily: "Raleway"
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 250
},
legend: {
position: "bottom"
}
}
}
],
}
};
},
methods: {
getProjectAnalysis() {
this.$axios
.post("../db/api.php", {
request: "getProjectAnalysis",
})
.then(response => {
if (response.data["isSuccess"] == false) {
this.$router.push("/Second/Login");
}
if (response.data["isSuccess"] == true) {
this.projectAnalysis = response.data["projectAnalysis"];
this.series = [
parseInt(this.projectAnalysis.sampleMale),
parseInt(this.projectAnalysis.sampleFemale)
];
/*Following I tried as an alternative but that does not work at all. */
/*ApexCharts.exec(
"samplesGender",
"updateSeries",
[
{
data: [
parseInt(this.projectAnalysis.sampleMale),
parseInt(this.projectAnalysis.sampleFemale)
]
}
],
true
);*/
//alert(response.data["message"]);
}
})
.catch(error => {
console.log(error);
});
},
}
},
mounted() {
this.getProjectAnalysis();
}
};
</script>