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,
};
},
});

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(