1. Home
  2. Forum
  3. Flutter
  4. loading data from JSON object

loading data from JSON object

I need assistance with building an area chart.


Format example of the JSON data I receive from API call: 
{
"chart":{
"result":[
0:{
"meta":{
...
}       <-- I did not expand meta because I do not need this information
"timestamp":
[
0 - 100
]
[
100 - 200
]
[
200 - 300
]
[
300 - 400
]
[
400 - 500
]
[
500 - 529
]
"indicators":{
"quote":[
0:{
"low":
[
0 - 100
]
[
100 - 200
]
[
200 - 300
]
[
300 - 400
]
[
400 - 500
]
[
500 - 529
]
"close":
[
0 - 100
]
[
100 - 200
]
[
200 - 300
]
[
300 - 400
]
[
400 - 500
]
[
500 - 529
]
"volume":
[
0 - 100
]
[
100 - 200
]
[
200 - 300
]
[
300 - 400
]
[
400 - 500
]
[
500 - 529
]
"open":
[
0 - 100
]
[
100 - 200
]
[
200 - 300
]
[
300 - 400
]
[
400 - 500
]
[
500 - 529
]
"high":
[
0 - 100
]
[
100 - 200
]
[
200 - 300
]
[
300 - 400
]
[
400 - 500
]
[
500 - 529
]
}
]
}
}
]
"error":
NULL
}
}

My class for the JSON data is in the attached zip inside chart_data.dart

How do I format my array and datasource so I can display the values in my chart?  

Attachment: widget_tester_app_4e575aba.zip

8 Replies 1 reply marked as answer
YF Yannic Francis July 14, 2020 06:10 PM UTC

Thank you Sriram! I'm sure it was a mistake, but you've actually included my API key in your response for the public to see. Do you mind removing your response showing my API key? I've saved the information I need. Thank you again, and have a good one!

YF Yannic Francis July 14, 2020 10:37 PM UTC

Good afternoon again,

I made the necessary changes in my code, per your response, yet, I'm having trouble displaying the data on my chart. Would you mind looking at dart file: 1D_chart.dart? Right now when I run the code I'm just getting a blank chart but, I am receiving the data from my API. I've attached my zip. I should be able to handle the rest of the charts once I see your example from the 1D chart.

Thank you for working with me!

Attachment: widget_tester_app3_b0768ec2.zip

SK Sriram Kiran Senthilkumar Syncfusion Team July 15, 2020 03:45 PM UTC

Hi Yannis, 
  
We are sorry that without noticing your API key in the code snippet, we included it in our response and posted it by mistake. However, we have removed that response as requested. 
We have also analyzed the reported scenario regarding the trouble in displaying chart data on the chart and we have modified the provided sample application for displaying the parsed chart data in the chart. We have also done some more modifications to the getChartData() method available in the main.dart file. Please refer the code snippet below for reference. 
// Changed the return type of the function to chart data list type 
Future<List<SampleData>> getChartData() async { 
  
//your configurations 
 
  if (sampleChartData.isNotEmpty) sampleChartData.clear(); 
  for (int i = 0; i < chartData.chart.result.length; i++) { 
    for (int j = 0; j < chartData.chart.result[i].timestamp.length; j++) { 
      sampleChartData.add(SampleData( 
          timeStamp: DateTime.fromMicrosecondsSinceEpoch( 
              chartData.chart.result[i].timestamp[j]))); 
    } 
  } 
 
  for (int i = 0; i < chartData.chart.result.length; i++) { 
    for (int j = 0; 
        j < chartData.chart.result[i].indicators.quote.length; 
        j++) { 
      for (int k = 0; 
          k < chartData.chart.result[i].indicators.quote[j].low.length; 
          k++) { 
        sampleChartData[k].open = 
            chartData.chart.result[i].indicators.quote[j].open[k]; 
        sampleChartData[k].high = 
            chartData.chart.result[i].indicators.quote[j].high[k]; 
        sampleChartData[k].low = 
            chartData.chart.result[i].indicators.quote[j].low[k]; 
        sampleChartData[k].close = 
            chartData.chart.result[i].indicators.quote[j].close[k]; 
        sampleChartData[k].volume = 
            chartData.chart.result[i].indicators.quote[j].volume[k]; 
      } 
    } 
  } 
 
  // Returned the chart data list instead of the chartData Json array 
  return sampleChartData;  
} 
 
As requested, we looked onto the 1d_Chart.dart file and done some modifications in it to render the parsed chart data in the chart. Please refer the code snippet below for reference. 
 
