syncfusion
/
ej2-samples
зеркало из https://github.com/syncfusion/ej2-samples.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

v20.4.38 is released

This commit is contained in:
pipeline 2022-12-22 05:29:25 +00:00
Родитель 429d09261a
Коммит 582fc5f8b5
440 изменённых файлов: 61791 добавлений и 6023 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

5
config.json
Просмотреть файл

@ -173,6 +173,9 @@
"dropdown",
"pdfviewer",
"formdesigner",
"workflow"
"workflow",
"form-validator",
"signature",
"multiline-textbox"
]
}

2
gulpfile.js
Просмотреть файл

@ -267,4 +267,4 @@ gulp.task('serve', ['build'], function (done) {
ui: false
};
bs.init(options, done);
});
});

31
index.html
Просмотреть файл

@ -2,6 +2,11 @@
<html lang="en">
<head>
<script>
var orgin = location.origin;
var baseref = location.href.split('#')[0].replace(orgin, '');
document.write('<base href=\"' + baseref + '\">');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@ -66,7 +71,7 @@
<div class="sb-home-text">
<span>HOME</span>
</div>
<a id="sb-home" href="https://ej2.syncfusion.com/home/"></a>
<a id="sb-home" href="https://ej2.syncfusion.com/home/" aria-label="Sample home page"></a>
</div>
<div class='sb-control-navigation'>
<div id="controlTree" class='e-view'></div>
@ -80,11 +85,11 @@
</div>
<div class='sb-left-footer'>
<div class="sb-mobile-header-buttons">
<a href='https://www.syncfusion.com/javascript-ui-controls' target="_blank">
<a href='https://www.syncfusion.com/javascript-ui-controls' target="_blank" aria-label="About Javascript control">
<div class="sb-mobile-header-about">
About</div>
</a>
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank">
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank" aria-label="Pricing Javascript control">
<div class="sb-mobile-header-price">Pricing</div>
</a>
</div>
@ -149,12 +154,12 @@
<div class="sb-header-item sb-table-cell sb-header-settings sb-icons"></div>
<div class="sb-header-splitter sb-download-splitter"></div>
<div class='sb-header-item sb-table-cell sb-download-wrapper'>
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank">
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank" aria-label="Download Free Trial">
<button id='download-now' class='sb-download-btn'>
<span class='sb-download-text'>FREE TRIAL</span>
</button>
</a>
<a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank">
<a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank" aria-label="Install NPM">
<button class='sb-npm-btn'>
<img class="npm-svg" src="styles/images/NPM.svg" alt="npm icon"><span class="doc-npm-link">Install NPM</span>
</button>
@ -249,7 +254,7 @@
<span class="switch-text">High Contrast</span>
</li>
</ul>
<div class="sb-theme-studio"><a target="_blank" href="https://ej2.syncfusion.com/themestudio/?theme=material">Go to Theme Studio</a></div>
<div class="sb-theme-studio"><a target="_blank" href="https://ej2.syncfusion.com/themestudio/?theme=material" aria-label="Go to Theme Studio">Go to Theme Studio</a></div>
</div>
<div id='settings-popup' class='sb-setting-popup'>
<div class='sb-setting-header'>
@ -337,7 +342,7 @@
</div>
</div>
<div class='sb-desktop-wrapper'>
<div id='component-name' role='header' class='sb-component-name sb-rightpane-padding'>
<div id='component-name' role="heading" aria-level="1" class='sb-component-name sb-rightpane-padding'>
<h1 class='sb-sample-text'>Chart</h1>
</div>
<div id='sample-bread-crumb' class='sb-bread-crumb sb-rightpane-padding'>
@ -439,7 +444,7 @@
</div>
</div>
<a style="color:#ffff;text-decoration:none;"
href="https://www.syncfusion.com/downloads/essential-js2">
href="https://www.syncfusion.com/downloads/essential-js2" aria-label="Try it for free">
<div class="free-trial">TRY IT FOR FREE</div>
</a>
</div>
@ -451,23 +456,23 @@
<div class="sb-footer">
<div class="sb-footer-left">
<div class="sb-footer-links">
<a href="https://ej2.syncfusion.com/documentation/" target="_blank">
<a href="https://ej2.syncfusion.com/documentation/" target="_blank" aria-label="Documentation">
<div class="sb-footer-link">Documentation</div>
</a>
<a href="https://www.syncfusion.com/forums/essential-js2" target="_blank">
<a href="https://www.syncfusion.com/forums/essential-js2" target="_blank" aria-label="Forum link">
<div class="sb-footer-link">Forum</div>
</a>
<a href="https://syncfusion.com/blogs" target="_blank">
<a href="https://syncfusion.com/blogs" target="_blank" aria-label="Blog link">
<div class="sb-footer-link">Blog</div>
</a>
<a href="https://www.syncfusion.com/kb" target="_blank">
<a href="https://www.syncfusion.com/kb" target="_blank" aria-label="Knowledge Base">
<div class="sb-footer-link">Knowledge Base</div>
</a>
</div>
<div class="sb-footer-copyright"></div>
</div>
<div class="sb-footer-logo">
<a href="https://www.syncfusion.com/" target="_blank">
<a href="https://www.syncfusion.com/" target="_blank" aria-label="Sample footer logo">
<div class="sb-footer-logo-icon"></div>
</a>
</div>

2
package.json
Просмотреть файл

