Rendering JSON data in a SfCartesianChart

Hi Sara,

Greetings from Syncfusion.

We have checked your query at our end, and we have created a simple sample with the provided JSON structure in which we have rendered the chart by serializing the Json data structure and as per your requirement, placed six buttons with which you can be able to change the chart data in the chart. We have also attached the sample below for reference. Please check and get back to us if you require further assistance.

Regards,

Sriram Kiran

hello!

 thank you so much!

can the '1Yr'  button be selected by default when I first load the page? and you can view the values for '1Yr'

Hi Sara,

We have checked your query at our end and modified the previously provided sample as per your requirement and attached it below for reference.

Please check and get back to us if you require further assistance

Regards,

Sriram Kiran

Thank you Sriram for you help! 

I just have a further question. Is it possible to make the class you created reusable?

meaning, I use it again for a different file, the only line of code I would change is the json file to display different data on the chart.

Hi Sara,

Yes, it is possible to reuse the model class created for the JSON parsing only if that JSON data structure and the fields in it are not changed or modified and only the data values will be changed for the chart. Please check and get back to us if you require further assistance.

Regards,

Sriram Kiran

that's great! would it be possible to assist me on that Siriam?

Hi Sara,

We kindly request you to share with us the JSON data structure in the JSON file, which you will replace in the code so that it will help us check whether the class model created currently can be reused for that JSON data structure or not.

Regards,

Sriram Kiran

Hi Sara,

Thanks for the revert. We have checked the provided JSON data structure and we have modified the previously provided sample by loading the latest provided JSON data structure and rendered the chart by reusing the same class model. We have attached the sample below for reference.

Please check and get back to us if you require further assistance.

Regards,

Sriram Kiran

is there a way to create two files (one for each chart) that use the same class? 

in such a way that If I wanted to modify the Sfcartesianchart widget, the changes will apply to the rest of the files dynamically. 

Hi Sara,

We have analyzed your query at our end, and we are sorry that we are not able to understand what requirement you are proposing in your query as you have told that you have to create two files for each chart widget that uses same class and here we are not sure what class both of them must use and based on the second query we suspect that when you change the chart widget in one file then it must apply those changes in the second file too but we are not sure on what you will be changing in the chart widget.

So, we kindly request you to share with us more information in detail on your requirement with example screenshots or screen recordings so that it will help us assist you in a better way.

Regards,
Sriram Kiran

thank you for waiting. and i'm sorry for the late reply.

i will try to compile what I need help in this reply. hope it will make things clear!

i have a home page that contains a grid of buttons each one will navigate to a different screen,

when i click on button 1 , i get the below screen (the one on the left). a grid of buttons each containing a unique value name and percentage. when i click on value 1, i will go the the below screen (the one on the right) (the same one you helped me with earlier). also, value 1, value 2, value 3, value 4, value 5 buttons should all navigate to the same screen (the one on the right) but each one has a different json file; so the fusion chart values will change dynamically. the page structure will be exactly the same in all value buttons.

also, the second button in the  bottom navigation bar should have this expandable tile list with the same buttons in the homepage screen, if i expand one, i should get the same value buttons to be added dynamically. so. if I add a new value button in the home screen , it should be added here too. and if I delete one it should be deleted from here too.  

hope this makes sense. thank you again !

Hi Sara,

Thanks for the revert. We have checked your query at our end, and we have created a simple sample similar to your application and in the main page we have placed two buttons and on clicking them will navigate to the next page which contains two value buttons and on clicking the first value button, the chart rendered with the chart data retrieved from the first JSON file and for the second value button, the chart gets rendered with chart data retrieved from the second JSON file.

For the second page in the navigation bar, you can use the same `ValuePageWidget` to render the value buttons accordingly in the respective expanding tile for the button values as per your requirement.

We have attached the sample below for reference. Please check with the sample and get back to us if you require further assistance.

Regards,
Sriram Kiran