dphoeck@gmail.com
Posts: 11
Joined: Sun Mar 21, 2021 11:21 pm

chart - updating data with an array issue

Hi,

I'm trying to update a chart based on an array entered in an input.

The array is entered in the input as follows, and on button click updates the chart data

input array.PNG
input array.PNG (13.89 KiB) Viewed 5605 times

On button click, I do the following mapping:

input array.PNG
input array.PNG (13.89 KiB) Viewed 5605 times

Unfortunately, The chart only maps 1 character per point on the chart, which means that if a number is 123, it maps "1" as the first point on the chart, "2" as the next point, and "3" as the next point, instead of "123". I need it to map a number with potentially up to 2 decimals.

Thank you!

Attachments
mapping.PNG
mapping.PNG (26.24 KiB) Viewed 5605 times
Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: chart - updating data with an array issue

Hello,

Please run the action "Update chart datasets" on the button click event to update the chart data

dphoeck@gmail.com
Posts: 11
Joined: Sun Mar 21, 2021 11:21 pm

Re: chart - updating data with an array issue

Hi,

Updating the chart datasets appears to limit me to updating to pre-defined (and not changeable) variable arrays. I am ultimately looking to update the data in the chart based on a value returned from the API.

Is there a way to update the chart's data based on an API response?

The array I'm looking to populate in the chart is the array in quotes in the response below. How might I do that?

Capture.PNG
Capture.PNG (5.25 KiB) Viewed 5590 times

Thank you

dphoeck@gmail.com
Posts: 11
Joined: Sun Mar 21, 2021 11:21 pm

Re: chart - updating data with an array issue

the data is updating, that's not the issue. The issue is that I can't populate the chart data from an API response. How should this be mapped?

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: chart - updating data with an array issue

I see your response structure. According to it you should parse the object "$t" in the parameter "content".
I don't see the full response, but it seems to be:

Code: Select all

this.data = JSON.parse(res.content.$t);

this.data - the variable, which you use in the chart
res - the response from your service

dphoeck@gmail.com
Posts: 11
Joined: Sun Mar 21, 2021 11:21 pm

Re: chart - updating data with an array issue

Hi Serhii,

This is the full response structure:

mapping1.PNG
mapping1.PNG (3.67 KiB) Viewed 5525 times
mapping2.PNG
mapping2.PNG (16.59 KiB) Viewed 5525 times
mapping3.PNG
mapping3.PNG (37.85 KiB) Viewed 5525 times
dphoeck@gmail.com
Posts: 11
Joined: Sun Mar 21, 2021 11:21 pm

Re: chart - updating data with an array issue

In addition to my response a few minutes ago, please confirm:

  1. I should copy the code here:

    TypeScript image.PNG
    TypeScript image.PNG (23.38 KiB) Viewed 5525 times
  2. should I update the code from
    this.data = JSON.parse(res.content.$t);
    To:
    this.data = JSON.parse(res.entry.content.$t);

  3. should I map in this way?

    mapping3.PNG
    mapping3.PNG (37.85 KiB) Viewed 5525 times
Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: chart - updating data with an array issue

Sorry, but these structures differ from the JSON you have sent above. Just be sure you pass the correct array to the variable "data".

Could you check the exact data structure from the network tab of the browser? I believe you will see the exact structure there

dphoeck@gmail.com
Posts: 11
Joined: Sun Mar 21, 2021 11:21 pm

Re: chart - updating data with an array issue

Hi Serhii,

The response is coming back as follows:

browser - network tab.PNG
browser - network tab.PNG (45.13 KiB) Viewed 5433 times

Any thoughts here would be helpful.

Thanks again,
Dan

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Re: chart - updating data with an array issue

It is better to save the response result to the local variable and use that variable on your page. According to the screenshot above, I see you have to use the following TS code on the success event of that service:

Code: Select all

this.data = JSON.parse(res.feed.entry[0].content.$t);

Return to “Issues”