@ -1,6 +1,6 @@
{
"name": "@syncfusion/ej2-samples",
"version": "20.3.56",
"version": "20.4.38",
"description": "Samples for Syncfusion Essential JS 2",
"author": "Syncfusion Inc.",
"license": "SEE LICENSE IN license",

26
sampleOrder.json
Просмотреть файл

@ -26,6 +26,15 @@
"diacritics-filtering": "Diacritics Filtering"
}
},
"arc-gauge": {
"ControlName": "Arc Gauge",
"Samples": {
"default": "Default Functionalities",
"customer-satisfaction-score": "Customer Satisfaction Score",
"key-performance-indicator": "Key Performance Indicator",
"patterns": "Patterns"
}
},
"avatar": {
"ControlName": "Avatar",
"Samples": {
@ -881,6 +890,19 @@
"right-to-left": "RTL"
}
},
"rating": {
"ControlName": "Rating",
"Samples": {
"overview":"Overview",
"default":"Default Functionalities",
"precision": "Precision",
"tooltip": "Tooltip",
"label": "Label",
"template": "Template",
"customization": "Customization",
"navigation": "Keyboard Navigations"
}
},
"rich-text-editor": {
"ControlName": "Rich Text Editor",
"Samples": {
@ -1124,7 +1146,9 @@
"Samples": {
"default": "Default Functionalities",
"popup": "Popup",
"alignment": "Alignment"
"alignment": "Alignment",
"template": "Template",
"keyboard-interaction": "Keyboard Interaction"
}
},
"tooltip": {

1
src/appbar/sample.json
Просмотреть файл

@ -2,7 +2,6 @@
"name": "AppBar",
"directory": "appbar",
"category": "Navigation",
"type":"preview",
"ftName": "appbar",
"samples": [
{

28
src/arc-gauge/customer-satisfaction-score.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<div class="control-section">
<div id="gauge" align="center"></div>
</div>
<div id="action-description">
<p>
This sample shows an arc gauge with a real-time scenario of a customer satisfaction score ranging from 0 to 10.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render an arc gauge showing customer satisfaction score. You can use <a
target="_blank" href="https://ej2.syncfusion.com/documentation/api/circular-gauge/axisModel/">axes</a>, <a
target="_blank" href="https://ej2.syncfusion.com/documentation/api/circular-gauge/rangeModel/">ranges</a>,
<a target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/annotationModel/">annotations</a>,
<a target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/legendSettingsModel/">legend</a> and <a
target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/tooltipSettingsModel/">tooltip</a>
oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
</p>
<p>
More information on the arc gauge can be found in this
<a target="_blank"
href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation
section</a>.
</p>
</div>

163
src/arc-gauge/customer-satisfaction-score.ts Normal file
Просмотреть файл

@ -0,0 +1,163 @@
// custom code start
import { loadCultureFiles } from '../common/culture-loader';
// custom code end
/**
* The customer satisfaction score sample
*/
import { CircularGauge, ILoadedEventArgs, Annotations, GaugeTooltip, Legend, GaugeTheme } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(Annotations, GaugeTooltip, Legend);
(window as any).default = (): void => {
// custom code start
loadCultureFiles();
// custom code end
let circulargauge: CircularGauge = new CircularGauge({
load: (args: ILoadedEventArgs) => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
// custom code end
},
height: '400px',
allowMargin: false,
title: 'Customer Satisfaction Score',
titleStyle: {
size: '18px',
fontFamily: 'inherit'
},
tooltip: {
enable: true,
showAtMousePosition:true,
template:
'<div style="font-size:18px;background:white;width:180px;color:#595959;border:1px solid #e8e8e8">Current Score: ${value} </div>',
},
legendSettings: {
visible: true,
position: 'Bottom',
width: "55%",
textStyle: {
size: '12px',
fontFamily: 'inherit'
}
},
axes: [
{
annotations: [
{
content:
'<div style="font-size:16px;font-family:inherit;">7.5</div>',
angle: 0,
zIndex: '1',
radius: '-15%',
},
],
lineStyle: { width: 0 },
labelStyle: {
font: {
size: '12px',
fontFamily: 'inherit'
},
position: 'Outside',
offset: -40,
},
majorTicks: {
height: 12,
width: 1.5,
interval: 2,
offset: 35
},
minorTicks: { height: 0 },
startAngle: 270,
endAngle: 90,
minimum: 0,
maximum: 10,
radius: '100%',
pointers: [
{
radius: '70%',
needleEndWidth: 2,
pointerWidth: 5,
value: 7.5,
cap: {
radius: 8,
border: { width: 2 },
},
},
{
type: 'Marker',
markerShape: 'Rectangle',
markerWidth: 40,
markerHeight: 0.5,
animation: {
enable: false
},
radius: '68%',
value: 6.5,
color: '#0477c2',
},
{
type: 'Marker',
markerShape: 'Rectangle',
markerWidth: 40,
markerHeight: 0.5,
animation: {
enable: false
},
radius: '68%',
value: 9.5,
color: '#0477c2',
},
],
ranges: [
{
start: 0,
end: 2,
startWidth: 40,
endWidth: 40,
color: '#F03E3E',
radius: '80%',
legendText: 'Poor'
},
{
start: 6.5,
end: 9.5,
startWidth: 120,
endWidth: 120,
color: '#0477c2',
radius: '110%',
legendText: 'Average Score'
},
{
start: 2,
end: 5,
startWidth: 40,
endWidth: 40,
color: '#f6961e',
radius: '80%',
legendText: 'Satisfied'
},
{
start: 5,
end: 8,
startWidth: 40,
endWidth: 40,
color: '#FFDD00',
radius: '80%',
legendText: 'Good'
},
{
start: 8,
end: 10,
startWidth: 40,
endWidth: 40,
color: '#30B32D',
radius: '80%',
legendText: 'Excellent'
},
],
},
],
});
circulargauge.appendTo('#gauge');
};

56
src/arc-gauge/default.html Normal file
Просмотреть файл

@ -0,0 +1,56 @@
<div class="control-section">
<div id="gauge" align="center"></div>
</div>
<div id="action-description">
<p>
This sample shows the arc gauge's default rendering. It also shows the most popular social media platforms and
the percentage of female users.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render a default arc gauge. The arc gauge helps in the visualization of
numerical values of scales in a semi-circular manner. You can use <a target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/axisModel/">axes</a>, <a target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/rangeModel/">ranges</a> and <a
target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/annotationModel/">annotations</a> oriented
properties to customize the default appearance of the arc gauge.
</p>
<p>
More information on the arc gauge can be found in this <a target="_blank"
href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation section</a>.
</p>
</div>
<style>
.titleText {
font-size: 22px;
margin-top: 17px;
}
.e-view.tailwind div.titleText,
.e-view.tailwind-dark div.titleText {
font-size: 22px;
margin-top: 0px;
}
.annotation {
font-size: 18px;
}
@media screen and (max-width: 420px) {
.titleText {
font-size: 15px;
}
.annotation {
font-size: 13px;
}
.e-view.tailwind div.titleText,
.e-view.tailwind-dark div.titleText {
font-size: 15px;
margin-top: 0px;
}
}
</style>

212
src/arc-gauge/default.ts Normal file
Просмотреть файл

@ -0,0 +1,212 @@
// custom code start
import { loadCultureFiles } from '../common/culture-loader';
// custom code end
/**
* Default sample
*/
import { CircularGauge, ILoadedEventArgs, Annotations, GaugeTheme } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(Annotations);
(window as any).default = (): void => {
// custom code start
loadCultureFiles();
// custom code end
let circulargauge: CircularGauge = new CircularGauge({
load: (args: ILoadedEventArgs) => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
if (selectedTheme.indexOf("tailwind") != -1 && args.gauge.axes[0].annotations != null) {
args.gauge.axes[0].annotations[0].angle = 342;
args.gauge.axes[0].annotations[0].radius = "92%";
args.gauge.axes[0].annotations[1].angle = 337;
args.gauge.axes[0].annotations[1].radius = "80%";
args.gauge.axes[0].annotations[2].angle = 337;
args.gauge.axes[0].annotations[2].radius = "65%";
args.gauge.axes[0].annotations[3].angle = 326;
args.gauge.axes[0].annotations[3].radius = "55%";
args.gauge.axes[0].annotations[4].angle = 323;
args.gauge.axes[0].annotations[4].radius = "39%";
args.gauge.axes[0].annotations[5].angle = 192;
args.gauge.axes[0].annotations[5].radius = "91%";
args.gauge.axes[0].annotations[9].angle = 136;
args.gauge.axes[0].annotations[9].radius = "34%";
}
// custom code end
},
height: '500px',
title: 'Female (% usage) on popular social network',
titleStyle: {
size: '18px',
fontFamily: 'inherit'
},
axes: [
{
annotations: [
{
content: '<div class="titleText" style="color:#c8eab7;">YouTube</div>',
angle: 344,
radius: '94%',
zIndex: '1',
},
{
content: '<div class="titleText" style="color:#82cdbc;">Instagram</div>',
angle: 340,
radius: '81%',
zIndex: '1',
},
{
content: '<div class="titleText" style="color:#43b6c4;">Twitter</div>',
angle: 340,
radius: '66%',
zIndex: '1',
},
{
content: '<div class="titleText" style="color:#1d91bf;">Facebook</div>',
angle: 332,
radius: '55%',
zIndex: '1',
},
{
content: '<div class="titleText" style="color:#205ea8;">TikTok</div>',
angle: 328,
radius: '40%',
zIndex: '1',
},
{
content: '<div class="annotation">68%</div>',
angle: 191,
radius: '89%',
zIndex: '1',
},
{
content: '<div class="annotation">43%</div>',
angle: 125,
radius: '75%',
zIndex: '1',
},
{
content: '<div class="annotation">21%</div>',
angle: 67,
radius: '62%',
zIndex: '1',
},
{
content: '<div class="annotation">75%</div>',
angle: 215,
radius: '48%',
zIndex: '1',
},
{
content: '<div class="annotation">44%</div>',
angle: 133,
radius: '33%',
zIndex: '1',
},
],
startAngle: 0,
endAngle: 270,
lineStyle: { width: 0 },
labelStyle: {
position: 'Inside',
font: {
size: '0px',
color: 'white',
fontFamily: 'Roboto',
fontStyle: 'Regular',
},
},
majorTicks: { height: 0 },
minorTicks: { height: 0 },
minimum: 0,
maximum: 100,
ranges: [
{
start: 0,
end: 68,
color: '#c8eab7',
radius: '94%',
startWidth: 22,
endWidth: 22,
},
{
start: 74,
end: 100,
color: '#7a7f82',
startWidth: 1,
endWidth: 1,
radius: '90%',
},
{
start: 0,
end: 43,
color: '#82cdbc',
radius: '80%',
startWidth: 22,
endWidth: 22,
},
{
start: 49,
end: 100,
color: '#7a7f82',
startWidth: 1,
endWidth: 1,
radius: '76%',
},
{
start: 0,
end: 21,
color: '#43b6c4',
radius: '66%',
startWidth: 22,
endWidth: 22,
},
{
start: 28,
end: 100,
color: '#7a7f82',
startWidth: 1,
endWidth: 1,
radius: '63%',
},
{
start: 0,
end: 75,
color: '#1d91bf',
radius: '52%',
startWidth: 22,
endWidth: 22,
},
{
start: 85,
end: 100,
color: '#7a7f82',
startWidth: 1,
endWidth: 1,
radius: '49%',
},
{
start: 0,
end: 44,
color: '#205ea8',
radius: '38%',
startWidth: 22,
endWidth: 22,
},
{
start: 55,
end: 100,
color: '#7a7f82',
startWidth: 1,
endWidth: 1,
radius: '35%',
},
],
pointers: [],
},
],
});
circulargauge.appendTo('#gauge');
};

106
src/arc-gauge/key-performance-indicator.html Normal file
Просмотреть файл

@ -0,0 +1,106 @@
<div class="control-section">
<div id="gauge"></div>
</div>
<div id="action-description">
<p>
This sample shows an arc gauge with a key performance indicator (KPI), which is a measurable value that shows
how an organization meets key business objectives.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render an arc gauge showing key performance indicator (KPI). You can use <a
target="_blank" href="https://ej2.syncfusion.com/documentation/api/circular-gauge/axisModel/">axes</a>, <a
target="_blank" href="https://ej2.syncfusion.com/documentation/api/circular-gauge/rangeModel/">ranges</a>,
<a target="_blank" href="https://ej2.syncfusion.com/documentation/api/circular-gauge/pointerModel/">pointers</a>
and <a target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/annotationModel/">annotations</a> oriented
properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
</p>
<p>
More information on the arc gauge can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation
section</a>.
</p>
</div>
<style>
.triangle-up {
width: 20;
height: 20;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #84cbb5;
margin-top: -9px;
}
.text {
font-size: 30px;
text-align: center;
}
.percentage {
font-size: 44px;
text-align: center;
margin-left: -8px;
}
.e-view.tailwind div.triangle-up,
.e-view.tailwind-dark div.triangle-up {
margin-top: -11px;
}
.e-view.material div.triangle-up,
.e-view.material-dark div.triangle-up,
.e-view.bootstrap-dark div.triangle-up,
.e-view.bootstrap div.triangle-up,
.e-view.bootstrap4 div.triangle-up {
width: 20;
height: 20;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #84cbb5;
margin-top: -17px;
}
@media screen and (max-width: 420px) {
.text {
font-family: inherit;
font-size: 20px;
text-align: center;
margin-left: 10px;
}
.percentage {
font-family: inherit;
font-size: 30px;
text-align: center;
}
.e-view.tailwind div.triangle-up,
.e-view.tailwind-dark div.triangle-up {
margin-top: 0px;
}
.triangle-up {
width: 20;
height: 20;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #84cbb5;
margin-top: 0px;
}
.e-view.material div.triangle-up,
.e-view.material-dark div.triangle-up,
.e-view.bootstrap-dark div.triangle-up,
.e-view.bootstrap div.triangle-up,
.e-view.bootstrap4 div.triangle-up {
width: 20;
height: 20;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #84cbb5;
margin-top: -6px;
}
}
</style>

138
src/arc-gauge/key-performance-indicator.ts Normal file
Просмотреть файл

@ -0,0 +1,138 @@
// custom code start
import { loadCultureFiles } from '../common/culture-loader';
// custom code end
/**
* Key performance indicator sample
*/
import { CircularGauge, Gradient, Annotations, GaugeTheme, ILoadedEventArgs } from '@syncfusion/ej2-circulargauge';
CircularGauge.Inject(Annotations, Gradient);
(window as any).default = (): void => {
// custom code start
loadCultureFiles();
// custom code end
let circulargauge: CircularGauge = new CircularGauge({
load: (args: ILoadedEventArgs) => {
// custom code start
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
// custom code end
},
axes: [
{
annotations: [
{
content: '<div class="triangle-up"></div>',
angle: 270,
zIndex: '1',
radius: '33%',
},
{
content:
'<div class="text" style="color:#84cbb5;">Current</div>',
angle: 0,
zIndex: '1',
radius: '25%',
},
{
content:
'<div class="percentage" style="color:#84cbb5;">76.6%</div>',
angle: 125,
zIndex: '1',
radius: '12%',
},
{
content:
'<div style="font-size:22px;font-family: inherit;">0</div>',
angle: 213,
zIndex: '1',
radius: '83%',
},
{
content:
'<div style="font-size:22px;font-family: inherit;">100</div>',
angle: 150,
zIndex: '1',
radius: '83%',
},
],
lineStyle: { width: 0 },
labelStyle: {
font: {
size: '0px'
},
},
majorTicks: { height: 0 },
minorTicks: { height: 0 },
startAngle: 220,
endAngle: 140,
minimum: 0,
maximum: 100,
radius: '90%',
pointers: [
{
type: 'Marker',
markerShape: 'Circle',
markerWidth: 30,
markerHeight: 30,
animation: {
enable: false
},
radius: '82%',
color: '#bdbdbf',
value: 30,
},
{
type: 'Marker',
markerShape: 'Circle',
markerWidth: 30,
markerHeight: 30,
animation: {
enable: false
},
radius: '82%',
color: '#626866',
value: 50,
},
{
type: 'Marker',
markerShape: 'InvertedTriangle',
markerWidth: 30,
markerHeight: 30,
radius: '92%',
color: '#b6b6b6',
value: 76.6,
},
],
ranges: [
{
start: 0,
end: 100,
startWidth: 30,
endWidth: 30,
roundedCornerRadius: 20,
color: '#e3e3e3',
radius: '90%',
},
{
start: 30,
end: 50,
startWidth: 30,
endWidth: 30,
linearGradient: {
startValue: '0%',
endValue: '60%',
colorStop: [
{ color: 'white', offset: '10%', opacity: 0.9 },
{ color: '#84cbb5', offset: '90%', opacity: 0.9 },
],
},
radius: '90%',
},
],
},
],
});
circulargauge.appendTo('#gauge');
};

84
src/arc-gauge/patterns.html Normal file
Просмотреть файл

@ -0,0 +1,84 @@
<div class="control-section">
<table>
<tr>
<td class="gaugeAlign">
<div id="container1">
</div>
</td>
<td class="gaugeAlign">
<div id="container2">
</div>
</td>
<td class="gaugeAlign">
<div id="container3">
</div>
</td>
</tr>
<tr>
<td class="gaugeAlign">
<div id="container4">
</div>
</td>
<td class="gaugeAlign">
<div id="container5">
</div>
</td>
<td class="gaugeAlign">
<div id="container6">
</div>
</td>
</tr>
</table>
</div>
<div id="action-description">
<p>
This sample includes a wide range of arc gauges with varying appearances based on the built-in features and
customization options.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render an arc gauge in various styles. You can use <a target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/axisModel">axes</a>, <a target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/rangeModel/">ranges</a>, <a
target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/pointerModel/">pointers</a> and <a
target="_blank"
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/annotationModel/">annotations</a> oriented
properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
</p>
<p>
More information on the arc gauge can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation
section</a>.
</p>
</div>
<style>
.annotationText {
font-family: inherit;
font-size: 22px;
text-align: center;
margin-top: 20px;
}
.e-view.tailwind div.annotationText,
.e-view.tailwind-dark div.annotationText {
font-size: 22px;
text-align: center;
margin-top: 0px;
}
.e-view.tailwind div.titleText,
.e-view.tailwind-dark div.titleText {
margin-top: 5px;
margin-left: 5px;
}
.titleText {
font-family: inherit;
margin-top: 7px;
margin-left: 3px;
}
.gaugeAlign {
width: 50%;
}
</style>

27
src/arc-gauge/patterns.ts Normal file
Просмотреть файл

@ -0,0 +1,27 @@
// custom code start
import { loadCultureFiles } from '../common/culture-loader';
// custom code end
/**
* Patterns sample
*/
import { CircularGauge, Annotations, Gradient } from '@syncfusion/ej2-circulargauge';
import { gauge1, gauge2, gauge3, gauge4, gauge5, gauge6 } from './pointer-gauge';
CircularGauge.Inject(Annotations, Gradient);
(window as any).default = (): void => {
// custom code start
loadCultureFiles();
// custom code end
let firstgauge: CircularGauge = new CircularGauge(gauge1());
firstgauge.appendTo('#container1');
let secondgauge: CircularGauge = new CircularGauge(gauge2());
secondgauge.appendTo('#container2');
let thirdgauge: CircularGauge = new CircularGauge(gauge3());
thirdgauge.appendTo('#container3');
let fourthgauge: CircularGauge = new CircularGauge(gauge4());
fourthgauge.appendTo('#container4');
let fifthGauge: CircularGauge = new CircularGauge(gauge5());
fifthGauge.appendTo('#container5');
let sixthGauge: CircularGauge = new CircularGauge(gauge6());
sixthGauge.appendTo('#container6');
};

1556
src/arc-gauge/pointer-gauge.ts Normal file
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

37
src/arc-gauge/sample.json Normal file
Просмотреть файл

@ -0,0 +1,37 @@
{
"name": "Arc Gauge",
"directory": "arc-gauge",
"category": "Data Visualization",
"type":"new",
"ftName": "arcgauge",
"samples": [
{
"url": "default",
"name": "Default Functionalities",
"type":"new",
"description": "This Essential JS2 Arc Gauge demo shows the gauge's basic rendering.",
"category": "Arc Gauge"
},
{
"url": "customer-satisfaction-score",
"name": "Customer Satisfaction Score",
"type":"new",
"description": "This Essential JS2 Arc Gauge demo shows how the gauge can be customized to represent a customer satisfaction score scenario.",
"category": "Arc Gauge"
},
{
"url": "key-performance-indicator",
"name": "Key Performance Indicator",
"type":"new",
"description": "This Essential JS2 Arc Gauge demo shows how the gauge can be customized to represent a key performance indicator scenario.",
"category": "Arc Gauge"
},
{
"url": "patterns",
"name": "Patterns",
"type":"new",
"description": "This Essential JS2 Arc Gauge demo shows how the gauge can be rendered in many ways to demonstrate different user interfaces by customizing its axis, range, pointer, etc.",
"category": "Arc Gauge"
}
]
}

4
src/calendar/special-dates.html
Просмотреть файл

@ -102,10 +102,6 @@
font-weight: normal;
}
.e-customStyle .e-selected span.e-icons.highlight:before {
color: #fff;
}
.e-customStyle span.e-icons.highlight,
.e-customStyle.e-calendar .e-content span.special,
.e-customStyle.e-calendar .e-content span.daycell {

2
src/carousel/sample.json
Просмотреть файл

@ -2,7 +2,6 @@
"name": "Carousel",
"directory": "carousel",
"category": "Navigation",
"type":"update",
"ftName": "carousel",
"samples": [
{
@ -55,7 +54,6 @@
"url": "partial-visible",
"name": "Partial Visible",
"category": "Carousel",
"type":"new",
"api": {
"Carousel": [
"items",

4
src/chart/accumulation-distribution-indicator.html
Просмотреть файл

@ -14,8 +14,8 @@
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p style="font-weight: 500">Injecting Module</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Accumulation Distribution Indicator, we need to Inject
<code>AccumulationDistributionIndicator</code> module using <code>chart.Inject(AccumulationDistributionIndicator)</code> method.

2
src/chart/accumulation-distribution-indicator.ts
Просмотреть файл

@ -98,7 +98,7 @@ Chart.Inject(
},
chartArea: { border: { width: 0 } },
title: 'AAPL 2012-2017',
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

11
src/chart/area-empty.html
Просмотреть файл

@ -3,25 +3,22 @@
</div>
<div id="action-description">
<p>
This sample illustrates an area series with empty points.
Data points with null points are dropped here.
This sample illustrates an area series with empty points. Data points with null points are shown here.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render a area series with empty points. Similar to line type series, but the area get closed and filled with series color.
You can use <code>border</code>, <code>fill</code> properties to customize the area. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
Legend is enabled in this example with series type shape.
In this example, you can see how to render an area series with empty points. Also, a legend is enabled in the shape of the series.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>AreaSeries</code> module using <code>Chart.Inject(AreaSeries)</code> method.
</p>
<p>
More information on the area series can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
<style>

54
src/chart/area-empty.ts
Просмотреть файл

@ -1,8 +1,7 @@
import { loadCultureFiles } from '../common/culture-loader';
import { Chart, Category, AreaSeries, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
Chart.Inject(AreaSeries, Category, Legend);
import { Chart, Category, AreaSeries, Legend, ILoadedEventArgs, ChartTheme, Highlight, DateTime, Tooltip} from '@syncfusion/ej2-charts';
Chart.Inject(AreaSeries, Category, Legend, Highlight, Tooltip, DateTime);
import { Browser } from '@syncfusion/ej2-base';
/**
* Sample for Area Series with Empty Point
*/
@ -12,17 +11,11 @@ import { Browser } from '@syncfusion/ej2-base';
//Initializing Primary Axes
primaryXAxis: {
valueType: 'Category',
interval: 2,
majorGridLines: { width: 0 },
edgeLabelPlacement: 'Shift'
valueType: 'DateTime', labelFormat: 'dd MMM', majorGridLines: { width: 0 }, minimum: new Date(2021, 10, 14), maximum: new Date(2021, 10, 23), edgeLabelPlacement: 'Shift'
},
primaryYAxis:
{
title: 'Rates',
labelFormat: '{value}M',
lineStyle: { width: 0},
majorTickLines: { width: 0}
labelFormat: '{value}MB', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, minimum: 0, maximum: 5, interval: 1
},
chartArea: {
border: {
@ -33,25 +26,32 @@ import { Browser } from '@syncfusion/ej2-base';
series: [
{
type: 'Area',
dataSource: [{ x: '2002', y: 2 }, { x: '2003', y: 1.7 }, { x: '2004', y: 1.8 }, { x: '2005', y: 2.1 },
{ x: '2006', y: 2.3 }, { x: '2007', y: 1.7 }, { x: '2008', y: 1.5 }, { x: '2009', y: 1.8 },
{ x: '2010', y: 2 }, { x: 2011, y: 3.1 }],
xName: 'x', width: 2,
yName: 'y', name: 'France',
opacity: 0.5,border: { width: 2 },
}, {
type: 'Area',
dataSource: [{ x: '2002', y: 2.2 }, { x: '2003', y: 3.4 }, { x: '2004', y: 2.8 }, { x: '2005', y: null },
{ x: '2006', y: null }, { x: '2007', y: 2.5 }, { x: '2008', y: 2.9 }, { x: '2009', y: 3.8 },
{ x: '2010', y: 1.4 }, { x: 2011, y: 3.1 }],
xName: 'x', width: 2,
yName: 'y', name: 'US',
opacity: 0.5,border: { width: 2 },
dataSource: [{ Period: new Date(2021, 10, 14), US_InflationRate: 2.2, IN_InflationRate: 0.8 }, { Period: new Date(2021, 10, 15), US_InflationRate: 2.0, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 16), US_InflationRate: 2.8, IN_InflationRate: 1.8 },
{ Period: new Date(2021, 10, 17), US_InflationRate: 1.6, IN_InflationRate: 2.1 }, { Period: new Date(2021, 10, 18), US_InflationRate: 2.3, IN_InflationRate: null }, { Period: new Date(2021, 10, 19), US_InflationRate: 2.5, IN_InflationRate: 2.3 },
{ Period: new Date(2021, 10, 20), US_InflationRate: 2.9, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 21), US_InflationRate: 1.1, IN_InflationRate: 1.5 }, { Period: new Date(2021, 10, 22), US_InflationRate: 1.4, IN_InflationRate: 0.5 },
{ Period: new Date(2021, 10, 23), US_InflationRate: 1.1, IN_InflationRate: 1.3 }],
xName: 'Period', width: 2,
yName: 'US_InflationRate', name: 'Andrew',
opacity: 0.5, border: { width: 2 },
marker: { visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }
},
{
type: 'Area',
dataSource: [{ Period: new Date(2021, 10, 14 ), US_InflationRate: 2.2, IN_InflationRate: 0.8 }, { Period: new Date(2021, 10, 15), US_InflationRate: 2.0, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 16), US_InflationRate: 2.8, IN_InflationRate: 1.8 },
{ Period: new Date(2021, 10, 17), US_InflationRate: 1.6, IN_InflationRate: 2.1 }, { Period: new Date(2021, 10, 18), US_InflationRate: 2.3, IN_InflationRate: null }, { Period: new Date(2021, 10, 19), US_InflationRate: 2.5, IN_InflationRate: 2.3 },
{ Period: new Date(2021, 10, 20), US_InflationRate: 2.9, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 21), US_InflationRate: 1.1, IN_InflationRate: 1.5 }, { Period:new Date(2021, 10, 22), US_InflationRate: 1.4, IN_InflationRate: 0.5 },
{ Period: new Date(2021, 10, 23), US_InflationRate: 1.1, IN_InflationRate: 1.3 }],
xName: 'Period', width: 2,
yName: 'IN_InflationRate', name: 'Thomas',
opacity: 0.5, border: { width: 2 },
marker: { visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }
}
],
//Initializing Chart title
title: 'Inflation Rate',
width: Browser.isDevice ? '100%' : '60%',
title: 'Data Consumption',
width: Browser.isDevice ? '100%' : '75%',
tooltip: { enable: true, format: '${point.x} : <b>${point.y}' },
legendSettings: { enableHighlight: true },
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

2
src/chart/area-negative-point.html
Просмотреть файл

@ -12,7 +12,7 @@
</p>
<br>
<p>
More information on the area series can be found in this
More information on the area series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>

36
src/chart/area-negative-point.ts
Просмотреть файл

@ -1,7 +1,7 @@
import { loadCultureFiles } from '../common/culture-loader';
import { Chart, Category, AreaSeries, Legend, ILoadedEventArgs, ChartTheme, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(AreaSeries, Category, Legend, Tooltip);
import { Chart, DateTime, AreaSeries, Legend, ILoadedEventArgs, ChartTheme, Tooltip, Highlight } from '@syncfusion/ej2-charts';
Chart.Inject(AreaSeries, DateTime, Legend, Tooltip, Highlight);
import { Browser } from '@syncfusion/ej2-base';
/**
@ -12,10 +12,10 @@ import { Browser } from '@syncfusion/ej2-base';
let chart: Chart = new Chart({
//Initializing Primary Axes
primaryXAxis: {
valueType: 'Category',
interval: 1,
valueType: 'DateTime',
majorGridLines: { width: 0 },
edgeLabelPlacement: 'Shift',
minimum:new Date(2017, 0, 1), maximum: new Date(2021, 0, 1), intervalType: 'Years'
},
primaryYAxis: {
labelFormat: '${value}', interval: 2000, maximum: 8000, minimum: -4000,
@ -32,11 +32,9 @@ import { Browser } from '@syncfusion/ej2-base';
{
type: 'Area',
dataSource: [
{ x: 'Onion', y: 3000 },
{ x: 'Potato', y: 4000 },
{ x: 'Tomato', y: -4000 },
{ x: 'Corn', y: -2000 },
{ x: 'Carrot', y: 5000 },
{ x: new Date(2017, 0, 1), y: 3000 }, { x: new Date(2018, 0, 1), y: 4000 },
{ x: new Date(2019, 0, 1), y: -4000 }, { x: new Date(2020, 0, 1), y: -2000 },
{ x: new Date(2021, 0, 1), y: 5000 }
],
xName: 'x',
width: 2,
@ -47,11 +45,9 @@ import { Browser } from '@syncfusion/ej2-base';
{
type: 'Area',
dataSource: [
{ x: 'Onion', y: 2000 },
{ x: 'Potato', y: 3000 },
{ x: 'Tomato', y: 4000 },
{ x: 'Corn', y: 2000 },
{ x: 'Carrot', y: 3000 },
{ x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: 3000 },
{ x: new Date(2019, 0, 1), y: 4000 }, { x: new Date(2020, 0, 1), y: 2000 },
{ x: new Date(2021, 0, 1), y: 3000 }
],
xName: 'x',
width: 2,
@ -62,11 +58,9 @@ import { Browser } from '@syncfusion/ej2-base';
{
type: 'Area',
dataSource: [
{ x: 'Onion', y: 2000 },
{ x: 'Potato', y: -1000 },
{ x: 'Tomato', y: -3000 },
{ x: 'Corn', y: 4000 },
{ x: 'Carrot', y: 1000 },
{ x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: -1000 },
{ x: new Date(2019, 0, 1), y: -3000 }, { x: new Date(2020, 0, 1), y: 4000 },
{ x: new Date(2021, 0, 1), y: 1000 }
],
xName: 'x', border: { width: 2 },
width: 2,
@ -78,8 +72,8 @@ import { Browser } from '@syncfusion/ej2-base';
//Initializing Chart title
title: 'Profit and Loss',
tooltip:{ enable:true },
width: Browser.isDevice ? '100%' : '60%',
margin : {left : Browser.isDevice ? 2 : 10, right : Browser.isDevice ? 2 : 10, top : Browser.isDevice ? 2 : 10, bottom : Browser.isDevice ? 2 : 10},
width: Browser.isDevice ? '100%' : '75%',
legendSettings: {enableHighlight:true},
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

12
src/chart/area-segments.html
Просмотреть файл

@ -33,25 +33,27 @@
</div>
<div id="action-description">
<p>
This sample visualizes the organic revenue data with multi colored area series in the chart.
Data points are enhanced with segments and tooltip.
This sample visualizes the data on US season retail sales growth using a multi-colored area series in the chart. Data points are enhanced with segments and tooltips.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredArea</code> series type.
Points under the range can be configured with <code>color</code>, <code>width</code>, and <code>dashArray</code>.
In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredArea</code> series. Points within the range can be configured with <code>color</code> property in ChartSegment.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>MultiColoredAreaSeries</code> module using
<code>Chart.Inject(MultiColoredAreaSeries)</code> method.
</p>
<p>
More information on the area series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
<style>
#control-container {

32
src/chart/area-segments.ts
Просмотреть файл

@ -20,8 +20,11 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredAreaSeries);
valueType: 'DateTime',
labelFormat: 'MMM',
intervalType: 'Months',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
minorTickLines: {width : 0},majorTickLines: {width: 0},
majorGridLines: { width: 0 },
interval: 1,
labelRotation: Browser.isDevice ? -45 : 0,
labelIntersectAction: Browser.isDevice? 'None' : 'Trim'
},
//Initializing Primary Y Axis
@ -43,11 +46,24 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredAreaSeries);
},
annotations: [
{
content: '#templateWrap',
content: "<div style='color:#4ca1af; font-weight:bold'>Winter</div>",
region: 'Series',
x: '18%',
y: '43%'
},
{
content: "<div style='color:#ffa751; font-weight:bold'>Summer</div>",
region: 'Series',
x: '46%',
y: '43%'
},
{
content: "<div style='color:#1d976c; font-weight:bold'>Spring</div>",
region: 'Series',
x: '90%',
y: '12%'
}
y: '18%'
},
],
legendSettings: { visible: false },
//Initializing Chart Series
@ -68,12 +84,12 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredAreaSeries);
}
],
//Initializing Chart title
title: 'Organic Revenue in US - 2016',
title: 'US Season Retail Sales Growth',
//Initializing User Interaction Tooltip
tooltip: {
enable: true
enable: true, shared: true, format: '${point.x} : <b>${point.y}</b>'
},
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

13
src/chart/area.html
Просмотреть файл

@ -3,25 +3,22 @@
</div>
<div id="action-description">
<p>
This sample visualizes the data about average sales comparison of two products by using default area series in the chart.
Legend in the sample shows the information about the series.
This Area Chart example visualizes music sales data by format in US by using a default area series in the chart.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the area type charts. Similar to line type series, but the area get closed and filled with series color.
You can use <code>border</code>, <code>fill</code> properties to customize the area. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
Legend is enabled in this example with series type shape.
In this example, you can see how the area type chart can be rendered and configured. It is like the line chart, which represents time-dependent data and shows trends at equal intervals, but the area is closed and filled with the color of the series.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
<code>AreaSeries</code> module using <code>Chart.Inject(AreaSeries)</code> method.
</p>
<p>
More information on the area series can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
More information on the area series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
</p>
</div>
<style>

144
src/chart/area.ts
Просмотреть файл

@ -1,6 +1,6 @@
//import { loadCultureFiles } from '../common/culture-loader';
import { Chart, DateTime, AreaSeries, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
Chart.Inject(AreaSeries, DateTime, Legend);
import { Chart, DateTime, AreaSeries, Legend, ILoadedEventArgs, ChartTheme, ChartAnnotation } from '@syncfusion/ej2-charts';
Chart.Inject(AreaSeries, DateTime, Legend, ChartAnnotation);
import { Browser } from '@syncfusion/ej2-base';
/**
@ -12,51 +12,141 @@ import { Browser } from '@syncfusion/ej2-base';
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'DateTime',
labelFormat: 'y',
majorGridLines: { width: 0 },
intervalType: 'Years',
edgeLabelPlacement: 'Shift'
valueType: 'DateTime', minimum: new Date(1973, 1, 1), maximum: new Date(2018, 1, 1), labelFormat: 'y', majorGridLines: { width: 0 }, edgeLabelPlacement: 'Shift'
},
//Initializing Primary Y Axis
primaryYAxis:
{
title: 'Revenue in Millions',
labelFormat: '{value}M',
interval: 1,
lineStyle: { width: 0},
majorTickLines: { width: 0}
title: 'In Billions (USD)', labelFormat: '{value}', interval: 5, minimum: 0, maximum: 25, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }
},
chartArea: {
border: {
width: 0
}
},
annotations: [
{
content: Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 7px;">8-TRACK</div>' : '<div style="font-weight: bold; color: white; font-size: 11px;">8-TRACK</div>',
region: 'Series',
x: '8%',
y: '95%'
},
{
content: Browser.isDevice ? '<div style="font-weight: bold; color: white;font-size: 7px;">VINYL</div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">VINYL</div>',
region: 'Series',
x: '12%',
y: '80%'
},
{
content: Browser.isDevice ? '<div style="font-weight: bold; color: white;font-size: 7px;">CASSETTE</div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">CASSETTE</div>',
region: 'Series',
x: '35%',
y: '87%'
},
{
content: Browser.isDevice ? '<div style="font-weight: bold; color: white;font-size: 7px;">COMPACT DISC</div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">COMPACT DISC</div>',
region: 'Series',
x: '63%',
y: '70%'
},
{
content: Browser.isDevice ? '<div style="font-weight: bold; color: white;font-size: 7px;">OTHERS</div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">OTHERS</div>',
region: 'Series',
x: '75%',
y: '98%'
},
{
content: Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 7px;">DOWNLOAD</div>' : '<div style="font-weight: bold; color: white; font-size: 9px;">DOWNLOAD</div>',
region: 'Series',
x: '85%',
y: '93%'
},
{
content: Browser.isDevice ? '<div style="font-weight: bold; color: white;font-size: 7px;">STREAMING</div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">STREAMING</div>',
region: 'Series',
x: '93%',
y: '96%'
},
],
//Initializing Chart Series
series: [
{
type: 'Area',
dataSource: [{ x: new Date(2000, 0, 1), y: 4 }, { x: new Date(2001, 0, 1), y: 3.0 },
{ x: new Date(2002, 0, 1), y: 3.8 }, { x: new Date(2003, 0, 1), y: 3.4 },
{ x: new Date(2004, 0, 1), y: 3.2 }, { x: new Date(2005, 0, 1), y: 3.9 }],
xName: 'x', width: 2, border: { width: 1.5 },
yName: 'y', name: 'Product A',
opacity: 0.5,
dataSource: [{ x: new Date(1990, 0, 1), y: 0.69 }, { x: new Date(1992, 0, 1), y: 2.86 }, { x: new Date(1995, 0, 1), y: 10.2 },
{ x: new Date(1996, 0, 1), y: 13.0 }, { x: new Date(1997, 0, 1), y: 14.35 }, { x: new Date(1998, 0, 1), y: 15.17 },
{ x: new Date(1999, 0, 1), y: 14.89 }, { x: new Date(2000, 0, 1), y: 18.96 }, { x: new Date(2001, 0, 1), y: 18.78 },
{ x: new Date(2004, 0, 1), y: 14.25 }, { x: new Date(2005, 0, 1), y: 14.24 }, { x: new Date(2006, 0, 1), y: 12.34 },
{ x: new Date(2007, 0, 1), y: 9.34 }, { x: new Date(2008, 0, 1), y: 4.45 }, { x: new Date(2010, 0, 1), y: 1.46 },
{ x: new Date(2011, 1, 1), y: 0.64 }],
xName: 'x', width: 2, border: { width: 1.5, color: 'white' },
yName: 'y',
opacity: 1,
},
{
type: 'Area',
dataSource: [{ x: new Date(2000, 0, 1), y: 2.6 }, { x: new Date(2001, 0, 1), y: 2.8 },
{ x: new Date(2002, 0, 1), y: 2.6 }, { x: new Date(2003, 0, 1), y: 3 },
{ x: new Date(2004, 0, 1), y: 3.6 }, { x: new Date(2005, 0, 1), y: 3 }],
xName: 'x', width: 2, border: { width: 1.5 },
yName: 'y', name: 'Product B',
opacity: 0.5
}
dataSource: [{ x: new Date(2004, 0, 1), y: 0.48 }, { x: new Date(2007, 0, 1), y: 1.45 }, { x: new Date(2012, 0, 1), y: 2.82 },
{ x: new Date(2013, 0, 1), y: 2.58 }, { x: new Date(2015, 0, 1), y: 2.01 }, { x: new Date(2016, 0, 1), y: 1.61 },
{ x: new Date(2017, 0, 1), y: 0.8 }],
xName: 'x', width: 2, border: { width: 1.5, color: 'white' },
yName: 'y',
opacity: 1,
},
{
type: 'Area',
dataSource: [{ x: new Date(2011, 0, 1), y: 0.48 }, { x: new Date(2013, 0, 1), y: 1.61 }, { x: new Date(2015, 0, 1), y: 2.12 },
{ x: new Date(2017, 0, 1), y: 7.18 }],
xName: 'x', width: 2, border: { width: 1.5, color: 'white' },
yName: 'y',
opacity: 1,
},
{
type: 'Area',
dataSource: [{ x: new Date(1976, 0, 1), y: 0.08 }, { x: new Date(1979, 0, 1), y: 1.85 }, { x: new Date(1980, 0, 1), y: 2.0 },
{ x: new Date(1982, 0, 1), y: 3.55 }, { x: new Date(1984, 0, 1), y: 5.4 }, { x: new Date(1985, 0, 1), y: 5.24 },
{ x: new Date(1988, 0, 1), y: 6.94 }, { x: new Date(1989, 0, 1), y: 6.85 }, { x: new Date(1990, 0, 1), y: 7.02 },
{ x: new Date(1992, 0, 1), y: 5.81 }, { x: new Date(1993, 0, 1), y: 5.32 }, { x: new Date(1994, 0, 1), y: 4.03 },
{ x: new Date(1997, 0, 1), y: 2.25 }, { x: new Date(1998, 0, 1), y: 2.01 }, { x: new Date(1999, 0, 1), y: 0.8 },
{ x: new Date(2001, 0, 1), y: 0.4 }],
xName: 'x', width: 2, border: { width: 1.5, color: 'white' },
yName: 'y',
opacity: 1,
},
{
type: 'Area',
dataSource: [{ x: new Date(1973, 0, 1), y: 7.74 }, { x: new Date(1974, 0, 1), y: 7.58 }, { x: new Date(1976, 0, 1), y: 8.23 },
{ x: new Date(1977, 0, 1), y: 9.68 }, { x: new Date(1978, 0, 1), y: 10.16 }, { x: new Date(1979, 0, 1), y: 8.15 },
{ x: new Date(1981, 0, 1), y: 6.77 }, { x: new Date(1982, 0, 1), y: 5.64 }, { x: new Date(1984, 0, 1), y: 4.35 },
{ x: new Date(1985, 0, 1), y: 2.5 }, { x: new Date(1989, 0, 1), y: 0.64 }, { x: new Date(1990, 0, 1), y: 0 }],
xName: 'x', width: 2, border: { width: 1.5, color: 'white' },
yName: 'y',
opacity: 1,
},
{
type: 'Area',
dataSource: [{ x: new Date(1973, 0, 1), y: 2.58 }, { x: new Date(1975, 0, 1), y: 2.25 }, { x: new Date(1977, 0, 1), y: 3.55 },
{ x: new Date(1978, 0, 1), y: 2.42 }, { x: new Date(1981, 0, 1), y: -0.24 }, { x: new Date(1982, 0, 1), y: -0 }],
xName: 'x', width: 2, border: { width: 1.5, color: 'white' },
yName: 'y',
opacity: 1
},
{
type: 'Area',
dataSource: [{ x: new Date(1988, 0, 1), y: -0.16 }, { x: new Date(1989, 0, 1), y: -0.17 }, { x: new Date(1990, 0, 1), y: -0.08 },
{ x: new Date(1992, 0, 1), y: 0.08 }, { x: new Date(1996, 0, 1), y: 0.161 }, { x: new Date(1998, 0, 1), y: 0.48 },
{ x: new Date(1999, 0, 1), y: 0.16 }, { x: new Date(2001, 0, 1), y: 0.4 }, { x: new Date(2002, 0, 1), y: 0.32 },
{ x: new Date(2003, 0, 1), y: 0.807 }, { x: new Date(2005, 0, 1), y: 1.12 }, { x: new Date(2006, 0, 1), y: 1.614 },
{ x: new Date(2008, 0, 1), y: 1.21 }, { x: new Date(2009, 0, 1), y: 1.12 }, { x: new Date(2011, 0, 1), y: 0.64 },
{ x: new Date(2013, 0, 1), y: 0.161 }, { x: new Date(2018, 0, 1), y: -0.08 }],
xName: 'x', width: 2, border: { width: 1.5, color: 'white' },
yName: 'y',
opacity: 1
},
],
//Initializing Chart title
title: 'Average Sales Comparison',
width : Browser.isDevice ? '100%' : '60%',
title: 'US Music Sales By Format',
width : Browser.isDevice ? '100%' : '75%',
legendSettings: {visible:false},
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

7
src/chart/average-true-range-indicator.html
Просмотреть файл

@ -9,14 +9,13 @@
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the Average True Range Indicator. You can use <code>border</code>,
<code>fill</code> properties to customize the area.
In this example, you can see how to render and configure the Average True Range Indicator.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p style="font-weight: 500">Injecting Module</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Average True Range Indicator, we need to Inject
<code>AtrIndicator</code> module using <code>chart.Inject(AtrIndicator)</code> method.

2
src/chart/average-true-range-indicator.ts
Просмотреть файл

@ -89,7 +89,7 @@ Chart.Inject(
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
title: 'AAPL 2012-2017',
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

1
src/chart/axes-crossing.html
Просмотреть файл

@ -60,6 +60,7 @@
When there are multiple axes, you can choose an axis to cross by using <code>crossesInAxis</code> property.
If the axis name is not valid, primaryXAxis or primaryYAxis will be used for crossing, by default.
</p>
<br>
<p>
More information on the axis crossing can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.

12
src/chart/bar.html
Просмотреть файл

@ -6,27 +6,25 @@
</div>
<div id="action-description">
<p>
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.
This bar chart example visualizes GDP data by country for the year 2017 with a default bar series.
</p>
</div>
<div id="description">
<p>
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 <code>border</code>, <code>fill</code> properties to customize the data appearance. <code>dataLabel</code> is used to represent individual data and its value.
In this example, you can see how to render and configure the bar chart. The bar chart is similar to the column chart, but the orientation of the y-axis is horizontal rather than vertical.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
<code>Tooltips</code> are enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use bar series, we need to inject
<code>BarSeries</code> module using <code>Chart.Inject(BarSeries)</code> method.
</p>
<p>
More information on the bar series can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#bar-chart">documentation section</a>.
</p>
</div>
<style>

46
src/chart/bar.ts
Просмотреть файл

@ -1,7 +1,7 @@
import { loadCultureFiles } from '../common/culture-loader';
import { Chart, DataLabel, BarSeries, Category, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
import { Chart, DataLabel, BarSeries, Category, Legend, Tooltip, ILoadedEventArgs, ChartTheme, Highlight} from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';
Chart.Inject(BarSeries, DataLabel, Category, Legend, Tooltip);
Chart.Inject(BarSeries, DataLabel, Category, Legend, Tooltip, Highlight);
/**
* Sample for bar series
@ -13,20 +13,15 @@ Chart.Inject(BarSeries, DataLabel, Category, Legend, Tooltip);
//Initializing Primary X and Y Axis
primaryXAxis: {
valueType: 'Category',
title: 'Food',
interval: 1,
majorGridLines: { width: 0 }
},
primaryYAxis:
{
labelFormat: '{value}B',
labelFormat: '{value}%',
title: 'GDP (In Percentage)',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
labelStyle: {
color: 'transparent'
}
},
chartArea: {
border: {
@ -38,45 +33,30 @@ Chart.Inject(BarSeries, DataLabel, Category, Legend, Tooltip);
{
type: 'Bar',
dataSource: [
{ x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },
{ x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 }
{ x: 'Japan', y: 1.71 }, { x: 'France', y: 1.82 },
{ x: 'India', y: 6.68 }, { x: 'Germany', y: 2.22 }, { x: 'Italy', y: 1.50 }, { x: 'Canada', y: 3.05 }
],
xName: 'x', width: 2,
yName: 'y', name: 'Imports', marker: {
dataLabel: {
visible: true,
position: 'Top',
font: {
fontWeight: '600', color: '#ffffff'
}
}
}
yName: 'y', name: 'GDP', columnSpacing: 0.1,
},
{
type: 'Bar',
dataSource: [
{ x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },
{ x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 }
{ x: 'Japan', y: 6.02 }, { x: 'France', y: 3.19 },
{ x: 'India', y: 3.28 }, { x: 'Germany', y: 4.56 }, { x: 'Italy', y: 2.40 }, { x: 'Canada', y: 2.04 }
],
xName: 'x', width: 2,
yName: 'y', name: 'Exports', marker: {
dataLabel: {
visible: true,
position: 'Top',
font: {
fontWeight: '600', color: '#ffffff'
}
}
}
yName: 'y', name: "Share in World's GDP" , columnSpacing: 0.1,
}
],
// Initializing the tooltip
tooltip: {
enable: true
},
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
legendSettings: { enableHighlight :true },
//Initializing Chart title
title: 'UK Trade in Food Groups - 2015',
title: 'GDP by Country in 2017',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

7
src/chart/bollinger.html
Просмотреть файл

@ -9,14 +9,13 @@
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the BollingerBands type Indicator. You can use <code>border</code>,
<code>fill</code> properties to customize the area.
In this example, you can see how to render and configure the BollingerBands type Indicator.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p style="font-weight: 500">Injecting Module</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use BollingerBands Indicator, we need to Inject
<code>BollingerBands</code> module using <code>chart.Inject(BollingerBands)</code> method.

2
src/chart/bollinger.ts
Просмотреть файл

@ -71,7 +71,7 @@ Chart.Inject(
mode: 'XY',
enablePan: true
},
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
title: 'AAPL - 2012-2017',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];

2
src/chart/box-and-whisker.html
Просмотреть файл

@ -45,7 +45,7 @@
value. Legend is enabled in this example with series type shape.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use box and whisker series, we need to inject
<code>BoxAndWhiskerSeries</code> module using <code>Chart.Inject(BoxAndWhiskerSeries)</code> method.

12
src/chart/box-and-whisker.ts
Просмотреть файл

@ -6,6 +6,7 @@ import {
Chart.Inject(Category, BoxAndWhiskerSeries, Tooltip);
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2/base';
/**
* Sample for Box and Whisker series
@ -41,10 +42,13 @@ import { EmitType } from '@syncfusion/ej2-base';
let chart: Chart = new Chart({
//Initializing Primary X and Y Axis
primaryXAxis: {
valueType: 'Category',
valueType: 'Category', interval: 1,
majorGridLines: { width: 0 },
edgeLabelPlacement: 'Shift',
labelIntersectAction: 'Trim'
labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45',
labelRotation: Browser.isDevice ? -45 : 0,
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
chartArea: {
border: {
@ -66,13 +70,13 @@ import { EmitType } from '@syncfusion/ej2-base';
dataSource: [
{ x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
{ x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
{ x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
{ x: 'Training', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
{ x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
{ x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
{ x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
{ x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
{ x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
{ x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
{ x: 'HR', y: [28, 29, 30, 31, 32, 34, 35, 36] }
],
xName: 'x',
yName: 'y',

16
src/chart/bubble.html
Просмотреть файл

@ -3,30 +3,34 @@
</div>
<div id="action-description">
<p>
This sample visualizes the Literacy Rate and GDP Growth Rate of world countries by using bubble series in the chart. Tooltip shows the information about the countries.
This React bubble chart example visualizes the literacy rates and GDP growth rates of countries. A tooltip shows more information about the countries.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the bubble type charts.A bubble chart is a type of chart that displays three dimensions of data.
Each points is drawn as a bubble, where bubble's size depends on <code>size</code> property. You can use <code>fill</code> property to customize the data appearance.
In this example, you can see how to render and configure the bubble chart. The bubble chart is a type of chart that shows three dimensions of the data. Each point is drawn as a bubble, where the bubble's size depends on the <code>Size</code> property. You can also use the <code>Fill</code> property to customize the data appearance.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use bubble series, we need to inject
<code>BubbleSeries</code> module using <code>Chart.Inject(BubbleSeries)</code> method.
</p>
<p>
More information on the bubble series can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#bubble-chart">documentation section</a>.
</p>
</div>
<style>
#control-container {
padding: 0px !important;
}
ellipse[id*=_Trackball_0] {
stroke-width: 1 !important;
}
</style>

109
src/chart/bubble.ts
Просмотреть файл

@ -1,26 +1,53 @@
import { loadCultureFiles } from '../common/culture-loader';
import { Chart, BubbleSeries, Tooltip, IPointRenderEventArgs } from '@syncfusion/ej2-charts';
import { Chart, BubbleSeries, Tooltip, IPointRenderEventArgs, DataLabel } from '@syncfusion/ej2-charts';
import { ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2-base';
import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
Chart.Inject(BubbleSeries, Tooltip);
import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors, bubbleFabricColors, pointFabricColors, pointMaterialDarkColors, bubbleMaterialDarkColors, bubbleMaterialColors, pointMaterialColors, bubbleBootstrap5DarkColors, pointBootstrap5DarkColors, bubbleBootstrap5Colors, pointBootstrap5Colors, bubbleBootstrapColors, pointBootstrapColors, bubbleHighContrastColors, pointHighContrastColors, bubbleFluentDarkColors, pointFluentDarkColors, bubbleFluentColors, pointFluentColors, bubbleTailwindDarkColors, pointTailwindDarkColors, bubbleTailwindColors, pointTailwindColors } from './theme-color';
Chart.Inject(BubbleSeries, Tooltip, DataLabel);
let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
selectedTheme = selectedTheme ? selectedTheme : 'material';
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
args.fill = fabricColors[args.point.index % 10];
args.fill = bubbleFabricColors[args.point.index % 10];
args.border.color = pointFabricColors[args.point.index % 10];;
} else if (selectedTheme === 'material-dark') {
args.fill = bubbleMaterialDarkColors[args.point.index % 10];
args.border.color = pointMaterialDarkColors[args.point.index % 10];;
} else if (selectedTheme === 'material') {
args.fill = materialColors[args.point.index % 10];
args.fill = bubbleMaterialColors[args.point.index % 10];
args.border.color = pointMaterialColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5-dark') {
args.fill = bubbleBootstrap5DarkColors[args.point.index % 10];
args.border.color = pointBootstrap5DarkColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap5') {
args.fill = bubbleBootstrap5Colors[args.point.index % 10];
args.border.color = pointBootstrap5Colors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap4') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'bootstrap-dark') {
args.fill = bubbleBootstrapColors[args.point.index % 10];
args.border.color = pointBootstrapColors[args.point.index % 10];
} else if (selectedTheme === 'highcontrast') {
args.fill = highContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = fluentColors[args.point.index % 10];
args.fill = bubbleHighContrastColors[args.point.index % 10];
args.border.color = pointHighContrastColors[args.point.index % 10];
} else if (selectedTheme === 'fluent-dark') {
args.fill = fluentDarkColors[args.point.index % 10];
} else {
args.fill = bootstrapColors[args.point.index % 10];
args.fill = bubbleFluentDarkColors[args.point.index % 10];
args.border.color = pointFluentDarkColors[args.point.index % 10];
} else if (selectedTheme === 'fluent') {
args.fill = bubbleFluentColors[args.point.index % 10];
args.border.color = pointFluentColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind-dark') {
args.fill = bubbleTailwindDarkColors[args.point.index % 10];
args.border.color = pointTailwindDarkColors[args.point.index % 10];
} else if (selectedTheme === 'tailwind') {
args.fill = bubbleTailwindColors[args.point.index % 10];
args.border.color = pointTailwindColors[args.point.index % 10];
}
};
@ -32,46 +59,47 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
let chart: Chart = new Chart({
// Initializing the Primary X and Y Axis
primaryXAxis: {
title: 'Literacy Rate',
minimum: 60,
maximum: 100,
interval: 5
minimum: 65,
maximum: 102,
interval: 5,
crossesAt: 5
},
primaryYAxis: {
title: 'GDP Growth Rate',
minimum: 0,
maximum: 10,
crossesAt: 85,
interval: 2.5
},
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
// Initializing the chart series
series: [
{
type: 'Bubble',
dataSource: [
{ x: 92.2, y: 7.8, size: 1.347, text: 'China' },
{ x: 74, y: 6.5, size: 1.241, text: 'India' },
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
{ x: 61.3, y: 1.45, size: 0.162, text: 'Nigeria' },
{ x: 82.2, y: 3.97, size: 0.7, text: 'Hong Kong' },
{ x: 79.2, y: 3.9, size: 0.162, text: 'Netherland' },
{ x: 72.5, y: 4.5, size: 0.7, text: 'Jordan' },
{ x: 81, y: 3.5, size: 0.21, text: 'Australia' },
{ x: 66.8, y: 3.9, size: 0.028, text: 'Mongolia' },
{ x: 78.4, y: 2.9, size: 0.231, text: 'Taiwan' }
{ x: 92.2, y: 7.8, size: 1.347, text: 'China', dataLabelName: 'China' },
{ x: 74, y: 6.5, size: 1.241, text: 'India', dataLabelName: 'India' },
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia', dataLabelName: Browser.isDevice ? 'ID' : 'Indonesia'},
{ x: 99.4, y: 2.2, size: 0.312, text: 'United States', dataLabelName: 'US' },
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil', dataLabelName: Browser.isDevice ? 'BR' : 'Brazil'},
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany', dataLabelName: Browser.isDevice ? 'DE' : 'Germany' },
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt', dataLabelName: Browser.isDevice ? 'EG' : 'Egypt'},
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia', dataLabelName: Browser.isDevice ? 'RUS' : 'Russia'},
{ x: 96.5, y: 0.2, size: 0.128, text: 'Japan', dataLabelName: Browser.isDevice ? 'JP' : 'Japan'},
{ x: 86.1, y: 4.0, size: 0.115, text: 'MeLiteracy Ion', dataLabelName: 'MLI' },
{ x: 92.6, y: 5.2, size: 0.096, text: 'Philippines', dataLabelName: 'PH' },
{ x: 61.3, y: 1.45, size: 0.162, text: 'Nigeria', dataLabelName: 'Nigeria' },
{ x: 82.2, y: 3.97, size: 0.7, text: 'Hong Kong', dataLabelName: Browser.isDevice ? 'HK' : 'Hong Kong' },
{ x: 79.2, y: 4.9, size: 0.162, text: 'Netherland', dataLabelName: 'NL' },
{ x: 72.5, y: 4.5, size: 0.7, text: 'Jordan', dataLabelName: 'Jordan' },
{ x: 81, y: 2.5, size: 0.21, text: 'Australia', dataLabelName: Browser.isDevice ? 'AU' : 'Australia'},
{ x: 66.8, y: 3.9, size: 0.028, text: 'Mongolia', dataLabelName: 'MN' },
{ x: 78.4, y: 2.9, size: 0.231, text: 'Taiwan', dataLabelName: Browser.isDevice ? 'TW' : 'Taiwan' }
],
minRadius: 3,
maxRadius: Browser.isDevice ? 6 : 8,
xName: 'x', yName: 'y', size: 'size', name: 'Pound',
marker: { dataLabel: { name: 'text' } }
xName: 'x', yName: 'y', size: 'size',
border: { width: 2 }, tooltipMappingName: 'text',
marker: { dataLabel: { visible: true, name: 'dataLabelName', position: 'Middle', font: { fontWeight: '500', color: '#ffffff' } } }
},
],
// Initiazlize the point render event
@ -87,9 +115,10 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
title: 'World Countries Details',
// Initializing the tooltip with format
tooltip: {
enableMarker: false,
enable: true,
format: '${point.text}<br/>Literacy Rate : <b>${point.x}%</b>' +
'<br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>'
header: "<b>${point.tooltip}</b>",
format: "Literacy Rate : <b>${point.x}%</b> <br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>"
},
legendSettings: { visible: false }
});

6
src/chart/candle-stick.html
Просмотреть файл

@ -10,14 +10,14 @@
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the Candle type series. You can use <code>border</code>,
In this example, you can see how to render and configure the Candle type series. Candle type chart is used to represent the price movements in stock. You can use <code>border</code>,
<code>fill</code> properties to customize the area.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p style="font-weight: 500">Injecting Module</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Candle series, we need to Inject
<code>CandleSeries</code> module using <code>chart.Inject(CandleSeries)</code> method.

2
src/chart/candle-stick.ts
Просмотреть файл

@ -77,7 +77,7 @@ let getLabelText: Function = (value: number): string => {
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i,  'Contrast');
},
// custom code end
width: Browser.isDevice ? '100%' : '80%', chartArea: { border: { width: 0 } },
width: Browser.isDevice ? '100%' : '75%', chartArea: { border: { width: 0 } },
crosshair: { enable: true, lineType: 'Vertical' }
});
chart.appendTo('#container');

2
src/chart/category.html
Просмотреть файл

@ -18,7 +18,7 @@
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Category axis, we need to inject
<code>Category</code> module using <code>Chart.Inject(Category)</code> method.

27
src/chart/category.ts
Просмотреть файл

@ -33,10 +33,10 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
let chart: Chart = new Chart({
//Initializing Primary X and YAxis
primaryXAxis: {
title: 'Country',
valueType: 'Category',
majorGridLines: { width: 0 },
enableTrim: false,
enableTrim: false, majorTickLines: {width : 0},
minorTickLines: {width: 0}
},
//Initializing Primary Y Axis
@ -53,7 +53,7 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
color: 'transparent'
}
},
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
chartArea: {
border: {
width: 0
@ -64,23 +64,22 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
{
type: 'Bar', tooltipMappingName: 'country',
dataSource: [
{ x: 'Germany', y: 72, country: 'GER: 72'},
{ x: 'Russia', y: 103.1, country: 'RUS: 103.1'},
{ x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'},
{ x: 'India', y: 462.1, country: 'IND: 462.1'},
{ x: 'China', y: 721.4, country: 'CHN: 721.4'},
{ x: 'United States<br>Of America', y: 286.9, country: 'USA: 286.9'},
{ x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'},
{ x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'},
{ x: 'Russia', y: 103, country: 'RUS: 103'},
{ x: 'Brazil', y: 139, country: 'BRZ: 139'},
{ x: 'India', y: 462, country: 'IND: 462'},
{ x: 'China', y: 721, country: 'CHN: 721'},
{ x: 'United States <br> Of America', y: 286, country: 'USA: 286'},
{ x: 'Great Britain', y: 115, country: 'GBR: 115'},
{ x: 'Nigeria', y: 97, country: 'NGR: 97'},
],
xName: 'x', width: 2,
yName: 'y', marker: {
dataLabel: {
visible: true,
position: 'Top', font: {
position: Browser.isDevice ? 'Outer': 'Top', font: {
fontWeight: '600',
color: '#ffffff'
color: Browser.isDevice ? '' : '#ffffff',
size: '11px'
}
}
},

159
src/chart/chart-performance.html
Просмотреть файл

@ -1,43 +1,144 @@
<div>
<div class="col-lg-9 control-section">
<div class="content-wrapper">
<div id="container"></div>
</div>
</div>
<div class="col-lg-3 property-section">
<table id="property" title="Properties" style="width: 100%">
<tr style="height: 50px">
<td style="width: 50%">
<div>
<button id="load" style="text-transform:none !important">Load 100K Points</button>
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 30%">
<div>Time Taken</div>
</td>
<td style="width: 70%;">
<div>
<span id="performanceTime">0ms</span>
</div>
</td>
</tr>
</table>
</div>
<div class="control-section">
<div id="container" align="center"></div>
</div>
<div id="action-description">
<p>
This sample demonstrates the performance of EJ2 chart to render 100K points in canvas mode.
This sample demonstrates the performance of Typescript Charts rendering 100K data points.
</p>
</div>
<div id="description">
<p>
Chart includes several data rendering optimizations to achieve the best possible performance when plotting large volumes of data as well as handling high frequency real-time data.In this demo, chart is rendered with 100K points in canvas mode.
Charts includes several data-rendering optimizations to achieve the best possible performance when plotting large volumes of data and handling high-frequency, real-time data. In this demo, an area series is rendered with 100K points.
</p>
</div>
<style>
#control-container {
padding: 0px !important;
}
#material-gradient-chart stop {
stop-color: #00bdae;
}
#fabric-gradient-chart stop {
stop-color: #4472c4;
}
#bootstrap-gradient-chart stop {
stop-color: #a16ee5;
}
#bootstrap4-gradient-chart stop {
stop-color: #a16ee5;
}
#fluent-gradient-chart stop {
stop-color: #614570;
}
#fluent-dark-gradient-chart stop {
stop-color: #8AB113;
}
#highcontrast-gradient-chart stop {
stop-color: #79ECE4;
}
#tailwind-gradient-chart stop {
stop-color: #5A61F6;
}
#bootstrap5-gradient-chart stop {
stop-color: #262E0B;
}
#material-dark-gradient-chart stop {
stop-color: #9ECB08;
}
#fabric-dark-gradient-chart stop {
stop-color: #4472c4;
}
#bootstrap-dark-gradient-chart stop {
stop-color: #a16ee5;
}
#tailwind-dark-gradient-chart stop {
stop-color: #8B5CF6;
}
#bootstrap5-dark-gradient-chart stop {
stop-color: #5ECB9B;
}
.chart-gradient stop[offset="0"] {
stop-opacity: 0.9;
}
.chart-gradient stop[offset="1"] {
stop-opacity: 0.3;
}
</style>
<svg style="height: 0">
<defs>
<linearGradient id="material-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fabric-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap4-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="tailwind-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap5-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="material-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fabric-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="tailwind-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="bootstrap5-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fluent-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="fluent-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
</defs>
</svg>

105
src/chart/chart-performance.ts
Просмотреть файл

@ -1,71 +1,98 @@
import { loadCultureFiles } from '../common/culture-loader';
import { Chart, LineSeries, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
import { Chart, AreaSeries, ILoadedEventArgs, ChartTheme, DateTime } from '@syncfusion/ej2-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
Chart.Inject(LineSeries, Legend);
import { IPointRenderEventArgs } from '@syncfusion/ej2/charts';
import { Browser } from '@syncfusion/ej2/base';
Chart.Inject(AreaSeries, DateTime);
/**
* Sample for Chart Performance
*/
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
let theme: ChartTheme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
let themes : string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'Fluent', 'FluentDark'];
let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#614570', '#8AB113'];
let fill : string = 'url(#' + selectedTheme + '-gradient-chart)';
let chart: Chart;
let loaded: EmitType<ILoadedEventArgs>;
let dt1: number;
let dt2: number;
(window as any).default = (): void => {
(window as any).default = (): void => {
loadCultureFiles();
chart = new Chart({
enableCanvas: true,
//Initializing Primary X Axis
primaryXAxis:
{
majorGridLines: { color: 'transparent' }
primaryXAxis: {
intervalType: 'Years',
valueType: 'DateTime',
title: 'Years',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
},
primaryYAxis: {
interval: 2000,
minimum: 0,
maximum: 12000,
title: 'Values',
lineStyle:{width: 0},
majorTickLines: {width:0}
},
chartArea: {
border: { width: 0 }
},
//Initializing Chart Series
series: [
{
name: 'Series1',
type: 'Line',
animation: { enable: false }
type: 'Area',fill: fill,
animation: { enable: false },border: { width: 2, color: borderColor[themes.indexOf(theme)]},
}
],
legendSettings: { visible: false },
title:'Chart with 100k points',
width: Browser.isDevice ? '100%' : '75%',
// custom code start
load: (args: ILoadedEventArgs) => {
let series1: Object[] = [];
let point1: Object;
let pts;
let value = 0;
for ( pts = 0; pts < 100000; pts++)
{
if (pts % 3 == 0)
{
value -= (Math.random() *(100) / 3) * 4;
}
else if (pts % 2 == 0)
{
value += (Math.random() * ( 100) / 3) * 4;
}
if(value < 0)
{
value = value * -1;
}
if(value >= 12000)
{
value = Math.floor(Math.random() * 11000) + 1000;
}
point1 = {x: new Date(2005, 1, 1).setHours(pts) , y: value};
series1.push(point1);
}
chart.series[0].dataSource = series1;
chart.series[0].xName = 'x';
chart.series[0].yName = 'y';
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i,  'Contrast');
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
args.chart.series[0].border = { width: 2, color: borderColor[themes.indexOf(args.chart.theme.toLowerCase())] }
}
// custom code end
});
chart.appendTo('#container');
let button: Button = new Button({ cssClass: 'e-info', isPrimary: true });
button.appendTo('#load');
document.getElementById('load').onclick = () => {
let series1: Object[] = [];
let point1: Object;
let value: number = 0;
let i: number;
for (i = 0; i < 100000; i++) {
value += (Math.random() * 10 - 5);
point1 = { x: i, y: value };
series1.push(point1);
}
dt1 = new Date().getTime();
chart.series[0].dataSource = series1;
chart.series[0].xName = 'x';
chart.series[0].yName = 'y';
chart.legendSettings.visible = false;
chart.loaded = loaded;
chart.refresh();
};
loaded = (args: Object): void => {
dt2 = new Date().getTime();
document.getElementById('performanceTime').innerHTML = (dt2 - dt1) + 'ms';
};
};

11
src/chart/column-placement.html
Просмотреть файл

@ -3,28 +3,25 @@
</div>
<div id="action-description">
<p>
This sample illustrates four column series. Each column is rendered with different column width and it is placed behind to another one.
This sample shows four series of columns in which each column is rendered with a different width and placed behind the previous column.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the column type charts. Column type charts are used for comparing
the frequency, count, total or average of data in different categories. You can use <code>border</code>,
<code>fill</code> properties to customize the vertical rectangle. <code>dataLabel</code> is used to represent individual
data and its value. You can enable side by side position by <code>enableSideBySidePlacement</code> property.
In this example, you can see how to render and configure the column chart. The column chart is used to compare the frequency, count, total, or average of data in different categories. The <code>EnableSideBySidePlacement</code> property is used to enable and disable side-by-side positioning. DataLabel is used to present details about individual data points.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
</p>
<p>
More information on the column series can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#column-chart">documentation section</a>.
</p>
</div>
<style>

30
src/chart/column-placement.ts
Просмотреть файл

@ -1,6 +1,6 @@
import { loadCultureFiles } from '../common/culture-loader';
import { ChartTheme, Chart, ColumnSeries, Category, DataLabel, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Tooltip);
import { ChartTheme, Chart, ColumnSeries, Category, DataLabel, Tooltip, ILoadedEventArgs, Legend } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Tooltip, Legend);
import { Browser } from '@syncfusion/ej2-base';
/**
@ -11,13 +11,14 @@ import { Browser } from '@syncfusion/ej2-base';
let chart: Chart = new Chart({
//Initializing Primary X and Y Axis
primaryXAxis: {
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
},
chartArea: { border: { width: 0 } },
primaryYAxis:
{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
title: 'Fruits Count',
majorTickLines: { width: 0 }, lineStyle: { width: 0 }
},
enableSideBySidePlacement: false,
// Initialize the chart series
@ -25,31 +26,32 @@ import { Browser } from '@syncfusion/ej2-base';
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Total',
dataSource: [{ x: 'Jamesh', y: 10, text: 'Total 10' },
{ x: 'Michael', y: 9, text: 'Total 9' }, { x: 'John', y: 11, text: 'Total 11' }],
{ x: 'Michael', y: 9, text: 'Total 9' }, { x: 'John', y: 11, text: 'Total 11' }, { x: 'Jack', y: 8, text: 'Total 8' }, { x: 'Lucas', y: 10, text: 'Total 10' }],
columnWidth: 0.5,
marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
marker: { dataLabel: { visible: true, name: 'text', position: Browser.isDevice ? 'Outer' : 'Top', font: { fontWeight: '600', color: Browser.isDevice? '' :'#ffffff' } } }
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Apple',
dataSource: [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }],
dataSource: [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }, { x: 'Jack', y: 5}, { x: 'Lucas', y: 6}],
columnWidth: 0.4,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: (Browser.isDevice) ? {size: '8px', fontWeight: '600'} : { fontWeight: '600', color: '#ffffff' }} }
}, {
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Orange',
dataSource: [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }],
dataSource: [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }, { x: 'Jack', y: 2 }, { x: 'Lucas', y: 3}],
columnWidth: 0.3,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: (Browser.isDevice) ? {size: '8px', fontWeight: '600'} : { fontWeight: '600', color: '#ffffff' } } }
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Grapes',
dataSource: [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }],
dataSource: [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }, { x: 'Jack', y: 1}, { x: 'Lucas', y: 1}],
columnWidth: 0.2,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: (Browser.isDevice) ? {size: '8px', fontWeight: '600'} : { fontWeight: '600', color: '#ffffff' } } }
}
],
// Initialize the chart title
title: 'Fruit Consumption', tooltip: { enable: true, shared: true },
width: Browser.isDevice ? '100%' : '60%',
legendSettings: {visible:true},
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

14
src/chart/column.html
Просмотреть файл

@ -3,29 +3,25 @@
</div>
<div id="action-description">
<p>
This sample visualizes the Olympic medal count in Rio with default column series in the chart.
Data points values are showed by using data label.
This column chart example visualizes the medal count from the Rio Olympics with the default column series in the chart.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the column type charts. Column type charts are used for comparing
the frequency, count, total or average of data in different categories. You can use <code>border</code>,
<code>fill</code> properties to customize the vertical rectangle. <code>dataLabel</code> is used to represent individual
data and its value.
In this example, you can see how to render and configure a column chart. The column chart is used to compare the frequency, count, total, or average of data in different categories.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
Tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
</p>
<p>
More information on the column series can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#column-chart">documentation section</a>.
</p>
</div>
<style>

31
src/chart/column.ts
Просмотреть файл

@ -1,6 +1,6 @@
import { loadCultureFiles } from '../common/culture-loader';
import { ChartTheme, Chart, ColumnSeries, Category, Legend, DataLabel, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip);
import { ChartTheme, Chart, ColumnSeries, Category, Legend, DataLabel, Tooltip, ILoadedEventArgs, Highlight } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip, Highlight );
import { Browser } from '@syncfusion/ej2-base';
/**
@ -11,35 +11,32 @@ import { Browser } from '@syncfusion/ej2-base';
let chart: Chart = new Chart({
//Initializing Primary X and Y Axis
primaryXAxis: {
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, labelIntersectAction: Browser.isDevice ? 'None' : 'Trim', labelRotation: Browser.isDevice ? -45 : 0, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }
},
chartArea: { border: { width: 0 } },
chartArea: { border: { width: 0 }},
primaryYAxis:
{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
title: 'Medal Count', majorTickLines: { width: 0 }, lineStyle: { width: 0 }, maximum: 50, interval: 10,
},
//Initializing Chart Series
series: [
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold',
dataSource: [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }],
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold', columnSpacing:0.1, tooltipMappingName:'tooltipMappingName' ,
dataSource: [{ x: 'GBR', y: 27, tooltipMappingName:'Great Britain' }, { x: 'CHN', y: 26 , tooltipMappingName:'China' }, { x: 'AUS', y: 8, tooltipMappingName:'Australia'}, { x: 'RUS', y: 19, tooltipMappingName:'Russia' }, { x: 'GER', y: 17, tooltipMappingName:'Germany' }, { x: 'UA', y: 2, tooltipMappingName:'Ukraine' }, { x: 'ES', y: 7, tooltipMappingName:'Spain' }, { x: 'UZB', y: 4, tooltipMappingName:'Uzbekistan' }, { x: 'JPN', y: 12, tooltipMappingName:'Japan' }, { x: 'NL', y: 8, tooltipMappingName:'NetherLand' }, { x: 'USA', y: 46, tooltipMappingName:'United States' }],
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver',
dataSource: [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }],
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver', columnSpacing:0.1,tooltipMappingName:'tooltipMappingName' ,
dataSource: [{ x: 'GBR', y: 23 , tooltipMappingName:'Great Britain'}, { x: 'CHN', y: 18, tooltipMappingName:'China'}, { x: 'AUS', y: 11, tooltipMappingName:'Australia' }, { x: 'RUS', y: 17, tooltipMappingName:'Russia' }, { x: 'GER', y: 10, tooltipMappingName:'Germany' }, { x: 'UA', y: 5, tooltipMappingName:'Ukraine'}, { x: 'ES', y: 4, tooltipMappingName:'Spain' }, { x: 'UZB', y: 2, tooltipMappingName:'Uzbekistan' }, { x: 'JPN', y: 8, tooltipMappingName:'Japan' }, { x: 'NL', y: 7, tooltipMappingName:'NetherLand' }, { x: 'USA', y: 37, tooltipMappingName:'United States' }],
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze',
dataSource: [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }],
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze', columnSpacing:0.1,tooltipMappingName:'tooltipMappingName' ,
dataSource: [{ x: 'GBR', y: 17 , tooltipMappingName:'Great Britain'}, { x: 'CHN', y: 26, tooltipMappingName:'China' }, { x: 'AUS', y: 10, tooltipMappingName:'Australia' }, { x: 'RUS', y: 20, tooltipMappingName:'Russia' }, { x: 'GER', y: 15, tooltipMappingName:'Germany' }, { x: 'UA', y: 24, tooltipMappingName:'Ukraine' }, { x: 'ES', y: 6, tooltipMappingName:'Spain' }, { x: 'UZB', y: 7, tooltipMappingName:'Uzbekistan' }, { x: 'JPN', y: 8, tooltipMappingName:'Japan' }, { x: 'NL', y: 4, tooltipMappingName:'NetherLand' }, { x: 'USA', y: 38, tooltipMappingName:'United States' }],
}
],
//Initializing Chart title
width: Browser.isDevice ? '100%' : '60%',
title: 'Olympic Medal Counts - RIO', tooltip: { enable: true },
width: Browser.isDevice ? '100%' : '75%',
title: 'Olympic Medal Counts - RIO', tooltip: { enable: true, header:"<b>${point.tooltip}</b>", shared: true },
legendSettings: {enableHighlight:true},
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

2
src/chart/cross-hair.html
Просмотреть файл

@ -15,7 +15,7 @@
Hover the chart area to view crosshair and its tooltip. Touch and hold to enable crosshair in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Crosshair, we need to inject
<code>Crosshair</code> module using <code>Chart.Inject(Crosshair)</code> method.

2
src/chart/cross-hair.ts
Просмотреть файл

@ -66,7 +66,7 @@ import { Browser } from '@syncfusion/ej2-base';
*/
crosshair: { enable: true },
legendSettings: { visible: false },
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
//Initializing Chart title
title: 'Conns,Inc Stock Details',
load: (args: ILoadedEventArgs) => {

20
src/chart/dashed-line.html
Просмотреть файл

@ -3,25 +3,24 @@
</div>
<div id="action-description">
<p>
This sample illustrates a line series with dash array.
Dashed lines are animated by using css animation.
This sample shows the rate of fruit production statistics with default line series and dash array in the chart. Dashed lines are animated by using CSS animation.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the line type charts. Line type charts are used to represent time-dependent
data, showing trends in data at equal intervals. You can use
In this example, you will see how to render and configure the line chart. Line charts are used to represent time-dependent data, showing trends in data at equal intervals. You can use
<code>dashArray</code>,
<code>width</code>,
<code>fill</code> properties to customize the line.
<code>marker</code> and
<code>dataLabel</code> are used to represent individual data and its value.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
<code>Tooltips</code> are enabled in this example.To see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>LineSeries</code> module using
@ -29,7 +28,7 @@
</p>
<p>
More information on the line series can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#line-chart">documentation section</a>.
</p>
</div>
<style>
@ -37,8 +36,7 @@
padding: 0px !important;
}
#container_Series_1,
#container_Series_0 {
#container_Series_1{
stroke-dasharray: 10px 10px;
stroke-linejoin: round; stroke-linecap: round;
-webkit-animation: dash 1s linear infinite;

144
src/chart/dashed-line.ts
Просмотреть файл

@ -1,7 +1,7 @@
import { loadCultureFiles } from '../common/culture-loader';
import { Chart, LineSeries, Crosshair, DateTime, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
import { Chart, LineSeries, Crosshair, DateTime, Legend, Tooltip,Category,ChartAnnotation, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Crosshair);
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Category,Crosshair, ChartAnnotation);
/**
* Sample for Line Series with Dashed Line
@ -12,62 +12,76 @@ Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Crosshair);
//Initializing Primary X and Y Axis
primaryXAxis: {
valueType: 'DateTime',
labelFormat: 'y',
intervalType: 'Years',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
valueType: 'Category',
majorGridLines: { width: 0 },
interval: 1,
labelRotation: Browser.isDevice ? -45 : 0,
labelIntersectAction: Browser.isDevice ? 'None' : 'Trim',
majorTickLines: {width : 0},
minorTickLines: {width: 0}
},
primaryYAxis:
{
labelFormat: '{value}%',
labelFormat: '{value}k',
rangePadding: 'None',
lineStyle: { width: 0 },
minimum: 0,
maximum: 40,
interval: 10,
maximum: 300,
interval: 50,
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
minorTickLines: { width: 0 },
},
chartArea: {
border: {
width: 0
}
},
annotations: [{
content: "<div>Actual</div>",
region:"Series",
x:"15%",
y:"55%",
}, {
content: "<div>Forecast</div>",
region:"Series",
x:"65%",
y:"30%",
}],
//Initializing Chart Series
series: [
{
type: 'Line',
dataSource: [
{ x: new Date(2005, 0, 1), y: 12 }, { x: new Date(2006, 0, 1), y: 10.6 },
{ x: new Date(2007, 0, 1), y: 15.6 }, { x: new Date(2008, 0, 1), y: 38.6 },
{ x: new Date(2009, 0, 1), y: 27.4 }, { x: new Date(2010, 0, 1), y: 23.5 },
{ x: new Date(2011, 0, 1), y: 16.6 }
{ x: 'Jan', y: 100 },
{ x: 'Feb', y: 110 },
{ x: 'Mar', y: 125 },
{ x: 'Apr', y: 150 },
{ x: 'May', y: 140 },
{ x: 'Jun', y: 160 },
],
xName: 'x', width: 2, marker: {
visible: true,
width: 10,
height: 10
},
dashArray: '5',
yName: 'y', name: 'Banana',
xName: 'x', width: 2, marker:{ visible: false, width: 7, height: 7 },
yName: 'y'
},
{
type: 'Line',
dataSource: [
{ x: new Date(2005, 0, 1), y: 9.5 }, { x: new Date(2006, 0, 1), y: 19.9 },
{ x: new Date(2007, 0, 1), y: 25.2 }, { x: new Date(2008, 0, 1), y: 36 },
{ x: new Date(2009, 0, 1), y: 16.6 }, { x: new Date(2010, 0, 1), y: 14.2 }, { x: new Date(2011, 0, 1), y: 10.3 }
],
xName: 'x', width: 2, marker: {
visible: true,
width: 10,
height: 10,
shape: 'Diamond'
},
dashArray: '10',
yName: 'y', name: 'Apple',
}
type: 'Line',
dataSource: [
{ x: 'Jun', y: 160 },
{ x: 'Jul', y: 170 },
{ x: 'Aug', y: 180 },
{ x: 'Sep', y: 190 },
{ x: 'Oct', y: 200 },
{ x: 'Nov', y: 230 },
{ x: 'Dec', y: 270 },
],
xName: 'x', width: 2, marker: {
visible: false,
width: 10,
height: 10,
shape: 'Diamond',
},
dashArray: '10',
yName: 'y'
}
],
//Initializing Chart title
title: 'Fruits Production Statistics',
@ -76,23 +90,65 @@ Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Crosshair);
*/
tooltip: {
enable: true,
shared: true
shared: true,
format: '${point.x} : <b>${point.y}',
header: '<b>Fruits Production</b>'
},
crosshair: {
enable: true,
enable: false,
line: {
color: 'rgba(204,214,235,0.25)',
width: Browser.isDevice ? 50 : 20,
},
lineType: 'Vertical'
},
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
let annotationColor = 'light';
args.chart.annotations[0].content = '<div style="color:black; font-weight:bold;">Actual</div>';
args.chart.annotations[1].content = '<div style="color:black; font-weight:bold;">Forecast</div>';
let selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
replace(/-dark/i, "Dark") as ChartTheme;
if (selectedTheme && selectedTheme.indexOf('fabric-dark') > -1) {
annotationColor = 'dark'
} else if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
annotationColor = 'light'
} else if (selectedTheme === 'material-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'material') {
annotationColor = 'light'
} else if (selectedTheme === 'bootstrap5-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'bootstrap5') {
annotationColor = 'light'
} else if (selectedTheme === 'bootstrap-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'bootstrap') {
annotationColor = 'light'
} else if (selectedTheme === 'highcontrast') {
annotationColor = 'dark'
} else if (selectedTheme === 'fluent-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'fluent') {
annotationColor = 'light'
} else if (selectedTheme === 'tailwind-dark') {
annotationColor = 'dark'
} else if (selectedTheme === 'tailwind') {
annotationColor = 'light'
} else {
annotationColor = 'light'
}
if (annotationColor == 'light') {
args.chart.annotations[0].content = '<div style="color:black; font-weight:bold;">Actual</div>';
args.chart.annotations[1].content = '<div style="color:black; font-weight:bold;">Forecast</div>';
}
else {
args.chart.annotations[0].content = '<div style="color:whitesmoke; font-weight:bold;">Actual</div>';
args.chart.annotations[1].content = '<div style="color:whitesmoke; font-weight:bold;">Forecast</div>';
}
},
});
chart.appendTo('#container');
};