// Changed the return type in the futurebuilder 
FutureBuilder<List<SampleData>>( 
        future: getChartData(), 
        builder: 
            (BuildContext context, AsyncSnapshot<List<SampleData>> snapshot) { 
          if (snapshot.data != null) { 
            return SfCartesianChart( 
              // your configurations 
              series: <ChartSeries<SampleData, DateTime>>[ 
                AreaSeries<SampleData, DateTime>( 
                    gradient: gradients, 
                    enableTooltip: true, 
                    // Provided the snapshot.data which consists of the returned chart data list from    
                    // the getChartData() method to the data source of the chart. 
                    dataSource: snapshot.data, 
                    xValueMapper: (SampleData time, _) => time.timeStamp, 
                    yValueMapper: (SampleData price, _) => price.open, 
                    borderWidth: 2, 
                    opacity: .3, 
                    borderColor: Colors.green, 
                    borderDrawMode: BorderDrawMode.top, 
                    animationDuration: 0), 
              ], 
            ); 
          } 
          return Container( 
            height: 0, 
            width: 0, 
          ); 
        }, 
) 
 
We have also attached the modified sample application below for your reference. 
  
Please check the sample and revert us if you still have concerns. 
  
Regards, 
Sriram Kiran. 


Marked as answer
YF Yannic Francis July 15, 2020 11:00 PM UTC

Thank you Sriram! Y'all are really helpful; I truly appreciate it! I'll have to make some adjustments to the charts because the x-values don't display now that the data is displayed onto the chart and the plotted data looks a bit odd (I'm sure its due to the amount of data displayed on the chart at once). If I have trouble figuring it out, I'll reach back out. Have a good one!

SK Sriram Kiran Senthilkumar Syncfusion Team July 16, 2020 12:45 PM UTC

Hi Yannic, 
  
Most welcome. We will wait to hear from you. 
  
Regards, 
Sriram Kiran 


YF Yannic Francis July 16, 2020 05:43 PM UTC

Good afternoon! Ok so, as previously mentioned, the data now loads to the chart just fine (big thanks to your help), but now the chart looks a bit out of shape. 

Screenshot of current chart (undesired look):                                                                          Undesired behavior (data points and labels stacked):       
                                                             

Desired look: 


For my x-axis, I want to show the hours (10, 11, 12, 1, 2, 3) like in the first desired screenshot; right now, no x-values are shown. Overall, I want my chart to look more like a normal price chart. I also don't want to enable panning or zoom in the charts. I've attached the zip of my code. Please assist! As stated before, if you help me with the 1D chart I can replicate the rest of the charts. 

Thank you!


Attachment: widget_tester_app4_2d854f21.zip

SK Sriram Kiran Senthilkumar Syncfusion Team July 20, 2020 06:04 AM UTC

Hi Yannic, 
 
We have analyzed your scenario from the provided sample, and we found that the timestamp values which you are returning from your API consist of Date-Time values which differs in milliseconds interval. Due to this only the x-axis is not rendering in the chart because currently, our chart widget only supports date-time axis interval type up to seconds. However, we have considered this as a feature request regarding providing milliseconds interval support to the date-time axis and have created feedback for it in our feedback portal. We will include this feature in any of our upcoming releases yet to come. You can also track the feedback from the link below. 
 
 
Also, we are able to replicate the reported issue regarding the trackball tooltip getting stacked for data points in the chart, this is already a known issue and we have already logged a feature request for this in our feedback portal. We will include this feature in our upcoming Vol 3 Main release which is expected to be rolled by the end of September 2020. We will update you once the release is rolled out and we appreciate your patience until then. You can also track the status of the feedback from the link below. 
 
  
Please get in touch with us if you require further assistance. 
 
Regards, 
Sriram Kiran 


SK Sriram Kiran Senthilkumar Syncfusion Team October 5, 2020 10:41 AM UTC

Hi Yannic, 
  
We are glad to announce that our Essential Studio 2020 Volume 3 release v18.3.0.35 is rolled out and is available for download under the following link. 
  
We thank you for your support and appreciate your patience in waiting for this release. The reported issue regarding the trackball tooltip getting stacked for data points in the chart is now fixed and rolled out in our vol 3 main release. To overcome the reported issue, kindly please upgrade the chart widget package to the latest version below. 
 
For further reference on the improved trackball’s tooltip overlapping behavior, please check the below link. 
 
Please get in touch with us if you would require further assistance. 
  
Regards, 
Sriram Kiran 


Loader.
Up arrow icon