XY Scatter Chart from Json
Hello,
I am fetching data from a local Json File and with this data i am able to create two Charts.
The first Chart shows Range values, the second Force values.
In both Charts the y axis shows the Range and Force values. On the x axis are the Count values.
Instead having two seperate Charts for the Range and Force i would need only one.
Similar like the photo:
I am trying to build another Chart. But in this case it would need to be a Scatter Chart.
On the x axis would be the Range values and on the y axis would be the Force values.
I tried already to implement the Scatter Chart but i do not get the result that i want.
I get this:
But i woud need similar like this:
Thanks in advance for some help.
The Json looks likes follows:
```
{
"measure": [
{
"count": 8,
"range_array": [
10, 11, 12, 13, 14
],
"force_array": [
26, 27, 22, 21, 30
]
},
{
"count": 9,
"range_array": [
10, 11, 12, 13, 14
],
"force_array": [
26, 27, 22, 21, 30
]
},
{
"count": 10,
"range_array": [
10, 11, 12, 13, 14
],
"force_array": [
26, 27, 22, 21, 30
]
}
]
}
```
And my code is like this:
```
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<List<ChartDataRange>> dataListRange = [];
List<List<ChartDataForce>> dataListForce = [];
List<List<ChartDataRangeForce>> dataListRangeForce = [];
Future<String> getJsonData() async {
return await rootBundle.loadString('assets/measurelist.json');
}
Future loadStringRange() async {
final String jsonString = await getJsonData();
final dynamic jsonResponse = json.decode(jsonString);
// It will get the last value in the json
List<dynamic> values = jsonResponse['measure'].last['range_array'];
List<ChartDataRange> chartDataR = [];
for (var j = 0; j < values.length; j++) {
chartDataR.add(ChartDataRange(j, values[j]));
}
dataListRange.add(chartDataR);
}
Future loadStringForce() async {
final String jsonString = await getJsonData();
final dynamic jsonResponse = json.decode(jsonString);
// It will get the last value in the json
List<dynamic> values = jsonResponse['measure'].last['force_array'];
List<ChartDataForce> chartDataF = [];
for (var j = 0; j < values.length; j++) {
chartDataF.add(ChartDataForce(j, values[j]));
}
dataListForce.add(chartDataF);
}
Future loadStringRangeForce() async {
final String jsonString = await getJsonData();
final dynamic jsonResponse = json.decode(jsonString);
// It will get the last value in the json
List<dynamic> values1 = jsonResponse['measure'].last['force_array'];
List<dynamic> values2 = jsonResponse['measure'].last['range_array'];
List<ChartDataRangeForce> chartDataRF = [];
for (var j = 0; j < values1.length; j++) {
chartDataRF.add(ChartDataRangeForce(j, values1[j]));
}
for (var j = 0; j < values2.length; j++) {
chartDataRF.add(ChartDataRangeForce(j, values2[j]));
}
dataListRangeForce.add(chartDataRF);
}
@override
void initState() {
loadStringRange();
loadStringForce();
loadStringRangeForce();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: FutureBuilder(
future: getJsonData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Column(
children: [
Row(
children: [
SizedBox(
width: 600,
height: 300,
child: SfCartesianChart(
series: getSeriesRange(),
legend: Legend(isVisible: true),
borderColor: Colors.black,
backgroundColor: Colors.green,
),
),
SizedBox(
width: 600,
height: 300,
child: SfCartesianChart(
series: getSeriesForce(),
legend: Legend(isVisible: true),
borderColor: Colors.black,
backgroundColor: Colors.green,
),
),
],
),
SfCartesianChart(
series: getSeriesRangeForce(),
legend: Legend(isVisible: true),
borderColor: Colors.black,
backgroundColor: Colors.yellow,
),
],
);
} else {
return const CircularProgressIndicator();
}
},
),
);
}
List<ChartSeries<ChartDataRange, num>> getSeriesRange() {
List<ChartSeries<ChartDataRange, num>> seriesListRange = [];
for (var index = 0; index < dataListRange.length; index++) {
seriesListRange.add(
SplineSeries<ChartDataRange, num>(
dataSource: dataListRange[index],
xValueMapper: (ChartDataRange data, _) => data.x,
yValueMapper: (ChartDataRange data, _) => data.y,
markerSettings: const MarkerSettings(isVisible: true),
dataLabelSettings: const DataLabelSettings(isVisible: true, useSeriesColor: true),
enableTooltip: false,
animationDuration: 3000,
animationDelay: 1000,
name: 'Range',
color: const Color.fromARGB(255, 157, 54, 124),
),
);
}
return seriesListRange;
}
List<ChartSeries<ChartDataForce, num>> getSeriesForce() {
List<ChartSeries<ChartDataForce, num>> seriesListForce = [];
for (var index = 0; index < dataListForce.length; index++) {
seriesListForce.add(
SplineSeries<ChartDataForce, num>(
dataSource: dataListForce[index],
xValueMapper: (ChartDataForce data, _) => data.x,
yValueMapper: (ChartDataForce data, _) => data.y,
markerSettings: const MarkerSettings(isVisible: true),
dataLabelSettings: const DataLabelSettings(isVisible: true, useSeriesColor: true),
animationDuration: 3000,
animationDelay: 1000,
name: 'Force',
color: const Color.fromARGB(255, 211, 136, 15),
),
);
}
return seriesListForce;
}
List<ChartSeries<ChartDataRangeForce, num>> getSeriesRangeForce() {
List<ChartSeries<ChartDataRangeForce, num>> seriesListRangeForce = [];
for (var index = 0; index < dataListRangeForce.length; index++) {
seriesListRangeForce.add(
SplineSeries<ChartDataRangeForce, num>(
dataSource: dataListRangeForce[index],
xValueMapper: (ChartDataRangeForce data, _) => data.x,
yValueMapper: (ChartDataRangeForce data, _) => data.y,
markerSettings: const MarkerSettings(isVisible: true),
dataLabelSettings: const DataLabelSettings(isVisible: true, useSeriesColor: true),
animationDuration: 3000,
animationDelay: 1000,
name: 'Range/Force',
color: const Color.fromARGB(255, 69, 91, 197),
),
);
}
return seriesListRangeForce;
}
}
class ChartDataRange {
final num x;
final num y;
ChartDataRange(this.x, this.y);
}
class ChartDataForce {
final num x;
final num y;
ChartDataForce(this.x, this.y);
}
class ChartDataRangeForce {
final num x;
final num y;
ChartDataRangeForce(this.x, this.y);
}
```
SIGN IN To post a reply.
4 Replies
Hi Carlos,
We have modified the sample by considering the force values as X and the range values as Y, and we have rendered a chart to meet your requirements. Please find the modified sample below for your reference.
Screenshot:
If you have any further assistance, please get back to us we will always be happy to assist you.
Regards,
Yuvaraj.
Attachment: f180329_33b02c85.zip
SIGN IN To post a reply.
