How to create two dynamic SfCartesianChart in Flutter?
I am trying to create multiple dynamic charts (SfCartesianChart from syncfusion), the data is extracted every 1 second from a dynamic json file. I tried to create two charts; the first one works fine but the second one remains the same , it does not change.
This is what I am getting.
Here is my code
import 'dart:ui';
import 'dart:async';
import 'package:syncfusion_flutter_gauges/gauges.dart';
import 'package:flutter/material.dart';
import 'package:applicationv1/constants.dart';
import 'package:http/http.dart' as http;
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:applicationv1/classDonnee.dart';
import 'dart:convert';
Future<Donnee> fetchDonnee() async {
print('fetch0');
final response = await http.get(Uri.parse('uri'));
if (response.statusCode == 200) {
print('fecth1');
// If the server did return a 200 OK response, then parse the JSON.
return Donnee.fromJson(jsonDecode(response.body));
} else {
// If the server did not return a 200 OK response, then throw an exception.
throw Exception('Failed to load album');
}
}
class depart1 extends StatefulWidget{
const depart1({Key? key}) : super(key: key);
@override
_depart1State createState() => _depart1State();
}
class _depart1State extends State<depart1> with SingleTickerProviderStateMixin{
late List<LiveData> chartData;
late List<LiveData2> chartData2;
ChartSeriesController? _chartSeriesController;
ChartSeriesController? _chartSeriesController2;
late Future<Donnee> futureDonnee;
Timer? timer;
@override
void initState() {
print('initstate');
futureDonnee=fetchDonnee();
chartData = getChartData();
chartData2 = getChartData2();
//super.initState();
timer= Timer.periodic(const Duration(seconds:1), (Timer t){
futureDonnee=fetchDonnee();
setState(() {
});
print('initstate1');
});
super.initState();
}
@override
Widget build(BuildContext context){
Size size = MediaQuery.of(context).size;
FutureBuilder f1;
//TabController _tabController;
print('build');
Center(child: f1=FutureBuilder<Donnee>(
future: futureDonnee,
builder: (context, snapshot) {
if (snapshot.hasData){
updateDataSource(snapshot.data!.w1);
updateDataSource2(snapshot.data!.va1)
return Center(
child:SingleChildScrollView(
child: Column(
children: <Widget>[
//chart 1
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white
),
margin: const EdgeInsets.fromLTRB(20,10,20,0),
padding: EdgeInsets.fromLTRB(2, 7, 2, 7),
//color: Colors.white,
child: Column(
children:[
Text('puissance Active de phase 1 (W)'),
SizedBox(height: 5,),
SfCartesianChart(
series: <LineSeries<LiveData, int>>[
LineSeries<LiveData, int>(
onRendererCreated: (ChartSeriesController controller) {
_chartSeriesController = controller;
},
dataSource: chartData,
color: Colors.blue,
xValueMapper: (LiveData sales, _) => sales.time,
yValueMapper: (LiveData sales, _) => sales.speed,
dataLabelSettings: DataLabelSettings(isVisible: true)
)
],
primaryXAxis: NumericAxis(
majorGridLines: const MajorGridLines(width: 0),
edgeLabelPlacement: EdgeLabelPlacement.shift,
interval: 3,
title: AxisTitle(text: 'Temps (secondes)')),
primaryYAxis: NumericAxis(
axisLine: const AxisLine(width: 0),
majorTickLines: const MajorTickLines(size: 0),
//title: AxisTitle(text: 'puissance Active de pahse 1 (W)')
)
),]
),),
////////////////////chart2
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white
),
margin: const EdgeInsets.fromLTRB(20,10,20,0),
padding: EdgeInsets.fromLTRB(2, 7, 2, 7),
child: Column(
children:[
Text('puissance Apparente de phase 1 (VA)'),
SizedBox(height: 5,),
SfCartesianChart(
series: <LineSeries<LiveData2, int>>[
LineSeries<LiveData2, int>(
onRendererCreated: (ChartSeriesController controller2) {
_chartSeriesController2 = controller2;
},
dataSource: chartData2,
color: Colors.yellow,
xValueMapper: (LiveData2 sales, _) => sales.time,
yValueMapper: (LiveData2 sales, _) => sales.speed,
dataLabelSettings: DataLabelSettings(isVisible: true)
)
],
primaryXAxis: NumericAxis(
majorGridLines: const MajorGridLines(width: 0),
edgeLabelPlacement: EdgeLabelPlacement.shift,
interval: 3,
title: AxisTitle(text: 'Temps (secondes)')),
primaryYAxis: NumericAxis(
axisLine: const AxisLine(width: 0),
majorTickLines: const MajorTickLines(size: 0),
//title: AxisTitle(text: 'puissance Active de pahse 1 (W)')
)
),]
),),
],
),
)
);
//);
}
else if (snapshot.hasError) {
//return const Text('Please wait');
return Text('${snapshot.error}');
}
// By default, show a loading spinner.
return Container(
height: 20,
width:20,
child: const CircularProgressIndicator());
},
)
);
return f1;
}
int time = 19;
void updateDataSource(String val) {
ChartSeriesController controller;
var snapshot;
chartData.add(LiveData(time++, double.parse(val)));
//math.Random().nextInt(60) + 30
chartData.removeAt(0);
_chartSeriesController?.updateDataSource(
addedDataIndex: chartData.length - 1, removedDataIndex: 0);
print('update chart');
}
List<LiveData> getChartData() {
return <LiveData>[
LiveData(0, 0),
LiveData(1, 0),
LiveData(2, 0),
LiveData(3, 0),
LiveData(4, 0),
LiveData(5, 0),
LiveData(6, 0),
LiveData(7, 0),
LiveData(8, 0),
LiveData(9, 0),
LiveData(10, 0),
LiveData(11, 0),
LiveData(12, 0),
LiveData(13, 0),
LiveData(14, 0),
LiveData(15, 0),
LiveData(16, 0),
LiveData(17, 0),
LiveData(18, 0)
];
}
//coube2
int time2 = 19;
void updateDataSource2(String val) {
ChartSeriesController controller2;
var snapshot;
chartData2.add(LiveData2(time2++, double.parse(val)));
chartData2.removeAt(0);
_chartSeriesController2?.updateDataSource(
addedDataIndex: chartData2.length - 1, removedDataIndex: 0);
print('update chart2');
}
List<LiveData2> getChartData2() {
return <LiveData2>[
LiveData2(0, 0),
LiveData2(1, 0),
LiveData2(2, 0),
LiveData2(3, 0),
LiveData2(4, 0),
LiveData2(5, 0),
LiveData2(6, 0),
LiveData2(7, 0),
LiveData2(8, 0),
LiveData2(9, 0),
LiveData2(10, 0),
LiveData2(11, 0),
LiveData2(12, 0),
LiveData2(13, 0),
LiveData2(14, 0),
LiveData2(15, 0),
LiveData2(16, 0),
LiveData2(17, 0),
LiveData2(18, 0)
];
}
}
class LiveData {
LiveData(this.time, this.speed);
final int time;
final num speed;
}
class LiveData2 {
LiveData2(this.time, this.speed);
final int time;
final num speed;
}
Any help is much appreciated
do you know?
how many words do you know
See also questions close to this topic
-
how to change prettier format for react native
my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter
from this code
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( <View> <Text>Apps</Text> </View> ) }it's formatted to this
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( < View > < Text > Apps < /Text> < /View> ) } -
How to group firebase data in flutter with DateTime?
I am making a chat application in flutter using firebase. I want to show a header with the date whenever the date changes. How can I group messages in flutter coming from firebase on the basis of date and show a header with the changed date?
I have tried GroupedListView package but I was not able to retrieve the chatmessages successfully.
-
Can you make complete apps using Flutter & Dart or just the UI part of an app?
I'm confused about what Flutter framework actually does, I know that it uses Dart and have heard that both of them can be used to create cross-platform apps.
But Wikipedia defines Flutter as a "UI Framework", so my question is, can you make a complete app (for mobile) which also has backend part (communicates with a database) built entirely using Flutter & Dart and not only the UI part?
If you didn't get my question, here is an example:
Suppose a front-end web developer works on client side programming in his job, and the backend logic is written by another backend developer.
When it comes to mobile app development, suppose as a Flutter developer, your job is to create apps, but does that mean that as a Flutter developer, you'll only write the front-end logic and leave the backend part for another backend developer like in web world? Can Flutter developers also write the backend of an app using only Flutter & Dart? If not, then who writes the backend of a mobile app and what tools/languages/frameworks does he uses?
-
dart modulo operator circular list
I want to use the modulo (%) operator in order to access to list items in a circular way. But the code below doesn't work:
void main() { List<String> myList = ['one', 'two', 'three', 'four']; int currIdx = 0; for (int i = 0;i < 10;i++) { print(myList[currIdx]); currIdx = currIdx++ % myList.length; } }
-
mysql return 360 degrees returned with strengths
I have a table of wind directions and strengths over a 24 hour period, sample data at the bottom of this question.
only directions that have strengths are stored in the database, I'm currently using the following SQL:
SELECT winddirection, avespeed FROM wp_weather_data WHERE ID%10 = 0what I would like to return is an entry for every degree (0 value for any degree not in the db) and where there are multiple entries for a given degree to only return the highest value. Oh, and they need to be in ascending order of degrees.
Is this possible?
This is so I can plot a wind distribution chart on a polar chat plugin in WordPress.
sample data returned from the above sql:
294 2 271 3 269 2 285 3 289 2 123 1 130 1 144 1 160 0 168 0 161 0 135 0 138 0 331 0 115 0 136 0 161 0 267 0 114 0 265 0 204 0 248 1 206 0 199 1 250 2 244 3 257 3 272 5 267 5 208 3 221 3 223 4 253 6 233 5 -
FusionCharts/FusionTime stepline chart leaves off data points and binning aggregation distorts the data
I'm trying to reproduce a Pillow app timeline chart using FusionTime. Pillow tracks sleep quality and the different sleep stages using Apple Watch. The following is an example chart:
From the app you can export a json file with the data points. For example:
"sleepStageDataPoints": [ { "stage": 1, "timeStamp": 673239278.32947648 },`Stage legend: 0=Deep, 1=Light, 2=REM, 3=Awake
I import the data into mysql, converting the Unix time in the process. I also increment the stage number so that
Deep=1, etc., because the axis would be 0 in FusionTime.So there is a start time and the level of the stage at that time, which remains the level until the next timestamp data point where the stage would change, etc.
Besides this metric, there will be other health related metrics I plan to capture that will model the data in a similar way. Only the starting time and the level at that time, which should remain the same until the next data point.
So that's the general plan. Now the problems...
I'm having trouble figuring out the best way. I think stepline would be the best chart type for this source data. I'm not expecting to be able to have the different stages have different colors. Just being able to see the height differences is sufficient.
But FusionTime doesn't show all of the data points and the ones it does show don't seem to be accurate. I'm blaming data binning.
As you can see the first point charted is on May 3rd, 12:24-12:26. But there are 5 data points from May 2nd that it just leaves off. I don't know why. And as you can see from comparing the two charts, the patterns don't match. For instance at 1am the Fusion chart says the level would be REM (3), but if you look at the Pillow chart, it would have to be either Deep (1) or Light (2). Looking at the data points in the database confirms that.
So it has to be the data binning aggregation that is changing the chart. I've tried every aggregation other than average and none of them makes a difference.
I'd like for the data to be 100% time accurate. I want to see every datapoint and not have the first ones disappear. If I mouse over 1am I should see the correct stage level for that time. As I zoom in or out, I'd like the columns to get more wide/narrow as appropriate, but the height should never be wrong. If I zoom too far out, I'd rather the data disappear than be wrong. I'd be fine to lock the zoom level if necessary, not that I know how to.
Is this possible with FusionCharts/FusionTime? Would there be a better chart type to accomplish what I'm trying to do? Is there a different charting software that would do this? I want to use FusionTime, because I want to have the multivariate charts to compare multiple metrics along the same timeline. And I do want to be able to zoom in and out because other metrics I'm tracking wouldn't be limited to this time frame. So I need to be able to zoom/scroll through the entire day.
-
Use an array as chart values
I need an array with chart values, I obtained one but after exiting from the function it became blank, here's what happens: Example
function AddvotoTec(votor) { class Avg { constructor() {} static average(votor) { var total = 0; var count = 0; jQuery.each(votor, function(index, value) { total += value; count++; }); return total / count; } } var mvoti = Avg.average(votor); var mvoti = Math.round((mvoti + Number.EPSILON) * 10) / 10; const myJSON = JSON.stringify(mvoti); voti(myJSON); } var allvoti = []; function voti(Voti) { allvoti.push(Voti); } const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: [ 'rgb(255, 132, 0)' ], borderColor: 'rgb(255, 99, 132)', data: allvoti, }] };The chart that I used is Chart.js.
-
Dropdown options upward in combobox
I'm working on the dropdown field. I'm using Combobox of Syncfusion. My dropdown options are opening downwards. As a result, options are hidden under the screen as it is the last field. I want to open options upward. Is there any way to do it?
Image of the issue
Code
<combobox:SfComboBox x:Name="inch" HeightRequest="45" WidthRequest="50" HorizontalOptions="FillAndExpand" Watermark="inch" TextSize="15" DropDownTextSize="14" TextColor="#8793EF" IsEnabled="{Binding isEnable}" SelectedItem="{Binding Inch}" ShowClearButton="False" ShowBorder="False"> <combobox:SfComboBox.ComboBoxSource> <ListCollection:List x:TypeArguments="x:String"> <x:String>0</x:String> <x:String>1</x:String> <x:String>2</x:String> <x:String>3</x:String> </ListCollection:List> </combobox:SfComboBox.ComboBoxSource> </combobox:SfComboBox> -
Flutter charts advice
I am working on app with Firebase real-time database and wanted to visualize the data using spline chart, and i tried syncfusion_flutter_charts it's really good, but so slow to render (about 1700 ms according to the debugger) and it's not even the full data, so is syncfusion is a good choice or should i change and if there is any tips to make the chart render faster or the app faster generally.
Chart Widget code:
SfCartesianChart( plotAreaBorderWidth: 0.0, primaryXAxis: DateTimeAxis( minimum: _getToday(), maximum: _getTomorrow(), majorGridLines: const MajorGridLines(width: 0), intervalType: DateTimeIntervalType.hours, desiredIntervals: 2, interval: 2, dateFormat: DateFormat.H(), ), primaryYAxis: NumericAxis( majorGridLines: const MajorGridLines(width: 0), axisLine: const AxisLine(width: 0.0), ), series: <ChartSeries<VitalModel, DateTime>>[ SplineAreaSeries<VitalModel, DateTime>( dataSource: data, xValueMapper: (VitalModel sales, _) => sales.x, yValueMapper: (VitalModel sales, _) => sales.yValue, splineType: SplineType.cardinal, cardinalSplineTension: .5, borderWidth: 2, borderColor: color, onCreateShader: (ShaderDetails details) { return ui.Gradient.linear(details.rect.topCenter, details.rect.bottomCenter, <Color>[ color, Colors.transparent, ]); }, ) ]),