2
src/chart/data-editing.html
Просмотреть файл

@ -11,7 +11,7 @@
<div id="description">
<p>The draggable-points allows data to be moved around the chart. In addition to this, the module fires events such as dragStart, drag and dragComplete.</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use data editing, we need to inject
<code>DataEditing</code> module using <code>Chart.Inject(DataEditing)</code> method.

30
src/chart/data-editing.ts
Просмотреть файл

@ -1,8 +1,8 @@
import { loadCultureFiles } from '../common/culture-loader';
import { Chart, LineSeries, ColumnSeries, Category, DataEditing, Legend, Tooltip,
import { Chart, LineSeries, ColumnSeries, Category, DataEditing, Legend, DateTime, Tooltip,
ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';
Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DataEditing);
Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DateTime, DataEditing);
/**
* Sample for Data Editing
*/
@ -12,10 +12,12 @@ Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DataEditing);
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
minimum: -0.5,
maximum: 6.5,
labelPlacement: 'OnTicks',
labelFormat: 'y',
labelPlacement: 'BetweenTicks',
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
edgeLabelPlacement: 'Shift'
},
//Initializing Primary Y Axis
primaryYAxis:
@ -41,10 +43,10 @@ Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DataEditing);
dragSettings: { enable: true },
type: 'Column',
dataSource: [
{ x: '2005', y: 21 }, { x: '2006', y: 60 },
{ x: '2007', y: 45 }, { x: '2008', y: 50 },
{ x: '2009', y: 74 }, { x: '2010', y: 65 },
{ x: '2011', y: 85 }
{ x: 2005, y: 21 }, { x: 2006, y: 60 },
{ x: 2007, y: 45 }, { x: 2008, y: 50 },
{ x: 2009, y: 74 }, { x: 2010, y: 65 },
{ x: 2011, y: 85 }
],
xName: 'x', width: 2, marker: {
visible: true,
@ -56,10 +58,10 @@ Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DataEditing);
{
type: 'Line',
dataSource: [
{ x: '2005', y: 21 }, { x: '2006', y: 22 },
{ x: '2007', y: 36 }, { x: '2008', y: 34 },
{ x: '2009', y: 54 }, { x: '2010', y: 55 },
{ x: '2011', y: 60 }
{ x: 2005, y: 21 }, { x: 2006, y: 60 },
{ x: 2007, y: 45 }, { x: 2008, y: 50 },
{ x: 2009, y: 74 }, { x: 2010, y: 65 },
{ x: 2011, y: 85 }
],
dragSettings: { enable: true },
xName: 'x', width: 2, marker: {
@ -77,7 +79,7 @@ Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DataEditing);
tooltip: {
enable: true
},
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

177
src/chart/data-label-template.html
Просмотреть файл

@ -5,16 +5,15 @@
</div>
<div id="action-description">
<p>
This sample illustrates datalabel template support in the chart. In this sample, images are placed as datalabel by means of templates.
This sample illustrates data label template support in charts. Each data label for each point is rendered using the template.
</p>
</div>
<div id="description">
<p>
Label content can be formatted by using the template option in dataLabel. Inside the template, you can add the placeholder
text ${point.y}M to display corresponding data points value.
The Javascript Charts data label template feature allows you to change the appearance and behavior of the data label for each data point using the <code>Template</code> property.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
To use dataLabel, we need to inject
<code>dataLabel</code> module using <code>Chart.Inject(dataLabel)</code> method.
@ -43,227 +42,227 @@
text-align: center;
}
</style>
<script id='Male-Fabric' type="text/x-template">
<script id='Boys-Fabric' type="text/x-template">
<div id='templateWrap' style="background-color:#4472c4;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px; padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px; padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-Fabric' type="text/x-template">
<script id='Girls-Fabric' type="text/x-template">
<div id='templateWrap' style="background-color:#ed7d31;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-Material' type="text/x-template">
<script id='Boys-Material' type="text/x-template">
<div id='templateWrap' style="background-color:#00bdae;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-Material' type="text/x-template">
<script id='Girls-Material' type="text/x-template">
<div id='templateWrap' style="background-color:#404041;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-Bootstrap' type="text/x-template">
<script id='Boys-Bootstrap' type="text/x-template">
<div id='templateWrap' style="background-color:#a16ee5;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-Bootstrap' type="text/x-template">
<script id='Girls-Bootstrap' type="text/x-template">
<div id='templateWrap' style="background-color:#f7ce69;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-Bootstrap4' type="text/x-template">
<script id='Boys-Bootstrap4' type="text/x-template">
<div id='templateWrap' style="background-color:#a16ee5;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-Bootstrap4' type="text/x-template">
<script id='Girls-Bootstrap4' type="text/x-template">
<div id='templateWrap' style="background-color:#f7ce69;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-HighContrast' type="text/x-template">
<script id='Boys-HighContrast' type="text/x-template">
<div id='templateWrap' style="background-color:#79ECE4;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-HighContrast' type="text/x-template">
<script id='Girls-HighContrast' type="text/x-template">
<div id='templateWrap' style="background-color:#E98272;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-Tailwind' type="text/x-template">
<script id='Boys-Tailwind' type="text/x-template">
<div id='templateWrap' style="background-color:#5A61F6;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-Tailwind' type="text/x-template">
<script id='Girls-Tailwind' type="text/x-template">
<div id='templateWrap' style="background-color:#65A30D;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-Bootstrap5' type="text/x-template">
<script id='Boys-Bootstrap5' type="text/x-template">
<div id='templateWrap' style="background-color:#262E0B;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-Bootstrap5' type="text/x-template">
<script id='Girls-Bootstrap5' type="text/x-template">
<div id='templateWrap' style="background-color:#668E1F;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-MaterialDark' type="text/x-template">
<script id='Boys-MaterialDark' type="text/x-template">
<div id='templateWrap' style="background-color:#9ECB08;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-MaterialDark' type="text/x-template">
<script id='Girls-MaterialDark' type="text/x-template">
<div id='templateWrap' style="background-color: #56AEFF;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-FabricDark' type="text/x-template">
<script id='Boys-FabricDark' type="text/x-template">
<div id='templateWrap' style="background-color:#4472c4;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-FabricDark' type="text/x-template">
<script id='Girls-FabricDark' type="text/x-template">
<div id='templateWrap' style="background-color:#ed7d31;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-BootstrapDark' type="text/x-template">
<script id='Boys-BootstrapDark' type="text/x-template">
<div id='templateWrap' style="background-color:#a16ee5;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-BootstrapDark' type="text/x-template">
<script id='Girls-BootstrapDark' type="text/x-template">
<div id='templateWrap' style="background-color:#f7ce69;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-TailwindDark' type="text/x-template">
<script id='Boys-TailwindDark' type="text/x-template">
<div id='templateWrap' style="background-color:#8B5CF6;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-TailwindDark' type="text/x-template">
<script id='Girls-TailwindDark' type="text/x-template">
<div id='templateWrap' style="background-color:#22D3EE;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-Bootstrap5Dark' type="text/x-template">
<script id='Boys-Bootstrap5Dark' type="text/x-template">
<div id='templateWrap' style="background-color:#5ECB9B;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-Bootstrap5Dark' type="text/x-template">
<script id='Girls-Bootstrap5Dark' type="text/x-template">
<div id='templateWrap' style="background-color:#A860F1;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-Fluent' type="text/x-template">
<script id='Boys-Fluent' type="text/x-template">
<div id='templateWrap' style="background-color:#614570;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-Fluent' type="text/x-template">
<script id='Girls-Fluent' type="text/x-template">
<div id='templateWrap' style="background-color:#4C6FB1;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Male-FluentDark' type="text/x-template">
<script id='Boys-FluentDark' type="text/x-template">
<div id='templateWrap' style="background-color:#8AB113;border-radius: 3px;">
<img src='src/chart/images/male.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>
<script id='Female-FluentDark' type="text/x-template">
<script id='Girls-FluentDark' type="text/x-template">
<div id='templateWrap' style="background-color:#2A72D5;border-radius: 3px;">
<img src='src/chart/images/female.png' />
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
<span>${point.y}M </span>
<img src='src/chart/images/female.png'/>
<div class='des' style="color:white; font-family:Roboto; font-style: medium; font-size:14px;padding-right:6px">
<span>${point.y} </span>
</div>
</div>
</script>

