This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathbar.js
More file actions
119 lines (119 loc) · 6.78 KB
/
bar.js
File metadata and controls
119 lines (119 loc) · 6.78 KB
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Sample for Bar series
*/
var React = require("react");
var ej2_react_charts_1 = require("@syncfusion/ej2-react-charts");
var ej2_base_1 = require("@syncfusion/ej2-base");
var sample_base_1 = require("../common/sample-base");
exports.data1 = [
{ x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },
{ x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 }
];
exports.data2 = [
{ x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },
{ x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 }
];
var SAMPLE_CSS = "\n .control-fluid {\n\t\tpadding: 0px !important;\n }";
/**
* Bar sample
*/
var Bar = (function (_super) {
__extends(Bar, _super);
function Bar() {
return _super !== null && _super.apply(this, arguments) || this;
}
Bar.prototype.render = function () {
return (React.createElement("div", { className: 'control-pane' },
React.createElement("style", null, SAMPLE_CSS),
React.createElement("div", { className: 'control-section' },
React.createElement("div", null,
React.createElement(ej2_react_charts_1.ChartComponent, { id: 'charts', style: { textAlign: "center" }, primaryXAxis: {
valueType: 'Category',
title: 'Food',
interval: 1,
majorGridLines: { width: 0 }
}, primaryYAxis: {
labelFormat: '{value}B',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: {
color: 'transparent'
}
}, chartArea: { border: { width: 0 } }, load: this.load.bind(this), width: ej2_base_1.Browser.isDevice ? '100%' : '60%', title: 'UK Trade in Food Groups - 2015', loaded: this.onChartLoad.bind(this), tooltip: { enable: true } },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.BarSeries, ej2_react_charts_1.DataLabel, ej2_react_charts_1.Category, ej2_react_charts_1.Legend, ej2_react_charts_1.Tooltip] }),
React.createElement(ej2_react_charts_1.SeriesCollectionDirective, null,
React.createElement(ej2_react_charts_1.SeriesDirective, { dataSource: exports.data1, xName: 'x', yName: 'y', type: 'Bar', name: 'Imports', width: 2, marker: {
dataLabel: {
visible: true,
position: 'Top',
font: {
fontWeight: '600', color: '#ffffff'
}
}
} }),
React.createElement(ej2_react_charts_1.SeriesDirective, { dataSource: exports.data2, xName: 'x', yName: 'y', type: 'Bar', name: 'Exports', width: 2, marker: {
dataLabel: {
visible: true,
position: 'Top',
font: {
fontWeight: '600', color: '#ffffff'
}
}
} })))),
React.createElement("div", { style: { float: 'right', marginRight: '10px' } },
"Source: \u00A0",
React.createElement("a", { href: "https://www.gov.uk/", target: '_blank' }, "www.gov.uk"))),
React.createElement("div", { id: "action-description" },
React.createElement("p", null, "This sample visualizes the data about UK trade in food groups of the year 2015 with default bar series in the chart. Data points values are showed by using data label.")),
React.createElement("div", { id: "description" },
React.createElement("p", null,
"In this example, you can see how to render and configure the bar type charts. Similar to column charts, but the orientation of y axis is horizontal instead of vertical. You can use ",
React.createElement("code", null, "border"),
", ",
React.createElement("code", null, "fill"),
" properties to customize the data appearance. ",
React.createElement("code", null, "dataLabel"),
" is used to represent individual data and its value."),
React.createElement("p", null, "Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices."),
React.createElement("br", null),
React.createElement("p", null,
React.createElement("b", null, "Injecting Module")),
React.createElement("p", null,
"Chart component features are segregated into individual feature-wise modules. To use bar series, we need to inject",
React.createElement("code", null, "BarSeries"),
" module into ",
React.createElement("code", null, "services"),
"."),
React.createElement("p", null,
"More information on the bar series can be found in this \u00A0",
React.createElement("a", { target: "_blank", href: "http://ej2.syncfusion.com/react/documentation/chart/api-series.html#type-chartseriestype" }, "documentation section"),
"."))));
};
Bar.prototype.onChartLoad = function (args) {
var chart = document.getElementById('charts');
chart.setAttribute('title', '');
};
;
Bar.prototype.load = function (args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
};
;
return Bar;
}(sample_base_1.SampleBase));
exports.Bar = Bar;