Updating chart card dynamically with axios

[albertoleal]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Update chart card with remote data, using axios library to feth the data. I managed to fetch the data and could update a {{TEMPLATE}}, but when I try to change the chart data object the graph does not change.

Current Behavior

Graph remains empty.

Steps to Reproduce

In src/pages/Dashboard.vue, under export default {, add the following:

  mounted() {
    var resp = {
      dailySalesChart: {
        data: {
          labels: ["M", "T", "W", "T", "F", "S", "S"],
          series: [[12, 17, 7, 17, 23, 18, 38]]
        }
      }
    };
    this.dailySalesChart = resp.dailySalesChart;
}

That's to prove that I can populate the graph by using mounted() method and it works.

When I try to replace that logic with axios it does not change the graph:

  mounted() {
    axios({
      url: "https://private-ac5ba3-test17899.apiary-mock.com/chart",
      method: "get"
    }).then(response => {
      this.dailySalesChart = response.data.dailySalesChart;
    });
}

I don't think the problem is the ajax call, I can see that it returns properly. It doesn't change the object in the promise:

  mounted() {
    var resp = {
      dailySalesChart: {
        data: {
          labels: ["M", "T", "W", "T", "F", "S", "S"],
          series: [[12, 17, 7, 17, 23, 18, 38]]
        }
      }
    };

    axios({
      url: "https://private-ac5ba3-test17899.apiary-mock.com/chart",
      method: "get"
    }).then(response => {
        // Ignore response.data and use the resp object instead.
        this.dailySalesChart = resp.dailySalesChart;
    });
}

Is there anything I need to call in order to update the graph? I thought that would update itself whenever the data changes.

Thank you very much!

[albertoleal]

Hi @dragosct10, do you happen to have an idea of how to fix this issue?

thanks!

[dragosct]

Hi, @albertoleal! Thank you for using our products and sorry for the late response. Please see this issue and maybe this will help you.

Regards,
Dragos

[albertoleal]

Great, thanks @dragosct10 !