logoCreated with Sketch.

F2Native

Stacked Area Chart

1 min read

Data（jsonString）

Prepare jsonData like this

[{"name": "London","month": "Jan.","value": 18.9}, 
 {"name": "London","month": "Feb.","value": 28.8}, 
 {"name": "London","month": "Mar.","value": 39.3}, 
 {"name": "London","month": "Apr.","value": 81.4},
 {"name": "London","month": "May.","value": 47}, 
 {"name": "London","month": "Jun.","value": 20.3}, 
 {"name": "London","month": "Jul.","value": 24},
 {"name": "London","month": "Aug.","value": 35.6},
 {"name": "Berlin","month": "Jan.","value": 12.4}, 
 {"name": "Berlin","month": "Feb.","value": 23.2}, 
 {"name": "Berlin","month": "Mar.","value": 34.5},
 {"name": "Berlin","month": "Apr.","value": 99.7},
 {"name": "Berlin","month": "May.","value": 52.6},
 {"name": "Berlin","month": "Jun.","value": 35.5}, 
 {"name": "Berlin","month": "Jul.","value": 37.4}, 
 {"name": "Berlin","month": "Aug.","value": 42.4}]

Example

iOS

F2CanvasView *canvasView =[F2CanvasView canvas:self.frame];
F2Chart *chart = [F2Chart chart:canvasView.bounds.size name:NSStringFromClass([self class])];
chart.canvas(canvasView).padding(20, 10, 20, 0.f).source(jsonData);
chart.axis(@"month", @{@"grid": @(NO)});
chart.scale(@"month", @{@"range": @[@(0.1), @(0.9)]});
chart.interval().adjust(@"dodge") .position(@"month*value") .color(@"name", @[]);
chart.render();

Android

mChart.setCanvas(canvasView);
mChart.padding(10, 0, 0, 0);
mChart.source(Utils.loadAssetFile(canvasView.getContext(), "jsonData.json"));
mChart.interval().position("month*value") .color("name").adjust("dodge");
mChart.setScale("month", new F2Chart.ScaleConfigBuilder().range(new double[]{0.065, 0.935}));
mChart.render();