How to show JSON Data in SfCartesianChart in Flutter? - json

Question

please help.. I have tried to put JSON data in flutter chart..trying for almost 1 week but its not working and its not showing y axis point and not x axis points any one can help me the display json data in flutter SfCartesianChart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import '../constant/app_colors.dart';
import '../models/chart_model.dart';
class CustomChartData extends StatefulWidget {
const CustomChartData({Key? key}) : super(key: key);
#override
State<CustomChartData> createState() => _CustomChartDataState();
}
class _CustomChartDataState extends State<CustomChartData> {
TooltipBehavior? _tooltipBehavior;
#override
void initState() {
_tooltipBehavior = TooltipBehavior(
enable: true,
color: AppColors.primaryColor,
);
super.initState();
}
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return SizedBox(
width: width * 0.95,
height: height * 0.35,
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
legend: Legend(isVisible: false),
tooltipBehavior: _tooltipBehavior,
series: <LineSeries<SalesData, String>>[
LineSeries<SalesData, String>(
dataSource: <SalesData>[
SalesData('Mon', 25),
SalesData('Tue', 50),
SalesData('Wed', 70),
SalesData('Thu', 80),
SalesData('Fri', 105),
SalesData('Sat', 105),
SalesData('Sun', 105),
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
),
],
),
);
}
}
Json data
{
"expense_data": [
{
"date": "2022-07-05",
"total": 123
}
]
}
data model
class ExpenseDatum {
ExpenseDatum({
this.date,
this.total,
});
DateTime date;
int total;
factory ExpenseDatum.fromJson(Map<String, dynamic> json) => ExpenseDatum(
date: DateTime.parse(json["date"]),
total: json["total"],
);
Map<String, dynamic> toJson() => {
"date": "${date.year.toString().padLeft(4, '0')}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}",
"total": total,
};
}
chart
[enter image description here][1]
[1]: https://i.stack.imgur.com/N6i8x.png
constant
const baseURL = 'https://www.any****.app/api';
const expenseURL = baseURL + '/expense';
// ----- Errors -----
const serverError = 'Server error';
const unauthorized = 'Unauthorized';
const somethingWentWrong = 'Something went wrong, try again!';
getExpenses
Future<ApiResponse> getExpense() async {
ApiResponse apiResponse = ApiResponse();
try {
String token = await getToken();
final response = await http.get(Uri.parse(expenseURL), headers: {
'Accept': 'application/json',
'Authorization': 'Bearer $token'
});
print(response.body);
print(token);
switch (response.statusCode) {
case 200:
apiResponse.data = User.fromJson(jsonDecode(response.body));
break;
case 401:
apiResponse.error = unauthorized;
break;
default:
apiResponse.error = somethingWentWrong;
break;
}
} catch (e) {
apiResponse.error = serverError;
}
return apiResponse;
}