I am trying to add another line in the time series chart. And currently I did not find anyway to do this. I am using chart_flutter dependencies.
Here is my chart code look like:
charts.TimeSeriesChart(
series,
animate: true,
defaultRenderer: charts.LineRendererConfig(
includeArea: true,
includeLine: true,
),
dateTimeFactory: const charts.LocalDateTimeFactory(),
behaviors: [
charts.PanAndZoomBehavior(),
charts.SeriesLegend(
position: charts.BehaviorPosition.top,
horizontalFirst: false,
cellPadding: EdgeInsets.only(left: 80, top: 10, bottom: 4.0),
),
charts.SelectNearest(
eventTrigger: charts.SelectionTrigger.tap
),
charts.LinePointHighlighter(
symbolRenderer: CustomCircleSymbolRenderer(size: size),
),
],
selectionModels: [
charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: (charts.SelectionModel model) {
if(model.hasDatumSelection) {
final tankVolumeValue = model.selectedSeries[0].measureFn(model.selectedDatum[0].index).round();
final dateValue = model.selectedSeries[0].domainFn(model.selectedDatum[0].index);
CustomCircleSymbolRenderer.value = '$dateValue \n $tankVolumeValue';
}
})
]),
Any idea on how to add another line is welcome.
The answer above is simply that you can add more data in the variable that hold the data. Like below:
charts.Series(
id: 'Tank 1',
data: some data here,
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (TankPing ping, _) => some data,
measureFn: (TankPing ping, _) => some data
),
charts.Series(
id: 'Tank 1',
data: some data here,
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (TankPing ping, _) => some data,
measureFn: (TankPing ping, _) => some data
)
Related
first time asking a question here. I would like to how to remove the extra spacing around the SfCircularChart from syncfusion_flutter_charts package.
Container(
// Wrapping around fixed size Container
width: 200,
height: 200,
color: Colors.red,
child: SfCircularChart(
// Setting the margin to zero
margin: EdgeInsets.zero,
series: <CircularSeries>[
PieSeries<Category, String>(
dataSource: dailyEarningList,
xValueMapper: (Category data, _) => data.name,
yValueMapper: (Category data, _) => data.value,
dataLabelSettings: DataLabelSettings(
isVisible: true,
),
),
],
),
)
Image
PieSeries<Category, String>(
radius: "100",
dataSource: [Category(["a", "b", "c"])],
xValueMapper: (Category data, _) => "d",
yValueMapper: (Category data, _) => 1,
dataLabelSettings: const DataLabelSettings(
isVisible: true,
),
),
The library has a radius parameter. It's a string. I do not understand why it's a string. In your example if you set it to "100", it will match the container.
I am using TimeSeriesChart from the flutter_charts package, and the colors of the selected markers are not matching up with their corresponding line color. There is also no data from other series hiding behind these data points.
Since the series is dynamic, I am setting to colorFn using math.Random to generate random colors for each series.
Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0))
I'm not sure how this would affect the markers, though, since the series is compiled before the markers are used. Here is the function I'm using to build my series, along with the chart
List<charts.Series<ResultSummary, DateTime>> _createChartData() {
// create chart map
Map<String, List<ResultSummary>> chartMap = {};
ConsumerTargetResults selectedTargetResults = getConsumerTargetResults(resultsPool, [selectedTarget])[0];
Map<String, Color> promptColorMap = {};
promptColorMap['Independent'] = Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
promptColorMap.addAll(Map.fromIterable(selectedTargetResults.target.prompts, key: (p) =>
p.title, value: (p) => Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0))
);
promptColorMap.forEach((key, value) {
List<ResultSummary> resultSummaries = [];
for (Session s in selectedTargetResults.sessions) {
ResultSummary tResultSummary = ResultSummary(s.date, 0, value);
if (s.promptStatsMap[key] != null) tResultSummary.measure = s.promptStatsMap[key];
resultSummaries.add(tResultSummary);
}
chartMap[key] = resultSummaries;
});
// implement to chart
List<charts.Series<ResultSummary, DateTime>> chartDataList = [];
chartMap.forEach((key, value) {
chartDataList.add(
charts.Series<ResultSummary, DateTime>(
id: key,
data: value,
domainFn: (ResultSummary r, _) => r.domain,
measureFn: (ResultSummary r, _) => r.measure,
fillColorFn: (ResultSummary r, _) => r.color,
));
});
return chartDataList;
}
Expanded(
child: Container(
padding: EdgeInsets.fromLTRB(40.0, 10.0, 40.0, 10.0),
child: charts.TimeSeriesChart(
widget.seriesList,
// animate: widget.animate,
animate: false,
behaviors: [ charts.SeriesLegend(
position: charts.BehaviorPosition.end,
outsideJustification: charts.OutsideJustification.endDrawArea,
horizontalFirst: false,
desiredMaxColumns: 1,
cellPadding: EdgeInsets.only(right: 4.0, bottom: 4.0),
entryTextStyle: charts.TextStyleSpec(
color: charts.MaterialPalette.purple.shadeDefault,
fontFamily: 'Georgia',
fontSize: 11),
)],
selectionModels: [
charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: _onSelectionChanged,
updatedListener: _onSelectionChanged,
)
],
)),
),
I removed the colorFn field from my chart and that seemed to have done the trick
// implement to chart series
List<charts.Series<ResultSummary, DateTime>> chartDataList = [];
chartMap.forEach((key, value) {
chartDataList.add(
charts.Series<ResultSummary, DateTime>(
id: key,
data: value,
domainFn: (ResultSummary r, _) => r.domain,
measureFn: (ResultSummary r, _) => r.measure,
// fillColorFn: (ResultSummary r, _) => r.color,
));
});
Working on Flutter Chart, the domainFn lists the days in a month, 1...31, but they are overlapping, I would like to set the label in a scale of 5 i.e 5, 10, 15, 20, 25, 30.
List<charts.Series<EventChart, String>> _createChart(
List<EventChart> eventChart) {
return [
charts.Series<EventChart, String>(
id: widget.activity,
domainFn: (EventChart eventChart, _) => eventChart.label,
measureFn: (EventChart eventChart, _) => eventChart.count,
data: eventChart,
measureUpperBoundFn: (EventChart eventChart, _) =>
eventChart.count < 4 ? eventChart.count + 4 : eventChart.count,
measureLowerBoundFn: (EventChart eventChart, _) => 0,
fillColorFn: (EventChart eventChart, _) {
return charts.MaterialPalette.blue.shadeDefault;
},
)
];
}
);
BARCHART WIDGET:
Flexible(
child: charts.BarChart(
_createChart(pro.eventChart(widget.activity)
),
animate: true,
behaviors: [
charts.LinePointHighlighter(
drawFollowLinesAcrossChart: true,
showHorizontalFollowLine:
charts.LinePointHighlighterFollowLineType.all
)
],
),
You can select the ticks to be displayed by providing a tickProviderSpec in the domainAxis:
#override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
domainAxis: new charts.OrdinalAxisSpec(
tickProviderSpec: charts.StaticOrdinalTickProviderSpec(
[
charts.TickSpec('10'),
charts.TickSpec('15'),
charts.TickSpec('20'),
...
]
)),
);
}
I'm currently trying to restyle a design layout. I got most of it through try and error. The only part which I can't figure out are:
1.) The black axis on the left and bottom. So that only those are black
2.) The light grey axis inside. How can I apply opacity on the color or use my own color? I can only use charts.MaterialPalette and I can't figure out how to define my own.
3.) Also how to add the light grey axis in the middle. I only got the vertical ones.
4.) Is there a way to add a corner radius for the lines?
This is what it looks like right now:
This is what I want to achieve:
Here's my code so far:
/// Example of a line chart rendered with dash patterns.
class DashPatternLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
DashPatternLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory DashPatternLineChart.withSampleData() {
return new DashPatternLineChart(
_createSampleData(),
// Disable animations for image tests.
animate: false,
);
}
#override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList,
animate: animate,
layoutConfig: charts.LayoutConfig(
leftMarginSpec: charts.MarginSpec.fixedPixel(0),
topMarginSpec: charts.MarginSpec.fixedPixel(75),
rightMarginSpec: charts.MarginSpec.fixedPixel(0),
bottomMarginSpec: charts.MarginSpec.fixedPixel(175)
),
flipVerticalAxis: false,
defaultInteractions: false,
domainAxis: new charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.white,
thickness: 1,
)
),
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
// Create the ticks to be used the domain axis.
<charts.TickSpec<num>>[
new charts.TickSpec(0, label: '0', style: charts.TextStyleSpec(fontSize: 14)),
new charts.TickSpec(50, label: '50', style: charts.TextStyleSpec(fontSize: 14)),
new charts.TickSpec(100, label: '100', style: charts.TextStyleSpec(fontSize: 14)),
],
)),
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
labelOffsetFromAxisPx: -20,
labelAnchor: charts.TickLabelAnchor.after,
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.transparent,
thickness: 0,
)
),
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
// Create the ticks to be used the domain axis.
<charts.TickSpec<num>>[
new charts.TickSpec(100, label: '100%', style: charts.TextStyleSpec(fontSize: 14)),
],
)
));
}
/// Create three series with sample hard coded data.
/// Create three series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [
new LinearSales(0, 100),
new LinearSales(25, 85),
new LinearSales(30, 80),
new LinearSales(45, 60),
new LinearSales(30, 40),
new LinearSales(25, 20),
new LinearSales(0, 0),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.white,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
domainUpperBoundFn: (LinearSales sales, _) => sales.domainUpper,
domainLowerBoundFn: (LinearSales sales, _) => sales.domainLower,
measureUpperBoundFn: (LinearSales sales, _) => sales.measureUpper,
measureLowerBoundFn: (LinearSales sales, _) => sales.measureLower,
strokeWidthPxFn: (_, __) => 4,
data: myFakeDesktopData,
)
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
final int domainUpper = 100;
final int domainLower = 0;
final int measureUpper = 100;
final int measureLower = 0;
LinearSales(this.year, this.sales);
}
I don't have an answer for all your questions, but I was able to supply my own colors this way:
charts.Color.fromHex(code: "#ff0000")
or semitransparent like this:
charts.Color(r: 255, g: 0, b: 0, a: 128)
This is a question for Flutter development using charts_flutter. Is there a parameter to fix the maximum value on the measure axis? I'm currently using desiredTickCount as a hack but I ideally only want 3 tickers (0,5,10) for a range of 0-10 on the measure axis.
Code snippet:
Widget _createChart() {
return new charts.BarChart(
_createSampleData(),
animate: true,
vertical: false,
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.BasicNumericTickProviderSpec(
desiredTickCount: 11,
),
),
barRendererDecorator: new charts.BarLabelDecorator(),
// Hide domain axis.
domainAxis:
new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()),
);
}
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [
new OrdinalSales('Liver', 8),
new OrdinalSales('Heart', 4),
new OrdinalSales('Spleen', 5),
new OrdinalSales('Lung', 1),
new OrdinalSales('Kidney', 2),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Sales',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
// Set a label accessor to control the text of the bar label.
labelAccessorFn: (OrdinalSales sales, _) => '${sales.year}',
),
];
}
}
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}
If you really just want 0, 5 and 10 try using a StaticNumericTickProviderSpec
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
<charts.TickSpec<num>>[
charts.TickSpec<num>(0),
charts.TickSpec<num>(5),
charts.TickSpec<num>(10),
],
),
),