-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBarChart.js
57 lines (55 loc) · 2.47 KB
/
BarChart.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var Charting = MindFusion.Charting;
var Controls = MindFusion.Charting.Controls;
var Collections = MindFusion.Charting.Collections;
var Drawing = MindFusion.Charting.Drawing;
var GridType = MindFusion.Charting.GridType;
var chartEl = document.getElementById('barChart');
chartEl.width = chartEl.offsetParent.clientWidth;
chartEl.height = chartEl.offsetParent.clientHeight;
var chart = new Controls.BarChart(chartEl);
chart.titleMargin = new Charting.Margins(0, 20, 0, 20);
chart.title = "Corporate Sales";
chart.barSpacingRatio = 1.5;
chart.legendMargin = new Charting.Margins(10, 10, 10, 10);
chart.legendTitle = "Legend";
chart.showLegend = true;
// create bar brushes
var thirdBrush = new Drawing.Brush("#e0e9e9");
var secondBrush = new Drawing.Brush("#5a79a5");
var firstBrush = new Drawing.Brush("#003466");
var stroke = new Drawing.Brush("#cecece");
var labels = new Collections.List([
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]);
var angle = 1;
// create sample data series
var series1 = new Charting.BarSeries(new Collections.List([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), null, null, labels);
var series2 = new Charting.SimpleSeries(new Collections.List([2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]), null);
var series3 = new Charting.SimpleSeries(new Collections.List([2, 8, 13, 15, 13, 8, 2, 8, 13, 15, 13, 8]), null);
var series = new Collections.ObservableCollection(new Array(series1, series2, series3));
series.item(0).title = "2019";
series.item(1).title = "2018";
series.item(2).title = "2017";
chart.xAxis.title = "Month";
chart.showXCoordinates = false;
chart.showXTicks = false;
chart.yAxis.title = "Turnover (in mlns)";
chart.series = series;
chart.xAxis.interval = 1;
// assign one brush per series
var brushes = new Collections.List([firstBrush, secondBrush, thirdBrush]);
var strokes = new Collections.List([new Drawing.Brush("#cecece")]);
chart.plot.seriesStyle = new Charting.PerSeriesStyle(brushes, strokes);
chart.theme.legendBackground = new Drawing.Brush("#ffffff");
chart.theme.legendBorderStroke = new Drawing.Brush("#cecece");
chart.theme.axisTitleFontSize = 14;
chart.theme.axisLabelsFontSize = 11;
chart.theme.axisTitleFontName = "Verdana";
chart.theme.axisLabelsFontName = "Verdana";
chart.theme.dataLabelsFontName = "Verdana";
chart.legendTitle = "Year";
chart.theme.gridColor1 = chart.theme.gridColor2 = new Drawing.Color("#ffffff");
chart.theme.gridLineColor = new Drawing.Color("#cecece");
chart.gridType = GridType.Horizontal;
chart.draw();