Metronic handled API with apexchart
Hello,
I'm using mixed/widget4, It simply display a number I getting from an API.
but by the time the widget is displayed, the api response is not there yet so I'm getting errors. The getter is undefined. a few mseconds it is but too late.
Action and mutations are fine, sometime it works, actually but I get no stability.
how do you handle API response for tables ?
export default defineComponent({
name: "userNet",
components: {
Dropdown1,
},
props: {
widgetClasses: String,
chartColor: String,
chartHeight: String,
btnColor: String,
},
computed : {
series(){
const data = useStore().getters.userInfo.data[0]["net"]; // expect 24 for ex.
return [data];
},
},
setup(props) {
const color = ref(props.chartColor);
const baseColor = getCSSVariableValue("--bs-" + color.value);
const lightColor = getCSSVariableValue("--bs-light-" + color.value);
const labelColor = getCSSVariableValue("--bs-" + "gray-700");
const chartOptions = {
chart: {
fontFamily: "inherit",
height: props.chartHeight,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "65%",
},
dataLabels: {
showOn: "always",
name: {
show: false,
fontWeight: "700",
},
value: {
color: labelColor,
fontSize: "30px",
fontWeight: "700",
offsetY: 12,
show: true,
formatter: function (val) {
return val + "%";
},
},
},
track: {
background: lightColor,
strokeWidth: "100%",
},
},
},
colors: [baseColor],
stroke: {
lineCap: "round",
},
labels: ["Progress"],
};
const store = useStore();
store.dispatch(Actions.GET_USER_INFO);
return {
chartOptions,
};
},
});
Replies (3)
Hi,
You should start your apexchart initialization in your response callback.
There should be a callback function where you call the API.
Please check this official example of using Apexchart with remote API data.
Regards.
Hello Thank, you, I got the same conclusion, in computed, I'm checking if I have the data, if not I'm returning a empty set. ex :
computed: {
wallets() {
if (useStore().getters.currentUserWalletList.data) {
const table = useStore().getters.currentUserClientAccount.data;
return table;
} else {
const tempdata = [
{
id: "Loading",
client_account: "Loading",
},
];
return tempdata;
}
},
},Great! Hope it worked well.