80
src/chart/data-label-template.ts
Просмотреть файл

@ -1,9 +1,9 @@
import { loadCultureFiles } from '../common/culture-loader';
import {
Chart, LineSeries, DataLabel, Legend, ILoadedEventArgs,
Chart, ColumnSeries, DataLabel, Legend, ILoadedEventArgs,
ChartTheme, Category, ITextRenderEventArgs
} from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries, DataLabel, Category, Legend);
Chart.Inject(ColumnSeries, DataLabel, Category, Legend);
import { Browser } from '@syncfusion/ej2-base';
/**
* Sample for DataLabel template
@ -12,8 +12,7 @@ import { Browser } from '@syncfusion/ej2-base';
loadCultureFiles();
let theme: ChartTheme;
let chart: Chart = new Chart({
title: 'Population of India Statistics',
subTitle: '(2010 - 2016)',
title: 'Athletes in Popular School',
subTitleStyle: {
textAlignment: 'Far'
},
@ -23,68 +22,57 @@ import { Browser } from '@syncfusion/ej2-base';
chartArea: { border: { width: 0 } },
// Initialize the chart axes
primaryXAxis: {
minimum: 2010, maximum: 2016,
interval: Browser.isDevice ? 2 : 1,
valueType: 'Category',
edgeLabelPlacement: 'Shift',
labelStyle: {
fontFamily: 'Roboto',
fontStyle: 'medium',
size: '14px'
},
majorGridLines: { width: 0 },
lineStyle: { color: '#eaeaea', width: 1 }
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
},
primaryYAxis: {
minimum: 900, maximum: 1300,
labelFormat: '{value}M',
title: Browser.isDevice ? '' : 'Population',
labelStyle: {
fontFamily: 'Roboto',
fontStyle: 'medium', size: '14px'
},
majorGridLines: {
color: '#eaeaea', width: 1
},
lineStyle: {
color: '#eaeaea', width: 1
}
minimum: 0,
maximum: 70,
lineStyle:{width:0},
majorGridLines:{ color:'#eaeaea', width:1}
},
// Initialize the chart series
series: [
{
name: 'Male',
name: 'Boys',type:'Column',
dataSource: [
{ x: 2010, y: 1014 }, { x: 2011, y: 1040 },
{ x: 2012, y: 1065 }, { x: 2013, y: 1110 },
{ x: 2014, y: 1130 }, { x: 2015, y: 1153 },
{ x: 2016, y: 1175 }
], xName: 'x', yName: 'y',
{ sports : "Tennis", boys : 50, girls : 38 },
{ sports : "Badminton", boys : 30, girls : 40 },
{ sports : "Cycling", boys : 37, girls : 20 },
{ sports : "Football", boys : 60, girls : 21 },
{ sports : "Hockey", boys : 15, girls : 8 },
], xName: 'sports', yName: 'boys',columnSpacing:0.5 , columnWidth:0.75,
marker: {
visible: true,
visible: false,
shape: 'Circle',
dataLabel: {
visible: true,
position: 'Top',
margin: { right: 30 },
template: '#Male-Material'
position: 'Outer',
margin: { top: 70 },
template: '#Boys-Material'
}
}, width: 2
}, {
name: 'Female',
name: 'Girls', type:'Column',
dataSource: [
{ x: 2010, y: 990 }, { x: 2011, y: 1010 },
{ x: 2012, y: 1030 }, { x: 2013, y: 1070 },
{ x: 2014, y: 1105 }, { x: 2015, y: 1138 },
{ x: 2016, y: 1155 }
], xName: 'x', yName: 'y',
{ sports : "Tennis", boys : 50, girls : 38 },
{ sports : "Badminton", boys : 30, girls : 40 },
{ sports : "Cycling", boys : 37, girls : 20 },
{ sports : "Football", boys : 60, girls : 21 },
{ sports : "Hockey", boys : 15, girls : 8 },
], xName: 'sports', yName: 'girls',columnSpacing:0.5 , columnWidth:0.75,
marker: {
visible: true,
visible: false,
shape: 'Rectangle',
dataLabel: {
visible: true,
position: 'Bottom',
margin: { right: 15 },
template: '#Female-Material'
position: 'Outer',
margin: { top: 70 },
template: '#Girls-Material'
}
}, width: 2
}
@ -100,7 +88,7 @@ import { Browser } from '@syncfusion/ej2-base';
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
args.chart.theme = theme;
},
width: Browser.isDevice ? '100%' : '80%'
width: Browser.isDevice ? '100%' : '75%'
});
chart.appendTo('#container');
};

2
src/chart/date-time-category.html
Просмотреть файл

@ -16,7 +16,7 @@
Tooltip is enabled in this example. To see the tooltip in action, hover a point or tap a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. For datetime category axis, you should inject
<code>DateTimeCategory</code> module by using

7
src/chart/date-time-category.ts
Просмотреть файл

@ -18,13 +18,14 @@ Chart.Inject(ColumnSeries, DateTimeCategory, Tooltip, StripLine, ChartAnnotation
valueType: 'DateTimeCategory',
intervalType: 'Days',
skeleton: 'Ed',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 },
stripLines: [
{ visible: true, start: new Date(2017, 11, 20), end: new Date(2017, 11, 27), color: 'skyblue', opacity: 0.5, },
{ visible: true, start: new Date(2018, 0, 2), end: new Date(2018, 0, 8), color: 'pink', opacity: 0.5 },
],
title: 'Business Days'
title: 'Business Days',
labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45',
labelRotation: Browser.isDevice ? -45 : 0,
},
primaryYAxis: {
labelFormat: '{value}M',
@ -54,7 +55,7 @@ Chart.Inject(ColumnSeries, DateTimeCategory, Tooltip, StripLine, ChartAnnotation
xName: 'x', yName: 'y', name: 'Product',
},
],
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
legendSettings: { visible: false },
title: 'Sales Comparison of a Product',
tooltip: {

2
src/chart/date-time.html
Просмотреть файл

@ -15,7 +15,7 @@
Format for the axis label will be calculated based on intervalType of axis or we can set the format through labelFormat property in axis.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use DateTime axis, we need to inject
<code>DateTime</code> module using <code>Chart.Inject(Datetime)</code> method.

4
src/chart/date-time.ts
Просмотреть файл

@ -62,11 +62,11 @@ import { Browser } from '@syncfusion/ej2-base';
yName: 'y', name: 'Coldest',
marker: {
visible: true, height: 10, width: 10, shape: 'Diamond',
dataLabel: { visible: true, position: 'Bottom' }
dataLabel: { visible: true, position: 'Top' }
}
}
],
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
//Initializing Chart title
title: 'Alaska Weather Statistics - 2016',
load: (args: ILoadedEventArgs) => {

121
src/chart/default-pie.html
Просмотреть файл

@ -1,119 +1,22 @@
<div>
<div class="col-lg-8 control-section">
<div class="content-wrapper">
<div class="control-section">
<div id="container"></div>
</div>
</div>
<div class="col-lg-4 property-section">
<table id="property" title="Properties" style="width: 100%">
<tr style="height: 50px">
<td style="width: 30%">
<div>Pie Angle:
</div>
</td>
<td style="width: 70%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="pieangle" value="0" min="0" max="360" style="width:90%">
</div>
</td>
<td style="width: 30%;">
<div data-role="rangeslider">
<p id="anglevalue" style="font-weight: normal; padding-top: 10px">0</p>
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 30%">
<div>Outer Radius:
</div>
</td>
<td style="width: 70%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="pieradius" value="70" min="0" max="80" style="width:90%">
</div>
</td>
<td style="width: 30%;">
<div data-role="rangeslider">
<p id="radius" style="font-weight: normal; padding-top: 10px">0.70</p>
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 30%">
<div>Explode Radius:
</div>
</td>
<td style="width: 70%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="pieexploderadius" value="10" min="0" max="40" style="width:90%">
</div>
</td>
<td style="width: 30%;">
<div data-role="rangeslider">
<p id="exploderadius" style="font-weight: normal; padding-top: 10px">0.10</p>
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 30%">
<div>Explode Index:
</div>
</td>
<td style="width: 70%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="pieexplodeindex" value="0" min="0" max="6" style="width:90%">
</div>
</td>
<td style="width: 30%;">
<div data-role="rangeslider">
<p id="explodeindex" style="font-weight: normal; padding-top: 10px">0</p>
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 50%">
<div>
Center X
</div>
</td>
<td style="width: 50%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="x" value="50" min="0" max="100" style="width:90%">
</div>
</td>
<td style="width: 50%;">
<div data-role="rangeslider">
<p id="xvalue" style="font-weight: normal;padding-top:10px;">50%</p>
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 50%">
<div>
Center Y
</div>
</td>
<td style="width: 50%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="y" value="50" min="0" max="100" style="width:90%">
</div>
</td>
<td style="width: 50%;">
<div data-role="rangeslider">
<p id="yvalue" style="font-weight: normal;padding-top:10px;">50%</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="action-description">
<p>
This sample demonstrates pie chart for mobile browser usage statistics. <code>Datalabel</code> shows the Information about the points.
While hovering on the slice, border will be highlighted.
This Pie Chart example demonstrates a pie chart for mobile browsers usage statistics. Datalabels show information about the points.
</p>
</div>
<div id="description">
<p> In this example, you can see how to render and configure the pie chart. You can use <code>border</code>, <code>fill</code> properties to customize the pie point. <code>dataLabel</code> is used to represent individual data and its value.</p>
<p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p> In this example, you can see how to render and configure a pie chart. The pie chart is a circular graphic, which is ideal for displaying categories as a proportion or a percentage of the whole.
The radius of the pie chart can be customized using the <code>Radius</code> property.</p>
<br>
<p>
More information on the pie series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/accumulation-chart/pie-dough-nut/#pie-chart">documentation section</a>.
</p>
</div>

101
src/chart/default-pie.ts
Просмотреть файл

@ -3,6 +3,7 @@ import {
AccumulationTheme, AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs,
AccumulationDataLabel
} from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2/base';
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
/**
@ -14,26 +15,38 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
// Initialize the chart series
series: [
{
dataSource: [
{ 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },
{ 'x': 'Others', y: 4, text: '4%' }, { 'x': 'Opera', y: 11, text: '11%' },
{ 'x': 'Android', y: 12, text: '12%' }
],
dataSource: Browser.isDevice ?
[{ 'x': 'Chrome', y: 59.28, text: 'Chrome: 59.28%' },
{ 'x': 'Safari', y: 4.73, text: 'Safari <br> 4.73%' },
{ 'x': 'Opera', y: 6.12, text: 'Opera: 6.12%' },
{ 'x': 'Edge', y: 7.48, text: 'Edge: 7.48%' },
{ 'x': 'Others', y: 22.39, text: 'Others: 22.39%' }] :
[
{ 'x': 'Chrome', y: 59.28, text: 'Chrome: 59.28%' },
{ 'x': 'UC Browser', y: 4.37, text: 'UC Browser: 4.37%' },
{ 'x': 'Opera', y: 3.12, text: 'Opera: 3.12%' },
{ 'x': 'Sogou Explorer', y: 1.73, text: 'Sogou Explorer: 1.73%' },
{ 'x': 'QQ', y: 3.96, text: 'QQ: 3.96%' },
{ 'x': 'Safari', y: 4.73, text: 'Safari: 4.73%' },
{ 'x': 'Internet Explorer', y: 6.12, text: 'Internet Explorer: 6.12%' },
{ 'x': 'Edge', y: 7.48, text: 'Edge: 7.48%' },
{ 'x': 'Others', y: 9.57, text: 'Others: 9.57%' }
],
dataLabel: {
visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' }
visible: true, position: 'Outside', name: 'text', font: { fontWeight: '600' }, connectorStyle:{length:'20px', type: 'Curve'}
},
radius: '70%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%',
explode: true, explodeOffset: '10%', explodeIndex: 0, name: 'Browser'
xName: 'x', yName: 'y', startAngle: Browser.isDevice ? 55 : 35, innerRadius: '0%',radius: Browser.isDevice ? '40%' : '70%',
explode: true, explodeOffset: '10%', explodeIndex: 0, name: 'Browser'
}
],
center: { x: '50%', y: '50%' },
enableSmartLabels: true,
enableBorderOnMouseMove: false,
enableAnimation: false,
legendSettings: { visible: false },
// Initialize tht tooltip
tooltip: { enable: true, format: '${point.x} : <b>${point.y}%</b>' },
title: 'Mobile Browser Statistics',
tooltip: {enable: true, format: '<b>${point.x}</b><br>Browser Share: <b>${point.y}%</b>', header: "" },
title: 'Browser Market Share',
load: (args: IAccLoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
@ -42,70 +55,6 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
}
});
pie.appendTo('#container');
function anglechange(value: number): void {
pie.series[0].startAngle = +value;
pie.series[0].endAngle = +value;
pie.series[0].animation.enable = false;
document.getElementById('anglevalue').innerHTML = value.toString();
pie.removeSvg(); pie.refreshSeries(); pie.refreshChart();
}
document.getElementById('pieangle').onpointermove = document.getElementById('pieangle').ontouchmove =
document.getElementById('pieangle').onchange = (e: Event) => {
anglechange(+(document.getElementById('pieangle') as HTMLInputElement).value);
};
function radiuschange(value: number): void {
pie.series[0].radius = value + '%';
pie.series[0].animation.enable = false;
document.getElementById('radius').innerHTML = (value / 100).toFixed(2);
pie.removeSvg(); pie.refreshSeries(); pie.refreshChart();
}
document.getElementById('pieradius').onpointermove = document.getElementById('pieradius').ontouchmove =
document.getElementById('pieradius').onchange = (e: Event) => {
radiuschange(+(document.getElementById('pieradius') as HTMLInputElement).value);
};
function exploderadius(value: number): void {
pie.visibleSeries[0].explodeOffset = value + '%';
pie.series[0].animation.enable = false;
document.getElementById('exploderadius').innerHTML = (value / 100).toFixed(2);
pie.removeSvg();
pie.refreshSeries();
pie.refreshChart();
}
document.getElementById('pieexploderadius').onpointermove = document.getElementById('pieexploderadius').ontouchmove =
document.getElementById('pieexploderadius').onchange = (e: Event) => {
exploderadius(+(document.getElementById('pieexploderadius') as HTMLInputElement).value);
};
function explodeIndex(value: number): void {
pie.visibleSeries[0].explodeIndex = +value;
pie.series[0].animation.enable = false;
document.getElementById('explodeindex').innerHTML = value.toString();
pie.removeSvg();
pie.refreshSeries();
pie.refreshChart();
}
document.getElementById('pieexplodeindex').onpointermove = document.getElementById('pieexplodeindex').ontouchmove =
document.getElementById('pieexplodeindex').onchange = (e: Event) => {
explodeIndex(+(document.getElementById('pieexplodeindex') as HTMLInputElement).value);
};
function xchange(value: number): void {
pie.center.x = value + '%';
pie.series[0].animation.enable = false;
document.getElementById('xvalue').innerHTML = value + '%';
pie.removeSvg(); pie.refreshSeries(); pie.refreshChart();
}
document.getElementById('x').onpointermove = document.getElementById('x').ontouchmove =
document.getElementById('x').onchange = (e: Event) => {
xchange(+(document.getElementById('x') as HTMLInputElement).value);
};
function ychange(value: number): void {
pie.center.y = value + '%';
pie.series[0].animation.enable = false;
document.getElementById('yvalue').innerHTML = value + '%';
pie.removeSvg(); pie.refreshSeries(); pie.refreshChart();
}
document.getElementById('y').onpointermove = document.getElementById('y').ontouchmove =
document.getElementById('y').onchange = (e: Event) => {
ychange(+(document.getElementById('y') as HTMLInputElement).value);
};
};

13
src/chart/donut.html
Просмотреть файл

@ -3,11 +3,16 @@
</div>
<div id="action-description">
<p>
This sample visualizes the project cost breakdown statistics by using doughnut series. Datalabel shows the Information about the points.
While hovering on the slice, border will be highlighted.
This Donut Chart example visualizes the mobile browsers statistics by using doughnut series. Datalabels show information about the points.
</p>
</div>
<div id="description">
<p> In this example, you can see how to render and configure the pie chart. You can use <code>border</code>, <code>fill</code> properties to customize the pie point. <code>dataLabel</code> is used to represent individual data and its value.</p>
<p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>. Inner radius and outer radius of the chart can be changed by <code>innerRadius</code> and <code>radius</code> property.
<p> In this example, you can see how to render and configure a doughnut chart. To create a doughnut in pie series, customize the <code>InnerRadius</code> property. <code>DataLabels</code> are used to represent individual data and its values.</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>Accumulation Chart component features are segregated into individual feature-wise modules.To use pie chart, you need to inject <code>PieSeries</code> property. </p>
<p>
More information on the doughnut series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/accumulation-chart/pie-dough-nut/#doughnut-chart">documentation section</a>.
</p>
</div>

41
src/chart/donut.ts
Просмотреть файл

@ -1,9 +1,10 @@
import { loadCultureFiles } from '../common/culture-loader';
import {
AccumulationTheme, AccumulationChart, AccumulationLegend, PieSeries, IAccLoadedEventArgs,
AccumulationDataLabel
AccumulationDataLabel, AccumulationTooltip
} from '@syncfusion/ej2-charts';
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel);
import { Browser } from '@syncfusion/ej2/base';
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip);
/**
* Sample for Doughnut chart
*/
@ -13,32 +14,40 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel);
// Initialize the chart series
series: [
{
dataSource: [{ x: 'Labour', y: 18, text: '18%' }, { x: 'Legal', y: 8, text: '8%' },
{ x: 'Production', y: 15, text: '15%' }, { x: 'License', y: 11, text: '11%' },
{ x: 'Facilities', y: 18, text: '18%' }, { x: 'Taxes', y: 14, text: '14%' },
{ x: 'Insurance', y: 16, text: '16%' }],
dataSource: Browser.isDevice ?
[{ x: 'Chrome', y: 59.28, text: ' Chrome: 59.28%' }, { x: 'Safari', y: 5.73, text: Browser.isDevice ? 'Safari: <br> 5.73%' : 'Safari: 5.73%' },
{ x: 'Opera', y: 6.12, text: 'Opera: 6.12%' },
{ x: 'Edge', y: 7.48, text: 'Edge: 7.48%' },
{ x: 'Others', y: 22.41, text: 'Others: 22.41%' }] :
[{ x: 'Chrome', y: 59.28, text: ' Chrome: 59.28%' }, { x: 'UC Browser', y: 4.37, text: 'UC Browser: 4.37%' },
{ x: 'Opera', y: 2.12, text: 'Opera: 2.12%' }, { x: 'Sogou Explorer', y: 1.73, text: 'Sogou Explorer: 1.73%' },
{ x: 'QQ', y: 3.96, text: 'QQ: 3.96%' }, { x: 'Safari', y: 5.73, text: 'Safari: 5.73%' },
{ x: 'Internet Explorer', y: 6.12, text: 'Internet Explorer: 6.12%' },
{ x: 'Edge', y: 7.48, text: 'Edge: 7.48%' },
{ x: 'Others', y: 9.21, text: 'Others: 9.21%' }],
dataLabel: {
visible: true,
name: 'text',
position: 'Inside',
position: 'Outside',
font: {
fontWeight: '600',
color: '#ffffff'
}
},
connectorStyle:{length:'20px', type: 'Curve'}
},
radius: '70%', xName: 'x',
yName: 'y', startAngle: 0,
endAngle: 360, innerRadius: '40%', name: 'Project',
explode: true, explodeOffset: '10%', explodeIndex: 3
xName: 'x',
yName: 'y', startAngle: Browser.isDevice ? 62 : 0, radius: Browser.isDevice ? '40%' : '75%',
innerRadius: '40%', name: 'Project',
explode: true, explodeOffset: '10%', explodeIndex: 0,
}
],
enableSmartLabels: true,
enableBorderOnMouseMove:false,
legendSettings: {
visible: true, position: 'Top'
visible: false, position: 'Top'
},
// Initialize the tooltip
tooltip: { enable: false },
title: 'Project Cost Breakdown',
tooltip: { enable: true,format:'<b>${point.x}</b><br>Browser Share: <b>${point.y}%</b>',header:"" },
title: 'Mobile Browsers Statistics',
// custom code start
load: (args: IAccLoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];

