v21.1.35 is released
This commit is contained in:
pipeline
Родитель
582fc5f8b5
Коммит
fc9020b6df
|
|
@ -176,6 +176,7 @@
|
|||
"workflow",
|
||||
"form-validator",
|
||||
"signature",
|
||||
"multiline-textbox"
|
||||
"multiline-textbox",
|
||||
null
|
||||
]
|
||||
}
|
||||
|
|
@ -432,7 +432,7 @@
|
|||
<div class="content-area">
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
||||
<div class="cnt-text">65+ high-performance and responsive UI components</div>
|
||||
<div class="cnt-text">80+ high-performance and responsive UI components</div>
|
||||
</div>
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-samples",
|
||||
"version": "20.4.38",
|
||||
"version": "21.1.35",
|
||||
"description": "Samples for Syncfusion Essential JS 2",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
@ -50,6 +50,7 @@
|
|||
"@types/marked": "^0.3.0",
|
||||
"@types/codemirror": "0.0.56",
|
||||
"@types/es6-promise": "0.0.28",
|
||||
"@types/node": "12.12.25",
|
||||
"hasher": "^1.2.0",
|
||||
"moment-timezone": "0.5.13",
|
||||
"tributejs": "^3.7.3"
|
||||
|
|
|
|||
|
|
@ -509,7 +509,7 @@
|
|||
}
|
||||
},
|
||||
"gantt": {
|
||||
"ControlName": "Gantt",
|
||||
"ControlName": "Gantt Chart",
|
||||
"Samples": {
|
||||
"default": "Default Functionalities",
|
||||
"local-data": "Local Data",
|
||||
|
|
@ -903,6 +903,14 @@
|
|||
"navigation": "Keyboard Navigations"
|
||||
}
|
||||
},
|
||||
"ribbon": {
|
||||
"ControlName": "Ribbon",
|
||||
"Samples": {
|
||||
"default":"Default Functionalities",
|
||||
"simplified": "Simplified Mode",
|
||||
"resize": "Ribbon Resizing"
|
||||
}
|
||||
},
|
||||
"rich-text-editor": {
|
||||
"ControlName": "Rich Text Editor",
|
||||
"Samples": {
|
||||
|
|
@ -1265,4 +1273,4 @@
|
|||
"custom-drop-area": "Custom Drop Area"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,4 +16,14 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
});
|
||||
// tslint:enable:max-line-length
|
||||
acrdnObj.appendTo('#Accordion_keyboard_interaction'); //Render initialized Accordion component
|
||||
|
||||
//Focus the Accordion header (alt+j) key combination
|
||||
document.body.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
let accordionElement: HTMLElement = document.querySelector(
|
||||
'#Accordion_keyboard_interaction .e-acrdn-header'
|
||||
);
|
||||
if (e.altKey && e.keyCode === 74 && accordionElement) {
|
||||
accordionElement.focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -137,7 +137,7 @@ let circulargauge: CircularGauge = new CircularGauge({
|
|||
color: '#7a7f82',
|
||||
startWidth: 1,
|
||||
endWidth: 1,
|
||||
radius: '90%',
|
||||
radius: '89%',
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
|
|
@ -153,7 +153,7 @@ let circulargauge: CircularGauge = new CircularGauge({
|
|||
color: '#7a7f82',
|
||||
startWidth: 1,
|
||||
endWidth: 1,
|
||||
radius: '76%',
|
||||
radius: '75%',
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
|
|
@ -169,7 +169,7 @@ let circulargauge: CircularGauge = new CircularGauge({
|
|||
color: '#7a7f82',
|
||||
startWidth: 1,
|
||||
endWidth: 1,
|
||||
radius: '63%',
|
||||
radius: '61%',
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
|
|
@ -185,7 +185,7 @@ let circulargauge: CircularGauge = new CircularGauge({
|
|||
color: '#7a7f82',
|
||||
startWidth: 1,
|
||||
endWidth: 1,
|
||||
radius: '49%',
|
||||
radius: '47%',
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
|
|
@ -201,7 +201,7 @@ let circulargauge: CircularGauge = new CircularGauge({
|
|||
color: '#7a7f82',
|
||||
startWidth: 1,
|
||||
endWidth: 1,
|
||||
radius: '35%',
|
||||
radius: '34%',
|
||||
},
|
||||
],
|
||||
pointers: [],
|
||||
|
|
|
|||
|
|
@ -2,34 +2,29 @@
|
|||
"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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import * as data from './dataSource.json';
|
|||
let atcObj1: AutoComplete = new AutoComplete({
|
||||
// bind the DataManager instance to dataSource property
|
||||
dataSource: new DataManager({
|
||||
url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',
|
||||
url: 'https://ej2services.syncfusion.com/js/development/api/Employees',
|
||||
adaptor: new WebApiAdaptor,
|
||||
crossDomain: true
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -40,5 +40,9 @@
|
|||
width: 50%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.e-dropdownbase .e-list-item .e-highlight {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -3,16 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a stock chart with candle series and an accumulation distribution indicator. Trackball shows the information about the stock and signal value of a day.
|
||||
This sample illustrates a chart with candle series and an accumulation distribution indicator. The trackball shows information about the stock rates and signal values each day.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the Accumulation Distribution 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 an accumulation distribution indicator. This uses volume and price to identify whether stock is accumulated or distributed. It also identifies divergences between the stock price and volume flow.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Accumulation Distribution Indicator 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/technical-indicators/#accumulation-distribution">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import {
|
|||
Crosshair, LineSeries, AccumulationDistributionIndicator, IAxisLabelRenderEventArgs,
|
||||
StripLine, ChartTheme
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { chartValue } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, StripLine, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
AccumulationDistributionIndicator
|
||||
|
|
@ -16,20 +17,10 @@ Chart.Inject(
|
|||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
let chart: Chart = new Chart({
|
||||
// Initializing the axes
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
valueType: 'DateTime', intervalType: "Months",
|
||||
majorGridLines: { width: 0 },
|
||||
zoomFactor: 0.2, zoomPosition: 0.6,
|
||||
crosshairTooltip: { enable: true }
|
||||
|
|
@ -39,13 +30,14 @@ Chart.Inject(
|
|||
labelFormat: '${value}',
|
||||
minimum: 50, maximum: 170,
|
||||
plotOffset: 25,
|
||||
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
|
||||
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 }
|
||||
},
|
||||
axes: [{
|
||||
name: 'secondary',
|
||||
opposedPosition: true, rowIndex: 0,
|
||||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,
|
||||
interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution',
|
||||
interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution (in Billion)',
|
||||
stripLines: [
|
||||
{
|
||||
start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,
|
||||
|
|
@ -62,8 +54,8 @@ Chart.Inject(
|
|||
],
|
||||
// Initializing the series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
dataSource: chartValue, width: 2,
|
||||
xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: true }
|
||||
}],
|
||||
|
|
@ -71,7 +63,7 @@ Chart.Inject(
|
|||
// Initializing the indicators
|
||||
indicators: [{
|
||||
type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
|
||||
period: 3, animation: { enable: true }
|
||||
period: 3
|
||||
}],
|
||||
/**
|
||||
* Initializing the zooming, crosshair and tooltip
|
||||
|
|
@ -93,11 +85,11 @@ Chart.Inject(
|
|||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
if (args.axis.name === 'secondary') {
|
||||
let value: number = Number(args.text) / 1000000000;
|
||||
args.text = String(value) + 'bn';
|
||||
args.text = String(value) + 'B';
|
||||
}
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
title: 'AAPL 2012-2017',
|
||||
title: 'AAPL Stock Price 2012 - 2017',
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
@ -112,4 +104,3 @@ Chart.Inject(
|
|||
chart.appendTo('#container');
|
||||
};
|
||||
|
||||
};
|
||||
|
|
@ -8,9 +8,14 @@
|
|||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render an area series with negative values. Similar to line type series, but the area gets closed and filled with series color. You can use <code><a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#border">border</a></code> and <code><a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#fill">fill</a></code> properties to customize the area. Also, the legend is enabled with the shape of the series type.
|
||||
In this example, you can see how to render an area series with negative values. Similar to line type series, but the area gets closed and filled with series color. You can use <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/border/">border</a> and <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/seriesModel/#fill">fill</a> properties to customize the area. Also, the legend is enabled with the shape of the series type.
|
||||
</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 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="https://ej2.syncfusion.com/documentation/chart/chart-types/#area-charts">documentation section</a>.
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@
|
|||
</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. Points within the range can be configured with <code>color</code> property in ChartSegment.
|
||||
In this example, you can see how to render and configure points in a particular range by using <code>MultiColoredArea</code> series. Points within the range can be configured with the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/chartSegment/#color">color</a> property in chart segment.
|
||||
</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.
|
||||
The <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/tooltip/">tooltip</a> 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"><b>Injecting Module</b></p>
|
||||
|
|
|
|||
|
|
@ -57,13 +57,13 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
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>',
|
||||
content: Browser.isDevice ? '<div style="font-weight: bold; color: white; font-size: 7px;">DOWNLOAD</div>' : '<div style="font-weight: bold; color: white; font-size: 11px;">DOWNLOAD</div>',
|
||||
region: 'Series',
|
||||
x: '85%',
|
||||
y: '93%'
|
||||
y: '92%'
|
||||
},
|
||||
{
|
||||
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>',
|
||||
content: Browser.isDevice ? '<div style="font-weight: bold; color: white;font-size: 7px;"></div>' : '<div style="font-weight: bold; color: white;font-size: 11px;">STREAMING</div>',
|
||||
region: 'Series',
|
||||
x: '93%',
|
||||
y: '96%'
|
||||
|
|
|
|||
|
|
@ -3,16 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a stock chart with candle series and an average true range indicator.
|
||||
Trackball shows the information about the stock and signal value of a day.
|
||||
This sample illustrates a chart with candle series and an average true range indicator. The trackball shows information about the stock rates and signal values of a day.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the Average True Range Indicator.
|
||||
In this example, you can see how to render and configure an average true range indicator. This indicator measures the volatility of the stock by comparing the current value with the previous 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>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"><b>Injecting Module</b></p>
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Average True Range Indicator 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/technical-indicators/#average-true-range-atr">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ import {
|
|||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
|
||||
Crosshair, LineSeries, AtrIndicator, StripLine, ChartTheme
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { chartValue } from './financial-data';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, StripLine, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
AtrIndicator
|
||||
|
|
@ -15,16 +16,7 @@ Chart.Inject(
|
|||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
|
||||
let chart: Chart = new Chart({
|
||||
// Initiazlizing the axes
|
||||
primaryXAxis: {
|
||||
|
|
@ -39,13 +31,13 @@ Chart.Inject(
|
|||
minimum: 50, maximum: 170,
|
||||
interval: 30, rowIndex: 1,
|
||||
plotOffset: 25,
|
||||
majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }
|
||||
majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }, majorTickLines: { width: 0 }
|
||||
},
|
||||
axes: [{
|
||||
name: 'secondary',
|
||||
opposedPosition: true, rowIndex: 0,
|
||||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },
|
||||
maximum: 14, minimum: 0, interval: 7, title: 'ATR',
|
||||
title: 'ATR',
|
||||
stripLines: [
|
||||
{
|
||||
start: 0, end: 14, text: '', color: '#6063ff', visible: true,
|
||||
|
|
@ -62,15 +54,15 @@ Chart.Inject(
|
|||
],
|
||||
// Initializing the chart series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
dataSource: chartValue, width: 2,
|
||||
xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: true }
|
||||
type: 'Candle'
|
||||
}],
|
||||
// Initializing the indicators
|
||||
indicators: [{
|
||||
type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
|
||||
period: 3, animation: { enable: true }
|
||||
period: 3
|
||||
}],
|
||||
/**
|
||||
* User interaction initialized zooming, tooltip and crosshair
|
||||
|
|
@ -88,7 +80,7 @@ Chart.Inject(
|
|||
},
|
||||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
chartArea: { border: { width: 0 } },
|
||||
title: 'AAPL 2012-2017',
|
||||
title: 'AAPL Stock Price 2012-2017',
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
@ -102,4 +94,4 @@ Chart.Inject(
|
|||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -47,27 +47,28 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates an interpolation of data points between linear and cubic by using spline and line series.
|
||||
This sample illustrates the interpolation of data points between linear and cubic using the spline and line series.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample demonstrates the axis crossing behavior in chart.
|
||||
Axis can be positioned anywhere in the chart area by using the <code>crossesAt</code> property of axis. This property specifies where the horizontal axis should intersect or cross the vertical axis and vice-versa.
|
||||
This sample demonstrates the axis-crossing behavior in a chart. The axis can be positioned anywhere in the chart area using the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axisModel/#crossesat">crossesAt</a> property of the axis, which specifies where the horizontal axis should intersect the vertical axis and vice-versa.
|
||||
</p>
|
||||
<p>
|
||||
Default value of crossesAt property is null. So, you can use <code>placeNextToAxisLine</code> property to place the axis labels and ticks next to axis line.
|
||||
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.
|
||||
You can use the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axisModel/#placenexttoaxisline">placeNextToAxisLine</a> property to place the axis labels and ticks next to the axis line. If there are multiple axes, the cross-axis can be selected using the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axisModel/#crossesinaxis">crossesInAxis</a> property.
|
||||
</p>
|
||||
<p><code>Tooltip</code> 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 axis crossing 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/axis.customization/#axis-crossing">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
#axisElements:hover {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { NumericTextBox } from '@syncfusion/ej2-inputs';
|
||||
import { Chart, LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend);
|
||||
import { Chart, LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend, ILoadedEventArgs, ChartTheme, Highlight } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend, Highlight);
|
||||
|
||||
/**
|
||||
* Axes Crossing Sample
|
||||
|
|
@ -56,7 +56,7 @@ Chart.Inject(LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend);
|
|||
{ x: -6, y: 2 }, { x: -3, y: -4 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 },
|
||||
],
|
||||
fill: 'Red', name: 'Data Points', xName: 'x', width: 2,
|
||||
yName: 'y', marker: { visible: false, width: 12, height: 12 }
|
||||
yName: 'y', marker: { visible: false, width: 7, height: 7 }
|
||||
}
|
||||
],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
@ -66,6 +66,7 @@ Chart.Inject(LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend);
|
|||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
tooltip: { enable: true },
|
||||
legendSettings: { enableHighlight: true },
|
||||
title: 'Spline Interpolation',
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
|
|
@ -3,16 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a stock chart with candle series and a Bollinger band indicator.
|
||||
Trackball shows the information about the stock, signalline, upperline, and lowerline value of a day.
|
||||
This sample illustrates a chart with candle series and a Bollinger band indicator. The trackball shows information about the stock, signal line, upper line, and lower line values each day.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the BollingerBands type Indicator.
|
||||
In this example, you can see how to render and configure a Bollinger band indicator. This indicator shows the upper and lower limits of normal price movements based on the standard deviation of prices. The bands offer insights into price and volatility.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the BollingerIndicator 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/technical-indicators/#bollinger-band">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
|
||||
Crosshair, LineSeries, BollingerBands, ChartTheme, RangeAreaSeries
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartValue } from './financial-data';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, RangeAreaSeries,
|
||||
|
|
@ -14,21 +15,11 @@ Chart.Inject(
|
|||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
// tslint:disable
|
||||
let chart: Chart = new Chart({
|
||||
// Initializing the axes
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
valueType: 'DateTime',intervalType: "Months",
|
||||
majorGridLines: { width: 0 },
|
||||
zoomFactor: 0.2, zoomPosition: 0.6,
|
||||
crosshairTooltip: { enable: true }
|
||||
|
|
@ -39,18 +30,18 @@ Chart.Inject(
|
|||
}
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
title: 'Price (in Million)',
|
||||
labelFormat: '${value}M',
|
||||
minimum: 50, maximum: 170, interval: 30,
|
||||
majorGridLines: { width: 1 },
|
||||
majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
// Initializing the chart series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
dataSource: chartValue, width: 2,
|
||||
xName: 'period', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: false }
|
||||
type: 'Candle'
|
||||
}],
|
||||
// Initializing the indicators
|
||||
indicators: [{
|
||||
|
|
@ -72,7 +63,7 @@ Chart.Inject(
|
|||
enablePan: true
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
title: 'AAPL - 2012-2017',
|
||||
title: 'AAPL Stock Price 2012-2017',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
@ -83,4 +74,3 @@ Chart.Inject(
|
|||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,49 +1,18 @@
|
|||
<div>
|
||||
<div class="col-lg-9 control-section">
|
||||
<div id="container"></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>Mode:
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 50%;">
|
||||
<div>
|
||||
<select id="mode">
|
||||
<option value='Normal'>Normal</option>
|
||||
<option value='Exclusive'>Exclusive</option>
|
||||
<option value='Inclusive'>Inclusive</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 50%">
|
||||
<div>Mean: </div>
|
||||
</td>
|
||||
<td style="width: 50%;">
|
||||
<div>
|
||||
<input type="checkbox" id="mean" checked>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the employees’ age group in various departments of a country with box and whisker type series in the chart. Mode of box and whisker series can be changed by <code>Mode</code> in property panel. To display the <code>mean</code> value in a series, enable the Mean in the property panel.
|
||||
This <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/box-and-whisker-chart">Box and Whisker Chart</a> example visualizes the employee’s age group in various departments of a company with box and whisker chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the box and whisker 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 to render and configure a box and whisker chart or box plot. This chart is used to visualize a group of numerical data through their data quartiles. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. <code>Marker</code> and <code>DataLabel</code> are used to represent individual data and its values.
|
||||
</p>
|
||||
<p><code>Tooltip</code> 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"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
|
|
@ -52,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on this 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/other-types/#customization-of-box-and-whisker-series">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
ChartTheme, Chart, getSaturationColor, Category, ILoadedEventArgs,
|
||||
IPointRenderEventArgs, BoxAndWhiskerSeries, Tooltip, getElement, BoxPlotMode
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { 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(Category, BoxAndWhiskerSeries, Tooltip);
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
|
|
@ -27,28 +28,41 @@ import { Browser } from '@syncfusion/ej2/base';
|
|||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index % 10];
|
||||
args.fill = pointFabricColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'material-dark') {
|
||||
args.fill = pointMaterialDarkColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'material') {
|
||||
args.fill = materialColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'fluent') {
|
||||
args.fill = fluentColors[args.point.index % 10];
|
||||
args.fill = pointMaterialColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'bootstrap5-dark') {
|
||||
args.fill = pointBootstrap5DarkColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'bootstrap5') {
|
||||
args.fill = pointBootstrap5Colors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'bootstrap') {
|
||||
args.fill = pointBootstrapColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'bootstrap4') {
|
||||
args.fill = pointBootstrapColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'bootstrap-dark') {
|
||||
args.fill = pointBootstrapColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'highcontrast') {
|
||||
args.fill = 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 = pointFluentDarkColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'fluent') {
|
||||
args.fill = pointFluentColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'tailwind-dark') {
|
||||
args.fill = pointTailwindDarkColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'tailwind') {
|
||||
args.fill = pointTailwindColors[args.point.index % 10];
|
||||
}
|
||||
args.border.color = getSaturationColor(args.fill, -0.6);
|
||||
};
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1,
|
||||
valueType: 'Category',
|
||||
majorGridLines: { width: 0 },
|
||||
edgeLabelPlacement: 'Shift',
|
||||
labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45',
|
||||
labelRotation: Browser.isDevice ? -45 : 0,
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
|
|
@ -59,8 +73,9 @@ import { Browser } from '@syncfusion/ej2/base';
|
|||
{
|
||||
minimum: 10, maximum: 60,
|
||||
interval: 10, title: 'Age',
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 }
|
||||
majorGridLines: { width: 1 },
|
||||
majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
pointRender: labelRender,
|
||||
//Initializing Chart Series
|
||||
|
|
@ -70,28 +85,28 @@ import { Browser } 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: '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: 'HR', y: [28, 29, 30, 31, 32, 34, 35, 36] }
|
||||
{ x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] },
|
||||
{ x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] }
|
||||
],
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10
|
||||
},
|
||||
name: 'Department'
|
||||
width: 7,
|
||||
height: 7
|
||||
}, boxPlotMode: "Normal", showMean: true,
|
||||
}
|
||||
],
|
||||
// Initializing the tooltip
|
||||
tooltip: {
|
||||
enable: true
|
||||
}, //Initializing Chart title
|
||||
width: Browser.isDevice ? '100%' : '70%',
|
||||
title: 'Employee Age Group in Various Department',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
@ -104,22 +119,4 @@ import { Browser } from '@syncfusion/ej2/base';
|
|||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
||||
let mode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].boxPlotMode = <BoxPlotMode>mode.value;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
mode.appendTo('#mode');
|
||||
document.getElementById('mean').onchange = () => {
|
||||
let element: HTMLInputElement = <HTMLInputElement>getElement('mean');
|
||||
chart.series[0].showMean = element.checked;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.refresh();
|
||||
};
|
||||
};
|
||||
|
|
@ -3,12 +3,12 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This React bubble chart example visualizes the literacy rates and GDP growth rates of countries. A tooltip shows more information about the countries.
|
||||
This <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/bubble-chart">bubble chart</a> 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 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.
|
||||
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 <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/seriesModel/#size">Size</a> property. You can also use the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/seriesModel/#fill">Fill</a> property to customize the data appearance.
|
||||
</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.
|
||||
|
|
|
|||
|
|
@ -5,16 +5,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the AAPL historical data with default candle series in the chart. Tooltip and crosshair show the information about the data and period.
|
||||
This sample visualizes the AAPL stock price with a default candlestick series. The tooltip and crosshair show information about the stock price.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
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.
|
||||
In this example, you can see how to render and configure the candlestick series. This chart shows financial data and trends at equal intervals. It can often be combined with line and column charts to show the closing value of the stock and volume of the data.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -24,7 +23,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Candle 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/financial-types/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,12 @@ import {
|
|||
} from '@syncfusion/ej2-charts';
|
||||
import { IPointRenderEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { chartValue } from './financial-data';
|
||||
Chart.Inject(CandleSeries, StripLine, Category, Tooltip, DateTime, Zoom, ColumnSeries, Logarithmic, Crosshair);
|
||||
let pointColors: string[] = [];
|
||||
|
||||
let getLabelText: Function = (value: number): string => {
|
||||
return (((value) / 1000000000)).toFixed(1) + 'bn';
|
||||
return (((value) / 10000000)) + 'M';
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -17,57 +18,42 @@ let getLabelText: Function = (value: number): string => {
|
|||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
|
||||
let chart: Chart = new Chart({
|
||||
// Initialize the axes
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime', crosshairTooltip: { enable: true }, majorGridLines: { width: 0 },
|
||||
valueType: 'DateTime', crosshairTooltip: { enable: false }, majorGridLines: { width: 0 },
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Volume', valueType: 'Logarithmic', opposedPosition: true, majorGridLines: { width: 1 }, lineStyle: { width: 0 },
|
||||
title: 'Volume', opposedPosition: true, majorGridLines: { width: 1 }, lineStyle: { width: 0 },majorTickLines: { width: 0 },
|
||||
stripLines: [
|
||||
{
|
||||
end: 1300000000, startFromAxis: true, text: '', color: 'black', visible: true,
|
||||
opacity: 0.03, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
},
|
||||
axes: [{
|
||||
name: 'secondary', opposedPosition: true, rowIndex: 1, majorGridLines: { width: 1 },
|
||||
labelFormat: 'n0', title: 'Price', plotOffset: 30, lineStyle: { width: 0 }, rangePadding: 'None'
|
||||
labelFormat: 'n0', title: 'Price', plotOffset: 20, lineStyle: { width: 0 }, rangePadding: 'None', maximum: 150
|
||||
}],
|
||||
// Initialize the chart rows
|
||||
rows: [{ height: '30%' }, { height: '70%' }],
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{ type: 'Column', dataSource: chartData, animation: { enable: true }, xName: 'x', yName: 'volume', name: 'Volume' },
|
||||
{ type: 'Column', dataSource: chartValue, enableTooltip: false, xName: 'period', yName: 'volume', name: 'Volume' },
|
||||
{
|
||||
type: 'Candle', yAxisName: 'secondary', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
dataSource: chartData, animation: { enable: true }, volume: 'volume',
|
||||
xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc',
|
||||
dataSource: chartValue, volume: 'volume',
|
||||
xName: 'period', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc.(AAPL)',
|
||||
}
|
||||
], tooltip: { enable: true, shared: true },
|
||||
], tooltip: { enable: true, shared: true, header:'', format: '<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b> <br> Open : <b>${point.open}</b> <br> Close : <b>${point.close}</b> <br> Volume : <b>${point.volume}</b>' },
|
||||
sharedTooltipRender: (args: ISharedTooltipRenderEventArgs) => {
|
||||
if (!args.series[0].index) {
|
||||
args.text[0] = 'Volume : <b>' + getLabelText(args.text[0].split('<b>')[1].split('</b>')[0]) + '</b>';
|
||||
}
|
||||
},
|
||||
pointRender: (args: IPointRenderEventArgs) => {
|
||||
if (args.series.type === 'Candle') { pointColors.push(args.fill); } else {
|
||||
args.fill = pointColors[args.point.index];
|
||||
}
|
||||
},
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
if (args.axis.name === 'primaryYAxis') { args.text = getLabelText(+args.text); }
|
||||
if (args.axis.name === 'secondary') { args.text = '$' + args.text; }
|
||||
},
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
@ -78,8 +64,8 @@ let getLabelText: Function = (value: number): string => {
|
|||
},
|
||||
// custom code end
|
||||
width: Browser.isDevice ? '100%' : '75%', chartArea: { border: { width: 0 } },
|
||||
crosshair: { enable: true, lineType: 'Vertical' }
|
||||
crosshair: { enable: true, lineType: "None" }
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,16 +6,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the rendering of category axis in the chart with internet users of different countries.
|
||||
This sample shows a category axis in a chart with details about internet users across different countries.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Category axis is used to represent the categories in data. To render category axis, set <code>valueType</code> in axis to <code>Category</code>.
|
||||
Category label can placed between the ticks or on the ticks, based on <code>labelPlacement</code> property.
|
||||
You can use the category axis to represent string values instead of numbers in the chart. To use the category axis, set <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#valuetype">valueType</a> in axis to Category.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -25,7 +24,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Category axis can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/category-axis/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
valueType: 'Category',
|
||||
majorGridLines: { width: 0 },
|
||||
enableTrim: false, majorTickLines: {width : 0},
|
||||
minorTickLines: {width: 0}
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
|
|
@ -64,22 +63,22 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
{
|
||||
type: 'Bar', tooltipMappingName: 'country',
|
||||
dataSource: [
|
||||
{ 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'},
|
||||
{ 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" }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', marker: {
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
position: Browser.isDevice ? 'Outer': 'Top', font: {
|
||||
position: 'Top', font: {
|
||||
fontWeight: '600',
|
||||
color: Browser.isDevice ? '' : '#ffffff',
|
||||
size: '11px'
|
||||
color: '#ffffff',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -95,7 +94,7 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
},
|
||||
//Initializing Chart title
|
||||
title: Browser.isDevice ? 'Internet Users in Million – 2016' : 'Internet Users – 2016',
|
||||
tooltip: { enable: true, format: '${point.tooltip}' },
|
||||
tooltip: { enable: false, format: '${point.tooltip}' },
|
||||
legendSettings: {
|
||||
visible: false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,12 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates crosshair feature in chart. To see crosshair, hover or long press the chart.
|
||||
This sample depicts the crosshair behavior in the charts. To view the crosshair and its tooltip, hover over the chart or tap on it in touch-enabled devices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>This sample demonstrates the crosshair behavior in chart. Crosshair is used to inspect or focus on an individual data point.
|
||||
You can customize the axis tooltip using <code>crosshairTooltip</code> properties in axis.
|
||||
</p>
|
||||
<p>
|
||||
Hover the chart area to view crosshair and its tooltip. Touch and hold to enable crosshair in touch enabled devices.
|
||||
<p>The crosshair is used to inspect or focus on an individual data point using a vertical and a horizontal line. You can enable the crosshair using the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/crosshairSettings/#enable">enable</a> property in the <code>chartCrosshairSettings</code> class and customize its tooltip by using the <code>chartAxisCrosshairTooltip</code> in the axis.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
|
|
@ -22,7 +18,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Crosshair can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/crosshairSettingsModel/">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/cross-hair-and-track-ball/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates data editing feature in chart. Drag and drop the points to change the data values dynamically.
|
||||
This sample shows the behavior of the data editing in the chart. Drag and drop the points to change the data values dynamically.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p>In this example, you can see how to drag and drop the data points in the chart by setting <code>Enable</code> property in <code>ChartDataEditSettings</code> to true. Also, you can set data editing’s minimum and maximum range using the <code>MinY</code> and <code>MaxY</code> properties.</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>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
|
|
@ -18,6 +19,6 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Data Editing can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/dragSettingsModel/">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/data-editing/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -12,11 +12,10 @@ Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DateTime, Data
|
|||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category',
|
||||
labelFormat: 'y',
|
||||
labelPlacement: 'BetweenTicks',
|
||||
labelFormat: 'yyyy',
|
||||
intervalType: 'Years',
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 },
|
||||
edgeLabelPlacement: 'Shift'
|
||||
},
|
||||
//Initializing Primary Y Axis
|
||||
|
|
@ -24,13 +23,12 @@ Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DateTime, Data
|
|||
{
|
||||
rangePadding: 'None',
|
||||
minimum: 0,
|
||||
title : 'Sales',
|
||||
labelFormat: '{value}%',
|
||||
title : 'Production(Billion in kWh)',
|
||||
labelFormat: '{value}B',
|
||||
maximum: 100,
|
||||
interval: 20,
|
||||
lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
|
|
@ -43,38 +41,45 @@ Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DateTime, Data
|
|||
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 : 24 },
|
||||
{ x : 2007, y : 36 },
|
||||
{ x : 2008, y : 38 },
|
||||
{ x : 2009, y : 54 },
|
||||
{ x : 2010, y : 57 },
|
||||
{ x : 2011, y : 70 }
|
||||
],
|
||||
xName: 'x', width: 2, marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10
|
||||
width: 7,
|
||||
height: 7
|
||||
},
|
||||
yName: 'y', name: 'Product A'
|
||||
yName: 'y', name: 'Renewable'
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
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 : 28 },
|
||||
{ x : 2006, y : 44 },
|
||||
{ x : 2007, y : 48 },
|
||||
{ x : 2008, y : 50 },
|
||||
{ x : 2009, y : 66 },
|
||||
{ x : 2010, y : 78 },
|
||||
{ x : 2011, y : 84 },
|
||||
],
|
||||
dragSettings: { enable: true },
|
||||
xName: 'x', width: 2, marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10
|
||||
width: 7,
|
||||
height: 7,
|
||||
isFilled: true
|
||||
},
|
||||
yName: 'y', name: 'Product B'
|
||||
yName: 'y', name: 'Non-Renewable'
|
||||
},
|
||||
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Sales Prediction of Products',
|
||||
title: 'Electricity - Production',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
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.
|
||||
The Blazor Charts data label template feature allows you to change the appearance and behavior of the data label for each data point using the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/dataLabelSettings/#template">template</a> property in <code>ChartDataLabel</code>.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Crosshair can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-dataLabelSettingsModel.html">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/data-labels/#data-label-template">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
textRender: (args: ITextRenderEventArgs) => {
|
||||
args.template = '#' + args.series.name + '-' + theme;
|
||||
},
|
||||
legendSettings: { visible: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
|
|||
|
|
@ -3,17 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates sales of a product in business days.
|
||||
Data points in this sample are enhanced with tooltip.
|
||||
This sample shows the date-time category axis with sample data about the sales of a product on different business days.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this sample, you can see how to render and configure the date time category axis.
|
||||
Date time category axis is used to represent only business days in datetime axis.
|
||||
The date-time category axis is used to display date-time values with nonlinear intervals. For example, business days alone can be depicted here in a week. To use a date-time category axis, set the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#valuetype">valueType</a> in axis to DateTimeCategory.
|
||||
</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.
|
||||
<code>Tooltip</code> 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"><b>Injecting Module</b></p>
|
||||
|
|
@ -24,7 +22,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the datetime category axis can be found in this documentation section.
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/date-time-axis/#datetimecategory-axis">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, ColumnSeries, DateTimeCategory, Tooltip, ILoadedEventArgs, ChartTheme,
|
||||
StripLine, ChartAnnotation
|
||||
StripLine, ChartAnnotation, DataLabel
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(ColumnSeries, DateTimeCategory, Tooltip, StripLine, ChartAnnotation);
|
||||
Chart.Inject(ColumnSeries, DateTimeCategory, Tooltip, StripLine, ChartAnnotation, DataLabel);
|
||||
|
||||
/**
|
||||
* Sample for Date time category axis
|
||||
|
|
@ -46,13 +46,13 @@ Chart.Inject(ColumnSeries, DateTimeCategory, Tooltip, StripLine, ChartAnnotation
|
|||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: new Date(2017, 11, 20), y: 21 }, { x: new Date(2017, 11, 21), y: 24 },
|
||||
{ x: new Date(2017, 11, 22), y: 24 }, { x: new Date(2017, 11, 26), y: 70 },
|
||||
{ x: new Date(2017, 11, 27), y: 75 }, { x: new Date(2018, 0, 2), y: 82 },
|
||||
{ x: new Date(2018, 0, 3), y: 53 }, { x: new Date(2018, 0, 4), y: 54 },
|
||||
{ x: new Date(2018, 0, 5), y: 53 }, { x: new Date(2018, 0, 8), y: 45 }
|
||||
{ x: new Date(2017, 11, 20), y: 21, text: '21M' }, { x: new Date(2017, 11, 21), y: 24, text: '24M'},
|
||||
{ x: new Date(2017, 11, 22), y: 24, text: '24M' }, { x: new Date(2017, 11, 26), y: 70, text: '70M' },
|
||||
{ x: new Date(2017, 11, 27), y: 75, text: '74M' }, { x: new Date(2018, 0, 2), y: 82, text: '82M' },
|
||||
{ x: new Date(2018, 0, 3), y: 53, text: '53M' }, { x: new Date(2018, 0, 4), y: 54, text: '54M' },
|
||||
{ x: new Date(2018, 0, 5), y: 53, text: '53M' }, { x: new Date(2018, 0, 8), y: 45, text: '45M' }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Product',
|
||||
xName: 'x', yName: 'y', name: 'Product',marker: { dataLabel: { name: 'text', enableRotation: Browser.isDevice? true : false, angle: Browser.isDevice ? -90 : 0, position:'Top', visible: true}}
|
||||
},
|
||||
],
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
|
|
@ -64,11 +64,11 @@ Chart.Inject(ColumnSeries, DateTimeCategory, Tooltip, StripLine, ChartAnnotation
|
|||
annotations: [
|
||||
{
|
||||
x: new Date(2017, 11, 22), y: 90, coordinateUnits: 'Point',
|
||||
content: '<div style="color:#FF0000;font-family: bold; font-weight: 600">Christmas Offer<br> Dec 2017</div>',
|
||||
content: '<div style="color:#0000FF;font-family: bold; font-weight: 600">Christmas Offer<br> Dec 2017</div>',
|
||||
},
|
||||
{
|
||||
x: new Date(2018, 0, 4), y: 90, coordinateUnits: 'Point',
|
||||
content: '<div style="color:#FF0000;font-family: bold; font-weight: 800">New Year Offer<br> Jan 2018</div>',
|
||||
content: '<div style="color:#0000FF;font-family: bold; font-weight: 800">New Year Offer<br> Jan 2018</div>',
|
||||
}
|
||||
],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
|
|||
|
|
@ -6,13 +6,12 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the rendering of date time axis in the chart with weather statistics analysis of Alaska for a year.
|
||||
This sample shows the date-time axis in a chart with a weather report for the year 2016.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
DateTime data is used in this sample and data values are represented using dataLabel. Date time axis uses date time scale and displays the date time values as axis labels. To render dateTime axis, set <code>valueType</code> in axis to <code>DateTime</code>.
|
||||
Format for the axis label will be calculated based on intervalType of axis or we can set the format through labelFormat property in axis.
|
||||
The date-time axis uses a date-time scale and displays date-time values as the axis labels. To use a date-time axis, set the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#valuetype">valueType</a> in axis to DateTime.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the DateTime axis can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/date-time-axis/#datetime-axis">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'MMM',
|
||||
labelFormat: 'MMM d',
|
||||
edgeLabelPlacement: 'Shift',
|
||||
majorGridLines: { width: 0 }
|
||||
},
|
||||
|
|
@ -46,8 +46,8 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
yName: 'y', name: 'Warmest',
|
||||
marker: {
|
||||
visible: true,
|
||||
height: 10, width: 10,
|
||||
shape: 'Pentagon',
|
||||
height: 8, width: 8,
|
||||
shape: 'Pentagon',isFilled: true,
|
||||
dataLabel: { visible: true, position: 'Top' }
|
||||
}
|
||||
}, {
|
||||
|
|
@ -61,7 +61,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Coldest',
|
||||
marker: {
|
||||
visible: true, height: 10, width: 10, shape: 'Diamond',
|
||||
visible: true, height: 8, width: 8, shape: 'Diamond',isFilled: true,
|
||||
dataLabel: { visible: true, position: 'Top' }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This Donut Chart example visualizes the mobile browsers statistics by using doughnut series. Datalabels show information about the points.
|
||||
This donut chart example visualizes mobile browser statistics. The center label shows information about the data in the donut series.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<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>
|
||||
<p> In this example, you can see how to render and configure a donut chart. To create a donut in the pie series, we use the <code>innerRadius</code> property. The <code>centerLabel</code> property allows you to specify the default text that will be rendered in the center. You can also customize the text that will render when the mouse pointer is hovered over one of the donut slices using the <code>hoverTextFormat</code> property.</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>The Charts component’s features are segregated into individual feature modules. To use the pie series feature, we need to inject
|
||||
<code>PieSeries</code> module using <code>AccumulationChart.Inject(PieSeries)</code> method. </p>
|
||||
<p>
|
||||
More information on the doughnut series can be found in this
|
||||
More information about the donut 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>
|
||||
|
|
@ -3,28 +3,70 @@ import {
|
|||
AccumulationTheme, AccumulationChart, AccumulationLegend, PieSeries, IAccLoadedEventArgs,
|
||||
AccumulationDataLabel, AccumulationTooltip
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2/base';
|
||||
import { Browser, EmitType } from '@syncfusion/ej2/base';
|
||||
import { IPointRenderEventArgs } from '@syncfusion/ej2/charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip);
|
||||
/**
|
||||
* Sample for Doughnut chart
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let seriesColor : string[] = ['#FFE066', "#FAB666", "#F68F6A", "#F3646A", "#CC555A", "#9C4649"];
|
||||
let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
if (selectedTheme==='fluent')
|
||||
{
|
||||
args.fill = seriesColor[args.point.index % 10];
|
||||
}
|
||||
else if(selectedTheme==='bootstrap5')
|
||||
{
|
||||
args.fill = seriesColor[args.point.index % 10];
|
||||
}
|
||||
if (selectedTheme.indexOf('dark') > -1) {
|
||||
if (selectedTheme.indexOf('material') > -1) {
|
||||
args.border.color = '#303030';
|
||||
}
|
||||
else if (selectedTheme.indexOf('bootstrap5') > -1) {
|
||||
args.border.color = '#212529';
|
||||
}
|
||||
else if (selectedTheme.indexOf('bootstrap') > -1) {
|
||||
args.border.color = '#1A1A1A';
|
||||
}
|
||||
else if (selectedTheme.indexOf('fabric') > -1) {
|
||||
args.border.color = '#201f1f';
|
||||
}
|
||||
else if (selectedTheme.indexOf('fluent') > -1) {
|
||||
args.border.color = '#252423';
|
||||
}
|
||||
else if (selectedTheme.indexOf('bootstrap') > -1) {
|
||||
args.border.color = '#1A1A1A';
|
||||
}
|
||||
else if (selectedTheme.indexOf('tailwind') > -1) {
|
||||
args.border.color = '#1F2937';
|
||||
}
|
||||
else {
|
||||
args.border.color = '#222222';
|
||||
}
|
||||
}
|
||||
else if (selectedTheme.indexOf('highcontrast') > -1) {
|
||||
args.border.color = '#000000';
|
||||
}
|
||||
else {
|
||||
args.border.color = '#FFFFFF';
|
||||
}
|
||||
};
|
||||
let pie: AccumulationChart = new AccumulationChart({
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{
|
||||
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%' }],
|
||||
dataSource: [{ x: 'Chrome', y: 61.3, text: Browser.isDevice? 'Chrome:<br> 61.3%' : 'Chrome: 61.3%' },
|
||||
{ x: 'Safari', y: 24.6, text: Browser.isDevice? 'Safari:<br> 24.6%' : 'Safari: 24.6%' },
|
||||
{ x: 'Edge', y: 5.0, text: 'Edge: 5.00%' },
|
||||
{ x: 'Samsung Internet', y: 2.7, text: Browser.isDevice? 'Samsung<br> Internet: 2.7%' : 'Samsung Internet: 2.7%' },
|
||||
{ x: 'Firefox', y: 2.6, text: Browser.isDevice? 'Firefox:<br> 2.6%' : 'Firefox: 2.6%' },
|
||||
{ x: 'Others', y: 3.6, text: Browser.isDevice? 'Others:<br> 3.6%' : 'Others: 3.6%' }
|
||||
], border: { width: 1 },
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
name: 'text',
|
||||
|
|
@ -35,19 +77,24 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, A
|
|||
connectorStyle:{length:'20px', type: 'Curve'}
|
||||
},
|
||||
xName: 'x',
|
||||
yName: 'y', startAngle: Browser.isDevice ? 62 : 0, radius: Browser.isDevice ? '40%' : '75%',
|
||||
innerRadius: '40%', name: 'Project',
|
||||
explode: true, explodeOffset: '10%', explodeIndex: 0,
|
||||
yName: 'y', startAngle: Browser.isDevice ? 30 : 62, radius: Browser.isDevice ? '40%' : '75%',
|
||||
innerRadius: '65%', name: 'Project'
|
||||
}
|
||||
],
|
||||
enableSmartLabels: true,
|
||||
centerLabel:{
|
||||
text : 'Mobile<br>Browsers<br>Statistics',
|
||||
hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
|
||||
textStyle: {
|
||||
fontWeight: '600',
|
||||
size: Browser.isDevice ? '8px' : '15px'
|
||||
},
|
||||
},
|
||||
enableBorderOnMouseMove:false,
|
||||
legendSettings: {
|
||||
visible: false, position: 'Top'
|
||||
},
|
||||
// Initialize the tooltip
|
||||
tooltip: { enable: true,format:'<b>${point.x}</b><br>Browser Share: <b>${point.y}%</b>',header:"" },
|
||||
title: 'Mobile Browsers Statistics',
|
||||
pointRender: pointRender,
|
||||
// custom code start
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
@ -58,4 +105,4 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, A
|
|||
// custom code end
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
let tooltip: Element = document.getElementsByClassName('e-tooltip-wrap')[0];
|
||||
if (tooltip) { tooltip.remove(); }
|
||||
pie.destroy(); pie.removeSvg(); pie = null; pie = new AccumulationChart(instance);
|
||||
pie.series[0].animation.enable = false;
|
||||
pie.appendTo('#container');
|
||||
(getElement('category') as HTMLButtonElement).style.visibility = 'hidden';
|
||||
(getElement('symbol') as HTMLElement).style.visibility = 'hidden';
|
||||
|
|
@ -85,7 +86,9 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
clickInstance.title = 'Automobile Sales in the Minivan Segment';
|
||||
break;
|
||||
}
|
||||
pie = new AccumulationChart(clickInstance); pie.appendTo('#container');
|
||||
pie = new AccumulationChart(clickInstance);
|
||||
pie.series[0].animation.enable = false;
|
||||
pie.appendTo('#container');
|
||||
(<HTMLElement>getElement('symbol')).style.visibility = 'visible';
|
||||
(<HTMLElement>getElement('category')).style.visibility = 'visible';
|
||||
(<HTMLElement>getElement('text')).style.visibility = 'visible';
|
||||
|
|
@ -117,6 +120,7 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
let tooltip: Element = document.getElementsByClassName('e-tooltip-wrap')[0];
|
||||
if (tooltip) { tooltip.remove(); }
|
||||
pie.destroy(); pie.removeSvg(); pie = null; pie = new AccumulationChart(instance);
|
||||
pie.series[0].animation.enable = false;
|
||||
pie.appendTo('#container');
|
||||
(e.target as HTMLButtonElement).style.visibility = 'hidden';
|
||||
(getElement('symbol') as HTMLElement).style.visibility = 'hidden';
|
||||
|
|
|
|||
|
|
@ -40,21 +40,20 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates the empty point functionality in chart series. The mode of empty point can be changed by using <code>Empty Point Mode</code> in property panel.
|
||||
This sample illustrates the annual profit by product analysis of an organization with empty point functionality.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the empty points. You can use <code>border</code>,
|
||||
<code>fill</code>, <code>mode</code> properties to customize the empty points.
|
||||
In this example, you can see how to render and configure empty points for a chart. Users can customize the empty points using <code>ChartEmptyPointSettings</code> in series. Default empty point <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/accumulation-chart/emptyPointSettings/#mode">mode</a> is Gap.
|
||||
</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>
|
||||
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>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/working-with-data/#empty-points">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -25,14 +25,14 @@ Chart.Inject(ColumnSeries, Category, Legend, Tooltip, SplineSeries, AreaSeries);
|
|||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Profit',
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y',
|
||||
dataSource: [
|
||||
{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, { x: 'Oil', y: 70 },
|
||||
{ x: 'Corn', y: 60 }, { x: 'Gram', y: null },
|
||||
{ x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },
|
||||
{ x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
|
||||
],
|
||||
marker: { visible: true, height: 10, width: 10 },
|
||||
marker: { visible: false, height: 7, width: 7 },
|
||||
emptyPointSettings: {
|
||||
fill: '#e6e6e6',
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@ Chart.Inject(ColumnSeries, Category, Legend, Tooltip, SplineSeries, AreaSeries);
|
|||
//Initializing Chart title
|
||||
title: 'Annual Product-Wise Profit Analysis',
|
||||
// Tooltip initialized
|
||||
tooltip: { enable: true },
|
||||
tooltip: { enable: true, enableMarker: false },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
@ -67,6 +67,9 @@ Chart.Inject(ColumnSeries, Category, Legend, Tooltip, SplineSeries, AreaSeries);
|
|||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].type = <ChartSeriesType>edgeMode.value;
|
||||
if(edgeMode.value === 'Spline'){
|
||||
chart.series[0].marker.visible = true;
|
||||
}
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,91 +1,16 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="container" style="width:92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Error Bar Type:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div>
|
||||
<select name="selectIndex" autocomplete="off" id="selmode" style="width:60%;">
|
||||
<option value="Fixed">Fixed</option>
|
||||
<option value="Percentage">Percentage</option>
|
||||
<option value="StandardDeviation">StandardDeviation</option>
|
||||
<option value="StandardError">StandardError</option>
|
||||
<option value="Custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Drawing Mode:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div>
|
||||
<select name="selectIndex" autocomplete="off" id="drawmode" >
|
||||
<option value="Vertical">Vertical</option>
|
||||
<option value="Horizontal">Horizontal</option>
|
||||
<option value="Both">Both</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Drawing Direction:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div>
|
||||
<select name="selectIndex" autocomplete="off" id="direction" >
|
||||
<option value="Both">Both</option>
|
||||
<option value="Minus">Minus</option>
|
||||
<option value="Plus">Plus</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Vertical Error:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style='margin-top: 0px;'>
|
||||
<input type="text" id="verticalerrror" >
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Horizontal Error:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style='margin-top: 0px;'>
|
||||
<input type="text" id="horizontalerrror" >
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the errors in sales distribution of a car for a certain period with error bar in the chart. In property panel, the options are available to change error bar type, drawing mode, and drawing direction of error bar by means of dropdown
|
||||
This sample shows the errors in the quantity of different items with an error bar chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the error bar charts. Line type charts are used for cartesian type
|
||||
series. You can use error bar by set
|
||||
<code>visible</code> property to true. You can change the error bar rendering type using
|
||||
<code>type</code> property like fixedValue, percentage, standardDeviation, standardError and custom option of errorBar. To change
|
||||
the error bar line length you can use
|
||||
<code>verticalError</code> property.
|
||||
In this example, you can see how to render and configure the error bar chart. An error bar chart is used to indicate the error or uncertainty in the reported measurement.
|
||||
</p>
|
||||
<p>Chart supports the following error bar types.
|
||||
</p>
|
||||
|
|
@ -102,15 +27,16 @@
|
|||
<code>Custom</code> - Renders a custom type error bar.</li>
|
||||
</ul>
|
||||
<br>
|
||||
<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"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use error bar, we need to inject
|
||||
The Charts component’s features are segregated into individual feature modules. To use an error bar, we need to inject
|
||||
<code>ErrorBar</code> module using
|
||||
<code>Chart.Inject(ErroBar)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the error bar can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/other-types/#error-bar-chart">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -2,40 +2,23 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { NumericTextBox } from '@syncfusion/ej2-inputs';
|
||||
import {
|
||||
ChartTheme, Chart, ErrorBar, ScatterSeries, Tooltip, Category,
|
||||
ChartTheme, Chart, ErrorBar, ColumnSeries, Tooltip, Category,
|
||||
ILoadedEventArgs, ErrorBarMode, ErrorBarType, ErrorBarDirection,
|
||||
IPointRenderEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { Browser, EmitType } from '@syncfusion/ej2-base';
|
||||
import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
|
||||
Chart.Inject(ScatterSeries, Category, ErrorBar, Tooltip);
|
||||
Chart.Inject(ColumnSeries, Category, ErrorBar, Tooltip);
|
||||
/**
|
||||
* Sample for error bar
|
||||
*/
|
||||
let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'material') {
|
||||
args.fill = materialColors[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];
|
||||
} else if (selectedTheme === 'fluent-dark') {
|
||||
args.fill = fluentDarkColors[args.point.index % 10];
|
||||
} else {
|
||||
args.fill = bootstrapColors[args.point.index % 10];
|
||||
}
|
||||
};
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 },
|
||||
labelIntersectAction: Browser.isDevice ? "None" : "Trim",
|
||||
labelRotation: Browser.isDevice ? -45 : 0,
|
||||
majorGridLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
|
|
@ -44,91 +27,52 @@ let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
labelFormat: '{value}%', minimum: 15, maximum: 45, lineStyle: { width: 0 }
|
||||
minimum: 0,
|
||||
maximum: 1250,
|
||||
interval: 250,
|
||||
lineStyle: { width: 0 },
|
||||
title: "Quantity",
|
||||
majorTickLines: { width:0 }
|
||||
},
|
||||
pointRender: pointRender,
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Scatter',
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'IND', y: 24 }, { x: 'AUS', y: 20 }, { x: 'USA', y: 35 },
|
||||
{ x: 'DEU', y: 27 }, { x: 'ITA', y: 30 },
|
||||
{ x: 'UK', y: 41 }, { x: 'RUS', y: 26 }
|
||||
{ x: "Printer", y: 750, error: 50 },
|
||||
{ x: "Desktop", y: 500, error: 70 },
|
||||
{ x: "Charger", y: 550, error: 60 },
|
||||
{ x: "Mobile", y: 575, error: 80 },
|
||||
{ x: "Keyboard", y: 400, error: 20 },
|
||||
{ x: "Power Bank", y: 450, error: 90 },
|
||||
{ x: "Laptop", y: 650, error: 40 },
|
||||
{ x: "Battery", y: 525, error: 84 }
|
||||
],
|
||||
xName: 'x', width: 2, yName: 'y', marker: { height: 10, width: 10 },
|
||||
errorBar: { visible: true, verticalError: 3, horizontalError: 3 }
|
||||
xName: 'x', yName: 'y', marker: { height: 7, width: 7 },
|
||||
errorBar: { visible: true, verticalError: 'error'}
|
||||
},
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Sales Distribution of Car by Region',
|
||||
title: 'Quantity vs Items',
|
||||
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');
|
||||
if (selectedTheme === 'bootstrap5' || selectedTheme === 'fluent') {
|
||||
chart.series[0].fill = '#81CCBB';
|
||||
chart.highlightColor = '#C7E9B6';
|
||||
}
|
||||
},
|
||||
tooltipRender: (args) => {
|
||||
args.text = '<b>'+args.data.pointX + ' Count' + ': ' + args.data.pointY + '</b> (error range: ' + (args.data.pointY - args.series.visiblePoints[args.data.pointIndex].verticalError / 2 ) + '-' + (args.data.pointY + args.series.visiblePoints[args.data.pointIndex].verticalError / 2 ) + ')';
|
||||
},
|
||||
//Initializing tooltip
|
||||
tooltip: { enable: true },
|
||||
tooltip: { enable: true, enableMarker: false },
|
||||
legendSettings: {
|
||||
visible: false
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
let selmode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].errorBar.type = <ErrorBarType>selmode.value;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
selmode.appendTo('#selmode');
|
||||
let drawmode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].errorBar.mode = <ErrorBarMode>drawmode.value;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
drawmode.appendTo('#drawmode');
|
||||
let direction: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[0].errorBar.direction = <ErrorBarDirection>direction.value; chart.refresh();
|
||||
}
|
||||
});
|
||||
direction.appendTo('#direction');
|
||||
let verticalerrror: NumericTextBox = new NumericTextBox({
|
||||
value: 3,
|
||||
min: 1,
|
||||
max: 20,
|
||||
width: 120,
|
||||
step: 1,
|
||||
change: () => {
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[0].errorBar.verticalError = verticalerrror.value; chart.refresh();
|
||||
}
|
||||
});
|
||||
verticalerrror.appendTo('#verticalerrror');
|
||||
let horizontalerrror: NumericTextBox = new NumericTextBox({
|
||||
value: 3,
|
||||
min: 1,
|
||||
max: 20,
|
||||
width: 120,
|
||||
step: 1,
|
||||
change: () => {
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[0].errorBar.horizontalError = horizontalerrror.value; chart.refresh();
|
||||
}
|
||||
});
|
||||
horizontalerrror.appendTo('#horizontalerrror');
|
||||
};
|
||||
|
|
@ -3,16 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a stock chart with candle series and an Exponential Moving Average indicator.
|
||||
Trackball shows the information about the stock and signal value of a day.
|
||||
This sample illustrates a chart with candle series and an exponential moving average indicator. The trackball shows information about each day’s stock rates and signal values.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the EMA Indicator.
|
||||
In this example, you can see how to render and configure an exponential moving average indicator. This indicator tracks the price of an investment over time and is used to define the direction of the trend.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the EMA Indicator 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/technical-indicators/#exponential-moving-average-ema">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ChartTheme,
|
||||
Crosshair, LineSeries, EmaIndicator
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartValue } from './financial-data';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
|
|
@ -15,16 +16,6 @@ Chart.Inject(
|
|||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
let chart: Chart = new Chart({
|
||||
// Initialize the chart axes
|
||||
primaryXAxis: {
|
||||
|
|
@ -38,16 +29,16 @@ Chart.Inject(
|
|||
}
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
title: 'Price (in Million)',
|
||||
labelFormat: '${value}M',
|
||||
minimum: 50, maximum: 170, interval: 30,
|
||||
majorGridLines: { width: 1 },
|
||||
majorTickLines: { width: 1 },
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
// Initialize the chart series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
dataSource: chartValue, width: 2,
|
||||
xName: 'period', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: false }
|
||||
}],
|
||||
|
|
@ -65,11 +56,9 @@ Chart.Inject(
|
|||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
zoomSettings: {
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
enablePan: true
|
||||
mode: 'X',
|
||||
},
|
||||
title: 'AAPL - 2012-2017',
|
||||
title: 'AAPL Stock Price 2012-2017',
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
@ -81,4 +70,3 @@ Chart.Inject(
|
|||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates the export feature in chart. By clicking <code>Export</code>, you can export the chart in PNG or JPEG format.
|
||||
This example demonstrates how to save the chart as a PDF file and in image formats including JPEG, PNG, and SVG.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<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>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-print/#export">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
import {
|
||||
Chart, ColumnSeries, IPointRenderEventArgs,
|
||||
Category, Legend, ILoadedEventArgs, ChartTheme,
|
||||
ExportType, Export
|
||||
ExportType, Export, DataLabel
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, Category, Legend, Export);
|
||||
Chart.Inject(ColumnSeries, Category, Legend, Export, DataLabel);
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Browser } from '@syncfusion/ej2/base';
|
||||
|
||||
/**
|
||||
* Sample for chart export
|
||||
|
|
@ -36,10 +37,11 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category',
|
||||
valueType: 'Category', interval: 1,
|
||||
labelIntersectAction: Browser.isDevice ? 'None' : 'Trim',
|
||||
labelRotation: -45,
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 }
|
||||
|
||||
},
|
||||
chartArea: {
|
||||
|
|
@ -51,30 +53,38 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Measurements',
|
||||
labelFormat: '{value}GW',
|
||||
title: 'Measurements (in Gigawatt)',
|
||||
labelFormat: Browser.isDevice ? '{value}' : '{value}GW',
|
||||
minimum: 0,
|
||||
maximum: 40,
|
||||
interval: 10,
|
||||
lineStyle: { width: 0 },
|
||||
majorGridLines: { width: 2 },
|
||||
minorTickLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'DEU', y: 35.5 }, { x: 'CHN', y: 18.3 }, { x: 'ITA', y: 17.6 }, { x: 'JPN', y: 13.6 },
|
||||
{ x: 'US', y: 12 }, { x: 'ESP', y: 5.6 }, { x: 'FRA', y: 4.6 }, { x: 'AUS', y: 3.3 },
|
||||
{ x: 'BEL', y: 3 }, { x: 'UK', y: 2.9 }
|
||||
{ x: "India", y: 35.5, text: Browser.isDevice ? "35.5" : "35.5GW" },
|
||||
{ x: "China", y: 18.3, text: Browser.isDevice ? "18.3" : "18.3GW" },
|
||||
{ x: "Italy", y: 17.6, text: Browser.isDevice ? " 17.6" : " 17.6GW" },
|
||||
{ x: "Japan", y: 13.6, text: Browser.isDevice ? "13.6" : "13.6GW" },
|
||||
{ x: "United state", y: 12, text: Browser.isDevice ? "12" : "12GW" },
|
||||
{ x: "Spain", y: 5.6, text: Browser.isDevice ? "5.6" : "5.6GW" },
|
||||
{ x: "France", y: 4.6, text: Browser.isDevice ? "4.6" : "4.6GW" },
|
||||
{ x: "Australia", y: 3.3, text: Browser.isDevice ? "3.3" : "3.3GW" },
|
||||
{ x: "Belgium", y: 3, text: Browser.isDevice ? "3" : "3GW" },
|
||||
{ x: "United Kingdom", y: 2.9, text: Browser.isDevice ? "2.9" : "2.9GW" }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y'
|
||||
yName: 'y', marker: { dataLabel: { visible: true, name: 'text', position: 'Top', enableRotation: Browser.isDevice ? true : false, angle: Browser.isDevice ? -90 : 0, font: { fontWeight: '600', color: '#ffffff', size: '9px' } } }
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Top 10 Countries Using Solar Power',
|
||||
width: '95%',
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -11,11 +11,10 @@
|
|||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
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.
|
||||
In this example, you can see how to render and configure the HILO Open Close series. The horizontal lines on the left and the right are used to show the opening and closing values of the stock, and the vertical line represents both high and low values.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -25,7 +24,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Hilo Open Close 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/financial-types/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,24 +3,16 @@ import {
|
|||
Chart, HiloOpenCloseSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ChartTheme,
|
||||
Crosshair, IAxisLabelRenderEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartValue } from './financial-data';
|
||||
Chart.Inject(HiloOpenCloseSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair);
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Sample for Hilo Open Close series
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
|
|
@ -33,7 +25,7 @@ import { Browser, Ajax } from '@syncfusion/ej2-base';
|
|||
//Initializing Primary Y Axis
|
||||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
labelFormat: 'n0',
|
||||
labelFormat: 'n0',interval: 20,
|
||||
lineStyle: { width: 0 }, rangePadding: 'None',
|
||||
majorTickLines: { width: 0 }
|
||||
},
|
||||
|
|
@ -42,22 +34,17 @@ import { Browser, Ajax } from '@syncfusion/ej2-base';
|
|||
series: [
|
||||
{
|
||||
type: 'HiloOpenClose',
|
||||
dataSource: chartData, animation: { enable: true },
|
||||
dataSource: chartValue, animation: { enable: true },
|
||||
bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc'
|
||||
xName: 'period', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc.(AAPL)'
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
tooltip: { enable: true, shared: true },
|
||||
tooltip: { enable: true, shared: true, header: '', format:'<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b> <br> Open : <b>${point.open}</b> <br> Close : <b>${point.close}</b> '},
|
||||
crosshair: {
|
||||
enable: true, lineType: 'Vertical', line: { width: 0 }
|
||||
enable: true, lineType: 'Vertical',
|
||||
},
|
||||
legendSettings: { visible: false }, width: Browser.isDevice ? '100%' : '75%',
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
if (args.axis.title === 'Price') {
|
||||
args.text = '$' + args.text;
|
||||
}
|
||||
},
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
@ -69,4 +56,4 @@ import { Browser, Ajax } from '@syncfusion/ej2-base';
|
|||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,14 +3,12 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the AAPL historical data with default HILO series in the chart.
|
||||
Tooltip and crosshair show the information about the data and period.
|
||||
This <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/hilo-chart">Hilo Chart</a> example visualizes the AAPL stock price with a default Hilo series in the chart. The tooltip and crosshair show information about the stock price.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
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.
|
||||
In this example, you can see how to render and configure the HILO series. This series shows the high and low stock values over a given period of time.
|
||||
</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.
|
||||
|
|
@ -23,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Hilo 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/financial-types/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,31 +5,21 @@ import {
|
|||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(HiloSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair);
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { chartValue } from './financial-data';
|
||||
|
||||
|
||||
/**
|
||||
* Sample for Hilo series
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
crosshairTooltip: { enable: true },
|
||||
minimum: new Date('2016-12-31'),
|
||||
maximum: new Date('2017-09-30'),
|
||||
crosshairTooltip: { enable: false },
|
||||
majorGridLines: { width: 0 }
|
||||
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
|
|
@ -39,7 +29,7 @@ import { Browser, Ajax } from '@syncfusion/ej2-base';
|
|||
//Initializing Primary Y Axis
|
||||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
minimum: 100,
|
||||
minimum: 10,
|
||||
maximum: 180,
|
||||
interval: 20,
|
||||
labelFormat: '${value}',
|
||||
|
|
@ -51,15 +41,15 @@ import { Browser, Ajax } from '@syncfusion/ej2-base';
|
|||
series: [
|
||||
{
|
||||
type: 'Hilo',
|
||||
dataSource: chartData, animation: { enable: true },
|
||||
xName: 'x', low: 'low', high: 'high', name: 'Apple Inc'
|
||||
dataSource: chartValue, animation: { enable: true },
|
||||
xName: 'period', low: 'low', high: 'high', name: 'Apple Inc'
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'AAPL Historical',
|
||||
//Initializing User Interaction Tooltip, Crosshair and Zoom
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
enable: true, shared: true, header:'', format:'<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b>', enableMarker: false
|
||||
},
|
||||
crosshair: {
|
||||
enable: true, lineType: 'Vertical', line: {
|
||||
|
|
@ -77,4 +67,3 @@ import { Browser, Ajax } from '@syncfusion/ej2-base';
|
|||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
|
@ -3,19 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the student's results of the final examination with histogram series in chart.
|
||||
Number of students between each interval is shown by using the data label.
|
||||
This <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/histogram-chart">Histogram Chart</a> example visualizes final examination results. The number of students between each interval is shown in data labels.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the histogram type charts.
|
||||
Histogram type charts can provide a visual display of large amounts of data that are difficult to understand in a tabular or spreadsheet form.
|
||||
You can use the <code>border</code> and <code>fill</code> properties to customize the vertical rectangle.
|
||||
The <code>dataLabel</code> property is used to represent individual data and its value.
|
||||
In this example, you can see how to render and configure the histogram chart. The histogram chart is a bar (column) chart used for frequency distribution in which the widths of the bars are proportional to classes into which variables have been divided and the heights of the bars are proportional to class frequencies. The <code>DataLabel</code> property is used to present details on individual data points.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example.
|
||||
<code>Tooltip</code> is enabled in this example.
|
||||
To see the tooltip in action, hover the mouse over a point or tap a point in touch enabled devices.
|
||||
</p>
|
||||
<br>
|
||||
|
|
@ -26,7 +22,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the histogram 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/other-types/#histogram-series">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -29,21 +29,21 @@ 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, edgeLabelPlacement: 'Shift'
|
||||
minimum: 0, maximum: 100, edgeLabelPlacement: 'Shift', interval: Browser.isDevice ? 10 : 5,
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
legendSettings: { visible: false },
|
||||
primaryYAxis: {
|
||||
title: 'Number of Students',
|
||||
minimum: 0, maximum: 50, interval: 10,
|
||||
majorTickLines: { width: 0 }, lineStyle: { width: 0 }
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Histogram', width: 2, yName: 'y', name: 'Score',
|
||||
type: 'Histogram', width: 2, yName: 'y',
|
||||
dataSource: chartData, binInterval: 20,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },
|
||||
marker: { visible: true, height: 7, width: 7, dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },
|
||||
showNormalDistribution: true, columnWidth: 0.99
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -20,24 +20,24 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the rendering of indexed category axis in the chart by using two series.
|
||||
This sample shows an indexed category axis in a chart with details about GDP growth across different countries.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to indexed axis in chart. For indexed category axis you can use <code>isIndexed</code> property.
|
||||
</p>
|
||||
<p>
|
||||
Hover the chart area to view trackball and its tooltip. Touch and hold to enable trackball in touch enabled devices.
|
||||
The category axis is also rendered on the basis of the index values in the data source. To render the indexed category axis, set <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#valuetype">valueType</a> to Category and <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#isindexed">isIndexed</a> property to true.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
More information on the indexed axis can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/category-axis/#indexed-category-axis">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
#isIndexed:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,8 @@ import {
|
|||
Legend, ILoadedEventArgs, ChartTheme, DataLabel
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2/base';
|
||||
Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel);
|
||||
import { Tooltip } from '@syncfusion/ej2/charts';
|
||||
Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel, Tooltip);
|
||||
|
||||
/**
|
||||
* Sample for Indexed Category Axis
|
||||
|
|
@ -19,18 +20,17 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel);
|
|||
isIndexed: true,
|
||||
labelRotation: Browser.isDevice ? -45 : 0,
|
||||
labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45',
|
||||
majorTickLines: {width : 0},
|
||||
minorTickLines: {width: 0}
|
||||
majorTickLines: { width: 0 }, crosshairTooltip: { enable: true }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
|
||||
labelFormat: '{value}%'
|
||||
labelFormat: '{value}%', majorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
|
@ -39,11 +39,11 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel);
|
|||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'Myanmar', y: 7.3 },
|
||||
{ x: 'India', y: 7.9 },
|
||||
{ x: 'Bangladesh', y: 6.8 },
|
||||
{ x: 'Cambodia', y: 7.0 },
|
||||
{ x: 'China', y: 6.9 }
|
||||
{ x: "India", y: 7.9 },
|
||||
{ x: "Myanmar", y: 7.3 },
|
||||
{ x: "Bangladesh", y: 6.0 },
|
||||
{ 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', font: { size : Browser.isDevice ? '8px' : '11px'}}},
|
||||
yName: 'y', name: '2015',
|
||||
|
|
@ -51,11 +51,11 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel);
|
|||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'Poland', y: 2.7 },
|
||||
{ x: 'Australia', y: 2.5 },
|
||||
{ x: 'Singapore', y: 2.0 },
|
||||
{ x: 'Canada', y: 1.4 },
|
||||
{ x: 'Germany', y: 1.8 }
|
||||
{ x: "Australia", y: 2.5 },
|
||||
{ x: "Poland", y: 2.7 },
|
||||
{ x: "Singapore", y: 2.0 },
|
||||
{ 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', font: { size : Browser.isDevice ? '8px' : '11px'}}},
|
||||
yName: 'y', name: '2016',
|
||||
|
|
|
|||
|
|
@ -5,21 +5,20 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates inversed axis in chart to plot exchange rate over a period.
|
||||
This sample uses an inverse axis in a chart to plot an exchange rate over a period of time.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to inverse an axis in chart. Here both the X and Y axis are inversed using <code>isInversed</code> property.
|
||||
In this example, you can see how to invert the axis of the chart. Here, both X and Y axis are inverse by setting the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#isinversed">isInversed</a> property in axis to true.
|
||||
</p>
|
||||
<p> DataLabel 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>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>
|
||||
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>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/axis.customization/#inversed-axis">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -35,11 +35,10 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
opposedPosition: true,
|
||||
isInversed: true,
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 },
|
||||
majorTickLines: { width: 0 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
edgeLabelPlacement: 'Shift',
|
||||
|
|
@ -63,13 +62,14 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: '2008', y: 15.1 }, { x: '2009', y: 16 }, { x: '2010', y: 21.4 },
|
||||
{ x: '2011', y: 18 }, { x: '2012', y: 16.2 }, { x: '2013', y: 11 },
|
||||
{ x: '2014', y: 7.6 }, { x: '2015', y: 1.5 }
|
||||
{ x: '2008', y: 1.5 }, { x: '2009', y: 7.6 }, { x: '2010', y: 11 },
|
||||
{ x: '2011', y: 16.2 }, { x: '2012', y: 18 }, { x: '2013', y: 21.4 },
|
||||
{ x: '2014', y: 16 }, { x: '2015', y: 17.1 }
|
||||
],
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
width: 2,
|
||||
name: 'Rate'
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
Keyboard shortcuts can be used to interact with chart functionality. In the example below, various key combinations can be used to interact with the chart.
|
||||
Keyboard shortcuts can be used to interact with chart functionality. In the example, various key combinations can be used to interact with a chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
|
|
|
|||
|
|
@ -90,11 +90,6 @@ Chart.Inject(DateTime, Tooltip, ChartAnnotation, MultiColoredLineSeries);
|
|||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.chart.series[0].segments[0].color = '#FF4741';
|
||||
args.chart.series[0].segments[1].color = '#00B400';
|
||||
args.chart.series[0].segments[2].color = '#3F9BFF';
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates plotting of local data about stock price analysis of two products for a certain period.
|
||||
This sample shows the plotting of local data in a stock price analysis of two products over a period of time.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>For fetching data for chart, local data can be used. The <code> <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#datasource-object---datamanager">dataSource</a></code> property can be assigned either with the array of JavaScript objects or instance of <code><a target="_blank" class="code"
|
||||
href="http://ej2.syncfusion.com/documentation/data/api-dataManager.html">DataManager</a></code>.</p>
|
||||
<p>In this demo, the array of JavaScript objects is assigned as the data source to the Chart.</p>
|
||||
<p>The Charts control supports data binding. The <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#datasource">DataSource</a> property can be assigned either as list of objects or with instance of <code>DataManager</code>.</p>
|
||||
<p>In this demo, the list of objects is assigned as the data source to the Charts control. The chart can be bound to IEnumerable, IQueryable, and ObservableCollection data sources.</p>
|
||||
<br>
|
||||
<p> More information on the Polar series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/working-with-data/#local-data">documentation section</a>.</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Chart, LineSeries, DateTime, Legend, ILoadedEventArgs, ChartTheme, Tooltip, Crosshair } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Crosshair);
|
||||
import { Chart, LineSeries, DateTime, Legend, ILoadedEventArgs, ChartTheme, Tooltip, Crosshair, Highlight } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Crosshair, Highlight);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
|
|
@ -35,8 +35,6 @@ for (i = 1; i < 500; i++) {
|
|||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
title: 'Years',
|
||||
skeleton: 'y',
|
||||
majorGridLines: { width: 0 },
|
||||
valueType: 'DateTime',
|
||||
edgeLabelPlacement: 'Shift'
|
||||
|
|
@ -65,14 +63,12 @@ for (i = 1; i < 500; i++) {
|
|||
dataSource: series1,
|
||||
xName: 'x', yName: 'y', marker: { visible: false },
|
||||
width: 2, name: 'Product X',
|
||||
animation: { enable: true }
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: series2, marker: { visible: false },
|
||||
xName: 'x', yName: 'y',
|
||||
width: 2, name: 'Product Y',
|
||||
animation: { enable: true }
|
||||
width: 2, name: 'Product Y'
|
||||
}
|
||||
],
|
||||
// Initializing the crosshair
|
||||
|
|
@ -89,7 +85,7 @@ for (i = 1; i < 500; i++) {
|
|||
//Initializing User Interaction Tooltip and Crosshair
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
},
|
||||
}, legendSettings: { enableHighlight: true },
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
|
|||
|
|
@ -3,16 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the rendering of logarithmic axis in the chart.
|
||||
This sample shows a logarithmic axis in a chart with data about the sales of a product between 1995 and 2005.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Logarithmic axis uses logarithmic scale and it is very useful in visualizing when the data has values with both lower order of magnitude (eg: 10^-6) and higher order of magnitude (eg: 10^6).
|
||||
To render Logarithmic axis, set <code>valueType</code> in axis to <b>Logarithmic</b>.
|
||||
The logarithmic axis uses a logarithmic scale and is very useful when viewing data with values of both lower orders of magnitude (e.g., 10^-6) and higher orders of magnitude (e.g. 10^6). To use the logarithmic axis, set <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#valuetype">valueType</a> in axis to Logarithmic.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -22,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Logarithmic axis can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/logarithmic-axis/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Product X',
|
||||
marker: {
|
||||
visible: true, height: 10, width: 10
|
||||
visible: true, height: 7, width: 7, isFilled: true
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
@ -58,7 +58,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
//Initializing Chart title
|
||||
title: 'Product X Growth [1995-2005]', legendSettings: { visible: false },
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: { enable: true, header: 'Profit' },
|
||||
tooltip: { enable: true, shared: true, header: '', format: '${point.x} : <b>${point.y}</b>' },
|
||||
width : Browser.isDevice ? '100%' : '75%',
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates the rendering of symbols in chart. In line based series, data points can be annotated by using symbols.
|
||||
This sample illustrates Facebook users in a chart for different countries over several years. In a line-based series, data points can be annotated using symbols.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Each points in a series can be represented as a symbol through marker. We can also customize the shape, size and color of a symbol through <code>marker</code> properties.
|
||||
Each points in a series can be represented as a symbol through marker. We can also customize the shape, size and color of a symbol through <code>marker</code> properties.
|
||||
</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>
|
||||
More information on the marker can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/markerSettingsModel/">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/data-markers/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Chart, LineSeries, Category, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, Category, Legend, Tooltip);
|
||||
import { Chart, LineSeries, Category, Legend, Tooltip, ILoadedEventArgs, ChartTheme, Highlight } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, Category, Legend, Tooltip, Highlight);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
|
|
@ -8,24 +8,29 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[] = [
|
||||
{ x: "World Wide", y1: 12, y2: 22, y3: 38.3, text: "World Wide" },
|
||||
{ x: "Europe", y1: 9.9, y2: 26, y3: 45.2, text: "Europe" },
|
||||
{ x: "Asia Pacific", y1: 6.4, y2: 9.6, y3: 18.2, text: "Asia Pacific" },
|
||||
{ x: "Latin America", y1: 4.4, y2: 28, y3: 46.7, text: "Latin America" },
|
||||
{ x: "Middle East Africa", y1: 30, y2: 45.7, y3: 61.5, text: "Middle East Africa" },
|
||||
{ x: "North America", y1: 25.3, y2: 35.9, y3: 64, text: "North America" }];
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
title: 'Countries', valueType: 'Category',
|
||||
interval: 1, labelIntersectAction: 'Rotate45',
|
||||
valueType: 'Category', labelRotation: Browser.isDevice ? -45 : 0,
|
||||
interval: 1, labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45',
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 },
|
||||
majorTickLines: { width: 0 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Penetration',
|
||||
rangePadding: 'None',
|
||||
labelFormat: '{value}%', minimum: 0,
|
||||
lineStyle: { width: 0 },
|
||||
lineStyle: { width: 0 },majorTickLines: { width: 0 },
|
||||
maximum: 75, interval: 15
|
||||
},
|
||||
chartArea: {
|
||||
|
|
@ -37,59 +42,44 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
series: [
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: [{ x: 'WW', y: 12, text: 'World Wide' },
|
||||
{ x: 'EU', y: 9.9, text: 'Europe' },
|
||||
{ x: 'APAC', y: 4.4, text: 'Asia Pacific' },
|
||||
{ x: 'LATAM', y: 6.4, text: 'Latin America' },
|
||||
{ x: 'MEA', y: 30, text: 'Middle East Africa' },
|
||||
{ x: 'NA', y: 25.3, text: 'North America' }],
|
||||
name: 'December 2007',
|
||||
dataSource: chartData,
|
||||
name: '2007',
|
||||
marker: {
|
||||
visible: true, width: 10, height: 10,
|
||||
visible: true, width: 8, height: 8, isFilled: true,
|
||||
shape: 'Diamond', dataLabel: { name: 'text' }
|
||||
},
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y',
|
||||
yName: 'y1',
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: [{ x: 'WW', y: 22, text: 'World Wide' },
|
||||
{ x: 'EU', y: 26, text: 'Europe' },
|
||||
{ x: 'APAC', y: 9.3, text: 'Asia Pacific' },
|
||||
{ x: 'LATAM', y: 28, text: 'Latin America' },
|
||||
{ x: 'MEA', y: 45.7, text: 'Middle East Africa' },
|
||||
{ x: 'NA', y: 35.9, text: 'North America' }],
|
||||
dataSource: chartData,
|
||||
xName: 'x', width: 2,
|
||||
marker: {
|
||||
visible: true, width: 10, height: 10,
|
||||
visible: true, width: 8, height: 8, isFilled: true,
|
||||
shape: 'Pentagon', dataLabel: { name: 'text' }
|
||||
},
|
||||
yName: 'y', name: 'December 2008',
|
||||
yName: 'y2', name: '2008',
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: [{ x: 'WW', y: 38.3, text: 'World Wide' },
|
||||
{ x: 'EU', y: 45.2, text: 'Europe' },
|
||||
{ x: 'APAC', y: 18.2, text: 'Asia Pacific' },
|
||||
{ x: 'LATAM', y: 46.7, text: 'Latin America' },
|
||||
{ x: 'MEA', y: 61.5, text: 'Middle East Africa' },
|
||||
{ x: 'NA', y: 64, text: 'North America' }],
|
||||
dataSource: chartData,
|
||||
xName: 'x', width: 2,
|
||||
marker: {
|
||||
visible: true,
|
||||
width: 10, height: 10,
|
||||
shape: 'Triangle',
|
||||
width: 8, height: 8,
|
||||
shape: 'Triangle', isFilled: true,
|
||||
dataLabel: { name: 'text' }
|
||||
},
|
||||
yName: 'y', name: 'December 2009',
|
||||
yName: 'y3', name: '2009',
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
//Initializing Chart title
|
||||
title: 'FB Penetration of Internet Audience',
|
||||
legendSettings: { visible: false },
|
||||
legendSettings: { visible: true, enableHighlight: true },
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true
|
||||
enable: true, header: '', format: '<b>${point.x}</b> <br> ${series.name} : <b>${point.y}</b>'
|
||||
},
|
||||
width : Browser.isDevice ? '100%' : '75%',
|
||||
// custom code start
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a stock chart with candle series and a momentum indicator. Trackball shows the information about the stock, signalline, and upperline value of a day.
|
||||
This sample illustrates a chart with candle series and a momentum indicator. The trackball shows information about each day’s stock, signal line, and upper line values.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the Momentum Indicator.
|
||||
In this example, you can see how to render and configure a momentum indicator. This indicator shows the speed at which the price of the stock is changing. It also identifies when the price is moving upwards or downwards.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Momentum Indicator 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/technical-indicators/#momentum">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ import {
|
|||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
|
||||
Crosshair, LineSeries, MomentumIndicator, StripLine, ChartTheme
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
import { chartValue } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
MomentumIndicator, StripLine
|
||||
|
|
@ -14,16 +15,6 @@ Chart.Inject(
|
|||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
|
|
@ -38,7 +29,7 @@ Chart.Inject(
|
|||
title: 'Price',
|
||||
labelFormat: '${value}',
|
||||
plotOffset: 25,
|
||||
minimum: 50, maximum: 170,
|
||||
minimum: 50, maximum: 170, majorGridLines: { width: 0 },
|
||||
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },
|
||||
},
|
||||
//Initializing Rows
|
||||
|
|
@ -56,20 +47,20 @@ Chart.Inject(
|
|||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: 80, maximum: 120, interval: 20,
|
||||
majorTickLines: { width: 0 }, title: 'Momentum', stripLines: [
|
||||
{
|
||||
start: 80, end: 120, text: '', color: '#6063ff', visible: true,
|
||||
opacity: 0.1, zIndex: 'Behind'
|
||||
start: 80, end: 120, text: '', color: '#000000', visible: true,
|
||||
opacity: 0.03, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
//Initializing Chart Series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
dataSource: chartValue, width: 2,
|
||||
xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: true }
|
||||
}],
|
||||
indicators: [{
|
||||
type: 'Momentum', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
|
||||
period: 3, animation: { enable: true }, upperLine: { color: '#e74c3d' }
|
||||
period: 3, upperLine: { color: '#ffb735' }
|
||||
}],
|
||||
//Initializing UserInteraction Zoom, Tooltip and Crosshair
|
||||
zoomSettings:
|
||||
|
|
@ -78,7 +69,6 @@ Chart.Inject(
|
|||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
enablePan: true
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
|
|
@ -86,7 +76,7 @@ Chart.Inject(
|
|||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
chartArea: { border: { width: 0 } },
|
||||
//Initializing Primary Y Axis
|
||||
title: 'AAPL 2012-2017',
|
||||
title: 'AAPL Stock Price 2012-2017',
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
@ -98,4 +88,3 @@ Chart.Inject(
|
|||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
|
@ -3,15 +3,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a stock chart with candle series and a Moving Average Convergence Divergence indicator. Trackball shows the information about the stock, signalline, Macdline, and Histogram value of a day.
|
||||
This sample illustrates a chart with candle series and a moving average convergence divergence indicator. The trackball shows information about each day’s stock, MACD line, signal line, and MACD histogram values.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the MACD Indicator.
|
||||
In this example, you can see how to render and configure a moving average convergence divergence indicator. The moving average is based on the difference between two EMA's. This indicator often provides valuable signals for trend analysis.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the MACD Indicator 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/technical-indicators/#moving-average-convergence-divergence-macd">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
|
||||
Crosshair, LineSeries, StripLine, MacdIndicator, ColumnSeries, ChartTheme,
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartValue } from './financial-data';
|
||||
import { Browser, Ajax } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
|
|
@ -14,20 +15,10 @@ Chart.Inject(
|
|||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chartData: Object[];
|
||||
let ajax: Ajax = new Ajax('./src/chart/data-source/financial-data.json', 'GET', true);
|
||||
ajax.send().then();
|
||||
// Rendering Dialog on AJAX success
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
chartData = JSON.parse(data);
|
||||
chartData.map((data: Object) => {
|
||||
// tslint:disable-next-line:no-string-literal
|
||||
data['x'] = new Date(data['x']);
|
||||
});
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
valueType: 'DateTime', intervalType: 'Months',
|
||||
majorGridLines: { width: 0 },
|
||||
zoomFactor: 0.2, zoomPosition: 0.6,
|
||||
crosshairTooltip: { enable: true }
|
||||
|
|
@ -37,7 +28,7 @@ Chart.Inject(
|
|||
title: 'Price',
|
||||
labelFormat: '${value}',
|
||||
plotOffset: 25,
|
||||
minimum: 50, maximum: 170,
|
||||
maximum: 170, majorTickLines: { width: 0 },
|
||||
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
|
||||
},
|
||||
//Initializing Rows
|
||||
|
|
@ -52,19 +43,19 @@ Chart.Inject(
|
|||
axes: [{
|
||||
name: 'secondary',
|
||||
opposedPosition: true, rowIndex: 0,
|
||||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,
|
||||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3,
|
||||
majorTickLines: { width: 0 }, title: 'MACD', stripLines: [
|
||||
{
|
||||
start: -3.5, end: 3.5, text: '', color: '#6063ff', visible: true,
|
||||
opacity: 0.1, zIndex: 'Behind'
|
||||
start: -3.5, end: 3.5, text: '', color: '#000000', visible: true,
|
||||
opacity: 0.03, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
//Initializing Chart Series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
dataSource: chartValue, width: 2,
|
||||
xName: 'period', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: true }
|
||||
type: 'Candle'
|
||||
}],
|
||||
//Initializing Technical Indicators
|
||||
indicators: [{
|
||||
|
|
@ -87,7 +78,6 @@ Chart.Inject(
|
|||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
enablePan: true
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
|
|
@ -95,7 +85,7 @@ Chart.Inject(
|
|||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
chartArea: { border: { width: 0 } },
|
||||
//Initializing Chart Title
|
||||
title: 'AAPL 2012-2017',
|
||||
title: 'AAPL Stock Price 2012-2017 ',
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
@ -107,4 +97,4 @@ Chart.Inject(
|
|||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,12 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
Axis labels are placed based on the start and end range values and we can add any number of labels to an axis.
|
||||
This example shows multilevel labels in the chart axis. We can add layers of labels to the axis using start and end range values.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to group axis labels.
|
||||
You can customize text in each level by using <code>alignment</code>, <code>overflow</code>, <code>textSytle</code> and <code>border</code> properties.
|
||||
In this example, you can see how to group axis labels based on ranges by using <code>chartMultiLevelLabels</code>. You can customize the text in each level by using <code>chartAxisMultiLevelLabelBorder</code>, and <code>chartAxisMultiLevelLabelTextStyle</code>.
|
||||
</p>
|
||||
<p>Axis labels in each level can be arranged smartly using <code>overflow</code> property.
|
||||
</p>
|
||||
|
|
@ -36,7 +35,7 @@
|
|||
<br>
|
||||
<p>
|
||||
More information on the multi level labels can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/axis-labels/#multilevel-labels">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a combination of line and stacked column series. Tooltip shows the information about the data point.
|
||||
This sample shows the annual growth of Gross Domestic Product (GDP) in France in a combination of line and stacked column series. A tooltip shows information about the data points.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the different type of charts. You can render any combination of series in chart except bar.
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
In this example, you can see how to render and configure different type of charts. You can chart multiple variables on the y-axis.
|
||||
</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>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the 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-series/#multiple-series">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ChartTheme, Chart, StackingColumnSeries, LineSeries, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { ChartTheme, Chart, StackingColumnSeries, LineSeries, Tooltip, ILoadedEventArgs, Highlight } from '@syncfusion/ej2-charts';
|
||||
import { ColumnSeries, Category, Legend } from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(StackingColumnSeries, LineSeries, Category, ColumnSeries, Tooltip, Legend);
|
||||
Chart.Inject(StackingColumnSeries, LineSeries, Category, ColumnSeries, Tooltip, Legend, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Combination Series
|
||||
|
|
@ -23,7 +23,7 @@ Chart.Inject(StackingColumnSeries, LineSeries, Category, ColumnSeries, Tooltip,
|
|||
},
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Growth',
|
||||
title: 'Growth (in Billion)',
|
||||
minimum: -3,
|
||||
maximum: 3,
|
||||
interval: 1,
|
||||
|
|
@ -42,53 +42,58 @@ Chart.Inject(StackingColumnSeries, LineSeries, Category, ColumnSeries, Tooltip,
|
|||
{
|
||||
type: 'StackingColumn',
|
||||
dataSource: [
|
||||
{ x: '2005', y: 1.2 }, { x: '2006', y: 1 },
|
||||
{ x: '2007', y: 1 }, { x: '2008', y: 0.25 },
|
||||
{ x: '2009', y: 0.1 }, { x: '2010', y: 1 },
|
||||
{ x: '2011', y: 0.1 }, { x: '2012', y: -0.25 },
|
||||
{ x: '2013', y: 0.25 }, { x: '2014', y: 0.6 }
|
||||
{ x: '2013', y: 0.25 }, { x: '2014', y: 0.6 }, { x: '2015', y: 0.9 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Private Consumption',
|
||||
}, {
|
||||
type: 'StackingColumn',
|
||||
dataSource: [
|
||||
{ x: '2005', y: 0.5 }, { x: '2006', y: 0.5 },
|
||||
{ x: '2007', y: 0.5 }, { x: '2008', y: 0.35 },
|
||||
{ x: '2009', y: 0.9 }, { x: '2010', y: 0.5 },
|
||||
{ x: '2011', y: 0.25 }, { x: '2012', y: -0.5 },
|
||||
{ x: '2013', y: 0.5 }, { x: '2014', y: 0.6 }
|
||||
{ x: '2013', y: 0.5 }, { x: '2014', y: 0.6 }, { x: '2015', y: 0.5 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Government Consumption',
|
||||
}, {
|
||||
type: 'StackingColumn',
|
||||
dataSource: [
|
||||
{ x: '2005', y: 0.7 }, { x: '2006', y: 1.4 },
|
||||
{ x: '2007', y: 1.5 }, { x: '2008', y: 0.35 },
|
||||
{ x: '2009', y: -2.7 }, { x: '2010', y: 0.5 },
|
||||
{ x: '2011', y: 0.25 }, { x: '2012', y: -0.1 },
|
||||
{ x: '2013', y: -0.3 }, { x: '2014', y: -0.6 }
|
||||
{ x: '2013', y: -0.3 }, { x: '2014', y: -0.6 }, { x: '2015', y:0 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Investment',
|
||||
}, {
|
||||
type: 'StackingColumn',
|
||||
dataSource: [
|
||||
{ x: '2007', y: -1 }, { x: '2008', y: -.35 },
|
||||
{ x: '2009', y: -0.3 }, { x: '2010', y: -0.5 },
|
||||
{ x: '2005', y: -0.8 }, { x: '2006', y: 0 },
|
||||
{ x: '2007', y: -1 }, { x: '2008', y: -0.35 },
|
||||
{ x: '2009', y: -0.3 }, { x: '2010', y: 0.5 },
|
||||
{ x: '2011', y: 0 }, { x: '2012', y: -0.4 },
|
||||
{ x: '2013', y: 0 }, { x: '2014', y: -0.6 }
|
||||
{ x: '2013', y: 0 }, { x: '2014', y: -0.6 }, { x: '2015', y: -0.3 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Net Foreign Trade'
|
||||
}, {
|
||||
type: 'Line',
|
||||
dataSource: [
|
||||
{ x: '2005', y: 1.5 }, { x: '2006', y: 2.3 },
|
||||
{ x: '2007', y: 2 }, { x: '2008', y: 0.1 },
|
||||
{ x: '2009', y: -2.7 }, { x: '2010', y: 1.8 },
|
||||
{ x: '2011', y: 2 }, { x: '2012', y: 0.4 },
|
||||
{ x: '2013', y: 0.9 }, { x: '2014', y: 0.4 }
|
||||
{ x: '2013', y: 0.9 }, { x: '2014', y: 0.4 }, { x: '2015', y: 1.3 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'GDP',
|
||||
width: 2,
|
||||
marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10
|
||||
width: 7,
|
||||
height: 7
|
||||
},
|
||||
}
|
||||
],
|
||||
|
|
@ -97,7 +102,7 @@ Chart.Inject(StackingColumnSeries, LineSeries, Category, ColumnSeries, Tooltip,
|
|||
title: 'Annual Growth GDP in France',
|
||||
// Enable Legend
|
||||
legendSettings: {
|
||||
visible: true
|
||||
visible: true, enableHighlight: true
|
||||
},
|
||||
tooltip: {
|
||||
enable: true
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, LineSeries, ChartAnnotation, ColumnSeries,
|
||||
Category, Tooltip, ILoadedEventArgs, ChartTheme
|
||||
Category, Tooltip, ILoadedEventArgs, ChartTheme, SplineSeries
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, ColumnSeries, Category, Tooltip, ChartAnnotation);
|
||||
Chart.Inject(SplineSeries, ColumnSeries, Category, Tooltip, ChartAnnotation);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
|
|
@ -16,11 +16,9 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category',
|
||||
interval: 1,
|
||||
labelIntersectAction: 'Rotate90',
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 }
|
||||
minorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
|
|
@ -28,7 +26,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
{
|
||||
minimum: 0, maximum: 100, interval: 20,
|
||||
lineStyle: { width: 0 },
|
||||
labelFormat: '{value}°F'
|
||||
labelFormat: '{value}°F', majorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
|
|
@ -41,7 +39,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
{
|
||||
majorGridLines: { width: 0 },
|
||||
rowIndex: 0, opposedPosition: true,
|
||||
lineStyle: { width: 0 }, majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 },
|
||||
minimum: 24, maximum: 36, interval: 2,
|
||||
name: 'yAxis', minorTickLines: { width: 0 },
|
||||
labelFormat: '{value}°C'
|
||||
|
|
@ -49,10 +47,10 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
],
|
||||
annotations: [{
|
||||
content: '<div id="chart_cloud"><img src="src/chart/images/cloud.png" style="width: 41px; height: 41px"/></div>',
|
||||
x: 'Sun', y: 35, coordinateUnits: 'Point', verticalAlignment: 'Top'
|
||||
x: 'Sun', y: 70, coordinateUnits: 'Point', verticalAlignment: 'Top'
|
||||
}, {
|
||||
content: '<div id="chart_cloud"><img src="src/chart/images/sunny.png" style="width: 41px; height: 41px"/></div>',
|
||||
x: 'Sat', y: 34, coordinateUnits: 'Point', yAxisName: 'yAxis'
|
||||
x: 'Sat', y: 35, coordinateUnits: 'Point', yAxisName: 'yAxis'
|
||||
}],
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
|
|
@ -60,29 +58,31 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'Sun', y: 35 }, { x: 'Mon', y: 40 },
|
||||
{ x: 'Tue', y: 80 }, { x: 'Wed', y: 70 }, { x: 'Thu', y: 65 }, { x: 'Fri', y: 55 },
|
||||
{ x: 'Tue', y: 80 }, { x: 'Wed', y: 70 },
|
||||
{ x: 'Thu', y: 65 }, { x: 'Fri', y: 55 },
|
||||
{ x: 'Sat', y: 50 }
|
||||
],
|
||||
width: 2,
|
||||
xName: 'x', yName: 'y',
|
||||
name: 'Germany',
|
||||
name: 'Germany', marker: { visible: true, height: 7, width: 7 }
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
type: 'Spline',
|
||||
dataSource: [
|
||||
{ x: 'Sun', y: 30 }, { x: 'Mon', y: 28 },
|
||||
{ x: 'Tue', y: 29 }, { x: 'Wed', y: 30 }, { x: 'Thu', y: 33 }, { x: 'Fri', y: 32 },
|
||||
{ x: 'Tue', y: 29 }, { x: 'Wed', y: 30 },
|
||||
{ x: 'Thu', y: 33 }, { x: 'Fri', y: 32 },
|
||||
{ x: 'Sat', y: 34 }
|
||||
],
|
||||
xName: 'x', yName: 'y',
|
||||
width: 2, yAxisName: 'yAxis',
|
||||
name: 'Japan',
|
||||
marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }
|
||||
marker: { visible: true, width: 7, height: 7, isFilled: true }
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Chart title
|
||||
title: 'Weather Condition JPN vs DEU',
|
||||
title: 'Weather Data',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: { enable: true },
|
||||
legendSettings: {
|
||||
|
|
|
|||
|
|
@ -3,21 +3,20 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates multiple axis in chart to represent the temperature in Celsius in an axis and Fahrenheit in another axis.
|
||||
This example shows how to use a chart's multiple axes to depict temperatures in both Celsius and Fahrenheit.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure multipe axes. Use axes collection to render secondary axis to the chart and bind it to the specify series.
|
||||
You can also customize the axis line and its labels similar to primary axis.
|
||||
</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>
|
||||
In this example, you can see how to render and configure multiple axes. Use an <code>Axes</code> collection to render a secondary axis in the chart that can be bound to a specific series using <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#yaxisname">yAxisName</a> and <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/series/#xaxisname">xAxisName</a> properties in the series. You can also customize the secondary axis similar to the primary axis.
|
||||
</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>
|
||||
<br>
|
||||
<p>
|
||||
More information on the multiple axis can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/axis.customization/#multiple-axis">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, LineSeries, ChartAnnotation, ColumnSeries,
|
||||
Category, Tooltip, ILoadedEventArgs, ChartTheme
|
||||
Category, Tooltip, ILoadedEventArgs, ChartTheme, SplineSeries
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, ColumnSeries, Category, Tooltip, ChartAnnotation);
|
||||
Chart.Inject(LineSeries, ColumnSeries, Category, Tooltip, ChartAnnotation, SplineSeries);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
|
|
@ -18,6 +18,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
valueType: 'Category',
|
||||
interval: 1,
|
||||
labelIntersectAction: 'Rotate90',
|
||||
lineStyle: { width: 0 },
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 }
|
||||
|
|
@ -65,10 +66,10 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
],
|
||||
width: 2,
|
||||
xName: 'x', yName: 'y',
|
||||
name: 'Germany',
|
||||
name: 'Germany', marker: { visible: true, height: 7, width: 7}
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
type: 'Spline',
|
||||
dataSource: [
|
||||
{ x: 'Sun', y: 30 }, { x: 'Mon', y: 28 },
|
||||
{ x: 'Tue', y: 29 }, { x: 'Wed', y: 30 }, { x: 'Thu', y: 33 }, { x: 'Fri', y: 32 },
|
||||
|
|
@ -77,12 +78,11 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
xName: 'x', yName: 'y',
|
||||
width: 2, yAxisName: 'yAxis',
|
||||
name: 'Japan',
|
||||
marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }
|
||||
marker: { visible: true, width: 7, height: 7, isFilled: true }
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Chart title
|
||||
title: 'Weather Condition JPN vs DEU',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: { enable: true },
|
||||
legendSettings: {
|
||||
|
|
|
|||
|
|
@ -6,20 +6,21 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the rendering of numeric axis in the chart with England and West indies cricket match data.
|
||||
|
||||
This sample shows the numeric axis in a chart with England and West Indies cricket match data.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Numeric axis is used to plot numeric data in chart. To render numeric axis, set <code>valueType</code> in axis to <code>Double</code>.
|
||||
You can use a numeric axis to represent numeric value data in a chart. To render a numeric axis, set the <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#valuetype">valueType</a> in axis to Double.
|
||||
</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>
|
||||
More information on the Numeric axis can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/numeric-axis/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,22 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, ColumnSeries, IAxisLabelRenderEventArgs, DataLabel,
|
||||
ILoadedEventArgs, Tooltip, Legend, ChartTheme
|
||||
ILoadedEventArgs, Tooltip, Legend, ChartTheme, Highlight
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, DataLabel, Tooltip, Legend);
|
||||
Chart.Inject(ColumnSeries, DataLabel, Tooltip, Legend, Highlight);
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Sample for Numeric Axis
|
||||
*/
|
||||
let labelRender: EmitType<IAxisLabelRenderEventArgs> = (args: IAxisLabelRenderEventArgs): void => {
|
||||
if (args.axis.orientation === 'Horizontal') {
|
||||
args.cancel = args.value === 15 || args.value === 21;
|
||||
}
|
||||
};
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
title: 'Death Overs',
|
||||
minimum: 15,
|
||||
maximum: 21,
|
||||
interval: 1,
|
||||
|
|
@ -53,7 +48,7 @@ let labelRender: EmitType<IAxisLabelRenderEventArgs> = (args: IAxisLabelRenderEv
|
|||
{ x: 18, y: 7 }, { x: 19, y: 7 },
|
||||
{ x: 20, y: 10 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
xName: 'x', width: 2, columnSpacing: 0.1,
|
||||
yName: 'y', name: 'England', fill: '#1e90ff',
|
||||
marker: {
|
||||
dataLabel: {
|
||||
|
|
@ -72,7 +67,7 @@ let labelRender: EmitType<IAxisLabelRenderEventArgs> = (args: IAxisLabelRenderEv
|
|||
{ x: 18, y: 11 }, { x: 19, y: 8 },
|
||||
{ x: 20, y: 24 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
xName: 'x', width: 2, columnSpacing: 0.1,
|
||||
yName: 'y', name: 'West Indies', fill: '#b22222',
|
||||
marker: {
|
||||
dataLabel: {
|
||||
|
|
@ -85,8 +80,8 @@ let labelRender: EmitType<IAxisLabelRenderEventArgs> = (args: IAxisLabelRenderEv
|
|||
}
|
||||
}
|
||||
],
|
||||
axisLabelRender: labelRender,
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
legendSettings:{ enableHighlight: true, visible: true},
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
layoutColor = '#303030';
|
||||
}
|
||||
else if (selectedTheme.indexOf('bootstrap5') > -1) {
|
||||
args.border.color = '#343a40';
|
||||
layoutColor = '#343a40';
|
||||
args.border.color = '#212529';
|
||||
layoutColor = '#212529';
|
||||
}
|
||||
else if (selectedTheme.indexOf('bootstrap') > -1) {
|
||||
args.border.color = '#1A1A1A';
|
||||
|
|
@ -81,10 +81,16 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
}
|
||||
let element = document.getElementById('layout_0template');
|
||||
element.style.setProperty('background', layoutColor);
|
||||
let elementBody = document.getElementById('linechart');
|
||||
elementBody.style.setProperty('background', layoutColor);
|
||||
let element1 = document.getElementById('layout_1template');
|
||||
element1.style.setProperty('background', layoutColor);
|
||||
let element1Body = document.getElementById('pie');
|
||||
element1Body.style.setProperty('background', layoutColor);
|
||||
let element2 = document.getElementById('layout_2template');
|
||||
element2.style.setProperty('background', layoutColor);
|
||||
let element2Body = document.getElementById('chart');
|
||||
element2Body.style.setProperty('background', layoutColor);
|
||||
};
|
||||
let dashboardObject: DashboardLayout = new DashboardLayout({
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,13 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a Pareto chart with line and column series. Trackball shows the information about the data point closest to the mouse.
|
||||
This sample illustrates a Pareto chart with line and column series.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the different type of charts. You can render any combination of series in chart except bar.
|
||||
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>
|
||||
In this example, you can see how to render and configure a pareto chart. The pareto chart is used to find the cumulative values of the data in different categories. It is a combination of the column and line series. The initial values are shown in the column chart and the cumulative values are shown in the line chart.
|
||||
<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 style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
|
|
@ -21,7 +20,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the 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/other-types/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ Chart.Inject(ColumnSeries, Category, ParetoSeries, LineSeries, Legend, Tooltip);
|
|||
{
|
||||
title: 'Frequency of Occurence',
|
||||
minimum: 0,
|
||||
maximum: 150,
|
||||
interval: 30,
|
||||
maximum: 25,
|
||||
interval: 5,
|
||||
lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 }, majorGridLines: { width: 1 },
|
||||
minorGridLines: { width: 1 }, minorTickLines: { width: 0 }
|
||||
|
|
@ -41,15 +41,13 @@ Chart.Inject(ColumnSeries, Category, ParetoSeries, LineSeries, Legend, Tooltip);
|
|||
{
|
||||
type: 'Pareto',
|
||||
dataSource: [
|
||||
{ x: 'Button Defect', y: 56 }, { x: 'Pocket Defect', y: 44.8 },
|
||||
{ x: 'Coller Defect', y: 27.2 }, { x: 'Cuff Defect', y: 19.6 },
|
||||
{ x: 'Sleeve Defect', y: 6.6 }
|
||||
{ x: 'Button Defect', y: 23 }, { x: 'Pocket Defect', y: 16 },
|
||||
{ x: 'Coller Defect', y: 10 }, { x: 'Cuff Defect', y: 7 },
|
||||
{ x: 'Sleeve Defect', y: 6 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Defect', width: 2,
|
||||
marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10
|
||||
visible: true
|
||||
},
|
||||
}
|
||||
],
|
||||
|
|
@ -60,7 +58,7 @@ Chart.Inject(ColumnSeries, Category, ParetoSeries, LineSeries, Legend, Tooltip);
|
|||
//Initializing User Interaction
|
||||
tooltip: {
|
||||
enable: true,
|
||||
shared: true
|
||||
shared: false
|
||||
},
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
|
|||
|
|
@ -3,16 +3,14 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates annotation feature in chart. Accumulation chart is placed in cartesian chart by using annotation.
|
||||
This sample illustrates speed data for the Interlagos circuit. In area-based series, data points can be annotated using symbols.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure annotation feature in chart. We have used a pie chart to depict
|
||||
the sales for each year using annotation support, while selecting a particular year from the StackedColumn series,
|
||||
the respective data's are showed in pie. An annotation can hold any html element as its content, here we have added
|
||||
the Pie chart as its content.
|
||||
In this example, you can see how to render and configure the annotation feature in charts. An annotation can hold any HTML element as its content. In this example, an area chart depicting speed data for the Interlagos circuit has the circuit session data as its annotation content.
|
||||
</p>
|
||||
<p><code>Tooltip</code> 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"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
|
|
@ -22,11 +20,294 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the chart annotation can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-chartAnnotation.html">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-annotations/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
#dark-gradient-chart stop {
|
||||
stop-color: rgb(247, 206, 105);
|
||||
}
|
||||
</style>
|
||||
#gradient-chart stop {
|
||||
stop-color: rgb(247, 206, 105, 0.5);
|
||||
}
|
||||
.chart-gradient stop[offset="0"] {
|
||||
stop-opacity: 0.9;
|
||||
}
|
||||
.chart-gradient stop[offset="1"] {
|
||||
stop-opacity: 0.3;
|
||||
}
|
||||
div[id*=_Annotation_3] {
|
||||
transform: translate(0%, -50%) !important;
|
||||
}
|
||||
ellipse[id*=_Trackball_0] {
|
||||
fill: rgb(247, 206, 105) !important;
|
||||
stroke: rgb(247, 206, 105,0.5) !important;
|
||||
}
|
||||
ellipse[id*=_Trackball_1] {
|
||||
fill: rgb(247, 206, 105) !important;
|
||||
stroke-width: 1 !important;
|
||||
stroke: white !important;
|
||||
}
|
||||
.e-view.highcontrast .box-bottom,.e-view.tailwind .box-bottom, .e-view.fluent .box-bottom,.e-view.material .box-bottom, .e-view.bootstrap .box-bottom,.e-view.bootstrap5 .box-bottom,.e-view.bootstrap4 .box-bottom, .e-view.fabric .box-bottom,.e-view.highcontrast .first-box-bottom,
|
||||
.e-view.tailwind .first-box-bottom, .e-view.fluent .first-box-bottom,.e-view.material .first-box-bottom,.e-view.bootstrap .first-box-bottom, .e-view.bootstrap5 .first-box-bottom, .e-view.bootstrap4 .first-box-bottom ,.e-view.fabric .first-box-bottom, .e-view.highcontrast .first-box-bottom,
|
||||
.e-view.tailwind .first-box-bottom, .e-view.fluent .second-box-bottom,.e-view.material .second-box-bottom,.e-view.bootstrap .second-box-bottom, .e-view.bootstrap5 .second-box-bottom,.e-view.bootstrap4 .second-box-bottom, .e-view.fabric .second-box-bottom, .e-view.highcontrast .third-box-bottom,
|
||||
.e-view.tailwind .first-box-bottom, .e-view.fluent .third-box-bottom,.e-view.material .third-box-bottom,.e-view.bootstrap .third-box-bottom,.e-view.bootstrap5 .third-box-bottom,.e-view.bootstrap4 .third-box-bottom,.e-view.fabric .third-box-bottom,.e-view.highcontrast .box-left,
|
||||
.e-view.material .first-box-bottom,.e-view.tailwind .first-box-bottom, .e-view.fluent .box-left,.e-view.bootstrap .box-left, .e-view.bootstrap5 .box-left, .e-view.bootstrap4 .box-left,.e-view.fabric .box-left {
|
||||
position: relative;
|
||||
background: #fdf7e7;
|
||||
border: 1.5px solid black;
|
||||
padding: 2px 3px 2px 3px;
|
||||
border-radius: 0.2em;
|
||||
font-size: 12px;
|
||||
color: 'black'
|
||||
}
|
||||
.e-view.highcontrast .box-bottom,.e-view.material-dark .box-bottom,.e-view.tailwind-dark .box-bottom, .e-view.fluent-dark .box-bottom, .e-view.bootstrap-dark .box-bottom,.e-view.bootstrap5-dark .box-bottom,.e-view.fabric-dark .box-bottom,.e-view.highcontrast .first-box-bottom,
|
||||
.e-view.material-dark .first-box-bottom,.e-view.tailwind-dark .first-box-bottom, .e-view.fluent-dark .first-box-bottom,.e-view.bootstrap-dark .first-box-bottom, .e-view.bootstrap5-dark .first-box-bottom ,.e-view.fabric-dark .first-box-bottom, .e-view.highcontrast .second-box-bottom,
|
||||
.e-view.material-dark .second-box-bottom, .e-view.fluent-dark .second-box-bottom,.e-view.bootstrap-dark .second-box-bottom, .e-view.bootstrap5-dark .second-box-bottom, .e-view.fabric-dark .second-box-bottom, .e-view.highcontrast .third-box-bottom,
|
||||
.e-view.material-dark .third-box-bottom, .e-view.fluent-dark .third-box-bottom,.e-view.bootstrap-dark .third-box-bottom,.e-view.bootstrap5-dark .third-box-bottom,.e-view.fabric-dark .third-box-bottom,.e-view.highcontrast .box-left,
|
||||
.e-view.material-dark .box-left, .e-view.fluent-dark .box-left,.e-view.bootstrap-dark .box-left, .e-view.bootstrap5-dark .box-left, .e-view.fabric-dark .box-left {
|
||||
position: relative;
|
||||
background: black;
|
||||
border: 1.5px solid black;
|
||||
padding: 2px 3px 2px 3px;
|
||||
border-radius: 0.2em;
|
||||
font-size: 12px;
|
||||
color: 'white'
|
||||
}
|
||||
.box-bottom:after, .box-bottom:before, .first-box-bottom:after, .first-box-bottom:before,
|
||||
.second-box-bottom:after, .second-box-bottom:before, .third-box-bottom:after, .third-box-bottom:before {
|
||||
bottom: 100%;
|
||||
border: solid transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.e-view.highcontrast .box-bottom:after, .e-view.tailwind .box-bottom:after,.e-view.fluent .box-bottom:after,.e-view.material .box-bottom:after,.e-view.bootstrap .box-bottom:after,.e-view.bootstrap5 .box-bottom:after, .e-view.bootstrap4 .box-bottom:after, .e-view.fabric .box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
margin-left: -6.1px;
|
||||
margin-bottom: -1px;
|
||||
border-bottom-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .box-bottom:after,.e-view.tailwind-dark .box-bottom:after,.e-view.fluent-dark .box-bottom:after,.e-view.material-dark .box-bottom:after,.e-view.bootstrap-dark .box-bottom:after,.e-view.bootstrap5-dark .box-bottom:after, .e-view.bootstrap4-dark .box-bottom:after, .e-view.fabric-dark .box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
margin-left: -6.1px;
|
||||
margin-bottom: -1px;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.box-bottom:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: black;
|
||||
border-width: 7px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
margin-bottom: 0.5px;
|
||||
}
|
||||
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind .first-box-bottom:after,.e-view.fluent .first-box-bottom:after,.e-view.material .first-box-bottom:after,.e-view.bootstrap .first-box-bottom:after,.e-view.bootstrap5 .first-box-bottom:after,.e-view.bootstrap4 .first-box-bottom:after, .e-view.fabric .first-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
margin-left: -6.1px;
|
||||
margin-bottom: -1px;
|
||||
border-bottom-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .first-box-bottom:after,.e-view.tailwind-dark .first-box-bottom:after,.e-view.fluent-dark .first-box-bottom:after,.e-view.material-dark .first-box-bottom:after,.e-view.bootstrap-dark .first-box-bottom:after,.e-view.bootstrap5-dark .first-box-bottom:after,.e-view.bootstrap4-dark .first-box-bottom:after, .e-view.fabric-dark .first-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
margin-left: -6.1px;
|
||||
margin-bottom: -1px;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.first-box-bottom:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: black;
|
||||
border-width: 7px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
margin-bottom: 0.5px;
|
||||
}
|
||||
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind .second-box-bottom:after,.e-view.fluent .second-box-bottom:after,.e-view.material .second-box-bottom:after, .e-view.bootstrap .second-box-bottom:after, .e-view.bootstrap5 .second-box-bottom:after,.e-view.bootstrap4 .second-box-bottom:after, .e-view.fabric .second-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
margin-left: -6.3px;
|
||||
margin-bottom: -1px;
|
||||
border-bottom-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .second-box-bottom:after,.e-view.tailwind-dark .second-box-bottom:after,.e-view.fluent-dark .second-box-bottom:after,.e-view.material-dark .second-box-bottom:after, .e-view.bootstrap-dark .second-box-bottom:after, .e-view.bootstrap5-dark .second-box-bottom:after,.e-view.bootstrap4-dark .second-box-bottom:after, .e-view.fabric-dark .second-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.2px;
|
||||
left: 50%;
|
||||
margin-left: -6.3px;
|
||||
margin-bottom: -1px;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.second-box-bottom:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: black;
|
||||
border-width: 7px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
margin-bottom: 0.5px;
|
||||
}
|
||||
.e-view.highcontrast .third-box-bottom:after,.e-view.tailwind .third-box-bottom:after ,.e-view.fluent .third-box-bottom:after ,.e-view.material .third-box-bottom:after ,.e-view.bootstrap .third-box-bottom:after ,.e-view.bootstrap5 .third-box-bottom:after , .e-view.bootstrap4 .third-box-bottom:after , .e-view.fabric .third-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
margin-bottom: -1px;
|
||||
border-bottom-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .third-box-bottom:after ,.e-view.tailwind-dark .third-box-bottom:after ,.e-view.fluent-dark .third-box-bottom:after ,.e-view.material-dark .third-box-bottom:after ,.e-view.bootstrap-dark .third-box-bottom:after ,.e-view.bootstrap5-dark .third-box-bottom:after , .e-view.bootstrap4-dark .third-box-bottom:after , .e-view.fabric-dark .third-box-bottom:after {
|
||||
border-color: transparent;
|
||||
border-width: 6px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
margin-bottom: -1px;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.third-box-bottom:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: black;
|
||||
border-width: 6px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.box-left:after, .box-left:before {
|
||||
right: 100%;
|
||||
top: 18%;
|
||||
border: solid transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.e-view.highcontrast .box-left:after,.e-view.tailwind .box-left:after,.e-view.fluent .box-left:after,.e-view.material .box-left:after,.e-view.bootstrap .box-left:after,.e-view.bootstrap5 .box-left:after, .e-view.bootstrap4 .box-left:after, .e-view.fabric .box-left:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.5px;
|
||||
margin-right: -1px;
|
||||
border-right-color: #fdf7e7;
|
||||
}
|
||||
.e-view.highcontrast .box-left:after,.e-view.tailwind-dark .box-left:after,.e-view.fluent-dark .box-left:after,.e-view.material-dark .box-left:after,.e-view.bootstrap-dark .box-left:after,.e-view.bootstrap5-dark .box-left:after, .e-view.bootstrap4-dark .box-left:after, .e-view.fabric-dark .box-left:after {
|
||||
border-color: transparent;
|
||||
border-width: 6.5px;
|
||||
margin-right: -1px;
|
||||
border-right-color: black;
|
||||
}
|
||||
.box-left:before {
|
||||
border-color: transparent;
|
||||
border-right-color: black;
|
||||
border-width: 6.2px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.e-view.highcontrast .box-top,.e-view.tailwind .box-top,.e-view.fluent .box-top,.e-view.material .box-top,.e-view.bootstrap .box-top,.e-view.bootstrap5 .box-top ,.e-view.bootstrap4 .box-top , .e-view.fabric .box-top,
|
||||
.e-view.highcontrast .box-top-left,.e-view.tailwind .box-top,.e-view.fluent .box-top-left,.e-view.material .box-top-left,.e-view.bootstrap .box-top-left,.e-view.bootstrap5 .box-top-left, .e-view.bootstrap4 .box-top-left, .e-view.fabric .box-top-left {
|
||||
position: relative;
|
||||
color: white;
|
||||
background: black;
|
||||
border: 1.5px solid black;
|
||||
padding: 2px 3px 2px 3px;
|
||||
border-radius: 0.2em;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
.e-view.highcontrast .box-top,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top,.e-view.material-dark .box-top,.e-view.bootstrap-dark .box-top,.e-view.bootstrap5-dark .box-top ,.e-view.bootstrap4-dark .box-top , .e-view.fabric-dark .box-top,
|
||||
.e-view.highcontrast .box-top-left,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top-left,.e-view.material-dark .box-top-left,.e-view.bootstrap-dark .box-top-left,.e-view.bootstrap5-dark .box-top-left, .e-view.bootstrap4-dark .box-top-left, .e-view.fabric-dark .box-top-left {
|
||||
position: relative;
|
||||
color: white;
|
||||
background: #fdf7e7;
|
||||
border: 1.5px solid black;
|
||||
padding: 2px 3px 2px 3px;
|
||||
border-radius: 0.2em;
|
||||
font-size: 12px;
|
||||
color: black;
|
||||
}
|
||||
.box-top:after, .box-top:before, .box-top-left:after, .box-top-left:before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.e-view.highcontrast .box-top:after,.e-view.tailwind .box-top:after,.e-view.fluent .box-top:after,.e-view.material .box-top:after, .e-view.bootstrap .box-top:after, .e-view.bootstrap5 .box-top:after, .e-view.bootstrap4 .box-top:after, .e-view.fabric .box-top:after {
|
||||
border-color: transparent;
|
||||
border-width: 7.5px;
|
||||
border-top-color:black;
|
||||
right: 50%;
|
||||
margin-right: -7.5px;
|
||||
margin-top: -1.5px;
|
||||
}
|
||||
.e-view.highcontrast .box-top:after,.e-view.tailwind-dark .box-top:after,.e-view.fluent-dark .box-top:after,.e-view.material-dark .box-top:after, .e-view.bootstrap-dark .box-top:after, .e-view.bootstrap5-dark .box-top:after, .e-view.bootstrap4-dark .box-top:after, .e-view.fabric-dark .box-top:after {
|
||||
border-color: transparent;
|
||||
border-width: 7.5px;
|
||||
border-top-color: #fdf7e7;
|
||||
right: 50%;
|
||||
margin-right: -7.5px;
|
||||
margin-top: -1.5px;
|
||||
}
|
||||
.e-view.highcontrast .box-top:before, .e-view.tailwind .box-top:before,.e-view.fluent .box-top:before,.e-view.material .box-top:before,.e-view.bootstrap .box-top:before,.e-view.bootstrap5 .box-top:before,.e-view.bootstrap4 .box-top:before , .e-view.fabric .box-top:before {
|
||||
border-color: transparent;
|
||||
border-top-color:black;
|
||||
border-width: 8px;
|
||||
right: 50%;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.e-view.highcontrast .box-top:before,.e-view.tailwind-dark .box-top:before,.e-view.fluent-dark .box-top:before,.e-view.material-dark .box-top:before,.e-view.bootstrap-dark .box-top:before,.e-view.bootstrap5-dark .box-top:before,.e-view.bootstrap4-dark .box-top:before , .e-view.fabric-dark .box-top:before {
|
||||
border-color: transparent;
|
||||
border-top-color:#fdf7e7;
|
||||
border-width: 8px;
|
||||
right: 50%;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.e-view.highcontrast .box-top-left:after,.e-view.tailwind .box-top-left:after,.e-view.fluent .box-top-left:after,.e-view.material .box-top-left:after,.e-view.bootstrap .box-top-left:after,.e-view.bootstrap5 .box-top-left:after,.e-view.bootstrap4 .box-top-left:after, .e-view.fabric .box-top-left:after {
|
||||
border-color: transparent;
|
||||
border-width: 7.5px;
|
||||
border-top-color: black;
|
||||
right: 20%;
|
||||
margin-right: -7.5px;
|
||||
margin-bottom: -1.5px;
|
||||
}
|
||||
.e-view.highcontrast .box-top-left:after,.e-view.tailwind-dark .box-top-left:after,.e-view.fluent-dark .box-top-left:after,.e-view.material-dark .box-top-left:after,.e-view.bootstrap-dark .box-top-left:after,.e-view.bootstrap5-dark .box-top-left:after,.e-view.bootstrap4-dark .box-top-left:after, .e-view.fabric-dark .box-top-left:after {
|
||||
border-color: transparent;
|
||||
border-width: 7.5px;
|
||||
border-top-color: #fdf7e7;
|
||||
right: 20%;
|
||||
margin-right: -7.5px;
|
||||
margin-bottom: -1.5px;
|
||||
}
|
||||
.e-view.highcontrast .box-top-left:before,.e-view.tailwind .box-top-left:before,.e-view.fluent .box-top-left:before,.e-view.material .box-top-left:before,.e-view.bootstrap .box-top-left:before,.e-view.bootstrap5 .box-top-left:before, .e-view.bootstrap4 .box-top-left:before , .e-view.fabric .box-top-left:before {
|
||||
border-color: transparent;
|
||||
border-top-color: black;
|
||||
border-width: 8px;
|
||||
right: 20%;
|
||||
margin-right: -8px;
|
||||
}
|
||||
.e-view.highcontrast .box-top-left:before,.e-view.tailwind-dark .box-top-left:before,.e-view.fluent-dark .box-top-left:before,.e-view.material-dark .box-top-left:before,.e-view.bootstrap-dark .box-top-left:before,.e-view.bootstrap5-dark .box-top-left:before, .e-view.bootstrap4-dark .box-top-left:before , .e-view.fabric-dark .box-top-left:before {
|
||||
border-color: transparent;
|
||||
border-top-color: #fdf7e7;
|
||||
border-width: 8px;
|
||||
right: 20%;
|
||||
margin-right: -8px;
|
||||
}
|
||||
</style>
|
||||
<svg style="height: 0">
|
||||
<defs>
|
||||
<linearGradient id="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="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="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="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>
|
||||
|
|
@ -1,125 +1,99 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, StackingColumnSeries, Category, Legend, ILoadedEventArgs, Selection, IMouseEventArgs, IAccLoadedEventArgs,
|
||||
ChartAnnotation, AccumulationChart, AccumulationDataLabel, IAnimationCompleteEventArgs, AccumulationTheme, ChartTheme,
|
||||
Series, IAccResizeEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingColumnSeries, Category, Legend, Selection, ChartAnnotation);
|
||||
AccumulationChart.Inject(AccumulationChart, AccumulationDataLabel);
|
||||
Chart, AreaSeries, DateTime, Legend, ILoadedEventArgs, Selection, IAxisLabelRenderEventArgs,
|
||||
ChartAnnotation, ChartTheme, Tooltip} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(AreaSeries, DateTime, Legend, Selection, ChartAnnotation, Tooltip);
|
||||
import { annotateData } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
|
||||
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)';
|
||||
/**
|
||||
* Sample for annotation in chart
|
||||
*/
|
||||
export function getValue(series: Series[], pointIndex: number, y: number): string {
|
||||
let totalValue: number = 0;
|
||||
for (let ser of series) {
|
||||
totalValue += ser.points[pointIndex].y as number;
|
||||
}
|
||||
return (Math.round((y / totalValue) * 100)) + '%';
|
||||
}
|
||||
//tslint:disable:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let pie: AccumulationChart; let isRender: boolean = false;
|
||||
let dataSource: Object = [
|
||||
{ x: '2014', y0: 51, y1: 77, y2: 66, y3: 34 }, { x: '2015', y0: 67, y1: 49, y2: 19, y3: 38 },
|
||||
{ x: '2016', y0: 143, y1: 121, y2: 91, y3: 44 }, { x: '2017', y0: 19, y1: 28, y2: 65, y3: 51 },
|
||||
{ x: '2018', y0: 30, y1: 66, y2: 32, y3: 61 }, { x: '2019', y0: 189, y1: 128, y2: 122, y3: 76 },
|
||||
{ x: '2020', y0: 72, y1: 97, y2: 65, y3: 82 }
|
||||
];
|
||||
let pieDataSource: Object[] = [
|
||||
{ x: 'UK', y: 51, text: '22%' }, { x: 'Germany', y: 77, text: '34%' },
|
||||
{ x: 'France', y: 66, text: '29%' }, { x: 'Italy', y: 34, text: '15%' }
|
||||
];
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', majorGridLines: { width: 0 }, minorGridLines: { width: 1 },
|
||||
minorTickLines: { width: 0 }, interval: 1, labelIntersectAction: 'Rotate45',majorTickLines: {width : 0},
|
||||
majorGridLines: { width: 0 }, labelFormat: 'n2', title: "Distance",
|
||||
},
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Sales', lineStyle: { width: 0 }, minimum: 0, maximum: 700, interval: 100,
|
||||
majorGridLines: { width: 1 }, minorGridLines: { width: 1 },
|
||||
minorTickLines: { width: 0 }, labelFormat: '{value}B', majorTickLines: { width: 0 }
|
||||
title: 'Speed (KM/H)', lineStyle: { width: 0 }, minimum: 50, maximum: 400,
|
||||
minorTickLines: { width: 0 }
|
||||
},
|
||||
annotations: [
|
||||
{
|
||||
content : '<div class="first-box-bottom" > Senna S </div>', x:'0.360', y:'80' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content : '<div class="second-box-bottom" > Descida do Lego </div>', x:'1.400', y:'130' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content : '<div class="third-box-bottom" > Ferradura </div>', x:'2.100', y:'200' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content :'<div class="box-left" > Curva do Sol </div>', x:'0.85', y:'155' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content :'<div class="box-top-left" > Reta Oposta </div>', x:'0.700', y:'292' ,coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content : '<div class="box-bottom" > Bico de Pato </div>', x:'2.750', y:'80' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content : '<div class="box-top" > Mergulho </div>', x:'3.136', y:'284' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content : Browser.isDevice ? '' :'<div class="third-box-bottom" > Junção </div>', x:'3.270', y:'98' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content : Browser.isDevice ? '' :'<div class="box-top" > Subida dos <br /> Boxes </div>', x:'3.800', y:'312' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content : Browser.isDevice ? '' :'<div style="font-family: sans-serif" > Max, accelertion <br /> 5.00 g at 5th gear </div>', x:'1.65', y:'300' , coordinateUnits:'Point'
|
||||
},
|
||||
{
|
||||
content : Browser.isDevice ? '' :'<div style="font-family: sans-serif" > Max, accelertion <br /> 4.58 g at 5th gear </div>', x:'2.60', y:'250' ,coordinateUnits:'Point'
|
||||
}
|
||||
],
|
||||
//Initializing Series
|
||||
series: [
|
||||
{ type: 'StackingColumn', xName: 'x', width: 2, yName: 'y0', name: 'UK', dataSource: dataSource },
|
||||
{ type: 'StackingColumn', xName: 'x', width: 2, yName: 'y1', name: 'Germany', dataSource: dataSource },
|
||||
{ type: 'StackingColumn', xName: 'x', width: 2, yName: 'y2', name: 'France', dataSource: dataSource },
|
||||
{ type: 'StackingColumn', xName: 'x', width: 2, yName: 'y3', name: 'Italy', dataSource: dataSource }
|
||||
{ type: 'Area', xName: 'Distance', yName: 'Speed', dataSource: annotateData, border: { width: 2.5 , color: '#000000' },
|
||||
marker: { height: 7, width: 7, fill: 'rgb(247, 206, 105,0.7)'}, animation: { enable: false }
|
||||
},
|
||||
],
|
||||
chartArea: { border: { width: 0 } }, title: 'Mobile Game Market by Country',
|
||||
chartArea: { border: { width: 0 } }, title: 'Speed Data Plot for Interlagos Circuit',
|
||||
//Initializing Selection
|
||||
selectionMode: 'Cluster', selectedDataIndexes: [{ series: 0, point: 0 }],
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
tooltip:{ enable: true, header: '' , enableMarker: true, format: 'Distance: ${point.x} KM <br> ${point.y} KM/H', fill: 'white', border:{ color: 'rgb(247, 206, 105)', width: 2 }, textStyle:{ color: '#000000'}},
|
||||
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');
|
||||
if (selectedTheme.match('Dark')) {
|
||||
args.chart.series[0].fill = 'url(#dark-gradient-chart)';
|
||||
}
|
||||
else {
|
||||
args.chart.series[0].fill = 'url(#gradient-chart)';
|
||||
}
|
||||
//FillColor = IsDarkTheme ? "url(#dark-gradient-chart)" : "url(#gradient-chart)";
|
||||
},
|
||||
legendSettings: { visible: true, toggleVisibility: false },
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
if (args.axis.name === 'primaryXAxis') { args.text = args.text + ' KM'; }
|
||||
},
|
||||
//Initializing Annotation
|
||||
annotations: [{
|
||||
content: '<div id="chart_annotation" style="width: 200px; height: 200px"></div>',
|
||||
x: '20%', y: '25%', coordinateUnits: 'Pixel', region: 'Series'
|
||||
}],
|
||||
chartMouseUp: (args: IMouseEventArgs) => {
|
||||
if (args.target.indexOf('Point') > -1 && args.target.indexOf('annotation') === -1) {
|
||||
let pointIndex: number = parseInt(args.target[args.target.length - 1], 10);
|
||||
pieDataSource = [];
|
||||
for (let series of chart.visibleSeries) {
|
||||
let value: number = series.points[pointIndex].y as number;
|
||||
pieDataSource.push({
|
||||
'x': series.name, 'y': value, 'text': getValue(chart.visibleSeries, pointIndex, value)
|
||||
});
|
||||
}
|
||||
pie.series[0].dataSource = pieDataSource;
|
||||
pie.series[0].xName = 'x'; pie.series[0].yName = 'y';
|
||||
pie.refresh();
|
||||
}
|
||||
},
|
||||
loaded: (args: ILoadedEventArgs) => {
|
||||
if (isRender) {
|
||||
pie.destroy();
|
||||
pie = new AccumulationChart({
|
||||
background: 'transparent',
|
||||
series: [{
|
||||
radius: '65%', animation: { enable: false },
|
||||
dataSource: pieDataSource, border: { color: 'transparent'},
|
||||
xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' }, name: 'text' },
|
||||
}],
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
legendSettings: { visible: false }
|
||||
});
|
||||
pie.appendTo('#chart_annotation');
|
||||
}
|
||||
},
|
||||
animationComplete: (args: IAnimationCompleteEventArgs) => {
|
||||
isRender = true;
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
pie = new AccumulationChart({
|
||||
background: 'transparent',
|
||||
series: [{
|
||||
radius: '65%', animation: { enable: false },
|
||||
dataSource: pieDataSource, border: { color: 'transparent'},
|
||||
xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', name: 'text' },
|
||||
}],
|
||||
theme: <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast')),
|
||||
legendSettings: { visible: false },
|
||||
resized: (args: IAccResizeEventArgs) => { location.reload(); }
|
||||
});
|
||||
pie.appendTo('#chart_annotation');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -23,16 +23,14 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates polar series with area type for average sales comparison of products in recent year. The switching between polar and radar series can be done by using <code>Series Type</code> in property panel.
|
||||
This sample shows the average product sales comparison for 6 years in polar and radar charts.
|
||||
</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 to render and configure polar and radar charts with an area series. Switching between polar and radar series can be done using Series Type in the property panel
|
||||
</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>
|
||||
<br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
|
|
@ -42,7 +40,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Polar series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, Tooltip, Legend, PolarSeries, RadarSeries, Category, AreaSeries, ChartDrawType, ILoadedEventArgs, ChartTheme
|
||||
Chart, Tooltip, Legend, PolarSeries, RadarSeries, Category, AreaSeries, ChartDrawType, ILoadedEventArgs, ChartTheme, Highlight
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, AreaSeries, RadarSeries);
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, AreaSeries, RadarSeries, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Polar Series with DrawType Area
|
||||
|
|
@ -64,6 +64,8 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, AreaSeries, RadarSeries);
|
|||
],
|
||||
//Initializing Chart title
|
||||
title: 'Average Sales Comparison',
|
||||
tooltip: { enable: true },
|
||||
legendSettings: { enableHighlight: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
@ -80,9 +82,9 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, AreaSeries, RadarSeries);
|
|||
chart.series[0].type = <ChartDrawType>polarType.value;
|
||||
chart.series[1].type = <ChartDrawType>polarType.value;
|
||||
chart.series[2].type = <ChartDrawType>polarType.value;
|
||||
chart.series[0].animation.enable = true;
|
||||
chart.series[1].animation.enable = true;
|
||||
chart.series[2].animation.enable = true;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[1].animation.enable = false;
|
||||
chart.series[2].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -23,18 +23,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates polar series with column type for mobile market subscriptions in different countries. The switching between polar and radar series can be done by using <code>Series Type</code> in property panel.
|
||||
This sample shows the top 10 mobile markets by the number of subscriptions in polar and radar charts using column series.
|
||||
</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 rect. <code>dataLabel</code> is used to represent individual
|
||||
data and its value.
|
||||
In this example, you can see how to render and configure polar and radar charts with a column series. Switching between polar and radar series can be done using Series Type in the property panel.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -45,7 +42,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, Tooltip, Legend, PolarSeries, Category,
|
||||
RadarSeries, ChartDrawType, ILoadedEventArgs, ChartTheme
|
||||
RadarSeries, ChartDrawType, ILoadedEventArgs, ChartTheme, Highlight
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, RadarSeries);
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, RadarSeries, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Polar Series with DrawType Column
|
||||
|
|
@ -47,19 +47,19 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, RadarSeries);
|
|||
{
|
||||
type: 'Polar', drawType: 'Column', dataSource: data,
|
||||
animation: { enable: true }, border: { width: 1, color: 'white' },
|
||||
xName: 'x', yName: 'y', name: 'Mobile Subscriptions',
|
||||
xName: 'text', yName: 'y', name: 'Mobile Subscriptions',
|
||||
marker: { dataLabel: { name: 'text' } }
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'Column', dataSource: data,
|
||||
animation: { enable: true }, border: { width: 1, color: 'white' },
|
||||
xName: 'x', yName: 'y1', name: 'Population in Millions',
|
||||
xName: 'text', yName: 'y1', name: 'Population in Millions',
|
||||
marker: { dataLabel: { name: 'text' } }
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'Column', dataSource: data,
|
||||
animation: { enable: true }, border: { width: 1, color: 'white' },
|
||||
xName: 'x', yName: 'y2', name: '3G/4G Subscriptions',
|
||||
xName: 'text', yName: 'y2', name: '3G/4G Subscriptions',
|
||||
marker: { dataLabel: { name: 'text' } }
|
||||
},
|
||||
],
|
||||
|
|
@ -67,9 +67,10 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, RadarSeries);
|
|||
title: 'Top 10 Mobile Markets by Number of Subscriptions',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true,
|
||||
format: '${point.text} : <b>${point.y}%</b>'
|
||||
enable: true, header: '',
|
||||
format: '<b>${point.text}</b> <br> ${series.name} : <b>${point.y}</b>'
|
||||
},
|
||||
legendSettings: { enableHighlight: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
@ -86,9 +87,9 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, RadarSeries);
|
|||
chart.series[0].type = <ChartDrawType>polarType.value;
|
||||
chart.series[1].type = <ChartDrawType>polarType.value;
|
||||
chart.series[2].type = <ChartDrawType>polarType.value;
|
||||
chart.series[0].animation.enable = true;
|
||||
chart.series[1].animation.enable = true;
|
||||
chart.series[2].animation.enable = true;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[1].animation.enable = false;
|
||||
chart.series[2].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -58,21 +58,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates polar series with line type for Alaska weather statistics data of the year 2016. The angle can be changed and the series can be inversed by using the properties in the panel.
|
||||
This <a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/radar-chart">Polar Radar Line</a> Chart example visualizes data about Alaska Weather Statistics - 2016 with a default polar line series.
|
||||
</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
|
||||
<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.
|
||||
In this example, you can see how to render and configure polar and radar charts with a line series. The type of series can be changed using the Series Type dropdown list in the properties panel. Also, the angle can be changed and the series can be inversed using <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#startangle">Start Angle</a> and <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/chart/axis/#isinversed">Inversed</a> properties.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -86,11 +80,17 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the polar series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
#isinversed:hover {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
#isClosed:hover {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, Tooltip, Legend, PolarSeries, RadarSeries, Category, LineSeries, ChartDrawType, ILoadedEventArgs,
|
||||
ChartTheme
|
||||
ChartTheme,
|
||||
Highlight
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries);
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Polar Series with DrawType Line
|
||||
|
|
@ -40,11 +41,12 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries);
|
|||
{ x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
|
||||
{ x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 },
|
||||
],
|
||||
xName: 'x', width: 2, yName: 'y', name: 'Warmest', type: 'Polar',
|
||||
xName: 'x', width: 2, yName: 'y', name: 'Germany', type: 'Polar',opacity: 1,
|
||||
marker: {
|
||||
visible: true,
|
||||
height: 10, width: 10,
|
||||
height: 7, width: 7,
|
||||
shape: 'Pentagon',
|
||||
isFilled: true
|
||||
}
|
||||
}, {
|
||||
dataSource: [
|
||||
|
|
@ -55,14 +57,15 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries);
|
|||
{ x: 'Sep', y: 2.6 }, { x: 'Oct', y: -4.9 },
|
||||
{ x: 'Nov', y: -13.4 }, { x: 'Dec', y: -16.4 },
|
||||
],
|
||||
xName: 'x', width: 2, yName: 'y', name: 'Coldest', type: 'Polar',
|
||||
xName: 'x', width: 2, yName: 'y', name: 'England', type: 'Polar',
|
||||
marker: {
|
||||
visible: true, height: 10, width: 10, shape: 'Diamond',
|
||||
visible: true, height: 7, width: 7, shape: 'Diamond', isFilled: true
|
||||
}
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Alaska Weather Statistics - 2016',
|
||||
legendSettings: { enableHighlight: true },
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true
|
||||
|
|
@ -89,8 +92,8 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries);
|
|||
change: () => {
|
||||
chart.series[0].type = <ChartDrawType>polarType.value;
|
||||
chart.series[1].type = <ChartDrawType>polarType.value;
|
||||
chart.series[0].animation.enable = true;
|
||||
chart.series[1].animation.enable = true;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[1].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -23,17 +23,15 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates polar series with range column type for temperature variation. The switching between polar and radar series can be done by using <code>Series Type</code> in property panel.
|
||||
This sample shows minimum and maximum temperature variations in polar and radar charts using a range column series.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the range column type chart You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the area. <code>dataLabel</code> are used to represent individual data
|
||||
and its value.
|
||||
In this example, you can see how to render and configure polar and radar charts with a range column series. Switching between polar and radar series can be done using Series Type in the property panel.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -44,7 +42,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the range 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/polar-radar/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Chart, PolarSeries, Category, ILoadedEventArgs, RadarSeries, ChartDrawType } from '@syncfusion/ej2-charts';
|
||||
import { Chart, PolarSeries, Category, ILoadedEventArgs, RadarSeries, ChartDrawType, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { RangeColumnSeries, DataLabel, ITextRenderEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(PolarSeries, Category, RadarSeries, RangeColumnSeries, DataLabel);
|
||||
Chart.Inject(PolarSeries, Category, RadarSeries, RangeColumnSeries, DataLabel, Tooltip);
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
|
|
@ -17,15 +17,14 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category',
|
||||
title: 'Months', interval: 1,
|
||||
interval: 1,
|
||||
labelPlacement: 'OnTicks',
|
||||
startAngle: 90,
|
||||
coefficient: Browser.isDevice ? 80 : 100
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis: {
|
||||
labelFormat: '{value}˚C',
|
||||
labelFormat: '{value}',
|
||||
minimum: 0, maximum: 15, interval: 5
|
||||
},
|
||||
|
||||
|
|
@ -52,9 +51,10 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
textRender: (args: ITextRenderEventArgs) => {
|
||||
args.text = args.text.replace('˚C', '');
|
||||
},
|
||||
tooltip: { enable: true, header: '', format: '<b>${point.x}</b> <br> Low : <b>${point.low}°C</b> <br> High : <b>${point.high}°C'},
|
||||
legendSettings: { visible: false },
|
||||
//Initializing Chart Title
|
||||
title: 'Maximum and Minimum Temperature',
|
||||
title: 'Temperatures of Germany',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
|
|||
|
|
@ -23,16 +23,13 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates polar series with scatter type for GDP for different countries in recent years. The switching between polar and radar series can be done by using <code>Series Type</code> in property panel.
|
||||
This sample shows GDP growth of different countries for a few years in the polar and radar charts using the scatter series.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>In this example, you can see how to render and configure polar and radar charts with a scatter series. Switching between polar and radar series can be done using the Series Type in the property panel.</p>
|
||||
<p>
|
||||
In this example, you can see how to render and configure the scatter type charts. Scatter charts are used to plot financial
|
||||
or scientific data. You can use <code>shape</code> property in the marker to change the scatter shape. <code>dataLabel</code> is used to represent individual data 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>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"><b>Injecting Module</b></p>
|
||||
|
|
@ -43,7 +40,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Polar series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, Tooltip, Legend, PolarSeries, Category, ScatterSeries, RadarSeries, ChartDrawType, ILoadedEventArgs,
|
||||
ChartTheme
|
||||
ChartTheme, Highlight
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, ScatterSeries, RadarSeries);
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, ScatterSeries, RadarSeries, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Polar Series with DrawType Scatter
|
||||
|
|
@ -52,29 +52,30 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, ScatterSeries, RadarSeries)
|
|||
{
|
||||
type: 'Polar', drawType: 'Scatter', dataSource: data,
|
||||
animation: { enable: true },
|
||||
marker: { height: 10, width: 10, dataLabel: { name: 'text' } },
|
||||
xName: 'x', yName: 'y', name: '2015'
|
||||
marker: { height: 7, width: 7, dataLabel: { name: 'text' } },
|
||||
xName: 'text', yName: 'y', name: '2015'
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'Scatter', dataSource: data,
|
||||
animation: { enable: true },
|
||||
marker: { height: 10, width: 10, shape: 'Diamond', dataLabel: { name: 'text' } },
|
||||
xName: 'x', yName: 'y1', name: '2016'
|
||||
marker: { height: 7, width: 7, shape: 'Diamond', dataLabel: { name: 'text' } },
|
||||
xName: 'text', yName: 'y1', name: '2016'
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'Scatter', dataSource: data,
|
||||
animation: { enable: true },
|
||||
marker: { height: 10, width: 10, shape: 'Triangle', dataLabel: { name: 'text' } },
|
||||
xName: 'x', yName: 'y2', name: '2017'
|
||||
marker: { height: 7, width: 7, shape: 'Triangle', dataLabel: { name: 'text' } },
|
||||
xName: 'text', yName: 'y2', name: '2017'
|
||||
},
|
||||
],
|
||||
//Initializing Chart Title
|
||||
title: 'Real GDP Growth',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true,
|
||||
format: '${point.text} : <b>${point.y}%</b>'
|
||||
enable: true, header: '',
|
||||
format: '<b>${point.x}</b> <br>GDP: <b>${point.y}%</b>'
|
||||
},
|
||||
legendSettings: { enableHighlight: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
@ -91,9 +92,9 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, ScatterSeries, RadarSeries)
|
|||
chart.series[0].type = <ChartDrawType>polarType.value;
|
||||
chart.series[1].type = <ChartDrawType>polarType.value;
|
||||
chart.series[2].type = <ChartDrawType>polarType.value;
|
||||
chart.series[0].animation.enable = true;
|
||||
chart.series[1].animation.enable = true;
|
||||
chart.series[2].animation.enable = true;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[1].animation.enable = false;
|
||||
chart.series[2].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the polar series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, Tooltip, Legend, PolarSeries, Category, SplineSeries, RadarSeries, ChartDrawType, ILoadedEventArgs,
|
||||
ChartTheme
|
||||
ChartTheme, Highlight
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, SplineSeries, RadarSeries);
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, SplineSeries, RadarSeries, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Polar Series with DrawType Spline
|
||||
|
|
@ -76,6 +76,7 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, SplineSeries, RadarSeries);
|
|||
tooltip: {
|
||||
enable: true
|
||||
},
|
||||
legendSettings: { enableHighlight: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
|
|
|
|||
|
|
@ -23,16 +23,14 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates polar series with stacking area type for GDP of different countries in recent years. The switching between polar and radar series can be done by using <code>Series Type</code> in property panel.
|
||||
This sample shows GDP growth of various countries for a few years in the polar and radar charts using the stacked area series.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the stacking area type charts. Stacks the series on top of another
|
||||
series to avoid the overlapping of series with one another, when rendering more than one area series in same chart.
|
||||
You can use <code>fill</code> properties to customize the stacked area. <code>dataLabel</code> is used to
|
||||
represent individual data and its value.
|
||||
</p><br>
|
||||
In this example, you can see how to render and configure polar and radar charts with stacking area series. Switching between polar and radar series can be done using Series Type in the property panel.
|
||||
</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><br>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use stacking area drawtype in Polar series
|
||||
|
|
@ -41,7 +39,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Numeric axis can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, Tooltip, Legend, PolarSeries, Category, StackingAreaSeries, RadarSeries, ChartDrawType, ILoadedEventArgs, ChartTheme
|
||||
Chart, Tooltip, Legend, PolarSeries, Category, StackingAreaSeries, RadarSeries, ChartDrawType, ILoadedEventArgs, ChartTheme, Highlight
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, StackingAreaSeries, RadarSeries);
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, StackingAreaSeries, RadarSeries, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Polar Series with DrawType StackingArea
|
||||
|
|
@ -16,7 +16,7 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, StackingAreaSeries, RadarSe
|
|||
{ x: 'JPN', text: 'Japan', y: 5156, y1: 4849, y2: 4382, y3: 4939 },
|
||||
{ x: 'DEU', text: 'Germany', y: 3754, y1: 3885, y2: 3365, y3: 3467 },
|
||||
{ x: 'FRA', text: 'France', y: 2809, y1: 2844, y2: 2420, y3: 2463 },
|
||||
{ x: 'GBR', text: 'UK', y: 2721, y1: 3002, y2: 2863, y3: 2629 },
|
||||
{ x: 'GBR', text: Browser.isDevice ? 'UK' : 'United Kingdom', y: 2721, y1: 3002, y2: 2863, y3: 2629 },
|
||||
{ x: 'BRA', text: 'Brazil', y: 2472, y1: 2456, y2: 1801, y3: 1799 },
|
||||
{ x: 'RUS', text: 'Russia', y: 2231, y1: 2064, y2: 1366, y3: 1281 },
|
||||
{ x: 'ITA', text: 'Italy', y: 2131, y1: 2155, y2: 1826, y3: 1851 },
|
||||
|
|
@ -38,32 +38,32 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, StackingAreaSeries, RadarSe
|
|||
{
|
||||
type: 'Polar', drawType: 'StackingArea', dataSource: data,
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y', name: '2013'
|
||||
xName: 'text', yName: 'y', name: '2013'
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingArea', dataSource: data,
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y1', name: '2014'
|
||||
xName: 'text', yName: 'y1', name: '2014'
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingArea', dataSource: data,
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y2', name: '2015'
|
||||
xName: 'text', yName: 'y2', name: '2015'
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingArea', dataSource: data,
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y3', name: '2016'
|
||||
xName: 'text', yName: 'y3', name: '2016'
|
||||
},
|
||||
],
|
||||
//Initializing Chart Sample
|
||||
title: 'GDP, Current Prices (in Billions)',
|
||||
legendSettings: {
|
||||
visible: true
|
||||
visible: true, enableHighlight: true
|
||||
},
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true
|
||||
enable: true, header: '', format: '<b>${point.x}</b><br>GDP: <b>${point.y}USD</b>'
|
||||
},
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
@ -84,10 +84,10 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, StackingAreaSeries, RadarSe
|
|||
chart.series[1].type = <ChartDrawType>polarType.value;
|
||||
chart.series[2].type = <ChartDrawType>polarType.value;
|
||||
chart.series[3].type = <ChartDrawType>polarType.value;
|
||||
chart.series[0].animation.enable = true;
|
||||
chart.series[1].animation.enable = true;
|
||||
chart.series[2].animation.enable = true;
|
||||
chart.series[3].animation.enable = true;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[1].animation.enable = false;
|
||||
chart.series[2].animation.enable = false;
|
||||
chart.series[3].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,39 +1,19 @@
|
|||
<div>
|
||||
<div class="col-lg-8 control-section">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<div class="col-lg-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 50%">
|
||||
<div>Series Type:
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 50%;">
|
||||
<div>
|
||||
<select id="SelectSeriesType">
|
||||
<option>Polar</option>
|
||||
<option>Radar</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates polar series with stacking column type. The switching between polar and radar series can be done by using <code>Series Type</code> in property panel.
|
||||
This sample shows a wind rose chart designed using polar and radar charts with a stacking column series. A wind rose chart helps visualize wind patterns, i.e., wind speed and wind direction.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the stacking column type charts. Stacks the points in the series
|
||||
vertically and also you can use <code>stackingGroup</code> property to group the stacking collection based
|
||||
on categories. You can use <code>border</code>, <code>fill</code> properties to customize the vertical bar. <code>dataLabel</code> is used to represent individual data and its value.
|
||||
In this example, you can see how to render and configure the polar and radar charts with a stacking column series. Switching between polar and radar series can be done using Series Type in the property panel.
|
||||
</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"><b>Injecting Module</b></p>
|
||||
|
|
@ -44,7 +24,7 @@
|
|||
</p>
|
||||
<p>
|
||||
More information on the Polar series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype">documentation section</a>.
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/polar-radar/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries, ChartDrawType, ILoadedEventArgs, ChartTheme
|
||||
Chart, Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries, ChartDrawType, ILoadedEventArgs, ChartTheme, Highlight
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries);
|
||||
Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Polar Series with DrawType StackingColumn
|
||||
|
|
@ -42,38 +42,38 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries);
|
|||
series: [
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingColumn', dataSource: data,
|
||||
animation: { enable: true }, border: { color: 'white', width: 1 },
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y', name: '6-9',
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingColumn', dataSource: data,
|
||||
animation: { enable: true }, border: { color: 'white', width: 1 },
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y1', name: '9 -11',
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingColumn', dataSource: data,
|
||||
animation: { enable: true }, border: { color: 'white', width: 1 },
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y2', name: '11-14',
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingColumn', dataSource: data,
|
||||
animation: { enable: true }, border: { color: 'white', width: 1 },
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y3', name: '14-17',
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingColumn', dataSource: data,
|
||||
animation: { enable: true }, border: { color: 'white', width: 1 },
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y4', name: '17 - 20',
|
||||
},
|
||||
{
|
||||
type: 'Polar', drawType: 'StackingColumn', dataSource: data,
|
||||
animation: { enable: true }, border: { color: 'white', width: 1 },
|
||||
animation: { enable: true },
|
||||
xName: 'x', yName: 'y5', name: '23 Above',
|
||||
},
|
||||
],
|
||||
//Initializing Chart Title
|
||||
title: 'Wind Rose Chart',
|
||||
legendSettings: { visible: true },
|
||||
legendSettings: { visible: true, enableHighlight: true },
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: { enable: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
@ -84,25 +84,4 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries);
|
|||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
let polarType: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].type = <ChartDrawType>polarType.value;
|
||||
chart.series[1].type = <ChartDrawType>polarType.value;
|
||||
chart.series[2].type = <ChartDrawType>polarType.value;
|
||||
chart.series[3].type = <ChartDrawType>polarType.value;
|
||||
chart.series[4].type = <ChartDrawType>polarType.value;
|
||||
chart.series[5].type = <ChartDrawType>polarType.value;
|
||||
chart.series[0].animation.enable = true;
|
||||
chart.series[1].animation.enable = true;
|
||||
chart.series[2].animation.enable = true;
|
||||
chart.series[3].animation.enable = true;
|
||||
chart.series[4].animation.enable = true;
|
||||
chart.series[5].animation.enable = true;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
polarType.appendTo('#SelectSeriesType');
|
||||
};
|
||||
|
|
@ -6,6 +6,11 @@
|
|||
</div>
|
||||
<div class="col-lg-3 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr style="height: 50px; text-align: center">
|
||||
<td>
|
||||
<b>Print the chart</b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="button-control" style="height: 50px">
|
||||
<td align='center'>
|
||||
<div>
|
||||
|
|
@ -18,18 +23,18 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates the print feature in chart. By clicking <code>Print</code>, you can print the chart directly from the browser.
|
||||
This sample demonstrates the print option in the charts.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the print. The rendered chart can be printed directly from the browser
|
||||
By clicking the Print button, you can print a chart directly from the browser
|
||||
by calling the public method print.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
More information on the print 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-print/#print">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче