1. Home
  2. Forum
  3. Flutter
  4. the data in firestore I store them for days but I need to visualize them in the graph per month

the data in firestore I store them for days but I need to visualize them in the graph per month

the data is saved in firestore per day,
23:33
there is a lot of data, for this reason I need to group them by month

6 Replies
DD Dharanidharan Dharmasivam Syncfusion Team April 10, 2020 12:16 PM UTC

Hi Aldair, 
 
We have analyzed your query.  We have prepared a sample in which we have two months of data. And based on the month selected from the drop down, we have selected the data and then rendered the chart for the selected month. Find the code snippet below to achieve this and this can be changed based on your scenario. 
 
//Two months data (January and February) 
 List<OrdinalSales> chartData = [ 
    OrdinalSales(DateTime(2018, 1, 1), 29), 
    OrdinalSales(DateTime(2018, 1, 2), 28), 
    OrdinalSales(DateTime(2018, 1, 3), 44), 
    OrdinalSales(DateTime(2018, 1, 4), 33), 
    OrdinalSales(DateTime(2018, 2, 1), 38), 
    OrdinalSales(DateTime(2018, 2, 2), 34), 
    OrdinalSales(DateTime(2018, 2, 3), 38), 
    OrdinalSales(DateTime(2018, 2, 4), 22), 
  ]; 
 
//Drop down event in which we have grouped the data based on the selected month  
onChanged: (String newValue) { 
                setState(() { 
                  dropdownValue = newValue; 
                  selectedData = []; 
                  for (int i = 0; i <chartData.length;i++){ 
                    if(newValue == 'Jan' && chartData[i].x.month == DateTime.january) { 
                      selectedData.add(chartData[i]); 
                    } else if(newValue == 'Feb' && chartData[i].x.month == DateTime.february) { 
                      selectedData.add(chartData[i]); 
                    } 
                  } 
                }); 
              }, 
 
 
// Chart configurations 
 SfCartesianChart( 
              //Other configurations 
              series: <LineSeries<OrdinalSales, DateTime>>[ 
                LineSeries<OrdinalSales, DateTime>( 
                  dataSource: selectedData, 
               //Other configurations 
               ) 
              ], 
            ) 
 
 
The sample for reference can be found below. 
 
Thanks, 
Dharani. 


AR Aldair Ramiro Turizo Gamarra April 10, 2020 03:58 PM UTC

Excuse me, but it is not the solution I am looking for, I need you to group all the data taken in certain months in a single bar.

Example


DD Dharanidharan Dharmasivam Syncfusion Team April 13, 2020 11:53 AM UTC

Hi Aldair, 
 
Thanks for the information. Now have modified the sample based on your requirement. Here we have two months (Jan & Feb) data. We have grouped the data and then added all the y values, for example, from the January grouped data we have added all the y-values from the list and formed a new data source. Now we have provided the new data to chart widget.  
 
 
void _getData(){ 
    for (int i = 0; i < chartData.length; i++) { 
      if (chartData[i].x.month == DateTime.january) { 
        janData.add(chartData[i]); 
      } else if (chartData[i].x.month == DateTime.february) { 
        febData.add(chartData[i]); 
      } 
    } 
//Use this data source for chart 
    groupedData =  [ 
      GroupedData('Jan', _getGroupedYValue(janData)), 
      GroupedData('Feb', _getGroupedYValue(febData)), 
    ]; 
  } 
 
 
You can change this based on your scenario. Find the sample for reference from below. 
 
Thanks, 
Dharani. 


AR Aldair Ramiro Turizo Gamarra April 13, 2020 07:57 PM UTC

It is data that is updated frequently, and over time it will take many more months, as it should be so that the data is received from the cloud firestore and does not have to be fixed.

AR Aldair Ramiro Turizo Gamarra April 14, 2020 01:18 PM UTC

I need your help, please

DD Dharanidharan Dharmasivam Syncfusion Team April 14, 2020 04:30 PM UTC

Hi Aldair,  
 
We have analyzed your scenario. Since we don’t have much data in the firebase as per your scenario, for demo purpose we have added data locally and grouped data based on that. You can get the data from firebase and assign those data to chartData variable as depicted in our previous sample and then data will be grouped as per the previous update.  
Note: We have already provided a solution to fetch the data from firebase in the forum. Kindly use the solution for fetching data from the firebase. 
 
Thanks, 
Dharani. 


Loader.
Up arrow icon