13
src/chart/drill-down-pie.html
Просмотреть файл

@ -10,16 +10,19 @@
</div>
<div id="action-description">
<p>
This sample demonstrates drill down sample with pie chart for a automobiles sales by category. By clicking one category, you can navigate to other sub-category by which companies are differentiated.
This sample demonstrates a drill down chart with a pie for automobiles sales by category. By clicking one category, you can navigate to other sub-categories where companies are differentiated.
</p>
</div>
<div id="description">
<p> In this example, you can see how to achieve <code>drilldown</code> concept using pie control. An automobile sales has been shown by different category, on clicking each category, you can navigate to next level, which shows the sales of those category
in terms of company.</p>
<p> Datalabel is used in this sample.</p>
<p style="font-weight: 500">Injecting Module</p>
<p> In this example, you can see how to achieve the drilldown concept using a pie chart. Automobile sales are shown in different categories. By clicking each category, you can navigate to the next level, which shows the sales by categories made by each company.<code> Datalabels </code> are used in this sample to show information about the data points.</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p> Accumulation chart component features are segregated into individual feature-wise modules. To use datalabel, we need to inject DataLabel module using <code>AccumulationChart.Inject(AccumulationDataLabel)</code> method. </p>
<p>
More information on the pie series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/accumulation-chart/pie-dough-nut/#pie-chart">documentation section</a>.
</p>
</div>
<style>
#category:hover {

