Hi,
I have various endpoints and I want to update the Series Data of a Chart dynamically. I use a NumberSlider Widget (which represents different dates for country population) and I want to display different data in the graph every time a user drags the slider.
After some testing, I decided to use appsmith.store method. So I am now able to store different data in a variable called graphData. That means the Series Data = {{appsmith.store.graphData}}.
When I am previewing the graph the whole concept works fine, but when I try to deploy it I get the following error: “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘map’)”.
Any idea why this is happening or suggest another concept without appsmith.store method in order to use the NumberSlider in order to display data dynamically in the Chart.
Hello @GeorgeKakamoukas,
It seems that you’re encountering an issue when deploying your app, where the appsmith.store.graphData is undefined. This might be caused by the data not being initialized properly before being used in the chart. To resolve this issue, you can use a conditional rendering approach to ensure that the data is available before rendering the chart. You can modify the Series Data property of the chart widget like this:
{{appsmith.store.graphData ? appsmith.store.graphData : []}}
This will ensure that if appsmith.store.graphData is undefined, an empty array will be used instead, preventing the error. However, if you still face issues, you might want to consider an alternative approach without using the appsmith.store method. You can use the NumberSlider widget’s value directly in the Series Data property of the chart widget. For example, if you have a function that fetches data based on the slider value, you can use it like this:
{{fetchDataBasedOnSliderValue(NumberSlider1.value)}}
Make sure to replace fetchDataBasedOnSliderValue with the actual function that fetches data based on the slider value.