9
src/chart/drill-down-pie.ts
Просмотреть файл

@ -6,6 +6,7 @@ import {
AccumulationChartModel, AccumulationAnnotation
} from '@syncfusion/ej2-charts';
import { EmitType } from '@syncfusion/ej2-base';
import { Browser } from '@syncfusion/ej2/base';
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel, AccumulationAnnotation);
/**
* Sample fro Drill Down in Pie chart
@ -24,7 +25,7 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
let clickInstance: AccumulationChartModel = {
series: [{
type: 'Pie', dataSource: suvs, xName: 'x', yName: 'y',
dataLabel: { visible: true, position: 'Outside' }, innerRadius: '30%',
dataLabel: { visible: true, position: Browser.isDevice ? 'Inside' : 'Outside', enableRotation:true, connectorStyle: { type: 'Curve' , length: '20px'}}, innerRadius: '30%',
}
], textRender: (args: IAccTextRenderEventArgs) => {
args.text = args.point.x + ' ' + args.point.y + ' %';
@ -44,6 +45,7 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
},
legendSettings: { visible: false }, enableSmartLabels: true,
tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
enableBorderOnMouseMove:false,
// custom code start
load: (args: IAccLoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
@ -87,6 +89,7 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
(<HTMLElement>getElement('symbol')).style.visibility = 'visible';
(<HTMLElement>getElement('category')).style.visibility = 'visible';
(<HTMLElement>getElement('text')).style.visibility = 'visible';
pie.series[0].radius = Browser.isDevice ? '90%' : '80%';
}
};
let instance: AccumulationChartModel = {
@ -94,14 +97,14 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
{
dataSource: [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }],
dataLabel: {
visible: true, position: 'Inside', connectorStyle: { type: 'Curve', length: '10%' },
visible: true, position: 'Inside', enableRotation : false,
font: { fontWeight: '600', color: 'white' }},
radius: '70%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%',
explode: false }
], enableSmartLabels: false, legendSettings: { visible: false }, chartMouseClick: pointClick,
textRender: (args: IAccTextRenderEventArgs) => { args.text = args.point.x + ' ' + args.point.y + ' %'; },
tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
title: 'Automobile Sales by Category',
title: 'Automobile Sales by Category', enableBorderOnMouseMove:false,
load: (args: IAccLoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

1
src/chart/empty-point.html
Просмотреть файл

@ -51,6 +51,7 @@
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p>
More information on the empty points can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.

6
src/chart/empty-point.ts
Просмотреть файл

@ -4,6 +4,7 @@ import {
EmptyPointMode, Category, Legend, Tooltip, ILoadedEventArgs
} from '@syncfusion/ej2-charts';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Browser } from '@syncfusion/ej2/base';
Chart.Inject(ColumnSeries, Category, Legend, Tooltip, SplineSeries, AreaSeries);
/**
@ -14,11 +15,12 @@ Chart.Inject(ColumnSeries, Category, Legend, Tooltip, SplineSeries, AreaSeries);
let chart: Chart = new Chart({
//Initializing Primary X and Y Axis
primaryXAxis: {
title: 'Product', valueType: 'Category', interval: 1
valueType: 'Category', interval: 1, labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', labelRotation: Browser.isDevice ? -45 : 0, majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
primaryYAxis:
{
title: 'Profit', minimum: 0, maximum: 100, interval: 20, labelFormat: '{value}%'
minimum: 0, maximum: 100, interval: 20, labelFormat: '{value}%'
},
//Initializing Chart Series
series: [

3
src/chart/error-bar.html
Просмотреть файл

@ -101,7 +101,8 @@
<li>
<code>Custom</code> - Renders a custom type error bar.</li>
</ul>
<p style="font-weight: 500">Injecting Module</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use error bar, we need to inject
<code>ErrorBar</code> module using

6
src/chart/error-bar.ts
Просмотреть файл

@ -34,7 +34,9 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
let chart: Chart = new Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
valueType: 'Category', interval: 1, majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
majorGridLines: { width: 0 }
},
chartArea: {
border: { width: 0 }
@ -55,7 +57,7 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
{ x: 'UK', y: 41 }, { x: 'RUS', y: 26 }
],
xName: 'x', width: 2, yName: 'y', marker: { height: 10, width: 10 },
errorBar: { visible: true, verticalError: 3, horizontalError: 3 }, name: 'Sales'
errorBar: { visible: true, verticalError: 3, horizontalError: 3 }
},
],
//Initializing Chart title

7
src/chart/exponential-moving-average-indicator.html
Просмотреть файл

@ -9,14 +9,13 @@
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the EMA Indicator. You can use
<code>fill</code> properties to customize the indicator.
In this example, you can see how to render and configure the EMA Indicator.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p style="font-weight: 500">Injecting Module</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use EMA Indicator, we need to Inject
<code>EmaIndicator</code> module using <code>chart.Inject(EmaIndicator)</code> method.

2
src/chart/exponential-moving-average-indicator.ts
Просмотреть файл

@ -70,7 +70,7 @@ Chart.Inject(
enablePan: true
},
title: 'AAPL - 2012-2017',
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

1
src/chart/export.html
Просмотреть файл

@ -52,6 +52,7 @@
In this example, you can see how to render and configure the export. The rendered chart can be exported as either JPEG,
PNG and SVG format. It can be achieved using Blob and it's supported only in modern browsers.
</p>
<br>
<p>
More information on the export can be found in this
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.

9
src/chart/export.ts
Просмотреть файл

@ -36,9 +36,10 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
//Initializing Primary X Axis
primaryXAxis: {
title: 'Countries',
valueType: 'Category',
majorGridLines: { width: 0 }
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
chartArea: {
@ -55,7 +56,9 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
minimum: 0,
maximum: 40,
interval: 10,
majorGridLines: { width: 0 }
lineStyle: { width: 0 },
minorTickLines: { width: 0 },
majorTickLines: { width: 0 },
},
//Initializing Chart Series
series: [

580
src/chart/financial-data.ts
Просмотреть файл

@ -2402,4 +2402,582 @@ export let rainFallData: number[] = [
8.222978426452293, 7.846639766826911, 8.069351366527062, 7.513260268839259, 6.296995869336903,
8.3590956573818, 7.34430352413543, 5.527911754495014, 7.770708367719198, 8.266752140439358,
5.2647621706579635, 6.101003552437883, 5.589774929752683, 7.839799629506524, 7.41897730190976
];
];
let dates: string = '1333324800000,1333584000000,1333843200000,1334102400000,1334361600000,1334620800000,' +
'1334880000000,1335139200000,1335398400000,1335657600000,1335916800000,1336176000000,1336435200000,' +
'1336694400000,1336953600000,1337212800000,1337472000000,1337731200000,1337990400000,1338249600000,' +
'1338508800000,1338768000000,1339027200000,1339286400000,1339545600000,1339804800000,1340064000000,' +
'1340323200000,1340582400000,1340841600000,1341100800000,1341360000000,1341619200000,1341878400000,' +
'1342137600000,1342396800000,1342656000000,1342915200000,1343174400000,1343433600000,1343692800000,' +
'1343952000000,1344211200000,1344470400000,1344729600000,1344988800000,1345248000000,1345507200000,' +
'1345766400000,1346025600000,1346284800000,1346544000000,1346803200000,1347062400000,1347321600000,' +
'1347580800000,1347840000000,1348099200000,1348358400000,1348617600000,1348876800000,1349136000000,' +
'1349395200000,1349654400000,1349913600000,1350172800000,1350432000000,1350691200000,1350950400000,' +
'1351209600000,1351468800000,1351728000000,1351987200000,1352246400000,1352505600000,1352764800000,' +
'1353024000000,1353283200000,1353542400000,1353801600000,1354060800000,1354320000000,1354579200000,' +
'1354838400000,1355097600000,1355356800000,1355616000000,1355875200000,1356134400000,1356393600000,' +
'1356652800000,1356912000000,1357171200000,1357430400000,1357689600000,1357948800000,1358208000000,' +
'1358467200000,1358726400000,1358985600000,1359244800000,1359504000000,1359763200000,1360022400000,' +
'1360281600000,1360540800000,1360800000000,1361059200000,1361318400000,1361577600000,1361836800000,' +
'1362096000000,1362355200000,1362614400000,1362873600000,1363132800000,1363392000000,1363651200000,' +
'1363910400000,1364169600000,1364428800000,1364688000000,1364947200000,1365206400000,1365465600000,' +
'1365724800000,1365984000000,1366243200000,1366502400000,1366761600000,1367020800000,1367280000000,' +
'1367539200000,1367798400000,1368057600000,1368316800000,1368576000000,1368835200000,1369094400000,' +
'1369353600000,1369612800000,1369872000000,1370131200000,1370390400000,1370649600000,1370908800000,' +
'1371168000000,1371427200000,1371686400000,1371945600000,1372204800000,1372464000000,1372723200000,' +
'1372982400000,1373241600000,1373500800000,1373760000000,1374019200000,1374278400000,1374537600000,' +
'1374796800000,1375056000000,1375315200000,1375574400000,1375833600000,1376092800000,1376352000000,' +
'1376611200000,1376870400000,1377129600000,1377388800000,1377648000000,1377907200000,1378166400000,' +
'1378425600000,1378684800000,1378944000000,1379203200000,1379462400000,1379721600000,1379980800000,' +
'1380240000000,1380499200000,1380758400000,1381017600000,1381276800000,1381536000000,1381795200000,' +
'1382054400000,1382313600000,1382572800000,1382832000000,1383091200000,1383350400000,1383609600000,' +
'1383868800000,1384128000000,1384387200000,1384646400000,1384905600000,1385164800000,1385424000000,' +
'1385683200000,1385942400000,1386201600000,1386460800000,1386720000000,1386979200000,1387238400000,' +
'1387497600000,1387756800000,1388016000000,1388275200000,1388534400000,1388793600000,1389052800000,' +
'1389312000000,1389571200000,1389830400000,1390089600000,1390348800000,1390608000000,1390867200000,' +
'1391126400000,1391385600000,1391644800000,1391904000000,1392163200000,1392422400000,1392681600000,' +
'1392940800000,1393200000000,1393459200000,1393718400000,1393977600000,1394236800000,1394496000000,' +
'1394755200000,1395014400000,1395273600000,1395532800000,1395792000000,1396051200000,1396310400000,' +
'1396569600000,1396828800000,1397088000000,1397347200000,1397606400000,1397865600000,1398124800000,' +
'1398384000000,1398643200000,1398902400000,1399161600000,1399420800000,1399680000000,1399939200000,' +
'1400198400000,1400457600000,1400716800000,1400976000000,1401235200000,1401494400000,1401753600000,' +
'1402012800000,1402272000000,1402531200000,1402790400000,1403049600000,1403308800000,1403568000000,' +
'1403827200000,1404086400000,1404345600000,1404604800000,1404864000000,1405123200000,1405382400000,' +
'1405641600000,1405900800000,1406160000000,1406419200000,1406678400000,1406937600000,1407196800000,' +
'1407456000000,1407715200000,1407974400000,1408233600000,1408492800000,1408752000000,1409011200000,' +
'1409270400000,1409529600000,1409788800000,1410048000000,1410307200000,1410566400000,1410825600000,' +
'1411084800000,1411344000000,1411603200000,1411862400000,1412121600000,1412380800000,1412640000000,' +
'1412899200000,1413158400000,1413417600000,1413676800000,1413936000000,1414195200000,1414454400000,' +
'1414713600000,1414972800000,1415232000000,1415491200000,1415750400000,1416009600000,1416268800000,' +
'1416528000000,1416787200000,1417046400000,1417305600000,1417564800000,1417824000000,1418083200000,' +
'1418342400000,1418601600000,1418860800000,1419120000000,1419379200000,1419638400000,1419897600000,' +
'1420156800000,1420416000000,1420675200000,1420934400000,1421193600000,1421452800000,1421712000000,' +
'1421971200000,1422230400000,1422489600000,1422748800000,1423008000000,1423267200000,1423526400000,' +
'1423785600000,1424044800000,1424304000000,1424563200000,1424822400000,1425081600000,1425340800000,' +
'1425600000000,1425859200000,1426118400000,1426377600000,1426636800000,1426896000000,1427155200000,' +
'1427414400000,1427673600000,1427932800000,1428192000000,1428451200000,1428710400000,1428969600000,' +
'1429228800000,1429488000000,1429747200000';
let values: string[] = dates.split(',');
export let chartDataValues: object[] = [
{
x: new Date(+values[0]),
high: 10.6657,
low: 5.7685,
lineTemp: 7.5
},
{
x: new Date(+values[1]),
high: 12,
low: 6.2157,
lineTemp: 9.5
},
{
x: new Date(+values[2]),
high: 8.6071,
low: 1.4885,
lineTemp: 4.5
},
{
x: new Date(+values[3]),
high: 8.2857,
low: 1.2857,
lineTemp: 5.5
},
{
x: new Date(+values[4]),
high: 5.4857,
low: 0.7385,
lineTemp: 2.5
},
{
x: new Date(+values[5]),
high: 2.2685,
low: 1.8185,
lineTemp: 1.5
},
{
x: new Date(+values[6]),
high: 4.0728,
low: 1.5971,
lineTemp: 2.5
},
{
x: new Date(+values[7]),
high: 6.3571,
low: 2.2928,
lineTemp: 4.5
},
{
x: new Date(+values[8]),
high: 3.0714,
low: 0.0743
},
{
x: new Date(+values[9]),
high: 8.9405,
low: 2.3571,
lineTemp: 5.5
},
{
x: new Date(+values[10]),
high: 4.0714,
low: 0.9571,
lineTemp: 2.5
},
{
x: new Date(+values[11]),
high: 4.2857,
low: 1.4814,
lineTemp: 2.5
},
{
x: new Date(+values[12]),
high: 3.4285,
low: 0.8014,
lineTemp: 1.5
},
{
x: new Date(+values[13]),
high: 7.7628,
low: 3.3714,
lineTemp: 5.5
},
{
x: new Date(+values[14]),
high: 8.5528,
low: 4.6685,
lineTemp: 6.5
},
{
x: new Date(+values[15]),
high: 7.9071,
low: 6.1643,
lineTemp: 6.5
},
{
x: new Date(+values[16]),
high: 7.0971,
low: 1.4285,
lineTemp: 5.5
},
{
x: new Date(+values[17]),
high: 8.2828,
low: 3.9743,
lineTemp: 7.5
},
{
x: new Date(+values[18]),
high: 9.2857,
low: 7.8943,
},
{
x: new Date(+values[19]),
high: 12.5985,
low: 9.0357,
},
{
x: new Date(+values[20]),
high: 16.4114,
low: 12.5871,
},
{
x: new Date(+values[21]),
high: 17.2671,
low: 13.8928
},
{
x: new Date(+values[22]),
high: 17.4971,
low: 14.9285,
},
{
x: new Date(+values[23]),
high: 19.5685,
low: 13.7143,
},
{
x: new Date(+values[24]),
high: 20.7243,
low: 19.0885
},
{
x: new Date(+values[25]),
high: 19.3028,
low: 14.3357
},
{
x: new Date(+values[26]),
high: 16.6785,
low: 12.95,
},
{
x: new Date(+values[27]),
high: 12.5085,
low: 9.0785,
},
{
x: new Date(+values[28]),
high: 13.2557,
low: 7.0885
},
{
x: new Date(+values[29]),
high: 10.7685,
low: 4.4285,
},
{
x: new Date(+values[30]),
high: 6.1428,
low: 2.1071,
},
{
x: new Date(+values[31]),
high: 6.3914,
low: 4.2457
},
{
x: new Date(+values[32]),
high: 9.2143,
low: 2.25,
},
{
x: new Date(+values[33]),
high: 7.7143,
low: 1.1257,
},
{
x: new Date(+values[34]),
high: 4.8928,
low: 1.7514,
},
{
x: new Date(+values[35]),
high: 14.9414,
low: 4.09,
},
{
x: new Date(+values[36]),
high: 8.5085,
low: 2.2257,
},
{
x: new Date(+values[37]),
high: 6.4143,
low: 1.6043
},
{
x: new Date(+values[38]),
high: 4.8928,
low: 2.0943,
},
{
x: new Date(+values[39]),
high: 9.2857,
low: 2.7143
},
{
x: new Date(+values[40]),
high: 10.6657,
low: 5.7685
},
{
x: new Date(+values[41]),
high: 12,
low: 6.2157
},
{
x: new Date(+values[42]),
high: 8.6071,
low: 1.4885,
},
{
x: new Date(+values[43]),
high: 18.2857,
low: 9.2857
},
{
x: new Date(+values[44]),
high: 5.4857,
low: 0.7385,
},
{
x: new Date(+values[45]),
high: 12.2685,
low: 9.8185
},
{
x: new Date(+values[46]),
high: 11.0728,
low: 4.5971
},
{
x: new Date(+values[47]),
high: 12.3571,
low: 6.2928
},
{
x: new Date(+values[48]),
high: 3.0714,
low: 0.0743,
},
{
x: new Date(+values[49]),
high: 12.9405,
low: 8.3571,
},
{
x: new Date(+values[50]),
high: 4.0714,
low: 0.9571
},
{
x: new Date(+values[51]),
high: 4.2857,
low: 1.4814,
},
{
x: new Date(+values[52]),
high: 3.4285,
low: 0.8014,
},
{
x: new Date(+values[53]),
high: 7.7628,
low: 3.3714,
},
{
x: new Date(+values[54]),
high: 8.5528,
low: 4.6685,
},
{
x: new Date(+values[55]),
high: 7.9071,
low: 6.1643,
},
{
x: new Date(+values[56]),
high: 7.0971,
low: 1.4285,
},
{
x: new Date(+values[57]),
high: 8.2828,
low: 3.9743,
},
{
x: new Date(+values[58]),
high: 9.2857,
low: 7.8943,
},
{
x: new Date(+values[59]),
high: 12.5985,
low: 9.0357,
},
{
x: new Date(+values[60]),
high: 16.4114,
low: 12.5871,
},
{
x: new Date(+values[61]),
high: 17.2671,
low: 13.8928,
},
{
x: new Date(+values[62]),
high: 17.4971,
low: 14.9285,
},
{
x: new Date(+values[63]),
high: 19.5685,
low: 13.7143,
},
{
x: new Date(+values[64]),
high: 20.7243,
low: 19.0885,
},
{
x: new Date(+values[65]),
high: 19.3028,
low: 14.3357,
},
{
x: new Date(+values[66]),
high: 16.6785,
low: 12.95,
},
{
x: new Date(+values[67]),
high: 12.5085,
low: 19.0785,
},
{
x: new Date(+values[68]),
high: 13.2557,
low: 7.0885,
},
{
x: new Date(+values[69]),
high: 10.7685,
low: 4.4285,
},
{
x: new Date(+values[70]),
high: 6.1428,
low: 2.1071,
},
{
x: new Date(+values[71]),
high: 14.3914,
low: 6.2457,
},
{
x: new Date(+values[72]),
high: 9.2143,
low: 2.25,
},
{
x: new Date(+values[73]),
high: 11.7143,
low: 7.1257,
},
{
x: new Date(+values[74]),
high: 4.8928,
low: 1.7514,
},
{
x: new Date(+values[75]),
high: 10.9414,
low: 4.09,
},
{
x: new Date(+values[76]),
high: 8.5085,
low: 2.2257,
},
{
x: new Date(+values[77]),
high: 6.4143,
low: 1.6043,
},
{
x: new Date(+values[78]),
high: 4.8928,
low: 2.0943,
},
{
x: new Date(+values[79]),
high: 9.2857,
low: 2.7143,
},
{
x: new Date(+values[80]),
high: 5.9843,
low: 3.6,
},
{
x: new Date(+values[81]),
high: 12.9643,
low: 9.0543,
},
{
x: new Date(+values[82]),
high: 9.57,
low: 2.1428,
},
{
x: new Date(+values[83]),
high: 6.0857,
low: 2.2657,
},
{
x: new Date(+values[84]),
high: 8.4014,
low: 3.1428,
}, {
x: new Date(+values[85]),
high: 9.2143,
low: 2.25,
},
{
x: new Date(+values[86]),
high: 11.7143,
low: 7.1257,
},
{
x: new Date(+values[87]),
high: 4.8928,
low: 1.7514,
},
{
x: new Date(+values[88]),
high: 10.9414,
low: 4.09,
},
{
x: new Date(+values[89]),
high: 8.5085,
low: 2.2257,
},
{
x: new Date(+values[90]),
high: 6.4143,
low: 1.6043,
},
{
x: new Date(+values[91]),
high: 4.8928,
low: 2.0943,
},
{
x: new Date(+values[92]),
high: 9.2857,
low: 2.7143,
},
{
x: new Date(+values[93]),
high: 5.9843,
low: 3.6,
},
{
x: new Date(+values[94]),
high: 12.9643,
low: 9.0543,
},
{
x: new Date(+values[95]),
high: 9.57,
low: 2.1428,
},
{
x: new Date(+values[96]),
high: 6.0857,
low: 2.2657,
},
{
x: new Date(+values[97]),
high: 8.4014,
low: 3.1428,
},
{
x: new Date(+values[98]),
high: 9.2771,
low: 5.7028,
},
{
x: new Date(+values[99]),
high: 6.1043,
low: 3.26,
},
{
x: new Date(+values[100]),
high: 5.0171,
low: 1.4257,
},];

54
src/chart/funnel.html
Просмотреть файл

@ -1,57 +1,25 @@
<div>
<div class="col-lg-8 control-section">
<div class="content-wrapper">
<div class="control-section">
<div id="container"></div>
</div>
</div>
<div class="col-lg-4 property-section">
<table id="property" title="Properties" style="width: 100%">
<tr style="height: 50px">
<td style="width: 30%">
<div>Neck Width:
</div>
</td>
<td style="width: 70%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="chartneckwidth" value="10" min="0" max="50" style="width:90%">
</div>
</td>
<td style="width: 30%;">
<div data-role="rangeslider">
<p id="neckWidth" style="font-weight: normal; padding-top: 10px">10%</p>
</div>
</td>
</tr>
<tr style="height: 50px">
<td style="width: 30%">
<div>Neck Height:
</div>
</td>
<td style="width: 70%;">
<div data-role="rangeslider">
<input type="range" name="range-min" id="chartneckheight" value="18" min="0" max="50" style="width:90%">
</div>
</td>
<td style="width: 30%;">
<div data-role="rangeslider">
<p id="neckHeight" style="font-weight: normal; padding-top: 10px">18%</p>
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="action-description">
<p>
This sample visualizes the data about population of different countries by using default funnel series. Datalabel shows the Information about the points and are arranged smartly.
This Funnel Chart example shows a funnel chart for recruitment process. Datalabels show information about the points.
</p>
</div>
<div id="description">
<p> In this example, you can see how to render funnel chart.<code>dataLabel</code> is used to represent individual data and its value, here the labels are arranged smartly to avoid the overlap</p>
<p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<p style="font-weight: 500">Injecting Module</p>
<p> In this example, you can see how to render and configure a funnel chart. The labels are smartly arranged to avoid overlapping. The width and height of the funnel chart can be customized using the <code>NeckWidth</code> and <code>NeckHeight</code> properties.</p>
<p> <code>Tooltips</code> are enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
chart component features are segregated into individual feature-wise modules. To use Funnel series, we need to inject
<code>FunnelSeries</code> module using <code>AccumulationChart.Inject(FunnelSeries)</code> method.
</p>
<p>
More information on the funnel series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/accumulation-chart/funnel/">documentation section</a>.
</p>
</div>

71
src/chart/funnel.ts
Просмотреть файл

@ -3,46 +3,40 @@ import {
AccumulationChart, AccumulationLegend, FunnelSeries, AccumulationTooltip, IAccLoadedEventArgs,
AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme
} from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2/base';
AccumulationChart.Inject(AccumulationLegend, FunnelSeries, AccumulationTooltip, AccumulationDataLabel);
/**
* Sample for Funnel chart
*/
(window as any).default = (): void => {
(window as any).default = (): void => {
loadCultureFiles();
let data: object[] = [
{ 'x': 'China', y: 1409517397, text: 'China' },
{ 'x': 'India', y: 1339180127, text: 'India' },
{ 'x': 'United States', y: 324459463, text: 'United States' },
{ 'x': 'Indonesia', y: 263991379, text: 'Indonesia' },
{ 'x': 'Brazil', y: 209288278, text: 'Brazil' },
{ 'x': 'Pakistan', y: 197015955, text: 'Pakistan' },
{ 'x': 'Nigeria', y: 190886311, text: 'Nigeria' },
{ 'x': 'Bangladesh', y: 164669751, text: 'Bangladesh' },
{ 'x': 'Russia', y: 143989754, text: 'Russia' },
{ 'x': 'Mexico', y: 129163276, text: 'Mexico' },
{ 'x': 'Japan', y: 127484450, text: ' Japan' },
{ 'x': 'Ethiopia', y: 104957438, text: 'Ethiopia' },
{ 'x': 'Philippines', y: 104918090, text: 'Philippines' },
{ 'x': 'Egypt', y: 97553151, text: 'Egypt' },
{ 'x': 'Vietnam', y: 95540800, text: 'Vietnam' },
{ 'x': 'Germany', y: 82114224, text: 'Germany' }];
{ x: "Hired", y: 50, text: "Hired: 50" },
{ x: "Personal Interview", y: 58, text: Browser.isDevice ? "Personal <br> Interview: 58" : "Personal Interview: 58" },
{ x: "Telephonic Interview", y: 85, text: "Telephonic <br> Interview: 85" },
{ x: "Screening", y: 105, text: "Screening: 105" },
{ x: "Initial Validation", y: 145, text: Browser.isDevice ? "Initial <br> Validation: 145" : "Initial Validation: 145" },
{ x: "Candidates Applied", y: 250, text: "Candidates Applied: 250" },];
let chart: AccumulationChart = new AccumulationChart({
//Initializing Chart Series
series: [{
type: 'Funnel', dataSource: data, xName: 'x', yName: 'y',
neckWidth: '10%',
neckWidth: '15%',
neckHeight: '18%',
gapRatio:0.03,
width:'45%',
height:'80%',
name: '2017 Population',
dataLabel: {
visible: true, position: 'Outside',
connectorStyle: { length: '6%' }, name: 'text',
visible: true, position: 'Inside',
name: 'text', font: { fontWeight: '600' }, connectorStyle: {length:'20px'}
},
explode: false,
}],
legendSettings: {visible: false},
//Initializing tooltip
tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },
tooltip: { enable: false, format: '${point.x} : <b>${point.y}</b>' },
load: (args: IAccLoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
@ -53,40 +47,9 @@ AccumulationChart.Inject(AccumulationLegend, FunnelSeries, AccumulationTooltip,
args.accumulation.series[0].height = '70%';
}
},
resized: (args: IAccResizeEventArgs) => {
let bounds: ClientRect = document.getElementById('container').getBoundingClientRect();
if (bounds.width < bounds.height) {
args.accumulation.series[0].width = '80%';
args.accumulation.series[0].height = '70%';
} else {
args.accumulation.series[0].width = '60%';
args.accumulation.series[0].height = '80%';
}
},
//Initializing Chart title
title: 'Top population countries in the world 2017',
title:'Recruitment Process' ,
});
chart.appendTo('#container');
function neckWidth(value: number): void {
chart.series[0].neckWidth = value + '%';
document.getElementById('neckWidth').innerHTML = value + '%';
chart.removeSvg();
chart.refreshSeries();
chart.refreshChart();
}
document.getElementById('chartneckwidth').onpointermove = document.getElementById('chartneckwidth').ontouchmove =
document.getElementById('chartneckwidth').onchange = (e: Event) => {
neckWidth(+(document.getElementById('chartneckwidth') as HTMLInputElement).value);
};
function neckHeight(value: number): void {
chart.series[0].neckHeight = value + '%';
document.getElementById('neckHeight').innerHTML = value + '%';
chart.removeSvg();
chart.refreshSeries();
chart.refreshChart();
}
document.getElementById('chartneckheight').onpointermove = document.getElementById('chartneckheight').ontouchmove =
document.getElementById('chartneckheight').onchange = (e: Event) => {
neckHeight(+(document.getElementById('chartneckheight') as HTMLInputElement).value);
};
};

3
src/chart/grouped-column.html
Просмотреть файл

@ -3,7 +3,7 @@
</div>
<div id="action-description">
<p>
This sample visualizes the Olympic medal count using grouped column series. Data labels are used to display the values of data points.
This sample visualizes the Olympics medal count using a grouped column series. Data labels are used to display the values of data points.
</p>
</div>
<div id="description">
@ -15,6 +15,7 @@
<p>
<code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject

25
src/chart/grouped-column.ts
Просмотреть файл

@ -11,49 +11,54 @@ import { Browser } from '@syncfusion/ej2-base';
let chart: Chart = new Chart({
//Initializing Primary X and Y Axis
primaryXAxis: {
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
valueType: 'Category',
interval: 1,
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
},
chartArea: { border: { width: 0 } },
primaryYAxis:
{
majorGridLines: { width: 0 }, majorTickLines: { width: 0 },
lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
majorTickLines: { width: 0 },
lineStyle: { width: 0 },
title: 'Medal Count',
},
//Initializing Chart Series
series: [
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'USA Total', groupName: 'USA', columnWidth: 0.7,
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'USA Total Medals', groupName: 'USA', columnWidth: 0.7,
dataSource: [{ x: '2012', y: 104 }, { x: '2016', y: 121 }, { x: '2020', y: 113 }], columnSpacing: 0.1,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'USA Gold', groupName: 'USA', columnWidth: 0.5,
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'USA Gold Medals', groupName: 'USA', columnWidth: 0.5,
dataSource: [{ x: '2012', y: 46 }, { x: '2016', y: 46 }, { x: '2020', y: 39 }], columnSpacing: 0.1,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'UK Total', groupName: 'UK', columnWidth: 0.7,
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'UK Total Medals', groupName: 'UK', columnWidth: 0.7,
dataSource: [{ x: '2012', y: 65 }, { x: '2016', y: 67 },{ x: '2020', y: 65 }], columnSpacing: 0.1,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'UK Gold', groupName: 'UK', columnWidth: 0.5,
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'UK Gold Medals', groupName: 'UK', columnWidth: 0.5,
dataSource: [{ x: '2012', y: 29 }, { x: '2016', y: 27 },{ x: '2020', y: 22 }], columnSpacing: 0.1,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'China Total', groupName: 'China', columnWidth: 0.7,
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'China Total Medals', groupName: 'China', columnWidth: 0.7,
dataSource: [{ x: '2012', y: 91 }, { x: '2016', y: 70 },{ x: '2020', y: 88 }], columnSpacing: 0.1,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'China Gold', groupName: 'China', columnWidth: 0.5,
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'China Gold Medals', groupName: 'China', columnWidth: 0.5,
dataSource: [{ x: '2012', y: 38 }, { x: '2016', y: 26 },{ x: '2020', y: 38 }], columnSpacing: 0.1,
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
},
],
//Initializing Chart title
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
title: 'Olympics Medal Tally', tooltip: { enable: true },
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];

12
src/chart/grouping.html
Просмотреть файл

@ -41,11 +41,15 @@
</div>
<div id="action-description">
<p>
This sample illustrates the grouping functionality in pie series. The grouping value can be changed by using <code>Group To</code> property.
This sample shows the gold medal count scored by each country at the Rio Olympic Games, along with the pie series grouping functionality.
</p>
</div>
<div id="description">
<p> In this example, you can see how to <code>group</code> points in pie chart.</p>
<p> Points having value below the <code>'groupTo'</code> value are grouped and showed as separate point. You can customise the apearance of the point using <code>'pointRender'</code> event.</p>
<p> DataLabel is used to represent individual data and its value.</p>
<p> In this example, you can see how to group points based on count and values. The slice can be grouped based on the number of points by specifying the <code>GroupMode</code> to Point. For example, if the <code>GroupTo</code> property is set to 10, the chart will display the first 10 points and the remaining entries from the collection will be grouped as a single point. The slice can also be grouped based on values by specifying the <code>GroupMode</code> to Value. For example, if the <code>GroupTo</code> is set to 10, the first 10 points with a lower value will be grouped together and shown as a single point while the others as a slice.</p>
<p>A tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.</p>
<br>
<p>
More information on the grouping in pie series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/accumulation-chart/grouping/">documentation section</a>.
</p>
</div>

28
src/chart/grouping.ts
Просмотреть файл

@ -1,11 +1,12 @@
import { loadCultureFiles } from '../common/culture-loader';
import {
AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip,
AccumulationChart, AccumulationLegend, PieSeries,
IAccTextRenderEventArgs, AccumulationTheme
} from '@syncfusion/ej2-charts';
import { IAccPointRenderEventArgs, IAccLoadedEventArgs, AccumulationDataLabel, GroupModes } from '@syncfusion/ej2-charts';
import { IAccPointRenderEventArgs, IAccLoadedEventArgs,AccumulationTooltip, AccumulationDataLabel, GroupModes } from '@syncfusion/ej2-charts';
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Browser } from '@syncfusion/ej2/base';
/**
* Sample for grouping in Pie chart
@ -17,32 +18,32 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
series: [
{
dataSource: [
{ 'x': 'China', y: 26, text: 'China: 26' },
{ 'x': 'Australia', y: 26, text: 'Australia: 26' },
{ 'x': 'Russia', y: 19, text: 'Russia: 19' },
{ 'x': 'Germany', y: 17, text: 'Germany: 17' },
{ 'x': 'Japan', y: 12, text: 'Japan: 12' },
{ 'x': 'France', y: 10, text: 'France: 10' },
{ 'x': 'China', y: 10, text: 'China: 10' },
{ 'x': 'South Korea', y: 9, text: 'South Korea: 9' },
{ 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },
{ 'x': 'Italy', y: 8, text: 'Italy: 8' },
{ 'x': 'Australia', y: 8, text: 'Australia: 8' },
{ 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },
{ 'x': 'France', y: 8, text: 'France: 8' },
{ 'x': 'Spain', y: 7, text: 'Spain: 7' },
{ 'x': 'Hungary', y: 8, text: 'Hungary: 8' },
{ 'x': 'Brazil', y: 7, text: 'Brazil: 7' },
{ 'x': 'Spain', y: 7, text: 'Spain: 7' },
{ 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },
{ 'x': 'Kenya', y: 6, text: 'Kenya: 6' },
],
animation: { enable: true }, name: 'RIO',
animation: { enable: true },
explode: true,
dataLabel: {
visible: true,
position: 'Outside',
connectorStyle: { type: 'Line', length: '5%' },
connectorStyle: { type: 'Curve', length: '20px' },
font: {
size: '14px'
fontWeight: "600"
}
},
radius: '70%',
radius:Browser.isDevice ? '40%' : '70%' ,
xName: 'x',
yName: 'y',
groupTo: '9',
@ -65,9 +66,10 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
args.text = args.point.x + ' ' + args.point.y;
},
//Initializing tooltip
tooltip: { enable: false },
tooltip: {enable: true ,format:"<b>${point.x}</b><br> Gold Medals: <b>${point.y}</b>" , header:""},
enableBorderOnMouseMove:false,
//Initializing title
title: 'RIO Olympics Gold',
title: 'Rio Olympic Gold Medals',
load: (args: IAccLoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

6
src/chart/hilo-open-close.html
Просмотреть файл

@ -11,14 +11,14 @@
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the Hilo Open Close type Series. You can use <code>border</code>,
In this example, you can see how to render and configure the Hilo Open Close type Series. Hilo Open Close chart are used to represent the price movements in stock. You can use <code>border</code>,
<code>fill</code> properties to customize the area.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p style="font-weight: 500">Injecting Module</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Hilo Open Close series, we need to Inject
<code>HiloOpenCloseSeries</code> module using <code>chart.Inject(HiloOpenCloseSeries)</code> method.

2
src/chart/hilo-open-close.ts
Просмотреть файл

@ -52,7 +52,7 @@ import { Browser, Ajax } from '@syncfusion/ej2-base';
crosshair: {
enable: true, lineType: 'Vertical', line: { width: 0 }
},
legendSettings: { visible: false }, width: Browser.isDevice ? '100%' : '80%',
legendSettings: { visible: false }, width: Browser.isDevice ? '100%' : '75%',
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
if (args.axis.title === 'Price') {
args.text = '$' + args.text;

6
src/chart/hilo.html
Просмотреть файл

@ -9,14 +9,14 @@
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the Hilo type series. You can use <code>border</code>,
In this example, you can see how to render and configure the Hilo type series. Hilo type chart is used to represent the price movements in stock. You can use <code>border</code>,
<code>fill</code> properties to customize the area.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<p style="font-weight: 500">Injecting Module</p>
<br>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use Hilo series, we need to Inject
<code>HiloSeries</code> module using <code>chart.Inject(HiloSeries)</code> method.

2
src/chart/hilo.ts
Просмотреть файл

@ -67,7 +67,7 @@ import { Browser, Ajax } from '@syncfusion/ej2-base';
}
},
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

2
src/chart/histogram.html
Просмотреть файл

@ -19,7 +19,7 @@
To see the tooltip in action, hover the mouse over a point or tap a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules.
To use histogram series, you should inject the <code>HistogramSeries</code> module using the <code>Chart.Inject(HistogramSeries)</code> method.

4
src/chart/histogram.ts
Просмотреть файл

@ -29,7 +29,7 @@ import { Browser } from '@syncfusion/ej2-base';
//Initializing Primary X and Y Axis
primaryXAxis: {
majorGridLines: { width: 0 }, title: 'Score of Final Examination',
minimum: 0, maximum: 100
minimum: 0, maximum: 100, edgeLabelPlacement: 'Shift'
},
chartArea: { border: { width: 0 } },
legendSettings: { visible: false },
@ -48,7 +48,7 @@ import { Browser } from '@syncfusion/ej2-base';
}
],
//Initializing Chart title
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
title: 'Examination Result', tooltip: { enable: true },
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];

14
src/chart/indexed-axis.ts
Просмотреть файл

@ -3,6 +3,7 @@ import {
Chart, ColumnSeries, LineSeries, Category,
Legend, ILoadedEventArgs, ChartTheme, DataLabel
} from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2/base';
Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel);
/**
@ -15,14 +16,17 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel);
primaryXAxis: {
valueType: 'Category',
interval: 1,
edgeLabelPlacement: 'Shift',
isIndexed: true
isIndexed: true,
labelRotation: Browser.isDevice ? -45 : 0,
labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45',
majorTickLines: {width : 0},
minorTickLines: {width: 0}
},
//Initializing Primary Y Axis
primaryYAxis:
{
title: 'GDP Growth Rate',
labelFormat: '{value}%'
},
chartArea: {
@ -41,7 +45,7 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel);
{ x: 'Cambodia', y: 7.0 },
{ x: 'China', y: 6.9 }
],
xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10, dataLabel: { visible: true, position: 'Top'}},
xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10, dataLabel: { visible: true, position: 'Top', font: { size : Browser.isDevice ? '8px' : '11px'}}},
yName: 'y', name: '2015',
},
{
@ -53,7 +57,7 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel);
{ x: 'Canada', y: 1.4 },
{ x: 'Germany', y: 1.8 }
],
xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10, dataLabel: { visible: true, position: 'Top'}},
xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10, dataLabel: { visible: true, position: 'Top', font: { size : Browser.isDevice ? '8px' : '11px'}}},
yName: 'y', name: '2016',
},
],

1
src/chart/inversed.html
Просмотреть файл

@ -16,6 +16,7 @@
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p>
More information on inversed axis can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/">documentation section</a>.

6
src/chart/inversed.ts
Просмотреть файл

@ -34,7 +34,9 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
valueType: 'Category',
opposedPosition: true,
isInversed: true,
majorGridLines: { width: 0 }
majorGridLines: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
},
//Initializing Primary Y Axis
@ -78,7 +80,7 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
legendSettings: { visible: false },
//Initializing Chart Title
title: 'Exchange Rate (INR per USD)',
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

7
src/chart/keyboard.ts
Просмотреть файл

@ -92,9 +92,8 @@ import { Browser } from '@syncfusion/ej2-base';
labelStyle: {
size: "0px"
},
majorTickLines: {
width: 0
}
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
primaryYAxis: {
title: "Sales in Percentage",
@ -137,7 +136,7 @@ import { Browser } from '@syncfusion/ej2-base';
enableSideBySidePlacement: false,
selectionMode: "Point",
selectionPattern: "DiagonalForward",
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
zoomSettings: {
enableSelectionZooming: true
},

2
src/chart/lazy-loading.html
Просмотреть файл

@ -54,7 +54,7 @@
ScrollBar is enabled in the sample and ScrollBar module injected to the chart.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use lazy laoding need to
inject <code>ScrollBar</code> and <code>Zoom</code> module.

12
src/chart/line-multi-color.html
Просмотреть файл

@ -3,8 +3,7 @@
</div>
<div id="action-description">
<p>
This sample visualizes the particulate levels in rainfall with multi colored line series in the chart.
Data points are enhanced with individual color and tooltip.
This sample shows the particulate levels in rainfall with multi-colored line series in the chart. Data points are enhanced with individual color and tooltips.
</p>
</div>
<div id="description">
@ -12,16 +11,17 @@
In this example, you can see how to render and configure each point in line type series.
Multi colored line charts are used to represent time-dependent data to show the trends at equal intervals with their individual colors by using <code>pointColorMapping</code>.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use multi colored line series, we need to inject
<code>MultiColoredLineSeries</code> module using
<code>Chart.Inject(MultiColoredLineSeries)</code> method.
</p>
<p>
More information on the line series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#line-chart">documentation section</a>.
</p>
</div>
<style>
#control-container {

18
src/chart/line-multi-color.ts
Просмотреть файл

@ -23,23 +23,13 @@ Chart.Inject(DateTime, Tooltip, MultiColoredLineSeries);
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'DateTime',
labelFormat: 'y',
intervalType: 'Years',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
valueType: 'DateTime',labelFormat: 'y',intervalType: 'Years',edgeLabelPlacement: 'Shift',majorGridLines: { width: 0 } ,
},
//Initializing Primary Y Axis
primaryYAxis:
{
rangePadding: 'None',
minimum: 4,
maximum: 10,
title: 'Particulate Matter(PM)',
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
rangePadding: 'None',minimum: 4,maximum: 10,title: 'Particulate Matter(PM)',lineStyle: { width: 0 },majorTickLines: { width: 0 },minorTickLines: { width: 0 }
},
chartArea: {
border: {
@ -61,9 +51,9 @@ Chart.Inject(DateTime, Tooltip, MultiColoredLineSeries);
title: 'Particulate Levels in Rainfall',
//Initializing User Interaction Tooltip
tooltip: {
enable: true, shared: true
enable: true, shared: true, enableAnimation: false, header:'<b>Rainfall</b>', format: '${point.x} : <b>${point.y}'
},
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

15
src/chart/line-segments.html
Просмотреть файл

@ -33,25 +33,24 @@
</div>
<div id="action-description">
<p>
This sample visualizes the annual mean rainfall data with multi colored line series in the chart.
Data points are enhanced with segments and tooltip.
This sample visualizes the annual mean rainfall in Australia with multi-colored line series in the chart. Data points are enhanced with segments and tooltips.
</p>
</div>
<div id="description">
<p>
In this example, you can see how to render and configure the points in a particular range by using <code>MultiColoredLine</code> series type.
Points under the range can be configured with <code>color</code>, <code>width</code>, and <code>dashArray</code>.
</p>
<p>
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap a point in touch enabled devices.
In this example, you can see how to render and configure the points in a particular range by using MultiColoredLine series. Points under the range can be configured with ,<code>color</code> and <code>dashArray</code> properties in the ChartSegment.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>MultiColoredLineSeries</code> module using
<code>Chart.Inject(MultiColoredLineSeries)</code> method.
</p>
<p>
More information on the line series can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-types/#line-chart">documentation section</a>.
</p>
</div>
<style>
#control-container {

39
src/chart/line-segments.ts
Просмотреть файл

@ -7,6 +7,7 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredLineSeries);
/**
* Sample for Line series
*/
(window as any).default = (): void => {
loadCultureFiles();
let dataValues: Object[] = [];
@ -24,24 +25,14 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredLineSeries);
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'DateTime',
labelFormat: 'y',
intervalType: 'Years',
valueType: 'DateTime', minimum : new Date(1910, 0, 1), maximum : new Date(2010, 0, 1), majorGridLines: {width : 0},
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
},
//Initializing Primary Y Axis
primaryYAxis:
{
labelFormat: '{value}mm',
rangePadding: 'None',
minimum: 200,
maximum: 800,
interval: 100,
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
labelFormat: '{value}mm', rangePadding: 'None', minimum: 200, maximum: 800, interval: 100, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }
},
chartArea: {
border: {
@ -50,10 +41,22 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredLineSeries);
},
annotations: [
{
content: '#templateWrap',
content: "<div style='color:green; font-weight:bold; font-size:14px'>Medium</div>",
region: 'Series',
x: '90%',
y: '12%'
x: Browser.isDevice ? '21%' : '19%',
y: Browser.isDevice ? '42%' : '47%'
},
{
content: "<div style='color:blue; font-weight:bold;font-size:14px'>High</div>",
region: 'Series',
x: Browser.isDevice ? '68%' : '69%',
y: '10%'
},
{
content: "<div style='color:red; font-weight:bold; font-size:14px'>Low</div>",
region: 'Series',
x: '95%',
y: '84%'
}
],
legendSettings: { visible: false },
@ -76,12 +79,12 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredLineSeries);
],
//Initializing Chart title
title: 'Annual Mean Rainfall for Australia',
title: 'Annual Mean Rainfall in Australia',
//Initializing User Interaction Tooltip
tooltip: {
enable: true, shared: true
enable: true, shared: true, enableAnimation: false,header:'<b>Rainfall</b>', format: '${point.x} : <b>${point.y}'
},
width: Browser.isDevice ? '100%' : '60%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

2
src/chart/line.html
Просмотреть файл

@ -16,7 +16,7 @@
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
</p>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p style="font-weight: 500"><b>Injecting Module</b></p>
<p>
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
<code>LineSeries</code> module using <code>Chart.Inject(LineSeries)</code> method.

92
src/chart/line.ts
Просмотреть файл

@ -1,7 +1,7 @@
import { loadCultureFiles } from '../common/culture-loader';
import { Chart, LineSeries, DateTime, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
import { Chart, LineSeries, DateTime, Legend, Tooltip, ILoadedEventArgs, Highlight, ChartTheme } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';
Chart.Inject(LineSeries, DateTime, Legend, Tooltip);
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Highlight);
/**
* Sample for Line series
@ -12,21 +12,20 @@ Chart.Inject(LineSeries, DateTime, Legend, Tooltip);
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'DateTime',
labelFormat: 'y',
intervalType: 'Years',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 }
valueType: 'DateTime', labelFormat: 'y',
majorGridLines: { width: 0 },
edgeLabelPlacement: 'Shift'
},
//Initializing Primary Y Axis
primaryYAxis:
{
labelFormat: '{value}%',
labelFormat: '{value}',
title: 'Million Metric Tons',
rangePadding: 'None',
minimum: 0,
maximum: 100,
interval: 20,
maximum: 20,
interval: 4,
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
@ -41,41 +40,82 @@ Chart.Inject(LineSeries, DateTime, Legend, Tooltip);
{
type: 'Line',
dataSource: [
{ x: new Date(2005, 0, 1), y: 21 }, { x: new Date(2006, 0, 1), y: 24 },
{ x: new Date(2007, 0, 1), y: 36 }, { x: new Date(2008, 0, 1), y: 38 },
{ x: new Date(2009, 0, 1), y: 54 }, { x: new Date(2010, 0, 1), y: 57 },
{ x: new Date(2011, 0, 1), y: 70 }
{ x: new Date(2012, 6, 11), y: 13.5 }, { x: new Date(2013, 6, 11), y: 12.4 }, { x: new Date(2014, 6, 11), y: 12.7 }, { x: new Date(2015, 6, 11), y: 12.5 }, { x: new Date(2016, 6, 11), y: 12.7 }, { x: new Date(2017, 6, 11), y: 13.7 }, { x: new Date(2018, 6, 11), y: 13.4 }, { x: new Date(2019, 6, 11), y: 12.9 }, { x: new Date(2020, 6, 11), y: 11.0 }
],
xName: 'x', width: 2, marker: {
visible: true,
width: 10,
height: 10
width: 7,
height: 7,
shape: 'Circle',
isFilled: true
},
yName: 'y', name: 'Germany',
yName: 'y', name: 'Vietnam',
},
{
type: 'Line',
dataSource: [
{ x: new Date(2005, 0, 1), y: 28 }, { x: new Date(2006, 0, 1), y: 44 },
{ x: new Date(2007, 0, 1), y: 48 }, { x: new Date(2008, 0, 1), y: 50 },
{ x: new Date(2009, 0, 1), y: 66 }, { x: new Date(2010, 0, 1), y: 78 }, { x: new Date(2011, 0, 1), y: 84 }
{ x: new Date(2012, 6, 11), y: 5.3 },{ x: new Date(2013, 6, 11), y: 5.6 },{ x: new Date(2014, 6, 11), y: 5.9 },{ x: new Date(2015, 6, 11), y: 5.7 },{ x: new Date(2016, 6, 11), y: 7.8 },{ x: new Date(2017, 6, 11), y: 10.3 }, { x: new Date(2018, 6, 11), y: 15.5 }, { x: new Date(2019, 6, 11), y: 17.5 }, { x: new Date(2020, 6, 11), y: 19.5 }
],
xName: 'x', width: 2, marker: {
visible: true,
width: 10,
height: 10
width: 6,
height: 6,
shape: 'Triangle',
isFilled: true
},
yName: 'y', name: 'England',
yName: 'y', name: 'Canada',
},
{
type: 'Line',
dataSource: [
{ x: new Date(2012, 6, 11), y: 5.6 }, { x: new Date(2013, 6, 11), y: 4.7 }, { x: new Date(2014, 6, 11), y: 4.3 }, { x: new Date(2015, 6, 11), y: 3.8 }, { x: new Date(2016, 6, 11), y: 2.8 }, { x: new Date(2017, 6, 11), y: 2.8 }, { x: new Date(2018, 6, 11), y: 4.1 }, { x: new Date(2019, 6, 11), y: 6.8 }, { x: new Date(2020, 6, 11), y: 7.1 },
],
xName: 'x', width: 2, marker: {
visible: true,
width: 7,
height: 7,
shape: 'Diamond',
isFilled: true
},
yName: 'y', name: 'Malaysia',
},
{
type: 'Line',
dataSource: [
{ x: new Date(2012, 6, 11), y: 6.6 }, { x: new Date(2013, 6, 11), y: 6.8 }, { x: new Date(2014, 6, 11), y: 6.5 }, { x: new Date(2015, 6, 11), y: 5.5 }, { x: new Date(2016, 6, 11), y: 5.0 }, { x: new Date(2017, 6, 11), y: 6.8 }, { x: new Date(2018, 6, 11), y: 7.8 }, { x: new Date(2019, 6, 11), y: 7.3 }, { x: new Date(2020, 6, 11), y: 8.2 },
],
xName: 'x', width: 2, marker: {
visible: true,
width: 5,
height: 5,
shape: 'Rectangle',
isFilled: true
},
yName: 'y', name: 'Egypt',
},
{
type: 'Line',
dataSource: [
{ x: new Date(2012, 6, 11), y: 2.3 }, { x: new Date(2013, 6, 11), y: 2.6 }, { x: new Date(2014, 6, 11), y: 4.4 }, { x: new Date(2015, 6, 11), y: 4.9 }, { x: new Date(2016, 6, 11), y: 4.8 }, { x: new Date(2017, 6, 11), y: 5.3 }, { x: new Date(2018, 6, 11), y: 6.2 }, { x: new Date(2019, 6, 11), y: 7.8 }, { x: new Date(2020, 6, 11), y: 9.3 }
],
xName: 'x', width: 2, marker: {
visible: true,
width: 7,
height: 7,
shape: 'Pentagon',
isFilled: true
},
yName: 'y', name: 'Indonesia',
}
],
//Initializing Chart title
title: 'Inflation - Consumer Price',
title: 'Crude Steel Production Annual Growth',
//Initializing User Interaction Tooltip
legendSettings: { enableHighlight: true },
tooltip: {
enable: true
},
width : Browser.isDevice ? '100%' : '60%',
width : Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

2
src/chart/local-data.ts
Просмотреть файл

@ -90,7 +90,7 @@ for (i = 1; i < 500; i++) {
tooltip: {
enable: true, shared: true
},
width: Browser.isDevice ? '100%' : '80%',
width: Browser.isDevice ? '100%' : '75%',
load: (args: ILoadedEventArgs) => {
let selectedTheme: string = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше