v23.1.36 is released
This commit is contained in:
pipeline
Родитель
a206a6e9bf
Коммит
5b757e3ff6
|
|
@ -72,7 +72,7 @@
|
|||
"ajax",
|
||||
"popup",
|
||||
"treeview",
|
||||
null,
|
||||
"null",
|
||||
"api",
|
||||
"maskedtextbox",
|
||||
"numerictextbox",
|
||||
|
|
@ -176,6 +176,7 @@
|
|||
"workflow",
|
||||
"form-validator",
|
||||
"signature",
|
||||
"multiline-textbox"
|
||||
"multiline-textbox",
|
||||
null
|
||||
]
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-WLQL39J');</script>
|
||||
})(window,document,'script','dataLayer','GTM-W8WD8WN');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<meta charset="utf-8" />
|
||||
<title>Essential JS 2</title>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
<body class='e-view' aria-busy="true">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J"height="0"width="0"style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div hidden id="sync-analytics" data-queue="EJ2 - JavaScript - Demos"></div>
|
||||
<aside id='left-sidebar'>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-samples",
|
||||
"version": "22.1.34",
|
||||
"version": "23.1.36",
|
||||
"description": "Samples for Syncfusion Essential JS 2",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -908,7 +908,8 @@
|
|||
"Samples": {
|
||||
"default":"Default Functionalities",
|
||||
"simplified": "Simplified Mode",
|
||||
"resize": "Ribbon Resizing"
|
||||
"resize": "Ribbon Resizing",
|
||||
"backstage": "Ribbon Backstage"
|
||||
}
|
||||
},
|
||||
"rich-text-editor": {
|
||||
|
|
@ -1273,4 +1274,4 @@
|
|||
"custom-drop-area": "Custom Drop Area"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,12 +95,12 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates rendering <code>Accordion</code> content from external source using <code>Ajax</code> library. The content of panel “Network & Connectivity" is loaded from external element.
|
||||
This sample demonstrates rendering <code>Accordion</code> content from external source using <code>Fetch</code> library. The content of panel “Network & Connectivity" is loaded from external element.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample illustrates the external webpage content loaded inside the Accordion panel by using AJAX library.
|
||||
This sample illustrates the external webpage content loaded inside the Accordion panel by using FETCH library.
|
||||
</p>
|
||||
<p>
|
||||
More information about Accordion can be found in this <a target="_blank" href="https://ej2.syncfusion.com/documentation/accordion/getting-started/">
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Accordion Ajax Sample
|
||||
* Accordion Fetch Sample
|
||||
*/
|
||||
import { Accordion, ExpandEventArgs } from '@syncfusion/ej2-navigations';
|
||||
import { Ajax } from '@syncfusion/ej2-base';
|
||||
import { Fetch } from '@syncfusion/ej2-base';
|
||||
|
||||
let acrdnObj: Accordion;
|
||||
let nestAcrdn: Accordion;
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
let ajax: Ajax = new Ajax('./src/accordion/ajax-content.html', 'GET', true);
|
||||
ajax.send().then();
|
||||
ajax.onSuccess = (data: string): void => {
|
||||
let fetch: Fetch = new Fetch('./src/accordion/fetch-content.html', 'GET', "application/json",);
|
||||
fetch.send().then();
|
||||
fetch.onSuccess = (data: string): void => {
|
||||
//Initialize Accordion component
|
||||
acrdnObj = new Accordion({
|
||||
expandMode: 'Single',
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="control-section">
|
||||
<div class="control-section" style="overflow: auto;">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="gaugeAlign">
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
"name": "AutoComplete",
|
||||
"directory": "auto-complete",
|
||||
"category": "Dropdowns",
|
||||
"type": "update",
|
||||
"ftName": "autocomplete",
|
||||
"samples": [
|
||||
{ "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of the JavaScript autocomplete control with minimum configuration.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "value", "placeholder"] } },
|
||||
{ "url": "grouping-icon", "name": "Grouping and Icons", "description": "This example demonstrates how to group based on the different categories with individual header and icon support using the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["fields", "placeholder"] } },
|
||||
{ "url": "data-binding", "name": "Data Binding", "description": "This example demonstrates how to bind with local data source and fetch data from remote data service in the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"] } },
|
||||
{ "url": "template", "name": "Template", "description": "This example demonstrates how to customize the appearance of each item in the JavaScript autocomplete control pop-up list using template.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "headerTemplate", "itemTemplate", "placeholder", "popupHeight"] } },
|
||||
{ "url": "virtual-scroll", "name": "Virtualization", "type": "new", "description": "This example demonstrates how to use virtualization support of the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "enableVirtualization", "placeholder"] } },
|
||||
{ "url": "highlight", "name": "Highlight", "description": "This example demonstrates how to highlight the searched characters in the suggested list items of the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "highlight", "placeholder"] } },
|
||||
{ "url": "custom-filtering", "name": "Custom Filtering", "description": "This example demonstrates how to achieve the custom filtering functionalities in the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "filtering", "fields", "placeholder"] } },
|
||||
{ "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This example demonstrates how to achieve the diacritics filter functionalities in the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "ignoreAccent", "placeholder"] } }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div class="control-wrapper">
|
||||
<div style='padding-top:70px;'>
|
||||
<input type="text" id="data" tabindex="1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This example demonstrates the virtualization support of the AutoComplete. The component has 150 items bound to it; however, when you open the suggestion list, only few items are loaded based on the popup height, and the remaining items are loaded while scrolling.</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>The <code>AutoComplete</code> component supports virtualization, which improves UI performance for large amounts of data. To enable virtualization, set the <code>enableVirtualization</code> property to true. When virtualization is enabled, AutoComplete doesn't render the entire suggestion data source on initial component rendering. It loads the N number of items in the popup on initial rendering and the remaining set number of items will load while scrolling.
|
||||
Virtualization works with both local and remote data.</p>
|
||||
<p>To perform the virtualization feature in AutoComplete, the <code>VirtualSCroll</code> module
|
||||
have to be injected in the application end.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.control-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* AutoComplete Default functionality Sample
|
||||
*/
|
||||
import { AutoComplete, VirtualScroll } from '@syncfusion/ej2-dropdowns';
|
||||
import * as data from './dataSource.json';
|
||||
|
||||
AutoComplete.Inject(VirtualScroll);
|
||||
|
||||
let records: { [key: string]: Object }[] = [];
|
||||
|
||||
for (let i = 1; i <= 150; i++) {
|
||||
const item: { [key: string]: Object } = {
|
||||
id: 'id' + i,
|
||||
text: `Item ${i}`,
|
||||
};
|
||||
records.push(item);
|
||||
}
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
// initialize AutoComplete component
|
||||
let atcObj: AutoComplete = new AutoComplete({
|
||||
//set the local data to dataSource property
|
||||
dataSource: records,
|
||||
popupHeight: '200px',
|
||||
//enable the virtualization property
|
||||
enableVirtualization: true,
|
||||
fields: { text: 'text', value: 'text' },
|
||||
// set the placeholder to AutoComplete input element
|
||||
placeholder: 'e.g. Item 1'
|
||||
});
|
||||
atcObj.appendTo('#data');
|
||||
};
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
.e-btngrp-underline::before {
|
||||
content: '\e703';
|
||||
}
|
||||
/* custom code start */
|
||||
|
||||
.button-group-section {
|
||||
width: 320px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -139,5 +139,5 @@
|
|||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
/* custom code end */
|
||||
|
||||
</style>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
|
||||
<style>
|
||||
/* CheckBox Styles */
|
||||
.checkbox-control {
|
||||
|
|
@ -67,4 +67,3 @@
|
|||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
|
||||
<style>
|
||||
/* RadioButton Styles */
|
||||
.radio-control {
|
||||
|
|
@ -67,4 +67,3 @@
|
|||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -61,22 +61,12 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates filter and search of the
|
||||
<code>card</code> based on categories, and text containing the card. You can use search box to search cards, and you can
|
||||
filter choosing categories in multi-select component.
|
||||
The "Tile View" example in the JavaScript <code>card</code> Control showcases the functionality of filtering and searching cards based on categories and text content. In this sample, you can utilize the search box to search for specific cards, and you can apply filters by selecting categories from the multi-select component.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Card is a small container in which user can show defined content in specific structure and it is flexible and extensible.
|
||||
This sample demonstrates to render the
|
||||
<code>Card</code> Using
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/common/template-engine/"> Template Engine</a> and it can be filtered based on
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/data/getting-started/">
|
||||
data Manager</a>.
|
||||
<p> More information about Card can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/card/getting-started/">
|
||||
documentation</a> section. </p>
|
||||
A card is a small container that allows users to display defined content in a specific structure. It provides a flexible and extensible way to present information or data. In this sample, the <code>Card</code> is rendered using the <a target="_blank" href="https://ej2.syncfusion.com/documentation/common/template-engine/"> Template Engine</a>, which enables you to customize the appearance and layout of the cards according to your needs. Additionally, the cards can be filtered based on the <a target="_blank" href="https://ej2.syncfusion.com/documentation/data/getting-started/">data Manager</a>, allowing you to dynamically update the cards based on specific criteria or data changes. This enhances the functionality and interactivity of the card control. <p>For more detailed information about the Card control and its capabilities, you can refer to this <a target="_blank" href="https://ej2.syncfusion.com/documentation/card/getting-started/">documentation</a> section. This documentation provides comprehensive details, examples, and guidance on how to effectively utilize the Card control in your JavaScript applications.</p>
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<div class="control-section indicator-type-section">
|
||||
<div class="col-lg-12 content-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 carousel-sample">
|
||||
<h4>Default Indicator</h4>
|
||||
<div id="default-carousel"></div>
|
||||
</div>
|
||||
<div class="col-lg-6 carousel-sample">
|
||||
<h4>Dynamic Indicator</h4>
|
||||
<div id="dynamic-carousel"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 carousel-sample">
|
||||
<h4>Fraction Indicator</h4>
|
||||
<div id="fraction-carousel"></div>
|
||||
</div>
|
||||
<div class="col-lg-6 carousel-sample">
|
||||
<h4>Progress Indicator</h4>
|
||||
<div id="progress-carousel"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.indicator-type-section .carousel-sample {
|
||||
margin: -0.5em 0 5.6em 0;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.indicator-type .e-carousel-items .e-carousel-item .img-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.indicator-type.e-carousel .e-progress {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.indicator-type.e-carousel .e-next-icon::before,
|
||||
.indicator-type.e-carousel .e-previous-icon::before {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.indicator-type {
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
|
||||
.indicator-type .e-slide {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: 4em;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.indicator-type.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar:not(.e-active),
|
||||
.indicator-type.e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar:not(.e-active) div {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.indicator-type.e-carousel .e-carousel-indicators.e-fraction .e-indicator-bars {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.indicator-type.e-carousel .e-carousel-items .e-carousel-item {
|
||||
background-color: #f9f8f8;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.indicator-type-section .carousel-sample {
|
||||
margin: 5em 0;
|
||||
}
|
||||
|
||||
.indicator-type-section .row {
|
||||
margin-top: -5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the types of indicators in the <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript Carousel</a> component.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>In this demo, the available types of indicators of JavaScript Carousel are showcased. They are <code>default</code>, <code>dynamic</code>, <code>progress</code> and <code>fraction</code>, and can be set using the <strong>indicatorsType</strong> property. </p>
|
||||
<p><code>Default</code> - The Carousel displays indicators with a bullet design.</p>
|
||||
<p><code>Dynamic</code> - The Carousel applies dynamic animation to the indicators.</p>
|
||||
<p><code>Fraction</code> - The Carousel displays slides numerically as indicators.</p>
|
||||
<p><code>Progress</code> - The Carousel displays indicators like a progress bar.</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Carousel } from '@syncfusion/ej2-navigations';
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
const defaultCarouselObj: Carousel = new Carousel({
|
||||
cssClass: 'indicator-type',
|
||||
items: [
|
||||
{ template: '<div class="e-slide">Slide 1</div>' },
|
||||
{ template: '<div class="e-slide">Slide 2</div>' },
|
||||
{ template: '<div class="e-slide">Slide 3</div>' },
|
||||
{ template: '<div class="e-slide">Slide 4</div>' },
|
||||
{ template: '<div class="e-slide">Slide 5</div>' }
|
||||
],
|
||||
indicatorsType: "Default",
|
||||
autoPlay: false
|
||||
});
|
||||
defaultCarouselObj.appendTo('#default-carousel');
|
||||
|
||||
const dynamicCarouselObj: Carousel = new Carousel({
|
||||
cssClass: 'indicator-type',
|
||||
items: [
|
||||
{ template: '<div class="e-slide">Slide 1</div>' },
|
||||
{ template: '<div class="e-slide">Slide 2</div>' },
|
||||
{ template: '<div class="e-slide">Slide 3</div>' },
|
||||
{ template: '<div class="e-slide">Slide 4</div>' },
|
||||
{ template: '<div class="e-slide">Slide 5</div>' }
|
||||
],
|
||||
indicatorsType: "Dynamic",
|
||||
autoPlay: false
|
||||
});
|
||||
dynamicCarouselObj.appendTo('#dynamic-carousel');
|
||||
|
||||
const fractionCarouselObj: Carousel = new Carousel({
|
||||
cssClass: 'indicator-type',
|
||||
items: [
|
||||
{ template: '<div class="e-slide">Slide 1</div>' },
|
||||
{ template: '<div class="e-slide">Slide 2</div>' },
|
||||
{ template: '<div class="e-slide">Slide 3</div>' },
|
||||
{ template: '<div class="e-slide">Slide 4</div>' },
|
||||
{ template: '<div class="e-slide">Slide 5</div>' }
|
||||
],
|
||||
indicatorsType: "Fraction",
|
||||
autoPlay: false
|
||||
});
|
||||
fractionCarouselObj.appendTo('#fraction-carousel');
|
||||
|
||||
const progressCarouselObj: Carousel = new Carousel({
|
||||
cssClass: 'indicator-type',
|
||||
items: [
|
||||
{ template: '<div class="e-slide">Slide 1</div>' },
|
||||
{ template: '<div class="e-slide">Slide 2</div>' },
|
||||
{ template: '<div class="e-slide">Slide 3</div>' },
|
||||
{ template: '<div class="e-slide">Slide 4</div>' },
|
||||
{ template: '<div class="e-slide">Slide 5</div>' }
|
||||
],
|
||||
indicatorsType: "Progress",
|
||||
autoPlay: false
|
||||
});
|
||||
progressCarouselObj.appendTo('#progress-carousel');
|
||||
};
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "carousel",
|
||||
"category": "Navigation",
|
||||
"ftName": "carousel",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -71,7 +70,6 @@
|
|||
"url": "indicator-type",
|
||||
"name": "Indicator Type",
|
||||
"category": "Carousel",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Carousel": [
|
||||
"indicatorsType",
|
||||
|
|
@ -120,4 +118,4 @@
|
|||
"description": "This example showcase the available APIs and its functionalities in Syncfusion JavaScript Carousel component."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ Chart.Inject(
|
|||
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
mode: 'X',
|
||||
enablePan: true
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ Chart.Inject(
|
|||
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
mode: 'X',
|
||||
enablePan: true
|
||||
},
|
||||
tooltip: {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ Chart.Inject(
|
|||
zoomSettings: {
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
mode: 'X',
|
||||
enablePan: true
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
|
|
|
|||
|
|
@ -3,7 +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';
|
||||
import { bubbleFabricColors, pointFabricColors, pointMaterialDarkColors, bubbleMaterialDarkColors, bubbleMaterialColors, pointMaterialColors, bubbleBootstrap5DarkColors, pointBootstrap5DarkColors, bubbleBootstrap5Colors, pointBootstrap5Colors, bubbleBootstrapColors, pointBootstrapColors, bubbleHighContrastColors, pointHighContrastColors, bubbleFluentDarkColors, pointFluentDarkColors, bubbleFluentColors, pointFluentColors, bubbleTailwindDarkColors, pointTailwindDarkColors, bubbleTailwindColors, pointTailwindColors, pointMaterial3Colors, pointMaterial3DarkColors } from './theme-color';
|
||||
Chart.Inject(Category, BoxAndWhiskerSeries, Tooltip);
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
|
|
@ -53,6 +53,11 @@ import { Browser } from '@syncfusion/ej2/base';
|
|||
args.fill = pointTailwindDarkColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'tailwind') {
|
||||
args.fill = pointTailwindColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'material3') {
|
||||
args.fill = pointMaterial3Colors[args.point.index % 10];
|
||||
}
|
||||
else if (selectedTheme === 'material3-dark') {
|
||||
args.fill = pointMaterial3DarkColors[args.point.index % 10];
|
||||
}
|
||||
};
|
||||
let chart: Chart = new Chart({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the gold medal count from the Rio Olympics using a cylindrical column chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can observe the rendering and configuration of a cylindrical column chart. The cylindrical column chart serves the purpose of comparing the frequency, count, total, or average of data across various categories using a cylindrical shape.
|
||||
</p>
|
||||
<p>
|
||||
Tooltips have been enabled in this example. To experience the tooltip functionality, simply hover over a point or tap on it 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 column series, we need to inject
|
||||
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/Chart-types/column">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ChartTheme, Chart, ColumnSeries, Category, DataLabel, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, DataLabel, Category, Tooltip );
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Sample for Cylindrical Column Series
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }, labelIntersectAction: Browser.isDevice ? 'None' : 'Trim', labelRotation: Browser.isDevice ? -45 : 0, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: { border: { width: 0 }},
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Medal Count', majorTickLines: { width: 0 }, lineStyle: { width: 0 }, maximum: 50, interval: 10
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Column', columnFacet: 'Cylinder', xName: 'x', width: 2, yName: 'y', columnSpacing: 0.1, tooltipMappingName:'tooltipMappingName',
|
||||
dataSource: [{ x: 'China', y: 26 , tooltipMappingName:'China' }, { x: 'Australia', y: 8, tooltipMappingName:'Australia'}, { x: 'Germany', y: 17, tooltipMappingName:'Germany' }, { x: 'Spain', y: 7, tooltipMappingName:'Spain' }, { x: 'Japan', y: 12, tooltipMappingName:'Japan' }, { x: 'USA', y: 46, tooltipMappingName:'United States' }]
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
title: 'Olympic Gold Medal Counts - RIO', tooltip: { enable: true, header:"<b>${point.tooltip}</b>", format:"Gold Medal: <b>${point.y}</b>" },
|
||||
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');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -10,8 +10,6 @@
|
|||
|
||||
<div id="description">
|
||||
<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>
|
||||
Chart component features are segregated into individual feature-wise modules. To use data editing, we need to inject
|
||||
|
|
|
|||
|
|
@ -80,10 +80,6 @@ Chart.Inject(LineSeries, ColumnSeries, Category, Legend, Tooltip, DateTime, Data
|
|||
],
|
||||
//Initializing Chart title
|
||||
title: 'Electricity - Production',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '75%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
let clickInstance: AccumulationChartModel = {
|
||||
series: [{
|
||||
type: 'Pie', dataSource: suvs, xName: 'x', yName: 'y',
|
||||
dataLabel: { visible: true, position: Browser.isDevice ? 'Inside' : 'Outside', enableRotation:true, connectorStyle: { type: 'Curve' , length: '20px'}}, innerRadius: '30%',
|
||||
dataLabel: { visible: true, font: { fontWeight: '600' }, position: Browser.isDevice ? 'Inside' : 'Outside', enableRotation:true, connectorStyle: { type: 'Curve' , length: '20px'}}, innerRadius: '30%',
|
||||
}
|
||||
], textRender: (args: IAccTextRenderEventArgs) => {
|
||||
args.text = args.point.x + ' ' + args.point.y + ' %';
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ Chart.Inject(ColumnSeries, Category, Legend, Tooltip, SplineSeries, AreaSeries);
|
|||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', labelRotation: Browser.isDevice ? -45 : 0, majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 }
|
||||
minorTickLines: { width: 0 }, title: 'Product'
|
||||
},
|
||||
primaryYAxis:
|
||||
{
|
||||
minimum: 0, maximum: 100, interval: 20, labelFormat: '{value}%'
|
||||
minimum: 0, maximum: 100, interval: 20, labelFormat: '{value}%', title: 'Profit'
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
|
|
|
|||
|
|
@ -5,19 +5,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left: -10px;">
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 40%">
|
||||
<div>Export Type:
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 60%;">
|
||||
<td style="width: 80%;">
|
||||
<div style="margin-left: -10px">
|
||||
<select id="mode">
|
||||
<option value='JPEG'>JPEG</option>
|
||||
<option value='PNG'>PNG</option>
|
||||
<option value='SVG'>SVG</option>
|
||||
<option value='PDF'>PDF</option>
|
||||
<option value='XLSX'>XLSX</option>
|
||||
<option value='CSV'>CSV</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -28,13 +30,13 @@
|
|||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div class="e-float-input" style='margin-top: 0px;'>
|
||||
<input type="text" value="Chart" id="fileName" style="margin-left: -10px">
|
||||
<input type="text" value="Chart" id="fileName" style="margin-left: -10px; width: 90px">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="button-control" style="height: 50px" align='center'>
|
||||
<td>
|
||||
<div>
|
||||
<div style="margin-left:50%;">
|
||||
<button id="togglebtn">Export</button>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -44,15 +46,17 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This example demonstrates how to save the chart as a PDF file and in image formats including JPEG, PNG, and SVG.
|
||||
This sample demonstrates client-side exporting of the chart, enabling you to export its data to Excel, PDF, and CSV formats. Additionally, it allows you to save the chart in image formats such as JPEG, PNG, and SVG.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the export. The rendered chart can be exported as either JPEG,
|
||||
PNG and SVG format. It can be achieved using Blob and it's supported only in modern browsers.
|
||||
In this example, you can see how the export functionality is configured. The rendered chart can be exported in JPEG, PNG, SVG, and PDF file types. Data from the chart can also be exported to Excel and CSV files.
|
||||
</p>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use export, we need to inject <code>Export</code> module using <code>Chart.Inject(Export)</code> method.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
More information on the export can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/chart-print/#export">documentation section</a>.
|
||||
|
|
|
|||
|
|
@ -53,8 +53,7 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Measurements (in Gigawatt)',
|
||||
labelFormat: Browser.isDevice ? '{value}' : '{value}GW',
|
||||
labelFormat: '{value}GW',
|
||||
minimum: 0,
|
||||
maximum: 40,
|
||||
interval: 10,
|
||||
|
|
@ -66,6 +65,7 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
series: [
|
||||
{
|
||||
type: 'Column',
|
||||
name: 'Measurements (in Gigawatt)',
|
||||
dataSource: [
|
||||
{ x: "India", y: 35.5, text: Browser.isDevice ? "35.5" : "35.5GW" },
|
||||
{ x: "China", y: 18.3, text: Browser.isDevice ? "18.3" : "18.3GW" },
|
||||
|
|
@ -84,6 +84,7 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
],
|
||||
//Initializing Chart title
|
||||
title: 'Top 10 Countries Using Solar Power',
|
||||
legendSettings: { visible: false },
|
||||
width: '95%',
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
@ -101,7 +102,7 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
});
|
||||
mode.appendTo('#mode');
|
||||
let togglebtn: Button = new Button({
|
||||
iconCss: 'e-icons e-export-icon', cssClass: 'e-flat', isPrimary: true,
|
||||
iconCss: 'e-icons e-export icon', isPrimary: true,
|
||||
});
|
||||
togglebtn.appendTo('#togglebtn');
|
||||
document.getElementById('togglebtn').onclick = () => {
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -29,7 +29,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
majorGridLines: { width: 0 }, title: 'Score of Final Examination',
|
||||
minimum: 0, maximum: 100, edgeLabelPlacement: 'Shift', interval: Browser.isDevice ? 10 : 5,
|
||||
minimum: 0, maximum: 100, edgeLabelPlacement: 'Shift'
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
legendSettings: { visible: false },
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ Chart.Inject(DateTime, ScrollBar, Zoom, LineSeries, Tooltip);
|
|||
chart.primaryXAxis.valueType = 'DateTime';
|
||||
min = chart.primaryXAxis.scrollbarSettings.range.minimum = new Date(2009, 0, 1);
|
||||
max = chart.primaryXAxis.scrollbarSettings.range.maximum = new Date(2014, 0, 1);
|
||||
chart.series[0].dataSource = GetDateTimeData(min, max);
|
||||
chart.series[0].dataSource = GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1));
|
||||
chart.refresh();
|
||||
minDate.enabled = true;
|
||||
maxDate.enabled = true;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
rangePadding: 'None',
|
||||
rangePadding: 'None', title: 'Penetration',
|
||||
labelFormat: '{value}%', minimum: 0,
|
||||
lineStyle: { width: 0 },majorTickLines: { width: 0 },
|
||||
maximum: 75, interval: 15
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ Chart.Inject(
|
|||
enablePan: true,
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
mode: 'X',
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ Chart.Inject(
|
|||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
labelFormat: '${value}',
|
||||
plotOffset: 25,
|
||||
plotOffset: 25, minimum: 50,
|
||||
maximum: 170, majorTickLines: { width: 0 },
|
||||
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
|
||||
},
|
||||
|
|
@ -43,7 +43,7 @@ Chart.Inject(
|
|||
axes: [{
|
||||
name: 'secondary',
|
||||
opposedPosition: true, rowIndex: 0,
|
||||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3,
|
||||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -3.5, maximum: 3.5, interval: 3.5,
|
||||
majorTickLines: { width: 0 }, title: 'MACD', stripLines: [
|
||||
{
|
||||
start: -3.5, end: 3.5, text: '', color: '#000000', visible: true,
|
||||
|
|
@ -77,7 +77,7 @@ Chart.Inject(
|
|||
enablePan: true,
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
mode: 'X',
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
Chart.Inject(StackingBarSeries, DataLabel, Category, Legend, Tooltip, Highlight);
|
||||
|
||||
/**
|
||||
* Sample for Tornado sample
|
||||
* Sample for Negative Stack sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
|
@ -27,6 +27,7 @@ Chart.Inject(StackingBarSeries, DataLabel, Category, Legend, Tooltip, Highlight)
|
|||
{
|
||||
labelFormat: '{value}',
|
||||
title: 'Weight (kg)',
|
||||
rangePadding: 'Round',
|
||||
lineStyle: { width: 0 },
|
||||
edgeLabelPlacement: 'Shift'
|
||||
},
|
||||
|
|
@ -84,6 +85,11 @@ Chart.Inject(StackingBarSeries, DataLabel, Category, Legend, Tooltip, Highlight)
|
|||
args.text = args.text.indexOf('-') > 0 ? args.text.replace('-', '') : args.text;
|
||||
args.text = args.text + " " + "<b>kg</b>";
|
||||
},
|
||||
axisLabelRender: function (args) {
|
||||
if (args.value < 0) {
|
||||
args.text = (-args.value).toString();
|
||||
}
|
||||
},
|
||||
legendSettings: {
|
||||
position: Browser.isDevice ? 'Bottom' : 'Right',
|
||||
enableHighlight :true
|
||||
|
|
@ -59,7 +59,7 @@ import { Browser } from '@syncfusion/ej2-base';
|
|||
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');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
|
|
@ -72,8 +72,7 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, ScatterSeries, RadarSeries,
|
|||
title: 'Real GDP Growth',
|
||||
//Initializing User Interaction Tooltip
|
||||
tooltip: {
|
||||
enable: true, header: '',
|
||||
format: '<b>${point.x}</b> <br>GDP: <b>${point.y}%</b>'
|
||||
enable: true, format: '${point.text} : <b>${point.y}%</b>'
|
||||
},
|
||||
legendSettings: { enableHighlight: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<tr id="button-control" style="height: 50px">
|
||||
<td align='center'>
|
||||
<div>
|
||||
<button id="togglebtn">Print</button>
|
||||
<button id="printtogglebtn">Print</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -85,11 +85,11 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
});
|
||||
chart.appendTo('#container');
|
||||
|
||||
let togglebtn: Button = new Button({
|
||||
let printtogglebutton: Button = new Button({
|
||||
iconCss: 'e-icons e-print-icon', cssClass: 'e-flat', isPrimary: true,
|
||||
});
|
||||
togglebtn.appendTo('#togglebtn');
|
||||
document.getElementById('togglebtn').onclick = () => {
|
||||
printtogglebutton.appendTo('#printtogglebtn');
|
||||
document.getElementById('printtogglebtn').onclick = () => {
|
||||
chart.print();
|
||||
};
|
||||
};
|
||||
|
|
@ -69,7 +69,7 @@ Chart.Inject(
|
|||
enablePan: true,
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
mode: 'X',
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "Chart",
|
||||
"directory": "chart",
|
||||
"type":"update",
|
||||
"type": "update",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "chart",
|
||||
"samples": [
|
||||
|
|
@ -398,6 +398,22 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "cylindrical-column",
|
||||
"name": "Cylindrical Column",
|
||||
"type": "new",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the cylindrical column series.",
|
||||
"category": "Bar Charts",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
"primaryYAxis",
|
||||
"series",
|
||||
"tooltip",
|
||||
"legendSettings"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "bar",
|
||||
"name": "Bar",
|
||||
|
|
@ -474,7 +490,7 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"url": "tornado",
|
||||
"url": "negative-stack",
|
||||
"name": "Negative Stack",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the bar charts.",
|
||||
"category": "Bar Charts",
|
||||
|
|
@ -950,7 +966,6 @@
|
|||
"name": "Pareto Chart",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure pareto charts.",
|
||||
"category": "Other Types",
|
||||
"type":"update",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
|
|
@ -1110,7 +1125,6 @@
|
|||
"name": "Lazy Loading",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates the Lazy Loading behavior in chart.",
|
||||
"category": "Data Binding",
|
||||
"type":"update",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
|
|
@ -1227,7 +1241,6 @@
|
|||
{
|
||||
"url": "strip-line",
|
||||
"name": "Stripline",
|
||||
"type": "update",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the strip lines in charts.",
|
||||
"category": "Chart Axes",
|
||||
"api": {
|
||||
|
|
@ -1353,6 +1366,22 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "synchronized-chart",
|
||||
"name": "Synchronized Charts",
|
||||
"type": "new",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the synchronized chart.",
|
||||
"category": "Chart Customization",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
"primaryYAxis",
|
||||
"series",
|
||||
"tooltip",
|
||||
"legendSettings"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "data-label-template",
|
||||
"name": "DataLabel Template",
|
||||
|
|
@ -1448,6 +1477,7 @@
|
|||
{
|
||||
"url": "export",
|
||||
"name": "Export",
|
||||
"type": "update",
|
||||
"description": "This demo for Essential JS2 Chart control shows how to export the charts to Excel, PDF, and image formats such as SVG, JPEG, and PNG at client-side.",
|
||||
"category": "Print and Export",
|
||||
"api": {
|
||||
|
|
@ -1536,7 +1566,6 @@
|
|||
"name": "Zooming and Panning",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates the zooming and panning behavior in chart.",
|
||||
"category": "User Interaction",
|
||||
"type":"update",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ Chart.Inject(
|
|||
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
mode: 'X',
|
||||
enablePan: true
|
||||
},
|
||||
//Initializing Chart Title
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ Chart.Inject(
|
|||
enablePan: true,
|
||||
enableSelectionZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'XY',
|
||||
mode: 'X',
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<div class="control-section">
|
||||
<div class="row">
|
||||
<div class="col" id="container3"></div>
|
||||
<div class="col" id="container4"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" id="container1"></div>
|
||||
<div class="col" id="container2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This example visualizes the history of currency exchange rates using synchronized charts.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This demo showcases the synchronization of multiple charts, with crosshair, tooltip, and zooming functionalities synchronized across the charts. Hover over or zoom in on one chart to observe the corresponding impact on the other charts as well.
|
||||
</p>
|
||||
<p style="font-weight: 500"><b>Injecting Module</b></p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use line series and area series, we need to inject
|
||||
<code>LineSeries</code> and <code>AreaSeries</code> modules using <code>Chart.Inject(LineSeries)</code> and
|
||||
<code>Chart.Inject(AreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the user interaction can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/chart/cross-hair-and-track-ball">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 1px !important;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 50%;
|
||||
margin: 10px;
|
||||
height: 270px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,431 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ChartTheme, Chart, AreaSeries, SplineAreaSeries, LineSeries, SplineSeries, DateTime, DataLabel, Tooltip, Highlight, Crosshair, ILoadedEventArgs, Zoom, ZoomSettings, IZoomCompleteEventArgs, Legend, Selection, ISelectionCompleteEventArgs, IMouseEventArgs, ITooltipRenderEventArgs, ILegendClickEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(AreaSeries, SplineAreaSeries, LineSeries, SplineSeries, DataLabel, DateTime, Tooltip, Zoom, Highlight, Legend, Selection, Crosshair);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { synchronizedData } from './financial-data';
|
||||
import { Axis } from '@syncfusion/ej2/charts';
|
||||
|
||||
let charts: Chart[] = [];
|
||||
let zoomFactor: number = 0;
|
||||
let zoomPosition: number = 0;
|
||||
|
||||
/**
|
||||
* Sample for Synchronized Chart
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
primaryXAxis: {
|
||||
minimum: new Date(2023, 1, 18),
|
||||
maximum: new Date(2023, 7, 18),
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'MMM d',
|
||||
lineStyle: { width: 0 },
|
||||
majorGridLines: { width: 0 },
|
||||
edgeLabelPlacement: Browser.isDevice ? 'None' : 'Shift',
|
||||
labelRotation: Browser.isDevice ? -45 : 0,
|
||||
interval: Browser.isDevice ? 2 : 1
|
||||
},
|
||||
|
||||
primaryYAxis: {
|
||||
labelFormat: 'n2',
|
||||
majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 },
|
||||
minimum: 0.86,
|
||||
maximum: 0.96,
|
||||
interval: 0.025
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'Line', dataSource: synchronizedData, xName: 'USD', width: 2, yName: 'EUR', emptyPointSettings: { mode: 'Drop' }
|
||||
}
|
||||
],
|
||||
zoomSettings: {
|
||||
enableMouseWheelZooming: true,
|
||||
enablePinchZooming: true,
|
||||
enableScrollbar: false,
|
||||
enableDeferredZooming: false,
|
||||
enablePan: true,
|
||||
mode: 'X',
|
||||
toolbarItems: ['Pan', 'Reset']
|
||||
},
|
||||
zoomComplete: (args: IZoomCompleteEventArgs) => {
|
||||
if (args.axis.name === 'primaryXAxis') {
|
||||
zoomFactor = args.currentZoomFactor;
|
||||
zoomPosition = args.currentZoomPosition;
|
||||
zoomCompleteFunction(args);
|
||||
}
|
||||
},
|
||||
chartMouseLeave: (args: IMouseEventArgs) => {
|
||||
chartobj.hideCrosshair();
|
||||
chart3.hideCrosshair();
|
||||
chart4.hideCrosshair();
|
||||
chartobj.hideTooltip();
|
||||
chart3.hideTooltip();
|
||||
chart4.hideTooltip();
|
||||
},
|
||||
chartMouseMove: (args: IMouseEventArgs) => {
|
||||
if ((!Browser.isDevice && !chart.isTouch && !chart.isChartDrag) || chart.startMove) {
|
||||
chartobj.startMove = chart3.startMove = chart4.startMove = chart.startMove;
|
||||
chartobj.showTooltip(args.x, args.y);
|
||||
chart3.showTooltip(args.x, args.y);
|
||||
chart4.showTooltip(args.x, args.y);
|
||||
chartobj.showCrosshair(args.x, args.y);
|
||||
chart3.showCrosshair(args.x, args.y);
|
||||
chart4.showCrosshair(args.x, args.y);
|
||||
}
|
||||
},
|
||||
chartMouseUp: function (args: IMouseEventArgs) {
|
||||
if (Browser.isDevice && chart.startMove) {
|
||||
chartobj.hideCrosshair();
|
||||
chart3.hideCrosshair();
|
||||
chart4.hideCrosshair();
|
||||
chartobj.hideTooltip();
|
||||
chart3.hideTooltip();
|
||||
chart4.hideTooltip();
|
||||
}
|
||||
},
|
||||
title: 'US to EURO',
|
||||
titleStyle: { textAlignment: 'Near' },
|
||||
tooltip: { enable: true, fadeOutDuration: Browser.isDevice ? 2500 : 1000, shared: true, header: '', format: '<b>€${point.y}</b> <br> ${point.x} 2023', enableMarker: false },
|
||||
crosshair: { enable: true, lineType: 'Vertical', dashArray: '2,2' },
|
||||
load: load
|
||||
});
|
||||
chart.appendTo('#container3');
|
||||
charts.push(chart);
|
||||
let chartobj: Chart = new Chart({
|
||||
primaryXAxis: {
|
||||
minimum: new Date(2023, 1, 18),
|
||||
maximum: new Date(2023, 7, 18),
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'MMM d',
|
||||
lineStyle: { width: 0 },
|
||||
majorGridLines: { width: 0 },
|
||||
edgeLabelPlacement: Browser.isDevice ? 'None' : 'Shift',
|
||||
labelRotation: Browser.isDevice ? -45 : 0,
|
||||
interval: Browser.isDevice ? 2 : 1
|
||||
},
|
||||
|
||||
primaryYAxis: {
|
||||
labelFormat: '{value}',
|
||||
majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 },
|
||||
minimum: 120,
|
||||
maximum: 152,
|
||||
interval: 8,
|
||||
labelPadding: 8
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
series: [
|
||||
{
|
||||
type: 'Line', dataSource: synchronizedData, xName: 'USD', width: 2, yName: 'JPY'
|
||||
}
|
||||
],
|
||||
zoomSettings: {
|
||||
enableMouseWheelZooming: true,
|
||||
enablePinchZooming: true,
|
||||
enableScrollbar: false,
|
||||
enableDeferredZooming: false,
|
||||
enablePan: true,
|
||||
mode: 'X',
|
||||
toolbarItems: ['Pan', 'Reset']
|
||||
},
|
||||
zoomComplete: (args: IZoomCompleteEventArgs) => {
|
||||
if (args.axis.name === 'primaryXAxis') {
|
||||
zoomFactor = args.currentZoomFactor;
|
||||
zoomPosition = args.currentZoomPosition;
|
||||
zoomCompleteFunction(args);
|
||||
}
|
||||
},
|
||||
chartMouseMove: (args: IMouseEventArgs) => {
|
||||
if ((!Browser.isDevice && !chartobj.isTouch && !chart.isChartDrag) || chartobj.startMove) {
|
||||
chart.startMove = chart3.startMove = chart4.startMove = chartobj.startMove;
|
||||
chart.showTooltip(args.x, args.y);
|
||||
chart3.showTooltip(args.x, args.y);
|
||||
chart4.showTooltip(args.x, args.y);
|
||||
chart.showCrosshair(args.x, args.y);
|
||||
chart3.showCrosshair(args.x, args.y);
|
||||
chart4.showCrosshair(args.x, args.y);
|
||||
}
|
||||
},
|
||||
chartMouseLeave: (args: IMouseEventArgs) => {
|
||||
chart.hideCrosshair();
|
||||
chart3.hideCrosshair();
|
||||
chart4.hideCrosshair();
|
||||
chart.hideTooltip();
|
||||
chart3.hideTooltip();
|
||||
chart4.hideTooltip();
|
||||
},
|
||||
chartMouseUp: function (args: IMouseEventArgs) {
|
||||
if (Browser.isDevice && chartobj.startMove) {
|
||||
chart.hideCrosshair();
|
||||
chart3.hideCrosshair();
|
||||
chart4.hideCrosshair();
|
||||
chart.hideTooltip();
|
||||
chart3.hideTooltip();
|
||||
chart4.hideTooltip();
|
||||
}
|
||||
},
|
||||
title: 'US to Yen',
|
||||
titleStyle: { textAlignment: 'Near' },
|
||||
tooltip: { enable: true, fadeOutDuration: Browser.isDevice ? 2500 : 1000, shared: true, header: '', format: '<b>¥${point.y}</b> <br> ${point.x} 2023', enableMarker: false },
|
||||
crosshair: { enable: true, lineType: 'Vertical', dashArray: '2,2' },
|
||||
load: load
|
||||
});
|
||||
chartobj.appendTo('#container4');
|
||||
charts.push(chartobj);
|
||||
let chart3: Chart = new Chart({
|
||||
primaryXAxis: {
|
||||
minimum: new Date(2023, 1, 18),
|
||||
maximum: new Date(2023, 7, 18),
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'MMM d',
|
||||
lineStyle: { width: 0 },
|
||||
majorGridLines: { width: 0 },
|
||||
edgeLabelPlacement: Browser.isDevice ? 'None' : 'Shift',
|
||||
labelRotation: Browser.isDevice ? -45 : 0,
|
||||
interval: Browser.isDevice ? 2 : 1
|
||||
},
|
||||
primaryYAxis: {
|
||||
labelFormat: 'n2',
|
||||
majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 },
|
||||
minimum: 1.30,
|
||||
maximum: 1.37,
|
||||
interval: 0.0175
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
series: [
|
||||
{
|
||||
type: 'Area', dataSource: synchronizedData, xName: 'USD', width: 2, yName: 'SGD', opacity: 0.6, border: { width: 2 }
|
||||
}
|
||||
],
|
||||
zoomSettings: {
|
||||
enableMouseWheelZooming: true,
|
||||
enablePinchZooming: true,
|
||||
enableScrollbar: false,
|
||||
enableDeferredZooming: false,
|
||||
enablePan: true,
|
||||
mode: 'X',
|
||||
toolbarItems: ['Pan', 'Reset']
|
||||
},
|
||||
zoomComplete: (args: IZoomCompleteEventArgs) => {
|
||||
if (args.axis.name === 'primaryXAxis') {
|
||||
zoomFactor = args.currentZoomFactor;
|
||||
zoomPosition = args.currentZoomPosition;
|
||||
zoomCompleteFunction(args);
|
||||
}
|
||||
},
|
||||
chartMouseMove: (args: IMouseEventArgs) => {
|
||||
if ((!Browser.isDevice && !chart3.isTouch && !chart3.isChartDrag) || chart3.startMove) {
|
||||
chart.startMove = chartobj.startMove = chart4.startMove = chart3.startMove;
|
||||
chart.showTooltip(args.x, args.y);
|
||||
chartobj.showTooltip(args.x, args.y);
|
||||
chart4.showTooltip(args.x, args.y);
|
||||
chart.showCrosshair(args.x, args.y);
|
||||
chartobj.showCrosshair(args.x, args.y);
|
||||
chart4.showCrosshair(args.x, args.y);
|
||||
}
|
||||
},
|
||||
chartMouseLeave: (args: IMouseEventArgs) => {
|
||||
chartobj.hideCrosshair();
|
||||
chart.hideCrosshair();
|
||||
chart4.hideCrosshair();
|
||||
chartobj.hideTooltip();
|
||||
chart.hideTooltip();
|
||||
chart4.hideTooltip();
|
||||
},
|
||||
chartMouseUp: function (args: IMouseEventArgs) {
|
||||
if (Browser.isDevice && chart3.startMove) {
|
||||
chart.hideCrosshair();
|
||||
chartobj.hideCrosshair();
|
||||
chart4.hideCrosshair();
|
||||
chart.hideTooltip();
|
||||
chartobj.hideTooltip();
|
||||
chart4.hideTooltip();
|
||||
}
|
||||
},
|
||||
title: 'US to SGD',
|
||||
titleStyle: { textAlignment: 'Near' },
|
||||
tooltip: { enable: true, fadeOutDuration: Browser.isDevice ? 2500 : 1000, shared: true, header: '', format: '<b>$${point.y}</b> <br> ${point.x} 2023', enableMarker: false },
|
||||
crosshair: { enable: true, lineType: 'Vertical', dashArray: '2,2' },
|
||||
load: load
|
||||
});
|
||||
chart3.appendTo('#container1');
|
||||
charts.push(chart3);
|
||||
let chart4: Chart = new Chart({
|
||||
primaryXAxis: {
|
||||
minimum: new Date(2023, 1, 18),
|
||||
maximum: new Date(2023, 7, 18),
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'MMM d',
|
||||
lineStyle: { width: 0 },
|
||||
majorGridLines: { width: 0 },
|
||||
edgeLabelPlacement: Browser.isDevice ? 'None' : 'Shift',
|
||||
labelRotation: Browser.isDevice ? -45 : 0,
|
||||
interval: Browser.isDevice ? 2 : 1
|
||||
},
|
||||
primaryYAxis: {
|
||||
labelFormat: 'n1',
|
||||
majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 },
|
||||
minimum: 79,
|
||||
maximum: 85,
|
||||
interval: 1.5
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
series: [
|
||||
{
|
||||
type: 'Area', dataSource: synchronizedData, xName: 'USD', width: 2, yName: 'INR', opacity: 0.6, border: { width: 2 }
|
||||
}
|
||||
],
|
||||
zoomSettings: {
|
||||
enableMouseWheelZooming: true,
|
||||
enablePinchZooming: true,
|
||||
enableScrollbar: false,
|
||||
enableDeferredZooming: false,
|
||||
enablePan: true,
|
||||
mode: 'X',
|
||||
toolbarItems: ['Pan', 'Reset']
|
||||
},
|
||||
zoomComplete: (args: IZoomCompleteEventArgs) => {
|
||||
if (args.axis.name === 'primaryXAxis') {
|
||||
zoomFactor = args.currentZoomFactor;
|
||||
zoomPosition = args.currentZoomPosition;
|
||||
zoomCompleteFunction(args);
|
||||
}
|
||||
},
|
||||
chartMouseMove: (args: IMouseEventArgs) => {
|
||||
if (!Browser.isDevice || chart4.startMove) {
|
||||
chart.startMove = chartobj.startMove = chart3.startMove = chart4.startMove;
|
||||
chart.showTooltip(args.x, args.y);
|
||||
chartobj.showTooltip(args.x, args.y);
|
||||
chart3.showTooltip(args.x, args.y);
|
||||
chart.showCrosshair(args.x, args.y);
|
||||
chartobj.showCrosshair(args.x, args.y);
|
||||
chart3.showCrosshair(args.x, args.y);
|
||||
}
|
||||
},
|
||||
chartMouseLeave: (args: IMouseEventArgs) => {
|
||||
chartobj.hideCrosshair();
|
||||
chart3.hideCrosshair();
|
||||
chart.hideCrosshair();
|
||||
chartobj.hideTooltip();
|
||||
chart3.hideTooltip();
|
||||
chart.hideTooltip();
|
||||
},
|
||||
chartMouseUp: function (args: IMouseEventArgs) {
|
||||
if ((!Browser.isDevice && !chart4.isTouch && !chart4.isChartDrag) || chart4.startMove) {
|
||||
chart.hideCrosshair();
|
||||
chartobj.hideCrosshair();
|
||||
chart3.hideCrosshair();
|
||||
chart.hideTooltip();
|
||||
chartobj.hideTooltip();
|
||||
chart3.hideTooltip();
|
||||
}
|
||||
},
|
||||
title: 'US to INR',
|
||||
titleStyle: { textAlignment: 'Near' },
|
||||
tooltip: { enable: true, fadeOutDuration: Browser.isDevice ? 2500 : 1000, shared: true, header: '', format: '<b>₹${point.y}</b> <br> ${point.x} 2023', enableMarker: false },
|
||||
crosshair: { enable: true, lineType: 'Vertical', dashArray: '2,2' },
|
||||
load: load
|
||||
});
|
||||
chart4.appendTo('#container2');
|
||||
charts.push(chart4);
|
||||
function zoomCompleteFunction(args: IZoomCompleteEventArgs): void {
|
||||
for (let i: number = 0; i < charts.length; i++) {
|
||||
if ((args.axis as Axis).series[0].chart.element.id !== charts[i].element.id) {
|
||||
charts[i].primaryXAxis.zoomFactor = zoomFactor;
|
||||
charts[i].primaryXAxis.zoomPosition = zoomPosition;
|
||||
charts[i].zoomModule.isZoomed = (args.axis as Axis).series[0].chart.zoomModule.isZoomed;
|
||||
charts[i].zoomModule.isPanning = (args.axis as Axis).series[0].chart.zoomModule.isPanning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function load(args: ILoadedEventArgs): void {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
let themeColor: string[] = [];
|
||||
let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590'];
|
||||
let materialDarkColors: string[] = ['#9ECB08', '#56AEFF', '#C57AFF', '#61EAA9'];
|
||||
let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47'];
|
||||
let bootstrapColors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e'];
|
||||
let highContrastColors: string[] = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773'];
|
||||
let bootstrap4Colors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e'];
|
||||
let bootstrap5Colors: string[] = ['#6355C7', '#FFB400', '#2196F5', '#F7523F'];
|
||||
let bootstrap5DarkColors: string[] = ['#8F80F4', '#FFD46D', '#6CBDFF', '#FF7F71'];
|
||||
let fluentColors: string[] = ['#1AC9E6', '#DA4CB2', '#EDBB40', '#AF4BCF'];
|
||||
let tailwindColors: string[] = ['#5A61F6', '#65A30D', '#334155', '#14B8A6'];
|
||||
let tailwindDarkColors: string[] = ['#8B5CF6', '#22D3EE', '#F87171', '#4ADE80'];
|
||||
let fabricdarkColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47'];
|
||||
let material3Colors: string[] = ['#6355C7', '#00AEE0', '#FFB400', '#F7523F'];
|
||||
let material3DarkColors: string[] = ['#4EAAFF', '#FA4EAB', '#FFF500', '#17EA58'];
|
||||
// check the theme
|
||||
if (args.chart.theme === 'MaterialDark') {
|
||||
themeColor = materialDarkColors;
|
||||
}
|
||||
else if (args.chart.theme === 'Material') {
|
||||
themeColor = materialColors;
|
||||
}
|
||||
else if (args.chart.theme === "Fabric") {
|
||||
themeColor = fabricColors;
|
||||
}
|
||||
else if (args.chart.theme === "FabricDark") {
|
||||
themeColor = fabricdarkColors;
|
||||
}
|
||||
else if (args.chart.theme === 'Bootstrap5Dark') {
|
||||
themeColor = bootstrap5DarkColors;
|
||||
}
|
||||
else if (args.chart.theme === 'Bootstrap5') {
|
||||
themeColor = bootstrap5Colors;
|
||||
}
|
||||
else if (args.chart.theme === "Bootstrap4") {
|
||||
themeColor = bootstrap4Colors;
|
||||
}
|
||||
else if (args.chart.theme === 'TailwindDark') {
|
||||
themeColor = tailwindDarkColors;
|
||||
}
|
||||
else if (args.chart.theme === 'Tailwind') {
|
||||
themeColor = tailwindColors;
|
||||
}
|
||||
else if (args.chart.theme === "HighContrast") {
|
||||
themeColor = highContrastColors;
|
||||
}
|
||||
else if (args.chart.theme === 'FluentDark') {
|
||||
themeColor = fluentColors;
|
||||
}
|
||||
else if (args.chart.theme === 'Bootstrap') {
|
||||
themeColor = bootstrapColors;
|
||||
}
|
||||
else if (args.chart.theme === 'BootstrapDark') {
|
||||
themeColor = bootstrapColors;
|
||||
}
|
||||
else if (args.chart.theme === 'Material3') {
|
||||
themeColor = material3Colors;
|
||||
}
|
||||
else if (args.chart.theme === 'Material3Dark') {
|
||||
themeColor = material3DarkColors;
|
||||
}
|
||||
else {
|
||||
themeColor = fluentColors;
|
||||
}
|
||||
// check the container
|
||||
if (args.chart.element.id === 'container3') {
|
||||
args.chart.series[0].fill = themeColor[0];
|
||||
}
|
||||
else if (args.chart.element.id === 'container4') {
|
||||
args.chart.series[0].fill = themeColor[1];
|
||||
}
|
||||
else if (args.chart.element.id === 'container1') {
|
||||
args.chart.series[0].fill = themeColor[2];
|
||||
}
|
||||
else if (args.chart.element.id === 'container2') {
|
||||
args.chart.series[0].fill = themeColor[3];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -35,10 +35,10 @@
|
|||
<th rowspan="2" style="background-color: #C1272D">
|
||||
<img src='src/chart/images/grain.png' />
|
||||
</th>
|
||||
<td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 14px; color: #E7C554; font-weight: bold; padding-left: 5px">${y}</td>
|
||||
<td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 14px; color: #E7C554; font-weight: bold; padding-left: 5px">${x}</td>
|
||||
</tr>
|
||||
<tr >
|
||||
<td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 18px; color: #FFFFFF; font-weight: bold; padding-left: 5px">${x}</td>
|
||||
<td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 18px; color: #FFFFFF; font-weight: bold; padding-left: 5px">${y}B</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,193 +0,0 @@
|
|||
/**
|
||||
* Annotations sample
|
||||
*/
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { Annotations } from '@syncfusion/ej2-circulargauge';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
//tslint:disable
|
||||
// custom code end
|
||||
export function gauge1(): CircularGauge {
|
||||
let gauge1: CircularGauge = new CircularGauge({
|
||||
centerY: '45%',
|
||||
resized: (args: object) => {
|
||||
location.reload();
|
||||
},
|
||||
titleStyle: { color: 'black', size: '16px' },
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [
|
||||
{
|
||||
startAngle: 0, endAngle: 0,
|
||||
lineStyle: { width: 0 }, radius: Browser.isDevice ? '90%' : '70%',
|
||||
ranges: [
|
||||
{
|
||||
start: 0, end: 3,
|
||||
color: 'rgb(128,128,128)'
|
||||
}, {
|
||||
start: 3, end: 12,
|
||||
color: 'rgb(192,192,192)'
|
||||
}
|
||||
],
|
||||
annotations: [{
|
||||
angle: 270, radius: '50%', zIndex: '1',
|
||||
content: '<div id="minutes" style="width:75px;height:75px; font-family: Segoe UI;"></div>'
|
||||
}, {
|
||||
angle: 180, radius: '50%', zIndex: '1',
|
||||
content: '<div id="seconds" style="width:75px;height:75px; font-family: Segoe UI;"></div>'
|
||||
}, {
|
||||
angle: 90, zIndex: '1',
|
||||
radius: '40%',
|
||||
content: '<div id="hr" style="background-color:rgb(128,128,128); color:white;font-size:12px font-family: Segoe UI;;">11:11 AM</div>'
|
||||
}, {
|
||||
angle: 360, radius: '50%', zIndex: '1',
|
||||
content: '<div id="tm" style="font-size:10px; font-family: Segoe UI;">21-06-17</div>'
|
||||
}],
|
||||
labelStyle: {
|
||||
hiddenLabel: 'First', autoAngle: false,
|
||||
font: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
}, majorTicks: {
|
||||
width: 2, height: 14, interval: 1
|
||||
}, minorTicks: {
|
||||
height: 4, width: 1, interval: 0.2
|
||||
},
|
||||
minimum: 0, maximum: 12,
|
||||
pointers: [{
|
||||
pointerWidth: 5, radius: '40%',
|
||||
border: { width: 0 },
|
||||
cap: { radius: 0, border: { width: 0 } },
|
||||
needleTail: { length: '0%' }, animation: { enable: false }
|
||||
}, {
|
||||
radius: '60%', pointerWidth: 5,
|
||||
border: {
|
||||
width: 0
|
||||
},
|
||||
cap: {
|
||||
radius: 0,
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
needleTail: {
|
||||
length: '0%'
|
||||
}, animation: {
|
||||
enable: false
|
||||
}
|
||||
}, {
|
||||
radius: '70%',
|
||||
pointerWidth: 1,
|
||||
cap: {
|
||||
radius: 4,
|
||||
border: {
|
||||
width: 2,
|
||||
}
|
||||
},
|
||||
border: {
|
||||
width: 2,
|
||||
},
|
||||
needleTail: {
|
||||
length: '20%',
|
||||
border: {
|
||||
width: 2,
|
||||
},
|
||||
}, animation: {
|
||||
enable: false,
|
||||
duration: 500
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
});
|
||||
return gauge1;
|
||||
}
|
||||
export function gauge2(): CircularGauge {
|
||||
let gauge2: CircularGauge = new CircularGauge({
|
||||
background: 'transparent',
|
||||
titleStyle: { color: 'black' },
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [
|
||||
{
|
||||
startAngle: 0, endAngle: 0,
|
||||
lineStyle: { width: 0 },
|
||||
ranges: [
|
||||
{
|
||||
start: 0, end: 3,
|
||||
startWidth: 4, endWidth: 4,
|
||||
color: 'rgb(128,128,128)'
|
||||
}, {
|
||||
start: 3, end: 12,
|
||||
startWidth: 4, endWidth: 4,
|
||||
color: 'rgb(192,192,192)'
|
||||
}
|
||||
],
|
||||
annotations: [{
|
||||
angle: 270,
|
||||
radius: '40%',
|
||||
content: null
|
||||
}, {
|
||||
angle: 180,
|
||||
radius: '40%',
|
||||
content: null
|
||||
}, {
|
||||
angle: 90,
|
||||
radius: '50%',
|
||||
content: null
|
||||
}, {
|
||||
angle: 360, zIndex: '1',
|
||||
radius: '35%',
|
||||
content: '<div id="tm" style="font-size:10px; font-family: Segoe UI;">21-06-17</div>'
|
||||
}],
|
||||
labelStyle: {
|
||||
hiddenLabel: 'First',
|
||||
font: {
|
||||
size: '0px'
|
||||
},
|
||||
autoAngle: false
|
||||
}, majorTicks: {
|
||||
width: 1,
|
||||
height: 5,
|
||||
interval: 1
|
||||
}, minorTicks: {
|
||||
height: 3,
|
||||
width: 0.5,
|
||||
interval: 0.2
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 12,
|
||||
pointers: [{
|
||||
radius: '70%',
|
||||
pointerWidth: 2,
|
||||
cap: {
|
||||
radius: 2,
|
||||
border: {
|
||||
width: 0.2,
|
||||
}
|
||||
},
|
||||
needleTail: {
|
||||
length: '10%'
|
||||
}, animation: {
|
||||
enable: false,
|
||||
duration: 500
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
});
|
||||
return gauge2;
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<div class="control-section">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div id="clockgauge">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a clock by using annotation feature in the gauge.
|
||||
Hour and minute gauge are placed as annotation in circular gauge.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to use annotation in the circular gauge. Annotations are used to mark the specific area
|
||||
of interest in gauge with texts, shapes or images. In this sample <code>minutes</code> and <code>seconds</code> sub gauges are achieved using <code>annotation</code> feature.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>Circular gauge component features are segregated into individual feature-wise modules. To use annotation, we need to
|
||||
inject <code>Annotations</code> module using CircularGauge.Inject(Annotations) method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the annotation can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-annotations/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
// custom code end
|
||||
/**
|
||||
* Annotation sample
|
||||
*/
|
||||
import { CircularGauge, Pointer, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { Annotations } from '@syncfusion/ej2-circulargauge';
|
||||
import { gauge1, gauge2 } from './annotation-gauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
//tslint:disable
|
||||
// custom code end
|
||||
function calcTime(offset: string): Date {
|
||||
let date: Date = new Date();
|
||||
let localTime: number = date.getTime();
|
||||
let localOffset: number = date.getTimezoneOffset() * 60000;
|
||||
let utc: number = localTime + localOffset;
|
||||
let curretDate: Date = new Date(utc + (3600000 * (+offset)));
|
||||
return curretDate;
|
||||
}
|
||||
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let clockInterval: Function; let intervalExecute: boolean = true;
|
||||
let indianTime: CircularGauge = new CircularGauge(gauge1());
|
||||
let subGauge1: CircularGauge; let subGauge2: CircularGauge;
|
||||
indianTime.appendTo('#clockgauge');
|
||||
updateSubGauge1.apply(this);
|
||||
updateSubGauge2.apply(this);
|
||||
function updateSubGauge1(): void {
|
||||
subGauge1 = new CircularGauge(gauge2()); subGauge1.appendTo('#minutes');
|
||||
}
|
||||
function updateSubGauge2(): void {
|
||||
subGauge2 = new CircularGauge({
|
||||
background: 'transparent',
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [{
|
||||
ranges: [{ start: 0, end: 3, startWidth: 4, endWidth: 4, color: 'rgb(128,128,128)' },
|
||||
{ start: 3, end: 12, startWidth: 4, endWidth: 4, color: 'rgb(192,192,192)' }],
|
||||
annotations: [{ angle: 270, radius: '40%', content: null },
|
||||
{ angle: 180, radius: '40%', content: null },
|
||||
{ angle: 90, radius: '50%', content: null },
|
||||
{ angle: 360, radius: '35%', zIndex: '1', content: '<div id="tm" style="font-size:10px;">21-06-17</div>' }],
|
||||
labelStyle: { hiddenLabel: 'First', font: { size: '0px' }, autoAngle: false },
|
||||
majorTicks: { width: 1, height: 5, interval: 1 },
|
||||
minorTicks: { height: 3, width: 0.5, interval: 0.2 }, minimum: 0, maximum: 12,
|
||||
pointers: [{
|
||||
radius: '70%', pointerWidth: 2,
|
||||
cap: {
|
||||
radius: 2, border: { width: 0.2 }
|
||||
}, needleTail: { length: '10%' }, animation: { enable: false, duration: 500 }
|
||||
}], startAngle: 0, endAngle: 0, lineStyle: { width: 0 }
|
||||
}],
|
||||
loaded: intervalExecute ? ((args: {}): void => {
|
||||
if (intervalExecute) {
|
||||
updateTime(false);
|
||||
this.clockInterval = setInterval(
|
||||
(): void => {
|
||||
updateTime(true, this.clearInterval);
|
||||
},
|
||||
1000
|
||||
);
|
||||
intervalExecute = false;
|
||||
}
|
||||
}) : null
|
||||
});
|
||||
subGauge2.appendTo('#seconds');
|
||||
}
|
||||
function updateTime(enable: boolean, interval?: number): void {
|
||||
if (document.getElementById('clockgauge') && document.getElementsByClassName('e-circulargauge')) {
|
||||
getTime('+5.5', indianTime, enable);
|
||||
if (document.getElementById('minutes').childElementCount) {
|
||||
getTime('+5.5', subGauge1, enable, true);
|
||||
} else {
|
||||
updateSubGauge1(); getTime('+5.5', subGauge1, enable, true);
|
||||
}
|
||||
if (document.getElementById('seconds').childElementCount) {
|
||||
getTime('+5.5', subGauge2, enable, true);
|
||||
} else {
|
||||
updateSubGauge2(); getTime('+5.5', subGauge2, enable, true);
|
||||
}
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}
|
||||
function getTime(offset: string, gauge: CircularGauge, enable: boolean, subGauge?: boolean): void {
|
||||
let returnTime: Date = calcTime(offset);
|
||||
let seconds: number = returnTime.getSeconds() * 12 / 60; seconds = seconds === 0 ? 12 : seconds;
|
||||
if (!subGauge) {
|
||||
gauge.axes[0].pointers[2].animation.enable = enable;
|
||||
(<Pointer>gauge.axes[0].pointers[2]).currentValue = seconds === 0.2 ? 0 : (<Pointer>gauge.axes[0].pointers[2]).currentValue;
|
||||
} else {
|
||||
(<Pointer>gauge.axes[0].pointers[0]).currentValue = seconds === 0.2 ? 0 : (<Pointer>gauge.axes[0].pointers[0]).currentValue;
|
||||
gauge.axes[0].pointers[0].animation.enable = (gauge.element.id === 'seconds' && enable);
|
||||
}
|
||||
let hour: number = (returnTime.getHours() + returnTime.getMinutes() / 60) % 12;
|
||||
let minutes: number = returnTime.getMinutes() * 12 / 60 + returnTime.getSeconds() * 12 / 3600;
|
||||
let content: string; let hourValue: number;
|
||||
if (subGauge) {
|
||||
if (gauge.element.id === 'minutes') {
|
||||
content = '<div id="tm" style="font-size:8px;">' + Math.floor(returnTime.getMinutes()) + ' M</div>';
|
||||
gauge.setPointerValue(0, 0, minutes); gauge.setAnnotationValue(0, 3, content);
|
||||
} else {
|
||||
gauge.setPointerValue(0, 0, seconds);
|
||||
content = '<div id="tm" style="font-size:8px;">' + Math.floor(returnTime.getSeconds()) + ' S</div>';
|
||||
gauge.setAnnotationValue(0, 3, content);
|
||||
}
|
||||
} else {
|
||||
gauge.setPointerValue(0, 0, hour); gauge.setPointerValue(0, 1, minutes); gauge.setPointerValue(0, 2, seconds);
|
||||
hourValue = (Math.floor(returnTime.getHours()) % 12);
|
||||
content = '<div id="hr" style="background-color:rgba(226, 226, 226, 0.4);' +
|
||||
'color:rgba(29,29,29,0.9);padding:4px;font-size:12px;">' +
|
||||
(hourValue === 0 ? 12 : hourValue) + ':' + Math.floor(returnTime.getMinutes()) +
|
||||
(returnTime.getHours() >= 12 ? ' PM' : ' AM') + '</div>';
|
||||
gauge.setAnnotationValue(0, 2, content); let date: Date = new Date();
|
||||
content = '<div id="tm" style="font-size:10px;">' + date.getDate() + '-' +
|
||||
(date.getMonth() + 1) + '-' + date.getFullYear() + '</div>';
|
||||
gauge.setAnnotationValue(0, 3, content);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<div class="control-section" align="center">
|
||||
<div id="gauge" class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div class="col-lg-9 col-md-9" id="column1" style="margin-left: -5%">
|
||||
<div id="gauge1"></div>
|
||||
<div class="divide">
|
||||
<div class="col-lg-9 col-md-9" id="column1" style="margin-left: -5%">
|
||||
<div id="gauge1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-3" style="margin-left: -9%">
|
||||
<div class="panel" id="panel1" align="center">
|
||||
|
|
@ -35,27 +37,33 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample resembles the appearance of Apple watch rings. This functions similar to an activity tracker that denotes the move, exercise, and stand details.
|
||||
This sample resembles the appearance of Apple watch rings. This is similar to an activity tracker, which records
|
||||
the specifics of each move, exercise, and stand.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to make the circular gauge look like the Apple watch rings. Ranges are rendered with rounded corners and annotations are placed to denote the move, exercise, and stand values.
|
||||
In this example, you can see how to make the circular gauge look like the Apple watch rings. Ranges have rounded
|
||||
corners and annotations are used to indicate the move, exercise, and stand values.
|
||||
</p>
|
||||
<p>
|
||||
For more information on ranges, refer to this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-ranges">documentation
|
||||
More information on the annotations can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-annotations/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- custom code start -->
|
||||
|
||||
<style>
|
||||
.divide {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 105% !important;
|
||||
height: 80px !important;
|
||||
width: 190px !important;
|
||||
height: 70px !important;
|
||||
margin-left: 5% !important;
|
||||
margin-top: 15% !important;
|
||||
margin-top: 10% !important;
|
||||
border-color: lightgray;
|
||||
float: left;
|
||||
background-color: transparent;
|
||||
|
|
@ -64,14 +72,15 @@
|
|||
.content {
|
||||
float: left !important;
|
||||
margin-left: 62px !important;
|
||||
margin-top: 6% !important;
|
||||
margin-top: 10px !important;
|
||||
text-align: left !important;
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1160px) {
|
||||
.panel {
|
||||
width: 115% !important;
|
||||
width: 165px !important;
|
||||
}
|
||||
|
||||
.firstcontent {
|
||||
|
|
@ -81,24 +90,32 @@
|
|||
.secondcontent {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
.divide {
|
||||
margin-left: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 990px) {
|
||||
.panel {
|
||||
width: 50% !important;
|
||||
height: 80px !important;
|
||||
margin-left: 27% !important;
|
||||
width: 190px !important;
|
||||
height: 70px !important;
|
||||
margin-left: 37% !important;
|
||||
margin-top: 0% !important;
|
||||
}
|
||||
|
||||
.subgauge {
|
||||
margin-left: 8% !important;
|
||||
margin-left: 0% !important;
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 18% !important;
|
||||
margin-top: 2% !important;
|
||||
margin-left: 63px !important;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.firstcontent {
|
||||
|
|
@ -108,9 +125,23 @@
|
|||
.secondcontent {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.divide {
|
||||
margin-left: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.divide {
|
||||
margin-left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 410px) {
|
||||
.divide {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
#column1 {
|
||||
margin-left: -9% !important;
|
||||
}
|
||||
|
|
@ -120,49 +151,98 @@
|
|||
}
|
||||
|
||||
.panel {
|
||||
width: 52% !important;
|
||||
width: 165px !important;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 3% !important;
|
||||
}
|
||||
}
|
||||
.e-view.tailwind div.annotation4, .e-view.tailwind-dark div.annotation4 {
|
||||
margin-top: -3px; margin-left: 2px
|
||||
}
|
||||
.e-view.fabric div.annotation4, .e-view.fabric-dark div.annotation4 {
|
||||
margin-top: -5px;
|
||||
margin-left: 2px
|
||||
}
|
||||
.e-view.tailwind div.annotation5, .e-view.tailwind-dark div.annotation5, .e-view.fabric div.annotation5, .e-view.fabric-dark div.annotation5 {
|
||||
margin-top: -4px; margin-left: 1px;
|
||||
}
|
||||
.e-view.tailwind div.annotation6, .e-view.tailwind-dark div.annotation6, .e-view.fabric div.annotation6, .e-view.fabric-dark div.annotation6 {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.e-view.bootstrap5 div.annotation4, .e-view.bootstrap5-dark div.annotation4 {
|
||||
margin-left: 2px
|
||||
}
|
||||
.e-view.bootstrap5 div.annotation5, .e-view.bootstrap5-dark div.annotation5 {
|
||||
margin-left: 1px
|
||||
}
|
||||
.e-view.bootstrap5 div.annotation6, .e-view.bootstrap5-dark div.annotation6 {
|
||||
margin-top: -1px; margin-left: 1px;
|
||||
}
|
||||
|
||||
.e-view.material div.annotation4, .e-view.material-dark div.annotation4, .e-view.bootstrap div.annotation4, .e-view.bootstrap-dark div.annotation4,
|
||||
.e-view.bootstrap4 div.annotation4{
|
||||
margin-left: 2px; margin-top: 2px;
|
||||
}
|
||||
.e-view.tailwind div.annotation4,
|
||||
.e-view.tailwind-dark div.annotation4 {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.e-view.highcontrast div.annotation4 {
|
||||
margin-left: 2px; margin-top: 1px;
|
||||
}
|
||||
|
||||
.e-view.material div.annotation5, .e-view.material-dark div.annotation5, .e-view.bootstrap div.annotation5, .e-view.bootstrap-dark div.annotation5,
|
||||
.e-view.bootstrap4 div.annotation5, .e-view.highcontrast div.annotation5 {
|
||||
margin-top: 2px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
.e-view.fabric div.annotation4,
|
||||
.e-view.fabric-dark div.annotation4 {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 2px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.e-view.tailwind div.annotation5,
|
||||
.e-view.tailwind-dark div.annotation5,
|
||||
.e-view.fabric div.annotation5,
|
||||
.e-view.fabric-dark div.annotation5 {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.e-view.tailwind div.annotation6,
|
||||
.e-view.tailwind-dark div.annotation6,
|
||||
.e-view.fabric div.annotation6,
|
||||
.e-view.fabric-dark div.annotation6 {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin-top: -7px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.e-view.bootstrap5 div.annotation4,
|
||||
.e-view.bootstrap5-dark div.annotation4 {
|
||||
margin-left: 4px;
|
||||
margin-top: 2px;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.e-view.bootstrap5 div.annotation5,
|
||||
.e-view.bootstrap5-dark div.annotation5 {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin-left: 1px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.e-view.bootstrap5 div.annotation6,
|
||||
.e-view.bootstrap5-dark div.annotation6 {
|
||||
margin-top: -1px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.e-view.material div.annotation4,
|
||||
.e-view.material-dark div.annotation4,
|
||||
.e-view.bootstrap div.annotation4,
|
||||
.e-view.bootstrap-dark div.annotation4,
|
||||
.e-view.bootstrap4 div.annotation4 {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin-left: 2px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.e-view.highcontrast div.annotation4 {
|
||||
margin-left: 2px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.e-view.material div.annotation5,
|
||||
.e-view.material-dark div.annotation5,
|
||||
.e-view.bootstrap div.annotation5,
|
||||
.e-view.bootstrap-dark div.annotation5,
|
||||
.e-view.bootstrap4 div.annotation5,
|
||||
.e-view.highcontrast div.annotation5 {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin-left: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +1,22 @@
|
|||
/**
|
||||
* Default sample
|
||||
*/
|
||||
import { CircularGauge, Annotations, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
//tslint:disable:max-func-body-length
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
let circulargauge1: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
},
|
||||
// custom code end
|
||||
width: '400px',
|
||||
height: '400px',
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
annotations: [{
|
||||
angle: 8, radius: '80%', zIndex: '1',
|
||||
|
|
@ -86,18 +85,18 @@ CircularGauge.Inject(Annotations);
|
|||
circulargauge1.appendTo('#gauge1');
|
||||
|
||||
let circulargauge2: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.gauge.axes[0].annotations[0].content =
|
||||
'<div class="annotation4"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image4.svg" /></div>';
|
||||
}
|
||||
// custom code end
|
||||
},
|
||||
// custom code end
|
||||
height: '65px',
|
||||
width: '65px',
|
||||
axes: [{
|
||||
|
|
@ -133,18 +132,18 @@ CircularGauge.Inject(Annotations);
|
|||
circulargauge2.appendTo('#gauge2');
|
||||
|
||||
let circulargauge3: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.gauge.axes[0].annotations[0].content =
|
||||
'<div class="annotation5"><img style="width:15px;height:15px;" src="src/circular-gauge/images/image5.svg" /></div>';
|
||||
}
|
||||
// custom code end
|
||||
},
|
||||
// custom code end
|
||||
height: '65px',
|
||||
width: '65px',
|
||||
axes: [{
|
||||
|
|
@ -180,18 +179,18 @@ CircularGauge.Inject(Annotations);
|
|||
circulargauge3.appendTo('#gauge3');
|
||||
|
||||
let circulargauge4: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.gauge.axes[0].annotations[0].content =
|
||||
'<div class="annotation6"><img style="width:17px;height:17px;" src="src/circular-gauge/images/image6.svg" /></div>';
|
||||
}
|
||||
// custom code end
|
||||
},
|
||||
// custom code end
|
||||
height: '65px',
|
||||
width: '65px',
|
||||
axes: [{
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
<div>
|
||||
<div class="control-section">
|
||||
<div id="range-container"></div>
|
||||
<div id='template'>
|
||||
<div class='sliderwrap' >
|
||||
<div id='default' ></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="range-container"></div>
|
||||
<div id='template'>
|
||||
<div class='sliderwrap'>
|
||||
<div id='default'></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script id='pointerValue' type="text/x-template">
|
||||
<div id='sliderwrap'>
|
||||
|
|
@ -19,44 +17,66 @@
|
|||
</script>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the progress of a work in the circular gauge using the range bar pointer with rounded corners.
|
||||
This sample shows the work progress using a circular gauge and a range bar pointer with rounded corners.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render the ranges and range bar pointer with rounded corners. The EJ2 Slider control is placed at the bottom of the gauge using annotation to change the range bar pointer value. Based on the value, color of the pointer can also be changed.
|
||||
In this example, you can see how to render the range and range bar pointer with rounded corners. A slider is
|
||||
placed at the bottom of the circular gauge using annotation to change the range bar pointer value. Based on the
|
||||
value, the color of the pointer can also be changed.
|
||||
</p>
|
||||
<p>
|
||||
For more information on ranges, refer to this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation</a> section.
|
||||
More information on the ranges can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-ranges/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.sliderwrap {
|
||||
margin-top: 0px;
|
||||
width: 300px;
|
||||
align-self: center;
|
||||
}
|
||||
#slider.e-control.e-slider .e-handle {
|
||||
background-color: #4B4B4B ;
|
||||
}
|
||||
.e-control-wrapper.e-slider-container.e-horizontal .e-slider-track {
|
||||
background: -webkit-linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
|
||||
background: linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
|
||||
background: -moz-linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
|
||||
}
|
||||
.e-limit-bar.e-limits {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.e-control-wrapper.e-slider-container.e-horizontal .e-range {
|
||||
height: 0px !important;
|
||||
}
|
||||
#slider.e-control.e-slider .e-slider-track {
|
||||
height: 8px;
|
||||
top: calc(50% - 4px);
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.e-view.material3 div.e-handle-first, .e-view.material3-dark div.e-handle-first {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.e-view.fluent div.e-handle-first, .e-view.fluent-dark div.e-handle-first, .e-view.fabric div.e-handle-first,
|
||||
.e-view.fabric-dark div.e-handle-first, .e-view.bootstrap div.e-handle-first, .e-view.bootstrap-dark div.e-handle-first,
|
||||
.e-view.highcontrast div.e-handle-first, .e-view.tailwind div.e-handle-first, .e-view.tailwind-dark div.e-handle-first {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.e-view.bootstrap5 div.e-handle-first, .e-view.bootstrap5-dark div.e-handle-first, .e-view.material div.e-handle-first, .e-view.material-dark div.e-handle-first {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.sliderwrap {
|
||||
margin-top: 0px;
|
||||
width: 300px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
<!-- custom code end -->
|
||||
#slider.e-control.e-slider .e-handle {
|
||||
background-color: #fdf9f9;
|
||||
border: 2px solid #666;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.e-control-wrapper.e-slider-container.e-horizontal .e-slider-track {
|
||||
background: -webkit-linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
|
||||
background: linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
|
||||
background: -moz-linear-gradient(left, #ea501a 0, #ea501a 20%, #f79c02 40%, #e5ce20 60%, #a1cb43 80%, #82b944 100%);
|
||||
}
|
||||
|
||||
.e-limit-bar.e-limits {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.e-control-wrapper.e-slider-container.e-horizontal .e-range {
|
||||
height: 0px !important;
|
||||
}
|
||||
|
||||
#slider.e-control.e-slider .e-slider-track {
|
||||
height: 8px;
|
||||
top: calc(50% - 4px);
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- custom code end -->
|
||||
|
|
@ -1,90 +1,85 @@
|
|||
import { CircularGauge, Annotations, ILoadedEventArgs, GaugeTheme , IResizeEventArgs} from '@syncfusion/ej2-circulargauge';
|
||||
import { Slider, SliderChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
//tslint:disable:max-func-body-length
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
/**
|
||||
* Range sample changes
|
||||
*/
|
||||
import { CircularGauge, Annotations, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { Slider, SliderChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
CircularGauge.Inject(Annotations);
|
||||
let sliderValue: number = 60;
|
||||
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
title: 'Progress Tracker',
|
||||
titleStyle: { size: '16px', fontFamily: 'inherit' },
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '<div id="pointervalue" style="font-size:35px;width:120px;text-align:center">' +
|
||||
sliderValue.toString() + '/100</div>',
|
||||
angle: 0,
|
||||
zIndex: '1',
|
||||
radius: '0%'
|
||||
},
|
||||
{
|
||||
content: '<div id="slider" style="height:70px;width:250px;"></div>',
|
||||
angle: 0,
|
||||
zIndex: '1',
|
||||
radius: '-100%'
|
||||
},
|
||||
],
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
position: 'Inside', useRangeColor: true,
|
||||
font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' }
|
||||
}, majorTicks: { height: 0, }, minorTicks: { height: 0 },
|
||||
startAngle: 200, endAngle: 160, minimum: 0, maximum: 100, radius: '80%',
|
||||
ranges: [
|
||||
{
|
||||
start: 0, end: 100,
|
||||
radius: '90%',
|
||||
startWidth: 30, endWidth: 30,
|
||||
color: '#E0E0E0',
|
||||
roundedCornerRadius: 20
|
||||
},
|
||||
],
|
||||
pointers: [{
|
||||
roundedCornerRadius: 20,
|
||||
value: 60,
|
||||
type: 'RangeBar',
|
||||
radius: '90%',
|
||||
color: '#e5ce20',
|
||||
border: {
|
||||
color: 'grey',
|
||||
width: 0
|
||||
},
|
||||
animation: {
|
||||
enable: false
|
||||
},
|
||||
pointerWidth: 30
|
||||
}]
|
||||
}],
|
||||
resized: (args: IResizeEventArgs) => {
|
||||
args.gauge.axes[0].annotations[0].content = '<div id="pointervalue" style="font-size:35px;width:120px;text-align:center">' +
|
||||
circulargauge.axes[0].pointers[0].value.toString() + '/100</div>';
|
||||
},
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
},
|
||||
// custom code end
|
||||
loaded: (args: ILoadedEventArgs) => {
|
||||
let annotation: Element = document.getElementById(args.gauge.element.id + '_Annotations_0');
|
||||
if (annotation) {
|
||||
annotationRender('slider', circulargauge.axes[0].pointers[0].value);
|
||||
annotationRender('slider', circulargauge.axes[0].pointers[0].value);
|
||||
}
|
||||
},
|
||||
title: 'Progress Tracker',
|
||||
titleStyle: { size: '18px', },
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '<div id="pointervalue" style="font-size:35px;width:120px;text-align:center">' +
|
||||
sliderValue.toString() + '/100</div>',
|
||||
angle: 0,
|
||||
zIndex: '1',
|
||||
radius: '0%'
|
||||
},
|
||||
{
|
||||
content: '<div id="slider" style="height:70px;width:250px;"></div>',
|
||||
angle: 0,
|
||||
zIndex: '1',
|
||||
radius: '-100%'
|
||||
},
|
||||
],
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
position: 'Inside', useRangeColor: true,
|
||||
font: { size: '0px', color: 'white', fontFamily: 'Roboto', fontStyle: 'Regular' }
|
||||
}, majorTicks: { height: 0, }, minorTicks: { height: 0 },
|
||||
startAngle: 200, endAngle: 160, minimum: 0, maximum: 100, radius: '80%',
|
||||
ranges: [
|
||||
{
|
||||
start: 0, end: 100,
|
||||
radius: '90%',
|
||||
startWidth: 30, endWidth: 30,
|
||||
color: '#E0E0E0',
|
||||
roundedCornerRadius: 20
|
||||
},
|
||||
],
|
||||
pointers: [{
|
||||
roundedCornerRadius: 20,
|
||||
value: 60,
|
||||
type: 'RangeBar',
|
||||
radius: '90%',
|
||||
color: '#e5ce20',
|
||||
border: {
|
||||
color: 'grey',
|
||||
width: 0
|
||||
},
|
||||
animation: {
|
||||
enable: false
|
||||
},
|
||||
pointerWidth: 30
|
||||
}]
|
||||
}]
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#range-container');
|
||||
// custom code start
|
||||
/* tslint:disable:no-string-literal */
|
||||
// custom code end
|
||||
|
||||
function annotationRender(id: string, sliderValue: number): void {
|
||||
let first: Slider = new Slider({
|
||||
// Set the value for slider
|
||||
min: 0, max: 100,
|
||||
type: 'MinRange',
|
||||
limits: { enabled: true, minStart: 0, minEnd: 100 },
|
||||
|
|
@ -113,4 +108,4 @@ let sliderValue: number = 60;
|
|||
});
|
||||
first.appendTo('#' + id);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates a circular gauge with an axis and a background image set for the axis.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the axis in the circular gauge with a background image.
|
||||
To accomplish this, the <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/annotationModel/">annotations</a>
|
||||
is used and an image is set as the background content.
|
||||
</p>
|
||||
<p>
|
||||
More information on the annotations can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-annotations/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.control-section {
|
||||
min-height: 450px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
import { CircularGauge, ILoadedEventArgs, GaugeTheme, Annotations, IResizeEventArgs } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
centerY: '65%',
|
||||
background: 'transparent',
|
||||
axes: [{
|
||||
radius: '80%',
|
||||
startAngle: 0,
|
||||
endAngle: 0,
|
||||
majorTicks: {
|
||||
width: 0,
|
||||
},
|
||||
lineStyle: { width: 0 },
|
||||
minorTicks: {
|
||||
width: 0,
|
||||
},
|
||||
labelStyle: {
|
||||
font: {
|
||||
size: '0px'
|
||||
},
|
||||
},
|
||||
annotations: [{
|
||||
angle: 0,
|
||||
radius: '0%',
|
||||
zIndex: '1',
|
||||
content: '<div style="margin-top: -37%;display: flex;justify-content: center;"><img src="./src/circular-gauge/images/axis-background.png" height="400" width="400" /></div>'
|
||||
},
|
||||
{
|
||||
angle: 0,
|
||||
radius: '0%',
|
||||
zIndex: '1',
|
||||
content: '<div id="subGauge" style="margin-left: -50%; margin-top: -46%;"></div>'
|
||||
}, {
|
||||
angle: 10,
|
||||
radius: '0%',
|
||||
zIndex: '1',
|
||||
content: '<div style="color:orange;margin-top: -84px;margin-left: 0px;font-size: 18px;"> 90</div>'
|
||||
}],
|
||||
pointers: [{
|
||||
cap: {
|
||||
radius: 8,
|
||||
border: { width: 0 }
|
||||
},
|
||||
needleTail: {
|
||||
length: '25%',
|
||||
},
|
||||
}]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
},
|
||||
resized: (args: IResizeEventArgs) => {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#gauge');
|
||||
updateGauge();
|
||||
};
|
||||
function updateGauge() {
|
||||
let annotationGauge: CircularGauge = new CircularGauge({
|
||||
centerY: '45%',
|
||||
titleStyle: { color: 'black', size: '16px' },
|
||||
width: '600px',
|
||||
height: '450px',
|
||||
background: 'transparent',
|
||||
axes: [{
|
||||
labelStyle: { hiddenLabel: 'First', font: { fontFamily: 'inherit', color: 'White' } },
|
||||
majorTicks: { height: 15, interval: 30 },
|
||||
minorTicks: { height: 10, interval: 6 }, minimum: 0, maximum: 360,
|
||||
pointers: [{
|
||||
value: 90,
|
||||
radius: '45%', markerWidth: 12, markerHeight: 12,
|
||||
type: 'Marker', markerShape: 'Triangle', color: 'Orange',
|
||||
animation: { enable: false }
|
||||
}], startAngle: 0, endAngle: 0, radius: '60%', lineStyle: { width: 0 }
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
},
|
||||
resized: (args: object) => {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
annotationGauge.appendTo('#subGauge');
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<div class="control-section">
|
||||
<div id="clockgauge">
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates how to create an analog clock that displays the time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, a clock has been created by adding axis, minor ticks, major ticks, and needles in a circular
|
||||
gauge and customizing it accordingly. In addition, the clock ticks, displaying the time in a lively manner.
|
||||
</p>
|
||||
<p>
|
||||
More information on the circular gauge can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
let needlePointer: number = 0.2;
|
||||
let needleStartWidth: number = 1;
|
||||
let needleStartWidthOne: number = 2;
|
||||
let pointerInterval: any;
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme, Annotations, IResizeEventArgs } from '@syncfusion/ej2-circulargauge';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
background: 'transparent',
|
||||
axes: [{
|
||||
radius: '90%',
|
||||
startAngle: 0,
|
||||
endAngle: 0,
|
||||
minimum: 0,
|
||||
maximum: 12,
|
||||
majorTicks: {
|
||||
width: 2, height: 15, interval: 1, offset: 5
|
||||
},
|
||||
lineStyle: { width: 2 },
|
||||
minorTicks: {
|
||||
width: 1, height: 10, interval: 0.2, offset: 5
|
||||
},
|
||||
labelStyle: {
|
||||
font: {
|
||||
fontFamily: 'inherit'
|
||||
},
|
||||
offset: 10,
|
||||
hiddenLabel: 'First'
|
||||
},
|
||||
pointers: [{
|
||||
value: 10.2,
|
||||
radius: '70%',
|
||||
pointerWidth: 3,
|
||||
needleStartWidth: needleStartWidthOne,
|
||||
needleEndWidth: 1,
|
||||
cap: {
|
||||
radius: 5,
|
||||
color: 'white',
|
||||
border: { width: 1, color: '#00A885' }
|
||||
|
||||
},
|
||||
needleTail: {
|
||||
length: "0%",
|
||||
},
|
||||
animation: {
|
||||
enable: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
radius: '100%',
|
||||
pointerWidth: 3,
|
||||
needleStartWidth: needleStartWidth,
|
||||
needleEndWidth: 1,
|
||||
cap: {
|
||||
radius: 5,
|
||||
color: 'white',
|
||||
border: { width: 1, color: '#00A885' }
|
||||
|
||||
},
|
||||
needleTail: {
|
||||
length: "0%",
|
||||
},
|
||||
animation: {
|
||||
enable: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
radius: '90%',
|
||||
pointerWidth: 3,
|
||||
needleStartWidth: needleStartWidth,
|
||||
needleEndWidth: 1,
|
||||
color: '#00A8B5',
|
||||
cap: {
|
||||
radius: 5,
|
||||
color: 'white',
|
||||
border: { width: 1, color: '#00A885' }
|
||||
|
||||
},
|
||||
needleTail: {
|
||||
length: "25%",
|
||||
color: '#00A8B5'
|
||||
},
|
||||
animation: {
|
||||
enable: false,
|
||||
},
|
||||
}],
|
||||
annotations: [{
|
||||
content: '<div id="subGaugeOne" style="margin-left: -50%"></div>',
|
||||
angle: 290,
|
||||
radius: '0%',
|
||||
zIndex: '1'
|
||||
}, {
|
||||
content: '<div id="subGaugeTwo" style="margin-left: -110%;margin-top: -50%;"></div>',
|
||||
angle: 90,
|
||||
radius: '0%',
|
||||
zIndex: '1'
|
||||
|
||||
}],
|
||||
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
},
|
||||
resized: (args: IResizeEventArgs) => {
|
||||
let timeoutId: any = setInterval((): void => {
|
||||
if (document.getElementById('clockgauge')) {
|
||||
renderGauges();
|
||||
} else {
|
||||
clearInterval(+timeoutId);
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
loaded: (args: ILoadedEventArgs) => {
|
||||
renderGauges();
|
||||
if (isNullOrUndefined(pointerInterval)) {
|
||||
pointerInterval = setInterval(
|
||||
(): void => {
|
||||
if (document.getElementById('clockgauge')) {
|
||||
if (needlePointer <= 12) {
|
||||
if (needlePointer == 0.2) {
|
||||
needlePointer = 0.2;
|
||||
}
|
||||
circulargauge.setPointerValue(0, 2, needlePointer);
|
||||
needlePointer += 0.2;
|
||||
} else {
|
||||
needlePointer = 0.2;
|
||||
}
|
||||
} else {
|
||||
clearInterval(+pointerInterval);
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#clockgauge');
|
||||
function renderGauges() {
|
||||
let annotationGaugeTwo: CircularGauge = new CircularGauge({
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
background: 'transparent',
|
||||
axes: [{
|
||||
labelStyle: { hiddenLabel: 'First', font: { fontFamily: 'inherit', size: '7px' }, offset: -5 },
|
||||
majorTicks: { offset: 2, interval: 2 },
|
||||
minorTicks: { offset: 2, interval: 0.4 }, minimum: 0, maximum: 12,
|
||||
pointers: [{
|
||||
value: 8,
|
||||
radius: '50%', pointerWidth: 2, color: '#00A8B5',
|
||||
animation: { enable: false }, cap: { radius: 0 }, needleTail: { length: '0%' }
|
||||
}], startAngle: 0, endAngle: 0, radius: '70%', lineStyle: { width: 2 }
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
annotationGaugeTwo.appendTo('#subGaugeTwo');
|
||||
|
||||
let annotationGaugeOne: CircularGauge = new CircularGauge({
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
background: 'transparent',
|
||||
axes: [{
|
||||
labelStyle: { hiddenLabel: 'First', font: { fontFamily: 'inherit', size: '7px' }, offset: -5 },
|
||||
majorTicks: { interval: 2, offset: 2 },
|
||||
minorTicks: { interval: 0.4, offset: 2 }, minimum: 0, maximum: 12,
|
||||
pointers: [{
|
||||
value: 5,
|
||||
radius: '50%', pointerWidth: 2, color: '#00A8B5',
|
||||
animation: { enable: false }, cap: { radius: 0 }, needleTail: { length: '0%' }
|
||||
}], startAngle: 0, endAngle: 0, radius: '70%', lineStyle: { width: 2 }
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
annotationGaugeOne.appendTo('#subGaugeOne');
|
||||
}
|
||||
};
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="direction-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- property panel-->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id=''>Pointer Color</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<select id="poiterColor" class="form-control">
|
||||
<option value="#f03e3e" selected = true>#f03e3e</option>
|
||||
<option value="#4472c4">#4472c4</option>
|
||||
<option value="#ed7d31">#ed7d31</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id=''>Label Color</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<select id="labelColor" class="form-control">
|
||||
<option value="#f03e3e" selected = true>#f03e3e</option>
|
||||
<option value="#4472c4">#4472c4</option>
|
||||
<option value="#ed7d31">#ed7d31</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates how to make a direction compass by using the features in gauge.
|
||||
Color of the needle and direction labels can be customized by using options.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
Circular gauge can be customized as per a user requirement.
|
||||
In this example, a direction compass has been depicted by adding <code>needles</code> and by customizing the <code>labels</code> to show the direction.
|
||||
</p>
|
||||
<p>
|
||||
More information on the needle and labels can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/"> documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
// custom code end
|
||||
/**
|
||||
* Compass sample
|
||||
*/
|
||||
import { CircularGauge, IAxisLabelRenderEventArgs, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let value: string[] = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', ''];
|
||||
let pointerColor: DropDownList; let labelColor: DropDownList;
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
args.text = value[args.value];
|
||||
},
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [{
|
||||
radius: '70%',
|
||||
lineStyle: { width: 10 },
|
||||
labelStyle: {
|
||||
font: {
|
||||
size: '12px', fontFamily: 'Segoe UI'
|
||||
},
|
||||
autoAngle: true,
|
||||
hiddenLabel: 'Last'
|
||||
}, majorTicks: {
|
||||
height: 15,
|
||||
interval: 1
|
||||
}, minorTicks: {
|
||||
height: 10,
|
||||
interval: 0.5
|
||||
},
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
minimum: 0,
|
||||
maximum: 8,
|
||||
pointers: [{
|
||||
value: 7,
|
||||
radius: '50%',
|
||||
color: '#f03e3e',
|
||||
pointerWidth: 20,
|
||||
cap: {
|
||||
radius: 0
|
||||
},
|
||||
animation: { enable: false }
|
||||
}, {
|
||||
value: 3,
|
||||
radius: '50%',
|
||||
color: '#9E9E9E',
|
||||
pointerWidth: 20,
|
||||
cap: {
|
||||
radius: 0
|
||||
},
|
||||
animation: { enable: false }
|
||||
}]
|
||||
}]
|
||||
});
|
||||
circulargauge.appendTo('#direction-container');
|
||||
// code for property panel
|
||||
pointerColor = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: "100%",
|
||||
change: () => {
|
||||
let rangeColor: string = pointerColor.value.toString();
|
||||
circulargauge.axes[0].pointers[0].color = rangeColor;
|
||||
circulargauge.setPointerValue(0, 0, circulargauge.axes[0].pointers[0].value);
|
||||
}
|
||||
});
|
||||
pointerColor.appendTo('#poiterColor');
|
||||
|
||||
labelColor = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: "100%",
|
||||
change: () => {
|
||||
let rangeColor: string = labelColor.value.toString();
|
||||
circulargauge.axes[0].labelStyle.font.color = rangeColor;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
});
|
||||
labelColor.appendTo('#labelColor');
|
||||
};
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<div>
|
||||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This example demonstrates how to introduce and position customer labels in a circular gauge. In addition,
|
||||
gradient colors are used on the circular gauge elements such as the pointer and range.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure custom labels in the circular gauge. The label text
|
||||
can
|
||||
be modified using the <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/#axislabelrender">axisLabelRender</a>
|
||||
event which will be triggered everytime when a label is rendered.
|
||||
</p>
|
||||
<p>
|
||||
More information on the labels can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-axes/#labels">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { CircularGauge, ILoadedEventArgs, GaugeTheme, Gradient, IAxisLabelRenderEventArgs } from '@syncfusion/ej2-circulargauge';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
CircularGauge.Inject(Gradient);
|
||||
let textValues: string[] = ['0', '2', '5', '10', '20', '50', '100', '150', '200'];
|
||||
(window as any).default = (): void => {
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
background: 'transparent',
|
||||
axes: [{
|
||||
lineStyle: { width: 0 },
|
||||
startAngle: 210, endAngle: 150, minimum: 0, maximum: 8, radius: '80%',
|
||||
labelStyle: {
|
||||
font: {
|
||||
fontFamily: 'inherit'
|
||||
}, offset: 10
|
||||
},
|
||||
majorTicks: { width: 0, interval: 1 },
|
||||
minorTicks: { width: 0 },
|
||||
ranges: [
|
||||
{
|
||||
start: 0, end: 6.2, startWidth: 22, endWidth: 22, color: '#E63B86',
|
||||
linearGradient: {
|
||||
startValue: '0%',
|
||||
endValue: '100%',
|
||||
colorStop: [
|
||||
{ color: '#9E40DC', offset: '0%', opacity: 1 },
|
||||
{ color: '#d93c95', offset: '70%', opacity: 1 },]
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
color: '#E0E0E0',
|
||||
start: 6.2,
|
||||
end: 8,
|
||||
startWidth: 22,
|
||||
endWidth: 22
|
||||
|
||||
}
|
||||
],
|
||||
pointers: [{
|
||||
animation: { enable: false }, value: 6.2, radius: '85%', color: '#E63B86',
|
||||
pointerWidth: 10,
|
||||
cap: { radius: 0, border: { width: 0 } },
|
||||
needleTail: { length: '0%' },
|
||||
needleStartWidth: 10,
|
||||
needleEndWidth: 5,
|
||||
linearGradient: {
|
||||
startValue: '0%',
|
||||
endValue: '100%',
|
||||
colorStop: [
|
||||
{ color: '#9E40DC', offset: '0%', opacity: 0.2 },
|
||||
{ color: '#9E40DC', offset: '70%', opacity: 0.5 },]
|
||||
},
|
||||
}]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
},
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
args.text = textValues[(args.value)];
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#gauge');
|
||||
};
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
/**
|
||||
* Gauge Customization
|
||||
*/
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { Annotations } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
export function gauge1(): CircularGauge {
|
||||
let gauge1: CircularGauge = new CircularGauge({
|
||||
centerY: '70%',
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '<div style="color:#666666;font-size:35px;font-family: Segoe UI;">1800</div>',
|
||||
angle: 0,
|
||||
zIndex: '1',
|
||||
radius: '110%'
|
||||
}],
|
||||
lineStyle: { width: 0 },
|
||||
startAngle: 300, endAngle: 60,
|
||||
radius: '80%',
|
||||
labelStyle: { font: { size: '0px' } },
|
||||
majorTicks: { width: 0 },
|
||||
minorTicks: { height: 0 },
|
||||
minimum: 999, maximum: 2000,
|
||||
ranges: [{
|
||||
start: 1000, end: 2000,
|
||||
radius: '90%',
|
||||
startWidth: 30, endWidth: 30,
|
||||
color: '#E0E0E0'
|
||||
}],
|
||||
pointers: [{
|
||||
type: 'RangeBar',
|
||||
value: 1800, radius: '90%',
|
||||
color: '#FFDD00', animation: { duration: 0 },
|
||||
pointerWidth: 30
|
||||
}, {
|
||||
radius: '90%', value: 1800,
|
||||
color: '#424242',
|
||||
animation: { duration: 0 },
|
||||
pointerWidth: 9,
|
||||
cap: { radius: 10, color: '#424242', border: { width: 0 } }
|
||||
}]
|
||||
}]
|
||||
});
|
||||
return gauge1;
|
||||
}
|
||||
|
||||
export function gauge2(): CircularGauge {
|
||||
let gauge2: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '<div style="color:#666666;font-size:35px; font-family: Segoe UI;">50.5GB</div>',
|
||||
angle: 180, radius: '0%', zIndex: '1',
|
||||
}, {
|
||||
content: '<div style="color:#757575;font-size:15px;">Used</div>',
|
||||
angle: 180, radius: '25%', zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI',
|
||||
color: '#9E9E9E',
|
||||
fontStyle: 'Bold',
|
||||
fontWeight: 'Regular',
|
||||
size: '14px'
|
||||
}
|
||||
}],
|
||||
lineStyle: { width: 0 },
|
||||
startAngle: 180, endAngle: 180,
|
||||
radius: '80%',
|
||||
labelStyle: { font: { size: '0px' } },
|
||||
majorTicks: { width: 0 },
|
||||
minorTicks: { height: 0 },
|
||||
minimum: 0, maximum: 100,
|
||||
ranges: [{
|
||||
start: 0, end: 100,
|
||||
radius: '80%', startWidth: 30,
|
||||
endWidth: 30, color: '#E0E0E0'
|
||||
}],
|
||||
pointers: [{
|
||||
type: 'RangeBar',
|
||||
value: 50.5, radius: '80%',
|
||||
color: '#FF2680', animation: { duration: 0 },
|
||||
pointerWidth: 30
|
||||
}]
|
||||
}]
|
||||
});
|
||||
return gauge2;
|
||||
}
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="cutomization-container" style="display: block"></div>
|
||||
<div id="cutomization-container1" style="display: none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- property panel image-->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 50%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 20%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td align="center">
|
||||
<img id='random' src="src/circular-gauge/images/gauge1.png" alt="Customized gauge 1" style="margin-top:10px;"
|
||||
/>
|
||||
<div id="random_line" style="display:block;left: 0px;background: #ff4081;padding-top: 0px;height: 2px !important;width: 85px;margin: 2px 2px 2px 5px;"></div>
|
||||
</td>
|
||||
<td align="center">
|
||||
<img id='usage' src="src/circular-gauge/images/gauge2.png" alt="Customized gauge 2" style="margin-top:10px;" />
|
||||
<div id="usage_line" style="display:none;left: 0px;background: #ff4081;padding-top: 0px;height: 2px !important;width: 85px;margin: 2px 2px 2px 5px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<!--- property panel -->
|
||||
<tr style="height: 70px">
|
||||
<td style="padding-top: 20px">
|
||||
<div>Current Value</div>
|
||||
</td>
|
||||
<td style="padding-top: 20px">
|
||||
<div style="margin-left: 10px">
|
||||
<input type="range" id="currentValue" value="1800" min="1000" max="2000" style="width: 65%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 30px; text-align: center;">
|
||||
<span id='currentPointerValue' style="margin-left: -35px;">1800</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='rangebarColor'>RangeBar Color</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-left: 10px">
|
||||
<select id="barColor" class="form-control" >
|
||||
<option value="#FFDD00" selected = true>#FFDD00</option>
|
||||
<option value="#00bdae">#00bdae</option>
|
||||
<option value="#FF2680">#FF2680</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='range'>Range Color</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-left: 10px">
|
||||
<select id="rangeColor" class="form-control" >
|
||||
<option value="#E0E0E0" selected = true>#E0E0E0</option>
|
||||
<option value="#7bb4eb">#7bb4eb</option>
|
||||
<option value="#ea7a57">#ea7a57</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='pointColor'>Pointer Color</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-left: 10px">
|
||||
<select id="pointerColor" class="form-control" >
|
||||
<option value="#424242" selected = true>#424242</option>
|
||||
<option value="#6f6fe2">#6f6fe2</option>
|
||||
<option value="#9e480e">#9e480e</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates how to customize the gauge with pointers.
|
||||
Options to change the color and type of the pointer are available in the property panel.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to customize the gauge elements such as <code>pointers</code> and <code>range</code>.
|
||||
Here a needle and range bar are added to show the current value and its appearance
|
||||
can be customized by using options in property panel.
|
||||
</p>
|
||||
<p>
|
||||
More information on the range and pointer customization can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/"> documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
// tslint:disable
|
||||
// custom code end
|
||||
/**
|
||||
* Gauge Customization sample
|
||||
*/
|
||||
import { CircularGauge } from '@syncfusion/ej2-circulargauge';
|
||||
import { gauge1, gauge2 } from './customization-gauge';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let random: CircularGauge = new CircularGauge(gauge1());
|
||||
random.appendTo('#cutomization-container');
|
||||
let usage: CircularGauge = new CircularGauge(gauge2());
|
||||
usage.appendTo('#cutomization-container1');
|
||||
let gauge: CircularGauge = random; let isUsage: boolean = false;
|
||||
let barColor: DropDownList; let rangeColor: DropDownList; let pointerColor: DropDownList;
|
||||
barColor = new DropDownList({
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
gauge.axes[0].pointers[0].color = barColor.value.toString();
|
||||
gauge.refresh();
|
||||
}
|
||||
});
|
||||
barColor.appendTo('#barColor');
|
||||
rangeColor = new DropDownList({
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
gauge.axes[0].ranges[0].color = rangeColor.value.toString();
|
||||
gauge.refresh();
|
||||
}
|
||||
});
|
||||
rangeColor.appendTo('#rangeColor');
|
||||
pointerColor = new DropDownList({
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
let color: string = pointerColor.value.toString();
|
||||
if (!isUsage) {
|
||||
gauge.axes[0].pointers[1].color = color;
|
||||
gauge.axes[0].pointers[1].cap.border.color = color;
|
||||
gauge.axes[0].pointers[1].cap.color = color;
|
||||
}
|
||||
gauge.refresh();
|
||||
}
|
||||
});
|
||||
pointerColor.appendTo('#pointerColor');
|
||||
document.getElementById('usage').onclick = () => {
|
||||
document.getElementById('cutomization-container').style.display = 'none';
|
||||
document.getElementById('cutomization-container1').style.display = 'block';
|
||||
gauge = usage; isUsage = true;
|
||||
let element: HTMLSelectElement = <HTMLSelectElement>document.getElementById('currentValue');
|
||||
(element as any).min = '0.5'; (element as any).max = '100';
|
||||
element.value = usage.axes[0].pointers[0].value.toString();
|
||||
document.getElementById('currentPointerValue').innerHTML = usage.axes[0].pointers[0].value.toString();
|
||||
barColor.value = usage.axes[0].pointers[0].color; rangeColor.value = usage.axes[0].ranges[0].color;
|
||||
pointerColor.enabled = false;
|
||||
let pointElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('pointColor');
|
||||
pointElement.className = 'e-disabled';
|
||||
let currentElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('usage');
|
||||
let existElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('random');
|
||||
let currentLine: HTMLSelectElement = <HTMLSelectElement>document.getElementById('usage_line');
|
||||
let exisLine: HTMLSelectElement = <HTMLSelectElement>document.getElementById('random_line');
|
||||
currentLine.style.display = 'block';
|
||||
exisLine.style.display = 'none';
|
||||
};
|
||||
document.getElementById('random').onclick = () => {
|
||||
if (usage.element) {
|
||||
document.getElementById('cutomization-container1').style.display = 'none';
|
||||
document.getElementById('cutomization-container').style.display = 'block';
|
||||
gauge = random; isUsage = false;
|
||||
let currentElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('random');
|
||||
let existElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('usage');
|
||||
let exisLine: HTMLSelectElement = <HTMLSelectElement>document.getElementById('usage_line');
|
||||
let currentLine: HTMLSelectElement = <HTMLSelectElement>document.getElementById('random_line');
|
||||
currentLine.style.display = 'block'; exisLine.style.display = 'none';
|
||||
let element: HTMLSelectElement = <HTMLSelectElement>document.getElementById('currentValue');
|
||||
let pointElement: HTMLSelectElement = <HTMLSelectElement>document.getElementById('pointColor');
|
||||
pointElement.className = 'e-enabled'; pointerColor.enabled = true;
|
||||
(element as any).min = '1000'; (element as any).max = '2000';
|
||||
element.value = random.axes[0].pointers[0].value.toString();
|
||||
document.getElementById('currentPointerValue').innerHTML = random.axes[0].pointers[0].value.toString();
|
||||
barColor.value = random.axes[0].pointers[0].color;
|
||||
rangeColor.value = random.axes[0].ranges[0].color;
|
||||
pointerColor.value = random.axes[0].pointers[1].color;
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('currentValue').onpointermove = document.getElementById('currentValue').ontouchmove =
|
||||
document.getElementById('currentValue').onchange = () => {
|
||||
let value: number = +(<HTMLInputElement>document.getElementById('currentValue')).value;
|
||||
if (isUsage) {
|
||||
gauge.setPointerValue(0, 0, value);
|
||||
} else {
|
||||
gauge.setPointerValue(0, 0, value);
|
||||
gauge.setPointerValue(0, 1, value);
|
||||
}
|
||||
gauge.setAnnotationValue(0, 0, '<div style="color:#666666;font-size:35px;">' + value + (isUsage ? 'GB' : '') + '</div>');
|
||||
document.getElementById('currentPointerValue').innerHTML = value.toString();
|
||||
};
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1]; let color: string;
|
||||
if (selectedTheme === 'bootstrap') {
|
||||
color = '#a16ee5';
|
||||
} else if (selectedTheme === 'fabric') {
|
||||
color = '#1783FF';
|
||||
} else {
|
||||
color = '#ff4081';
|
||||
}
|
||||
// custom code end
|
||||
let exisLine: HTMLSelectElement = <HTMLSelectElement>document.getElementById('usage_line');
|
||||
let currentLine: HTMLSelectElement = <HTMLSelectElement>document.getElementById('random_line');
|
||||
exisLine.style.background = color; currentLine.style.background = color;
|
||||
};
|
||||
|
|
@ -1,27 +1,16 @@
|
|||
/**
|
||||
* Data Sample Gauge
|
||||
*/
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { Annotations } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
|
||||
export function gauge1(): CircularGauge {
|
||||
let gauge1: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '#germany',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '30%'
|
||||
}, {
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Segoe UI">Germany</div>',
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:inherit">Germany</div>',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '65%'
|
||||
}],
|
||||
|
|
@ -54,27 +43,28 @@ export function gauge1(): CircularGauge {
|
|||
color: '#777777'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge1;
|
||||
}
|
||||
export function gauge2(): CircularGauge {
|
||||
let gauge2: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '#usa',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '30%'
|
||||
}, {
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Segoe UI">USA</div>',
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:inherit">USA</div>',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '65%'
|
||||
}],
|
||||
|
|
@ -107,27 +97,28 @@ export function gauge2(): CircularGauge {
|
|||
color: '#777777'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge2;
|
||||
}
|
||||
export function gauge3(): CircularGauge {
|
||||
let gauge3: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '#uk',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '30%'
|
||||
}, {
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:Segoe UI">UK</div>',
|
||||
content: '<div style="color:#9E9E9E;font-size:16px;font-family:inherit">UK</div>',
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '65%'
|
||||
}],
|
||||
|
|
@ -160,7 +151,15 @@ export function gauge3(): CircularGauge {
|
|||
color: '#777777'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge3;
|
||||
}
|
||||
|
|
@ -3,15 +3,15 @@
|
|||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div id="container1" style="height:250px;">
|
||||
<div id="container1" style="height:230px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div id="container2" style="height:250px;">
|
||||
<div id="container2" style="height:230px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div id="container3" style="height:250px;">
|
||||
<div id="container3" style="height:230px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,22 +59,24 @@
|
|||
<div id='templateWrap'>
|
||||
<img src="src/circular-gauge/images/negative.png" alt="Negative value for UK" />
|
||||
<div class='des'>
|
||||
<div style="color:#424242;font-size:20px;font-family:Roboto">${pointers[0].value}%</div>
|
||||
<div style="color:#424242;font-size:20px;font-family:Roboto">-${pointers[0].value}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the live data sample in circular gauge.
|
||||
This sample shows live stock price data displayed in multiple circular gauges.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Pointer values in the gauge can be updated dynamically by using <code>setPointerValue</code> method.
|
||||
In this example, a stock price changes over the countries, are showed by using a gauge.
|
||||
The pointer value in the circular gauge can be dynamically updated using the <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/#setpointervalue">setPointerValue</a>
|
||||
method. In this example, the stock price changes across countries are displayed in multiple circular gauges.
|
||||
</p>
|
||||
<p>
|
||||
More information on the gauge and its methods can be found in can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/"> documentation section</a>.
|
||||
More information on the circular gauge can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/"> documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,18 +1,12 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
// custom code end
|
||||
/**
|
||||
* Data sample
|
||||
*/
|
||||
import { CircularGauge } from '@syncfusion/ej2-circulargauge';
|
||||
import { gauge1, gauge2, gauge3 } from './data-sample-gauge';
|
||||
import { Grid } from '@syncfusion/ej2-grids';
|
||||
import { Query, DataManager } from '@syncfusion/ej2-data';
|
||||
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let orderData: Object[] = [
|
||||
{
|
||||
'Country': 'Germany',
|
||||
|
|
@ -46,7 +40,6 @@ import { Query, DataManager } from '@syncfusion/ej2-data';
|
|||
]
|
||||
});
|
||||
grid.appendTo('#container5');
|
||||
|
||||
let toolTipInterval1: any = setInterval(
|
||||
(): void => {
|
||||
if (document.getElementById('container5')) {
|
||||
|
|
@ -75,10 +68,8 @@ import { Query, DataManager } from '@syncfusion/ej2-data';
|
|||
}
|
||||
];
|
||||
let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(3));
|
||||
|
||||
grid.dataSource = data;
|
||||
grid.refresh();
|
||||
|
||||
germany.axes[0].pointers[0].animation.enable = true;
|
||||
usa.axes[0].pointers[0].animation.enable = true;
|
||||
uk.axes[0].pointers[0].animation.enable = true;
|
||||
|
|
@ -88,8 +79,6 @@ import { Query, DataManager } from '@syncfusion/ej2-data';
|
|||
germany.setAnnotationValue(0, 0, '#germany');
|
||||
usa.setAnnotationValue(0, 0, '#usa');
|
||||
uk.setAnnotationValue(0, 0, '#uk');
|
||||
|
||||
|
||||
} else {
|
||||
clearInterval(toolTipInterval1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample shows the circular gauge's basic rendering, which includes an axis and a pointer.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, an axis with a pointer is used, and you can use <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/axisModel/">axes</a> and <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/pointerModel/">pointers</a> to get
|
||||
the circular gauge's basic appearance. The circular gauge component helps in the visualization of numerical
|
||||
scale values on a circular scale.
|
||||
</p>
|
||||
<p>
|
||||
More information on the circular gauge can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
(window as any).default = (): void => {
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
radius: '80%',
|
||||
startAngle: 230,
|
||||
endAngle: 130,
|
||||
majorTicks: {
|
||||
offset: 5
|
||||
},
|
||||
lineStyle: { width: 8, color: '#E0E0E0' },
|
||||
minorTicks: {
|
||||
offset: 5
|
||||
},
|
||||
labelStyle: {
|
||||
font: {
|
||||
fontFamily: 'inherit'
|
||||
},
|
||||
offset: -1
|
||||
},
|
||||
pointers: [{
|
||||
value: 60,
|
||||
radius: '60%',
|
||||
pointerWidth: 7,
|
||||
cap: {
|
||||
radius: 8,
|
||||
color: '#c06c84',
|
||||
border: { width: 0 },
|
||||
},
|
||||
needleTail: {
|
||||
length: "0%",
|
||||
},
|
||||
color: '#c06c84',
|
||||
animation: {
|
||||
enable: true,
|
||||
duration: 500,
|
||||
},
|
||||
}]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#gauge');
|
||||
};
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates the default rendering of circular gauge.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render a default circular gauge. The CircularGauge control visualizes the numerical values
|
||||
of scales in a circular manner. You can use <code>axes</code>, <code>ranges</code>, <code>pointers</code> properties to customize the default appearance of the gauge. In this sample, a axis with multiple ranges and a pointer
|
||||
has been used.
|
||||
</p>
|
||||
<p>
|
||||
More information on the gauge can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
// custom code end
|
||||
/**
|
||||
* Default sample
|
||||
*/
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [{
|
||||
radius: '80%',
|
||||
startAngle: 230,
|
||||
endAngle: 130,
|
||||
majorTicks: {
|
||||
width: 0
|
||||
},
|
||||
lineStyle: { width: 8 },
|
||||
minorTicks: {
|
||||
width: 0
|
||||
},
|
||||
labelStyle: {
|
||||
font: {
|
||||
fontFamily: 'Segoe UI',
|
||||
size: '12px',
|
||||
fontWeight: 'Regular'
|
||||
},
|
||||
offset: -5
|
||||
},
|
||||
pointers: [{
|
||||
value: 60,
|
||||
radius: '60%',
|
||||
pointerWidth: 7,
|
||||
cap: {
|
||||
radius: 8,
|
||||
border: { width: 0 }
|
||||
},
|
||||
needleTail: {
|
||||
length: '25%'
|
||||
}
|
||||
}]
|
||||
}]
|
||||
});
|
||||
circulargauge.appendTo('#gauge');
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div>
|
||||
<div class="control-section">
|
||||
<div id="direction-container"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates how to create a direction compass by modifying the circular gauge's functionalities
|
||||
to
|
||||
meet the needs of the user.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, a direction compass has been depicted by adding a couple of needle pointers in the circular
|
||||
gauge and customizing labels to show the direction.
|
||||
</p>
|
||||
<p>
|
||||
More information on the circular gauge can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import { CircularGauge, IAxisLabelRenderEventArgs, ILoadedEventArgs, GaugeTheme, Gradient } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Gradient);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
let value: string[] = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', ''];
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
radius: '80%',
|
||||
lineStyle: { width: 20, color: '#E0E0E0' },
|
||||
labelStyle: {
|
||||
font: {
|
||||
size: '12px', fontFamily: 'inherit'
|
||||
},
|
||||
autoAngle: true,
|
||||
hiddenLabel: 'Last',
|
||||
offset: 10
|
||||
}, majorTicks: {
|
||||
height: 15,
|
||||
interval: 1
|
||||
}, minorTicks: {
|
||||
height: 10,
|
||||
interval: 0.5
|
||||
},
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
minimum: 0,
|
||||
maximum: 8,
|
||||
pointers: [{
|
||||
value: 7,
|
||||
radius: '50%',
|
||||
pointerWidth: 30,
|
||||
linearGradient: {
|
||||
startValue: '0%',
|
||||
endValue: '100%',
|
||||
colorStop: [
|
||||
{ color: '#ff6b78', offset: '0%', opacity: 0.9 },
|
||||
{ color: '#e20a22', offset: '70%', opacity: 0.9 }]
|
||||
},
|
||||
cap: {
|
||||
radius: 15,
|
||||
color: '#ffffff',
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
animation: { enable: false }
|
||||
}, {
|
||||
value: 3,
|
||||
radius: '50%',
|
||||
color: '#f7f7f7',
|
||||
pointerWidth: 30,
|
||||
cap: {
|
||||
radius: 15,
|
||||
color: '#ffffff',
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
animation: { enable: false }
|
||||
}]
|
||||
}],
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
args.text = value[args.value];
|
||||
},
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#direction-container');
|
||||
};
|
||||
|
|
@ -1,374 +0,0 @@
|
|||
/**
|
||||
* Dynamic Gauge
|
||||
*/
|
||||
import { CircularGauge, ILoadedEventArgs, IAxisLabelRenderEventArgs, IResizeEventArgs } from '@syncfusion/ej2-circulargauge';
|
||||
import { Annotations, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
let gauge1StartAngle: number = 200;
|
||||
let gauge1EndAngle: number = 365;
|
||||
let gauge2StartAngle: number = 110;
|
||||
let gauge2EndAngle: number = 180;
|
||||
let gauge3StartAngle: number = 0;
|
||||
let gauge3EndAngle: number = 70;
|
||||
let gauge1Interval: number = 1;
|
||||
let gauge1FontSize: string = '14px';
|
||||
let gauge1Radius: string = '95%';
|
||||
let subGauge1Radius: string = '95%';
|
||||
let subGauge2Radius: string = '75%';
|
||||
let tickWidth: number = 3;
|
||||
let annotationContent: string = '<div><span>RPM <br/>X 1000</span></div>';
|
||||
let annotationRadius: string = '40%';
|
||||
let annotationAngle: number = 200;
|
||||
let centerX: string = '47%';
|
||||
let centerY: string = '50%';
|
||||
let fuelRadius: string = '40%';
|
||||
let gauge1LineWidth: number = 3;
|
||||
let cloudAngle: number = 10;
|
||||
let tickHeight: number = 10;
|
||||
export function gauge(): CircularGauge {
|
||||
|
||||
let gauge: CircularGauge = new CircularGauge({
|
||||
axes: [
|
||||
{
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
position: 'Inside', format: '####', font: { size: '14px', color: '#565656' }
|
||||
}, majorTicks: {
|
||||
width: 3, height: 15, color: '#565656', interval: 20
|
||||
}, minorTicks: {
|
||||
width: 2, height: 10, color: '#565656'
|
||||
},
|
||||
minimum: 0, maximum: 220, radius: '100%',
|
||||
startAngle: 240, endAngle: 120,
|
||||
pointers: [
|
||||
{
|
||||
value: 0, radius: '65%',
|
||||
pointerWidth: 8,
|
||||
cap: { color: '#FF9200', radius: 9, border: { width: 0, color: '#FF7A00' } },
|
||||
needleTail: { length: '20%', color: '#FF9200' },
|
||||
color: '#FF9200',
|
||||
animation: {
|
||||
enable: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
lineStyle: { width: 3, color: 'url(#bordercolor)' },
|
||||
startAngle: 0,
|
||||
endAngle: 0,
|
||||
radius: '90%',
|
||||
labelStyle: {
|
||||
font: { size: '0px', color: 'blue' }
|
||||
}, majorTicks: {
|
||||
height: 0,
|
||||
}, minorTicks: {
|
||||
height: 0,
|
||||
}, pointers: [],
|
||||
annotations: [{
|
||||
zIndex: '1', angle: 270,
|
||||
radius: '100%'
|
||||
}, {
|
||||
zIndex: '1', angle: 90,
|
||||
radius: '110%'
|
||||
}, {
|
||||
zIndex: '1', angle: 90,
|
||||
radius: '110%'
|
||||
}, {
|
||||
zIndex: '1', angle: 180,
|
||||
radius: '40%', content: '0 KM/H'
|
||||
}]
|
||||
}
|
||||
],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
let width: number = args.gauge.element.offsetWidth;
|
||||
let height: number = args.gauge.element.offsetHeight;
|
||||
if (width < 700) {
|
||||
gauge1StartAngle = 310; gauge1EndAngle = 50;
|
||||
gauge2StartAngle = 10; gauge2EndAngle = 90;
|
||||
gauge3StartAngle = 270; gauge3EndAngle = 350;
|
||||
gauge1Interval = 2; gauge1FontSize = '10px';
|
||||
gauge1Radius = '70%'; subGauge1Radius = '85%';
|
||||
subGauge2Radius = '65%'; centerX = '50%';
|
||||
centerY = '30%'; cloudAngle = 300;
|
||||
annotationContent = '<div style="font-size: 8px;"><span>RPM X 1000</span></div>';
|
||||
annotationAngle = 180; fuelRadius = '-25%';
|
||||
annotationRadius = '10';
|
||||
tickWidth = 2; tickHeight = 8;
|
||||
gauge1LineWidth = 0;
|
||||
args.gauge.axes[1].annotations[0].radius = '110%';
|
||||
args.gauge.axes[1].annotations[0].angle = 180;
|
||||
args.gauge.axes[1].annotations[1].radius = '20%';
|
||||
args.gauge.axes[1].annotations[1].angle = 40;
|
||||
args.gauge.axes[1].annotations[2].radius = '20%';
|
||||
args.gauge.axes[1].annotations[2].angle = 320;
|
||||
args.gauge.axes[1].annotations[0].content = '<div id="rpm" style="width:' + 200 + 'px;height:' + 200 + 'px;"></div>';
|
||||
args.gauge.axes[1].annotations[1].content = '<div id="fuel" style="width:' + 200 + 'px;height:' + 200 + 'px;"></div>';
|
||||
args.gauge.axes[1].annotations[2].content = '<div id="battery" style="width:' + 200 + 'px;height:' + 200 + 'px;"></div>';
|
||||
} else {
|
||||
width = (width / 3) + 25;
|
||||
args.gauge.axes[1].annotations[0].content =
|
||||
'<div id="rpm" style="width:' + width + 'px;height:' + width + 'px;"></div>';
|
||||
args.gauge.axes[1].annotations[1].content =
|
||||
'<div id="fuel" style="width:' + width + 'px;height:' + width + 'px;"></div>';
|
||||
args.gauge.axes[1].annotations[2].content =
|
||||
'<div id="battery" style="width:' + width + 'px;height:' + width + 'px;"></div>';
|
||||
}
|
||||
},
|
||||
resized: (args: IResizeEventArgs) => {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
return gauge;
|
||||
}
|
||||
|
||||
export function gauge1(): CircularGauge {
|
||||
|
||||
let gauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
centerX: centerX,
|
||||
centerY: centerY,
|
||||
axes: [
|
||||
{
|
||||
annotations: [
|
||||
{
|
||||
content: annotationContent,
|
||||
angle: annotationAngle,
|
||||
radius: annotationRadius
|
||||
}
|
||||
],
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: 'url(#bordercolor)'
|
||||
},
|
||||
startAngle: gauge1StartAngle,
|
||||
endAngle: gauge1EndAngle,
|
||||
labelStyle: {
|
||||
font: {
|
||||
size: gauge1FontSize,
|
||||
fontFamily: 'Roboto',
|
||||
fontWeight: 'Medium',
|
||||
color: '#231F20'
|
||||
}
|
||||
}, majorTicks: {
|
||||
width: 3, height: 10, color: '#565656', interval: gauge1Interval
|
||||
}, minorTicks: {
|
||||
width: 2, height: 5, color: '#565656'
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 6,
|
||||
radius: gauge1Radius,
|
||||
pointers: [{
|
||||
color: '#FF7A00',
|
||||
cap: { radius: 5, color: 'FF7A00', border: { color: '#FF7A00', width: 0 } },
|
||||
radius: '60%',
|
||||
pointerWidth: 5,
|
||||
value: 1,
|
||||
animation: { duration: 0 }
|
||||
}]
|
||||
}, {
|
||||
lineStyle: {
|
||||
width: gauge1LineWidth,
|
||||
color: 'url(#bordercolor)'
|
||||
},
|
||||
radius: '90%',
|
||||
pointers: [],
|
||||
labelStyle: { font: { size: '0px' } },
|
||||
majorTicks: {
|
||||
height: 0
|
||||
}, minorTicks: {
|
||||
height: 0
|
||||
}, startAngle: 156, endAngle: 24
|
||||
}
|
||||
]
|
||||
});
|
||||
return gauge;
|
||||
}
|
||||
|
||||
export function gauge2(): CircularGauge {
|
||||
|
||||
let gauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [
|
||||
{
|
||||
lineStyle: {
|
||||
width: tickWidth === 2 ? 0 : 3,
|
||||
color: '#565656'
|
||||
},
|
||||
startAngle: gauge2StartAngle,
|
||||
endAngle: gauge2EndAngle,
|
||||
labelStyle: {
|
||||
useRangeColor: true,
|
||||
font: {
|
||||
fontFamily: 'Roboto',
|
||||
fontWeight: 'Medium',
|
||||
color: '#231F20'
|
||||
}
|
||||
}, majorTicks: {
|
||||
width: tickWidth === 2 ? tickWidth : 5,
|
||||
height: tickHeight === 8 ? tickHeight : 15,
|
||||
interval: 40,
|
||||
useRangeColor: true
|
||||
}, minorTicks: {
|
||||
height: tickHeight,
|
||||
width: tickWidth,
|
||||
useRangeColor: true,
|
||||
interval: 10
|
||||
},
|
||||
minimum: 70,
|
||||
maximum: 110,
|
||||
radius: subGauge2Radius,
|
||||
ranges: [{
|
||||
start: 70,
|
||||
end: 70,
|
||||
color: '#F03E3E',
|
||||
startWidth: 0, endWidth: 0
|
||||
}, {
|
||||
start: 71,
|
||||
end: 109,
|
||||
color: '#565656',
|
||||
startWidth: 0, endWidth: 0
|
||||
}, {
|
||||
start: 110,
|
||||
end: 110,
|
||||
color: 'green',
|
||||
startWidth: 0, endWidth: 0
|
||||
}],
|
||||
pointers: [{
|
||||
color: '#757575',
|
||||
type: 'Marker',
|
||||
cap: { radius: 5, color: 'white', border: { color: 'Teal', width: 2 } },
|
||||
markerShape: 'Triangle',
|
||||
markerWidth: 10,
|
||||
markerHeight: 10,
|
||||
radius: '90%',
|
||||
pointerWidth: 5,
|
||||
value: 90,
|
||||
animation: { duration: 500 }
|
||||
}],
|
||||
annotations: [{
|
||||
radius: fuelRadius,
|
||||
content: '#fuelContent',
|
||||
angle: 180
|
||||
}]
|
||||
}
|
||||
],
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
args.text = args.value === 70 ? 'F' : 'E';
|
||||
}
|
||||
});
|
||||
return gauge;
|
||||
}
|
||||
export function gauge3(): CircularGauge {
|
||||
|
||||
let gauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [
|
||||
{
|
||||
lineStyle: {
|
||||
width: tickWidth === 2 ? 0 : 3,
|
||||
color: '#565656'
|
||||
},
|
||||
startAngle: gauge3StartAngle,
|
||||
endAngle: gauge3EndAngle,
|
||||
labelStyle: {
|
||||
useRangeColor: true,
|
||||
font: {
|
||||
fontFamily: 'Roboto',
|
||||
fontWeight: 'Medium',
|
||||
color: '#231F20'
|
||||
}
|
||||
}, majorTicks: {
|
||||
width: tickWidth,
|
||||
height: tickHeight,
|
||||
interval: 40,
|
||||
useRangeColor: true
|
||||
}, minorTicks: {
|
||||
height: tickHeight - 3,
|
||||
width: tickWidth,
|
||||
useRangeColor: true,
|
||||
interval: 10
|
||||
},
|
||||
minimum: 70,
|
||||
maximum: 110,
|
||||
radius: subGauge1Radius,
|
||||
ranges: [{
|
||||
start: 70,
|
||||
end: 70,
|
||||
color: '#F03E3E',
|
||||
startWidth: 0, endWidth: 0
|
||||
}, {
|
||||
start: 71,
|
||||
end: 109,
|
||||
color: '#565656',
|
||||
startWidth: 0, endWidth: 0
|
||||
}, {
|
||||
start: 110,
|
||||
end: 110,
|
||||
color: 'green',
|
||||
startWidth: 0, endWidth: 0
|
||||
}],
|
||||
pointers: [{
|
||||
color: '#757575',
|
||||
type: 'Marker',
|
||||
cap: { radius: 5, color: 'white', border: { color: 'Teal', width: 2 } },
|
||||
markerShape: 'Triangle',
|
||||
markerWidth: 10,
|
||||
markerHeight: 10,
|
||||
radius: '90%',
|
||||
pointerWidth: 5,
|
||||
value: 90,
|
||||
animation: { duration: 500 }
|
||||
}],
|
||||
annotations: [{
|
||||
radius: '50%',
|
||||
content: '#tool',
|
||||
angle: cloudAngle
|
||||
}]
|
||||
}, {
|
||||
lineStyle: {
|
||||
width: gauge1LineWidth,
|
||||
color: 'url(#bordercolor)'
|
||||
},
|
||||
pointers: [],
|
||||
radius: '90%',
|
||||
labelStyle: { font: { size: '0px' } },
|
||||
majorTicks: {
|
||||
height: 0
|
||||
}, minorTicks: {
|
||||
height: 0
|
||||
}, startAngle: 333, endAngle: 207
|
||||
}
|
||||
],
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
args.text = args.value === 70 ? 'C' : 'H';
|
||||
}
|
||||
});
|
||||
return gauge;
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<div class="control-section">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-1">
|
||||
</div>
|
||||
<div class="col-sm-10">
|
||||
<div id="dynamic-container" style="height:400px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-11">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Pointer values in the gauge can be updated dynamically using <code>setPointerValue</code> method. In this example
|
||||
a speedometer is depicted with speed and fuel changes has been updated dynamically.
|
||||
</p>
|
||||
<p>
|
||||
More information on the gauge can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<svg style="height: 0">
|
||||
<defs>
|
||||
<lineargradient id="bordercolor" x1="1.8369701987210297e-16" y1="0" x2="0" y2="1">
|
||||
<stop offset="30%" stop-color="#565656" stop-opacity="1" />
|
||||
<stop offset="60%" stop-color="#565656" stop-opacity="1" />
|
||||
<stop offset="90%" stop-color="#565656" stop-opacity="1" />
|
||||
<stop offset="100%" stop-color="#565656" stop-opacity="1" />
|
||||
</lineargradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
</html>
|
||||
<script id="tool" type="text/x-template">
|
||||
<div id='templateWrap'>
|
||||
<img src="src/circulargauge/images/battery.png" alt="Battery indication">
|
||||
</div>
|
||||
</script>
|
||||
<script id="fuelContent" type="text/x-template">
|
||||
<div id='templateWrap'>
|
||||
<img src="src/circulargauge/images/fuel.png" alt="Fuel indication">
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
// custom code end
|
||||
/**
|
||||
* Dynamic sample
|
||||
*/
|
||||
import { CircularGauge } from '@syncfusion/ej2-circulargauge';
|
||||
import { Annotations } from '@syncfusion/ej2-circulargauge';
|
||||
import { gauge, gauge1, gauge2, gauge3 } from './dynamic-gauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let toolTipInterval: Function;
|
||||
let toolTipInterval1: any;
|
||||
let GEARS: number[] = [0.14, 0.06, 0.035, 0.027, 0.019];
|
||||
let speed: number = 0;
|
||||
let skip: number = 0;
|
||||
let gear: number = 0;
|
||||
let count: number = 0;
|
||||
let start: boolean = true;
|
||||
let circulargauge1: CircularGauge = new CircularGauge(gauge());
|
||||
circulargauge1.appendTo('#dynamic-container');
|
||||
let circulargauge2: CircularGauge = new CircularGauge(gauge1());
|
||||
circulargauge2.appendTo('#rpm');
|
||||
let circulargauge3: CircularGauge = new CircularGauge(gauge2());
|
||||
circulargauge3.appendTo('#fuel');
|
||||
let circulargauge4: CircularGauge = new CircularGauge(gauge3());
|
||||
circulargauge4.appendTo('#battery');
|
||||
toolTipInterval1 = setInterval(
|
||||
(): void => {
|
||||
if (document.getElementById('dynamic-container')) {
|
||||
if (speed < 200 && start) {
|
||||
count = 0;
|
||||
circulargauge1.axes[0].pointers[0].animation.duration = 30;
|
||||
circulargauge2.axes[0].pointers[0].animation.duration = 30;
|
||||
if (GEARS[gear] * speed > 4 && gear < GEARS.length) {
|
||||
gear++;
|
||||
skip = 400 / 50;
|
||||
}
|
||||
if (skip-- < 0) {
|
||||
speed += 0.6 - (0.0017 * speed);
|
||||
}
|
||||
circulargauge1.setPointerValue(0, 0, speed);
|
||||
circulargauge1.setAnnotationValue(1, 3, Math.round(speed) + ' KM/H');
|
||||
circulargauge2.setPointerValue(0, 0, GEARS[gear] * speed + 0.9);
|
||||
} else {
|
||||
count = count + 1;
|
||||
if (start) {
|
||||
if (count < 200) {
|
||||
circulargauge1.setAnnotationValue(1, 3, Math.round((Math.random() * (200 - 202) + 202)) + ' KM');
|
||||
circulargauge1.setPointerValue(0, 0, Math.random() * (200 - 202) + 202);
|
||||
} else {
|
||||
speed = 0;
|
||||
gear = 0;
|
||||
circulargauge1.axes[0].pointers[0].animation.duration = 2000;
|
||||
circulargauge2.axes[0].pointers[0].animation.duration = 2000;
|
||||
circulargauge1.setPointerValue(0, 0, speed);
|
||||
circulargauge1.setAnnotationValue(1, 3, Math.round(speed) + ' KM/H');
|
||||
circulargauge2.setPointerValue(0, 0, 0);
|
||||
start = false;
|
||||
}
|
||||
} else {
|
||||
start = count > 350;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
clearInterval(toolTipInterval1);
|
||||
}
|
||||
},
|
||||
50
|
||||
);
|
||||
};
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- property panel-->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Export Type </div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<select id="type">
|
||||
<option value='JPEG' selected>JPEG</option>
|
||||
<option value='PNG'>PNG</option>
|
||||
<option value='SVG'>SVG</option>
|
||||
<option value='PDF'>PDF</option>
|
||||
</select>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> File Name </div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="e-float-input" style='margin-top: 0px;'>
|
||||
<input value="Gauge" id="fileName" style="width: 100%;">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="button-control" style="height: 70px" align='center'>
|
||||
<td align='center'>
|
||||
<div>
|
||||
<button id="export" style="text-transform:none !important;width: 90px;">Export</button>
|
||||
</div>
|
||||
</td>
|
||||
<td align='center'>
|
||||
<div>
|
||||
<button id="print" style="text-transform:none !important;width: 90px;">Print</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the print and export functionality of circular gauge.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to export and print the rendered circular gauge. The Circular Gauge can be exported to JPEG, PNG, SVG, and PDF formats. Print functionality is done by <code>print</code> method when <code>allowPrint</code> is set as true. Export functionality is done by <code>export</code> method when <code>allowImageExport</code> and <code>allowPdfExport</code> is set as true.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500"> <b>Injecting Module</b></p>
|
||||
<p>
|
||||
To make use of the print and export support, we need to inject the <code>CircularGauge</code> module using the <code> CircularGauge.Inject(Print)</code>, <code> CircularGauge.Inject(ImageExport)</code> and <code> CircularGauge.Inject(PdfExport)</code>
|
||||
</p>
|
||||
<p>
|
||||
More information on the print and export can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-print-and-export/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#button-control {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.e-play-icon::before {
|
||||
content: '\e34b';
|
||||
}
|
||||
|
||||
.e-play-icon1::before {
|
||||
content: '\e728';
|
||||
}
|
||||
|
||||
.e-view.fabric .e-play-icon::before, .e-view.fabric-dark .e-play-icon::before {
|
||||
content: '\e7df';
|
||||
}
|
||||
|
||||
.e-view.fabric .e-play-icon1::before, .e-view.fabric-dark .e-play-icon1::before {
|
||||
content: '\e710';
|
||||
}
|
||||
|
||||
.e-view.fluent .e-play-icon::before, .e-view.fluent-dark .e-play-icon::before {
|
||||
content: '\e75d';
|
||||
}
|
||||
|
||||
.e-view.fluent .e-play-icon1::before, .e-view.fluent-dark .e-play-icon1::before {
|
||||
content: '\e72e';
|
||||
}
|
||||
|
||||
.e-view.bootstrap .e-play-icon::before {
|
||||
content: '\ebd2';
|
||||
}
|
||||
|
||||
.e-view.bootstrap4 .e-play-icon1::before {
|
||||
content: '\e780';
|
||||
}
|
||||
|
||||
.e-view.bootstrap4 .e-play-icon::before {
|
||||
content: '\e743';
|
||||
}
|
||||
|
||||
.e-view.tailwind .e-play-icon::before, .e-view.tailwind-dark .e-play-icon::before {
|
||||
content: '\e76c';
|
||||
}
|
||||
|
||||
.e-view.tailwind .e-play-icon1::before, .e-view.tailwind-dark .e-play-icon1::before {
|
||||
content: '\e7bf';
|
||||
}
|
||||
|
||||
.e-view.highcontrast .e-play-icon::before {
|
||||
content: '\ebf9';
|
||||
}
|
||||
|
||||
.e-view.highcontrast .e-play-icon1::before {
|
||||
content: '\e710';
|
||||
}
|
||||
|
||||
.e-view.bootstrap5 .e-play-icon::before, .e-view.bootstrap5-dark .e-play-icon::before {
|
||||
content: '\e75d';
|
||||
}
|
||||
|
||||
.e-view.bootstrap5 .e-play-icon1::before, .e-view.bootstrap5-dark .e-play-icon1::before {
|
||||
content: '\e72e';
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- property panel -->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 70%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Gradient Type </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-left: -20px">
|
||||
<select id="gradient" class="form-control">
|
||||
<option value='0' >Linear Gradient</option>
|
||||
<option value='1'>Radial Gradient</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>Elements</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-left: -20px">
|
||||
<select id="element" class="form-control">
|
||||
<option value='0' >Range</option>
|
||||
<option value='1'>Pointer</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample shows how linear gradient color and radial gradient color are applied to the circular gauge elements.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
The circular gauge supports gradient coloring in a linear or radial manner. The gradient type can be changed using the <b>Gradient Type</b> dropdown list in the properties panel. In the same way, the element for which the gradient color should be applied is decided by the <b>Elements</b> dropdown list.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500"> <b>Injecting Module</b></p>
|
||||
<p>To apply gradient coloring in the circular gauge, we need to inject the <code>Gradient</code> module using <code>CircularGauge.Inject(Gradient)</code> method.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
/**
|
||||
* gradient sample
|
||||
*/
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme, Gradient } from '@syncfusion/ej2-circulargauge';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
CircularGauge.Inject(Gradient);
|
||||
|
||||
let rangeLinearGradient : Object = {
|
||||
startValue: '0%',
|
||||
endValue: '100%',
|
||||
colorStop: [
|
||||
{ color: '#9E40DC', offset: '0%', opacity: 0.9 },
|
||||
{ color: '#E63B86', offset: '70%', opacity: 0.9 },
|
||||
]
|
||||
};
|
||||
let pointerLinearGradient : Object = {
|
||||
startValue: '0%',
|
||||
endValue: '100%',
|
||||
colorStop: [
|
||||
{ color: '#FEF3F9', offset: '0%', opacity: 0.9 },
|
||||
{ color: '#E63B86', offset: '70%', opacity: 0.9 }]
|
||||
};
|
||||
let rangeRadialGradient: Object = {
|
||||
radius: '50%',
|
||||
innerPosition: { x: '50%', y: '50%' },
|
||||
outerPosition: { x: '50%', y: '50%' },
|
||||
colorStop: [
|
||||
{ color: '#9E40DC', offset: '90%', opacity: 0.9 },
|
||||
{ color: '#E63B86', offset: '160%', opacity: 0.9 }]
|
||||
};
|
||||
let pointerRadialGradient: Object = {
|
||||
radius: '50%',
|
||||
innerPosition: { x: '50%', y: '50%' },
|
||||
outerPosition: { x: '50%', y: '50%' },
|
||||
colorStop: [
|
||||
{ color: '#FEF3F9', offset: '0%', opacity: 0.9 },
|
||||
{ color: '#E63B86', offset: '60%', opacity: 0.9 }]
|
||||
};
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
axes: [{
|
||||
lineStyle: { width: 0, color: 'transparent' },
|
||||
startAngle: 210, endAngle: 150, minimum: 0, maximum: 100, radius: '80%',
|
||||
labelStyle: { font: { fontFamily: 'Segoe UI',
|
||||
size: '12px',
|
||||
fontWeight: 'Regular' }, offset: 10 },
|
||||
majorTicks: { width: 0, interval: 10 },
|
||||
minorTicks: { width: 0 },
|
||||
ranges: [
|
||||
{
|
||||
start: 0, end: 120, startWidth: 18, endWidth: 18, color: '#E63B86',
|
||||
linearGradient: rangeLinearGradient,
|
||||
roundedCornerRadius: 10
|
||||
}],
|
||||
pointers: [{
|
||||
animation: { enable: false }, value: 65, radius: '85%', color: '#E63B86',
|
||||
pointerWidth: 12,
|
||||
cap: { radius: 12 , border: {color: '#E63B86', width: 2.5}, color: 'white' },
|
||||
needleTail: { length: '0%'},
|
||||
needleStartWidth: 2
|
||||
}]
|
||||
}]
|
||||
});
|
||||
circulargauge.appendTo('#gauge');
|
||||
|
||||
let gradientType: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
width: '100%',
|
||||
change: () => {
|
||||
if (gradientType.value === '1' && element.value === '0') {
|
||||
circulargauge.axes[0].ranges[0].linearGradient = null;
|
||||
circulargauge.axes[0].ranges[0].radialGradient = rangeRadialGradient;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
if (element.value === '0' && gradientType.value === '0') {
|
||||
circulargauge.axes[0].ranges[0].linearGradient = rangeLinearGradient;
|
||||
circulargauge.axes[0].ranges[0].radialGradient = null;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
if (gradientType.value === '1' && element.value === '1') {
|
||||
circulargauge.axes[0].pointers[0].radialGradient = pointerRadialGradient;
|
||||
circulargauge.axes[0].pointers[0].linearGradient = null;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
if (gradientType.value === '0' && element.value === '1') {
|
||||
circulargauge.axes[0].pointers[0].linearGradient = pointerLinearGradient;
|
||||
circulargauge.axes[0].pointers[0].radialGradient = null;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
}
|
||||
});
|
||||
gradientType.appendTo('#gradient');
|
||||
let element: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
width: '100%',
|
||||
change: () => {
|
||||
if (gradientType.value === '1' && element.value === '0') {
|
||||
circulargauge.axes[0].ranges[0].linearGradient = null;
|
||||
circulargauge.axes[0].ranges[0].radialGradient = rangeRadialGradient;
|
||||
circulargauge.axes[0].pointers[0].linearGradient = null;
|
||||
circulargauge.axes[0].pointers[0].radialGradient = null;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
if (element.value === '0' && gradientType.value === '0') {
|
||||
circulargauge.axes[0].ranges[0].linearGradient = rangeLinearGradient;
|
||||
circulargauge.axes[0].ranges[0].radialGradient = null;
|
||||
circulargauge.axes[0].pointers[0].linearGradient = null;
|
||||
circulargauge.axes[0].pointers[0].radialGradient = null;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
if (gradientType.value === '1' && element.value === '1') {
|
||||
circulargauge.axes[0].pointers[0].radialGradient = pointerRadialGradient;
|
||||
circulargauge.axes[0].pointers[0].linearGradient = null;
|
||||
circulargauge.axes[0].ranges[0].linearGradient = null;
|
||||
circulargauge.axes[0].ranges[0].radialGradient = null;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
if (gradientType.value === '0' && element.value === '1') {
|
||||
circulargauge.axes[0].pointers[0].linearGradient = pointerLinearGradient;
|
||||
circulargauge.axes[0].pointers[0].radialGradient = null;
|
||||
circulargauge.axes[0].ranges[0].linearGradient = null;
|
||||
circulargauge.axes[0].ranges[0].radialGradient = null;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
}
|
||||
});
|
||||
element.appendTo('#element');
|
||||
};
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<div class="control-section">
|
||||
<div id="pointer-container"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the shot put distance covered by the athletes using the image pointer in the circular
|
||||
gauge.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to use an image to customize the pointer in the circular gauge. The image can
|
||||
be added to the circular gauge's pointer primarily through the use of the <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/pointerModel/#type">type</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/pointerModel/#markershape">markerShape</a>
|
||||
and <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/pointerModel/#imageurl">imageUrl</a>
|
||||
properties in the <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/pointerModel/">pointers</a>.
|
||||
</p>
|
||||
<p>
|
||||
More information on the pointers can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-pointers/#marker-pointer">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.control-section {
|
||||
min-height: 450px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -1,67 +1,56 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
// custom code end
|
||||
/**
|
||||
* Point Image Customization Sample
|
||||
*/
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { Annotations } from '@syncfusion/ej2-circulargauge';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
title: 'Shot Put Distance',
|
||||
background:'transparent',
|
||||
titleStyle: {
|
||||
size: '18px',
|
||||
fontFamily: 'Segoe UI'
|
||||
size: '16px',
|
||||
fontFamily: 'inherit'
|
||||
},
|
||||
centerY: '57%',
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: '12 M', radius: '108%', angle: 98, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
fontFamily: 'inherit', size: '14px', color: '#9E9E9E'
|
||||
}
|
||||
}, {
|
||||
content: '11 M', radius: '80%', angle: 81, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
fontFamily: 'inherit', size: '14px', color: '#9E9E9E'
|
||||
}
|
||||
}, {
|
||||
content: '10 M', radius: '50%', angle: 69, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
fontFamily: 'inherit', size: '14px', color: '#9E9E9E'
|
||||
}
|
||||
}, {
|
||||
content: 'Doe', radius: '108%', angle: 190, zIndex: '1',
|
||||
content: 'Doe', radius: '106%', angle: Browser.isDevice ? 190 : 192, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
fontFamily: 'inherit', size: '14px', color: '#9E9E9E'
|
||||
}
|
||||
}, {
|
||||
content: 'Almaida', radius: '80%', angle: 185, zIndex: '1',
|
||||
content: 'Almaida', radius: '78%', angle: Browser.isDevice ? 178 : 184, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
fontFamily: 'inherit', size: '14px', color: '#9E9E9E'
|
||||
}
|
||||
}, {
|
||||
content: 'John', radius: '50%', angle: 180, zIndex: '1',
|
||||
content: 'John', radius: Browser.isDevice ? '50%' : '48%', angle: Browser.isDevice ? 174 : 179, zIndex: '1',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
}
|
||||
fontFamily: 'inherit', size: '14px', color: '#9E9E9E'
|
||||
}
|
||||
}],
|
||||
lineStyle: {
|
||||
width: 0, color: '#1d1d1d'
|
||||
},
|
||||
radius: '90%',
|
||||
radius: '80%',
|
||||
labelStyle: {
|
||||
font: {
|
||||
size: '0px'
|
||||
|
|
@ -119,7 +108,15 @@ CircularGauge.Inject(Annotations);
|
|||
radius: '48%', markerWidth: 28, markerHeight: 28,
|
||||
animation: { duration: 1500 }
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#pointer-container');
|
||||
};
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 62 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.5 KiB |
|
|
@ -1,24 +1,24 @@
|
|||
|
||||
<div id="range-main-container">
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="legend-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 60%;">
|
||||
<col span="1" style="width: 40%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id="enablelegend">Show legend </div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top: 2px;">
|
||||
<input type="checkbox" id="enable" checked="true">
|
||||
<div style="padding-top: 0px;margin-left: -8px;">
|
||||
<input type="checkbox" id="enable">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
<div id="togglelegend" style="width: 90%">Show range when the legend item is toggled</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="margin-top: 2px;">
|
||||
<input type="checkbox" id="toggle" checked="true">
|
||||
<div style="padding-top: 0px;margin-left: -8px;">
|
||||
<input type="checkbox" id="toggle">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -79,30 +79,32 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes moving air types in the legend based on their speed. The visibility, shape, alignment and position of the legend can be changed using the properties panel options.
|
||||
</p>
|
||||
This sample directs the visualization of moving wind types based on their speed via the legend of the circular
|
||||
gauge component. The visibility, shape, alignment, and position of the legend can all be customized.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render a legend in circular gauge. A legend item denotes the axis ranges. Any number of legend items can be added to a legend. You can bind the desired colors and legend text to the corresponding ranges.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>The circular gauge component features are segregated into individual modules by feature. To use a legend, inject the Legend module using the <code>CircularGauge.Inject(Legend)</code> method.
|
||||
The legend provides useful information for interpreting what the circular gauge's axis range displays,
|
||||
and it can be represented in a variety of colors, shapes, and other identifiers depending on the data.
|
||||
To do so, use the <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge/legendSettingsModel/">legendSettings</a>
|
||||
and its properties.
|
||||
</p>
|
||||
<p>
|
||||
More information on the annotation can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-legend/">documentation section</a>.
|
||||
More information on the legend can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-legend/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -1,43 +1,36 @@
|
|||
import { CircularGauge, Annotations, Legend, Alignment, GaugeShape, LegendPosition, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
CircularGauge.Inject(Annotations, Legend);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
//tslint:disable
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
import { CircularGauge, Annotations, Legend, Alignment, GaugeShape, LegendPosition, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Annotations, Legend);
|
||||
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
title: 'Measure of wind speed in Km/h',
|
||||
background:'transparent',
|
||||
titleStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
fontFamily: 'inherit'
|
||||
},
|
||||
legendSettings: {
|
||||
visible: true,
|
||||
position: 'Bottom',
|
||||
textStyle: {
|
||||
fontFamily: 'Segoe UI'
|
||||
fontFamily: 'inherit',
|
||||
size: '12px'
|
||||
}
|
||||
},
|
||||
axes: [{
|
||||
lineStyle: { width: 2 },
|
||||
labelStyle: {
|
||||
position: 'Inside', useRangeColor: false,
|
||||
font: { fontFamily: 'Segoe UI' }
|
||||
font: { fontFamily: 'inherit' }
|
||||
}, majorTicks: { height: 16, color: '#9E9E9E', interval: 20 }, minorTicks: { height: 8, interval: 10 },
|
||||
startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',
|
||||
ranges: [
|
||||
{ start: 0, end: 5, color: '#ccffff', radius: '110%', legendText: 'Light air'},
|
||||
{ start: 0, end: 5, color: '#ccffff', radius: '110%', legendText: 'Light air' },
|
||||
{ start: 5, end: 11, color: '#99ffff', radius: '110%', legendText: 'Light breeze' },
|
||||
{ start: 11, end: 19, color: '#99ff99', radius: '110%', legendText: 'Gentle breeze' },
|
||||
{ start: 19, end: 28, color: '#79ff4d', radius: '110%', legendText: 'Moderate breeze' },
|
||||
|
|
@ -51,19 +44,31 @@ CircularGauge.Inject(Annotations, Legend);
|
|||
value: 70, radius: '60%', pointerWidth: 8,
|
||||
cap: { radius: 7 }, needleTail: { length: '18%' }
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#legend-container');
|
||||
|
||||
document.getElementById('enable').onchange = () => {
|
||||
let enableLegend: boolean = (<HTMLInputElement>document.getElementById('enable')).checked;
|
||||
circulargauge.legendSettings.visible = enableLegend;
|
||||
let showLegendVisible: EmitType<CheckBoxChangeEvents>;
|
||||
let showLegendVisibleCheckBox: CheckBox = new CheckBox(
|
||||
{
|
||||
change: showLegendVisible,
|
||||
checked: true
|
||||
},
|
||||
'#enable');
|
||||
|
||||
showLegendVisibleCheckBox.change = showLegendVisible = (e: CheckBoxChangeEvents) => {
|
||||
let boolean: boolean = e.checked;
|
||||
circulargauge.legendSettings.visible = boolean;
|
||||
circulargauge.refresh();
|
||||
};
|
||||
document.getElementById('toggle').onchange = () => {
|
||||
let toggle: boolean = (<HTMLInputElement>document.getElementById('toggle')).checked;
|
||||
circulargauge.legendSettings.toggleVisibility = toggle;
|
||||
};
|
||||
}
|
||||
document.getElementById('alignment').onchange = (e: Event) => {
|
||||
let alignment: string = (e.target as HTMLSelectElement).value;
|
||||
circulargauge.legendSettings.alignment = alignment as Alignment;
|
||||
|
|
@ -76,4 +81,45 @@ CircularGauge.Inject(Annotations, Legend);
|
|||
let position: string = (e.target as HTMLSelectElement).value;
|
||||
circulargauge.legendSettings.position = position as LegendPosition;
|
||||
};
|
||||
|
||||
let toggelLegend: EmitType<CheckBoxChangeEvents>;
|
||||
let toggelLegendCheckBox: CheckBox = new CheckBox(
|
||||
{
|
||||
change: toggelLegend,
|
||||
checked: true
|
||||
},
|
||||
'#toggle');
|
||||
|
||||
toggelLegendCheckBox.change = toggelLegend = (e: CheckBoxChangeEvents) => {
|
||||
let boolean: boolean = e.checked;
|
||||
circulargauge.legendSettings.toggleVisibility = boolean;
|
||||
circulargauge.refresh();
|
||||
}
|
||||
|
||||
let labelPosition = new DropDownList({
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
circulargauge.legendSettings.alignment = <Alignment>labelPosition.value.toString();
|
||||
circulargauge.refresh();
|
||||
}
|
||||
});
|
||||
labelPosition.appendTo('#alignment');
|
||||
|
||||
let labelPosition1 = new DropDownList({
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
circulargauge.legendSettings.shape = <GaugeShape>labelPosition1.value.toString();
|
||||
circulargauge.refresh();
|
||||
}
|
||||
});
|
||||
labelPosition1.appendTo('#shape');
|
||||
|
||||
let labelPosition2 = new DropDownList({
|
||||
index: 2, width: '100%',
|
||||
change: () => {
|
||||
circulargauge.legendSettings.position = <LegendPosition>labelPosition2.value.toString();
|
||||
circulargauge.refresh();
|
||||
}
|
||||
});
|
||||
labelPosition2.appendTo('#position');
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="axis-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- property panel -->
|
||||
<br>
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 40%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Axis </div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<select id="axisIndex" class="form-control">
|
||||
<option value="0" selected=true>Axis 1</option>
|
||||
<option value="1">Axis 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Direction </div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<select id="axisDirection" class="form-control">
|
||||
<option value="ClockWise" selected=true>ClockWise</option>
|
||||
<option value="AntiClockWise">AntiClockWise</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>Start Angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="startAngle" value="220" min="0" max="360" style="width: 70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='start' style="margin-left: -30px;">220</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>End Angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="endAngle" value="140" min="0" max="360" style="width: 70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='end' style="margin-left: -30px;">140</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates the multiple axes in the circular gauge as well as the options for changing the
|
||||
direction, start, and end angle of an axis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure multiple axes in the circular gauge. To render multiple
|
||||
axes in the circular gauge, use the axes collection, and each axis can be customized with pointers and ticks.
|
||||
</p>
|
||||
<p>
|
||||
More information on the multiple axes can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-axes/#multiple-axes">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,36 +1,20 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
//tslint:disable
|
||||
// custom code end
|
||||
/**
|
||||
* Multiple Axis sample
|
||||
*/
|
||||
import { CircularGauge, isCompleteAngle, GaugeDirection, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let axisIndex: number = 0;
|
||||
let axis: DropDownList; let direction: DropDownList;
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
title: 'Gauge with Multiple Axes',
|
||||
titleStyle: { color: 'gray', size: '16px', fontFamily: 'Segoe UI' },
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
lineStyle: { width: 1.5 },
|
||||
radius: '95%',
|
||||
background:'transparent',
|
||||
radius: '93%',
|
||||
labelStyle: {
|
||||
position: 'Inside', autoAngle: true,
|
||||
hiddenLabel: 'None',
|
||||
font: { fontFamily: 'Segoe UI' }
|
||||
font: { fontFamily: 'inherit' }
|
||||
}, majorTicks: {
|
||||
position: 'Inside',
|
||||
width: 2, height: 10
|
||||
|
|
@ -48,7 +32,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
lineStyle: { width: 1.5, color: '#E84011' }, radius: '95%',
|
||||
labelStyle: {
|
||||
position: 'Outside', autoAngle: true,
|
||||
hiddenLabel: 'None', font: { color: '#E84011', fontFamily: 'Segoe UI' }
|
||||
hiddenLabel: 'None', font: { fontFamily: 'inherit' }
|
||||
}, majorTicks: {
|
||||
position: 'Outside', width: 2, height: 10,
|
||||
color: '#E84011'
|
||||
|
|
@ -58,15 +42,23 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
},
|
||||
minimum: 0, maximum: 240, startAngle: 220, endAngle: 140,
|
||||
pointers: [{
|
||||
value: 120, radius: '100%', color: '#C62E0A',
|
||||
value: 120, radius: '100%', color: '#E84011',
|
||||
markerHeight: 15, markerWidth: 15, type: 'Marker',
|
||||
markerShape: 'InvertedTriangle',
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#axis-container');
|
||||
// code for property panel
|
||||
axis = new DropDownList({
|
||||
let axisIndex: number = 0;
|
||||
let axis = new DropDownList({
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
axisIndex = +axis.value;
|
||||
|
|
@ -81,7 +73,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
});
|
||||
axis.appendTo('#axisIndex');
|
||||
|
||||
direction = new DropDownList({
|
||||
let direction = new DropDownList({
|
||||
index: 0, width: '100%',
|
||||
change: () => {
|
||||
circulargauge.axes[axisIndex].direction = <GaugeDirection>direction.value.toString();
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="axis-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- property panel -->
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 40%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
<col span="1" style="width: 30%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Axis </div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<select id="axisIndex" class="form-control" >
|
||||
<option value="0" selected = true>Axis 1</option>
|
||||
<option value="1">Axis 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div> Direction </div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<select id="axisDirection" class="form-control" >
|
||||
<option value="ClockWise" selected = true>ClockWise</option>
|
||||
<option value="AntiClockWise">AntiClockWise</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>Start Angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="startAngle" value="220" min="0" max="360" style="width: 70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='start' style="margin-left: -30px;">220</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>End Angle</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="endAngle" value="140" min="0" max="360" style="width: 70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id='end' style="margin-left: -30px;">140</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the multiple axes in the gauge and options are available to change the direction, start, and end angle of an axis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure multipe axes in gauge. Use <code>axes</code> collection
|
||||
to render multiple axis in gauge. Each axis can be customized with its own <code>pointer</code> and <code>scales</code>.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
In this sample, two axes with a pointer has been used.
|
||||
</p>
|
||||
<p>
|
||||
More information on the axis can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample shows temperature variations in a circular gauge using multiple ranges. In addition, the needle
|
||||
pointer and annotation help in displaying the temperature that has been measured.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure multiple ranges in the circular gauge. The <a
|
||||
target="_blank" href="https://ej2.syncfusion.com/documentation/api/circular-gauge/rangeModel/">ranges</a>
|
||||
collection
|
||||
can be used to define multiple ranges, each of which points to a different start and end value.
|
||||
</p>
|
||||
<p>
|
||||
More information on the ranges can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-ranges/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
import { CircularGauge, ILoadedEventArgs, GaugeTheme, Annotations } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
radius: '90%',
|
||||
startAngle: 230,
|
||||
endAngle: 130,
|
||||
minimum: -30,
|
||||
maximum: 120,
|
||||
hideIntersectingLabel: true,
|
||||
majorTicks: {
|
||||
width: 0,
|
||||
interval: 10
|
||||
},
|
||||
lineStyle: { width: 0 },
|
||||
minorTicks: {
|
||||
width: 0,
|
||||
},
|
||||
labelStyle: {
|
||||
font: {
|
||||
fontFamily: 'inherit'
|
||||
},
|
||||
offset: 50,
|
||||
position: 'Inside',
|
||||
autoAngle: true
|
||||
},
|
||||
pointers: [{
|
||||
value: 22.5,
|
||||
radius: '45%',
|
||||
pointerWidth: 7,
|
||||
color: '#F7B194',
|
||||
cap: {
|
||||
radius: 10,
|
||||
color: 'white',
|
||||
border: { width: 4, color: '#F7B194' },
|
||||
},
|
||||
needleTail: {
|
||||
length: "25%",
|
||||
color: '#F7B194'
|
||||
},
|
||||
animation: {
|
||||
enable: false,
|
||||
},
|
||||
}],
|
||||
annotations: [{
|
||||
content: '<div style="font-size:18px;margin-left: 5px;color:#9DD55A"> 22.5\u00b0C </div>',
|
||||
radius: '20%', angle: 180, zIndex: '1'
|
||||
|
||||
}],
|
||||
ranges: [
|
||||
{
|
||||
start: -30, end: -20, radius: '90%', color: '#58ABD5', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: -20, end: -10, radius: '90%', color: '#58ABD5', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: -10, end: 0, radius: '90%', color: '#58ABD5', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 0, end: 10, radius: '90%', color: '#58D2D5', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 10, end: 20, radius: '90%', color: '#9DD55A', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 20, end: 30, radius: '90%', color: '#9DD55A', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 30, end: 40, radius: '90%', color: '#F1D158', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 40, end: 50, radius: '90%', color: '#F48C6F', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 50, end: 60, radius: '90%', color: '#F48C6F', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 60, end: 70, radius: '90%', color: '#F48C6F', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 70, end: 80, radius: '90%', color: '#F48C6F', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 80, end: 90, radius: '90%', color: '#F48C6F', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 90, end: 100, radius: '90%', color: '#F48C6F', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 100, end: 110, radius: '90%', color: '#F48C6F', startWidth: 35, endWidth: 35
|
||||
},
|
||||
{
|
||||
start: 110, end: 120, radius: '90%', color: '#F48C6F', startWidth: 35, endWidth: 35
|
||||
}
|
||||
]
|
||||
}],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
// custom code start
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#gauge');
|
||||
};
|
||||
|
|
@ -5,14 +5,7 @@ import { CircularGauge, Annotations, ILoadedEventArgs, GaugeTheme } from '@syncf
|
|||
CircularGauge.Inject(Annotations);
|
||||
export function gauge1(): CircularGauge {
|
||||
let gauge1: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
startAngle: 270,
|
||||
endAngle: 90,
|
||||
|
|
@ -43,24 +36,25 @@ export function gauge1(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px;">Range Bar</div>'
|
||||
content: '<div style="font-size:14px;">Range bar pointer</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge1;
|
||||
}
|
||||
|
||||
export function gauge2(): CircularGauge {
|
||||
let gauge2: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
startAngle: 270,
|
||||
endAngle: 90,
|
||||
|
|
@ -92,24 +86,25 @@ export function gauge2(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px;">Marker</div>'
|
||||
content: '<div style="font-size:14px;">Marker pointer</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge2;
|
||||
}
|
||||
|
||||
export function gauge4(): CircularGauge {
|
||||
let gauge4: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
startAngle: 270,
|
||||
endAngle: 90,
|
||||
|
|
@ -129,43 +124,44 @@ export function gauge4(): CircularGauge {
|
|||
minimum: 0,
|
||||
maximum: 100,
|
||||
pointers: [{
|
||||
animation: { enable: true , duration: 1000},
|
||||
value: 70,
|
||||
radius: '80%',
|
||||
color: 'green',
|
||||
pointerWidth: 2,
|
||||
needleStartWidth: 4,
|
||||
needleEndWidth: 4,
|
||||
cap: {
|
||||
radius: 8,
|
||||
color: 'green'
|
||||
},
|
||||
needleTail: {
|
||||
length: '0%'
|
||||
}
|
||||
animation: { enable: true, duration: 1000 },
|
||||
value: 80,
|
||||
radius: '80%',
|
||||
color: 'green',
|
||||
pointerWidth: 2,
|
||||
needleStartWidth: 4,
|
||||
needleEndWidth: 4,
|
||||
cap: {
|
||||
radius: 8,
|
||||
color: 'green'
|
||||
},
|
||||
needleTail: {
|
||||
length: '0%'
|
||||
}
|
||||
}],
|
||||
annotations: [
|
||||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px; padding-top: 26px">Customized Needle</div>'
|
||||
content: '<div style="font-size:14px; padding-top: 26px">Customized pointer</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge4;
|
||||
}
|
||||
|
||||
export function gauge3(): CircularGauge {
|
||||
let gauge3: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
background:'transparent',
|
||||
centerY: '40%',
|
||||
axes: [{
|
||||
startAngle: 270,
|
||||
|
|
@ -198,26 +194,27 @@ export function gauge3(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px;">Needle</div>'
|
||||
content: '<div style="font-size:14px;">Needle pointer</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge3;
|
||||
}
|
||||
|
||||
export function gauge6(): CircularGauge {
|
||||
let gauge6: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
title: 'Speedometer',
|
||||
titleStyle: { size: '18px' },
|
||||
background:'transparent',
|
||||
titleStyle: { size: '18px', fontFamily: 'inherit' },
|
||||
centerY: '75%',
|
||||
axes: [{
|
||||
radius: '120%',
|
||||
|
|
@ -226,8 +223,10 @@ export function gauge6(): CircularGauge {
|
|||
lineStyle: { width: 0 },
|
||||
majorTicks: { width: 0, },
|
||||
minorTicks: { width: 0 },
|
||||
labelStyle: { useRangeColor: false, position: 'Outside', autoAngle: true,
|
||||
font: { size: '13px', fontFamily: 'Roboto' } },
|
||||
labelStyle: {
|
||||
useRangeColor: false, position: 'Outside', autoAngle: true,
|
||||
font: { size: '13px', fontFamily: 'inherit' }
|
||||
},
|
||||
startAngle: 270, endAngle: 90,
|
||||
pointers: [{
|
||||
animation: { enable: true, duration: 900 },
|
||||
|
|
@ -296,21 +295,22 @@ export function gauge6(): CircularGauge {
|
|||
}
|
||||
]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge6;
|
||||
}
|
||||
|
||||
export function gauge5(): CircularGauge {
|
||||
let gauge5: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
centerY: '40%',
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
startAngle: 270,
|
||||
endAngle: 90,
|
||||
|
|
@ -349,10 +349,18 @@ export function gauge5(): CircularGauge {
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '20%',
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px; padding-top:26px">Live Update</div>'
|
||||
content: '<div style="font-size:14px; padding-top:26px">Live update</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
return gauge5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<div class="control-section">
|
||||
<div id="pointer-container"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the shot-put distance covered by the athletes by using the image pointer in gauge.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to use the pointer image for an axis in the circular gauge. Pointer value points out the
|
||||
actual value set in the <b>Circular Gauge</b>. You can customize the <code>pointers</code> to improve the
|
||||
appearance of <b>Gauge</b>.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
In this sample, a pointer with image is used to show the shot-put distance thrown by the player.
|
||||
</p>
|
||||
<p>
|
||||
More information on the pointers can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="user-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- property panel -->
|
||||
<br>
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%; margin-left:-10px">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 50%;">
|
||||
<col span="1" style="width: 40%;">
|
||||
<col span="1" style="width: 10%;">
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div>Pointer Value</div>
|
||||
</td>
|
||||
<td>
|
||||
<div>
|
||||
<input type="range" id="value" value="70" min="0" max="120" style="width: 70%" />
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding-top: 10px; text-align: center;">
|
||||
<span id="pointerValue" style="margin-left: -30px;">70</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='enablePointer' style="width: 97%">Allow Pointer Drag</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="padding-top: 2px;margin-left: -10px;">
|
||||
<input type="checkbox" id="enable" checked="true" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
<div id='enableRange' style="width: 98%">Allow Ranges Drag</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="padding-top: 2px;margin-left: -10px; ">
|
||||
<input type="checkbox" id="enable1" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates dragging a pointer and a range in a circular gauge. End-user can drag the pointer and
|
||||
the range by enabling the pointer drag and range drag options.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to move the pointer and range in the circular gauge via drag action. The <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge#enablepointerdrag">enablePointerDrag</a>
|
||||
property can be used to enable or disable the pointer drag functionality. Similarly, the <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/api/circular-gauge#enablerangedrag">enableRangeDrag</a>
|
||||
property can be used to enable or disable the range drag functionality.
|
||||
</p>
|
||||
<p>
|
||||
More information on the pointer drag can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-pointers#dragging-pointer">documentation
|
||||
section</a>. Likewise, the range drag information can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-ranges/#dragging-range">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,30 +1,16 @@
|
|||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
//tslint:disable:max-func-body-length
|
||||
// custom code end
|
||||
/**
|
||||
* User Interaction sample
|
||||
*/
|
||||
import { CircularGauge, IPointerDragEventArgs, Annotations, getRangeColor, Range } from '@syncfusion/ej2-circulargauge';
|
||||
import { ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let content: string = '<div style="font-size: 14px;color:#E5C31C;font-weight: lighter;font-style: oblique; font-family: Segoe UI;"><span>';
|
||||
let pointerValue: number;
|
||||
let circulargauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
enablePointerDrag: true,
|
||||
enableRangeDrag: false,
|
||||
dragMove: (args: IPointerDragEventArgs) => {
|
||||
|
|
@ -34,7 +20,6 @@ CircularGauge.Inject(Annotations);
|
|||
(<HTMLInputElement>document.getElementById('value')).value = pointerValue.toString();
|
||||
circulargauge.setAnnotationValue(0, 0, content + pointerValue + ' MPH</span></div>');
|
||||
}
|
||||
|
||||
},
|
||||
dragEnd: (args: IPointerDragEventArgs) => {
|
||||
pointerValue = Math.round(args.currentValue);
|
||||
|
|
@ -42,6 +27,7 @@ CircularGauge.Inject(Annotations);
|
|||
setPointersValue(circulargauge, pointerValue);
|
||||
}
|
||||
},
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
annotations: [{
|
||||
content: content + '70 MPH</span></div>',
|
||||
|
|
@ -55,7 +41,7 @@ CircularGauge.Inject(Annotations);
|
|||
maximum: 120,
|
||||
majorTicks: { useRangeColor: true },
|
||||
minorTicks: { useRangeColor: true },
|
||||
labelStyle: { useRangeColor: true, font: { fontFamily: 'Segoe UI' } },
|
||||
labelStyle: { useRangeColor: true, font: { fontFamily: 'inherit' } },
|
||||
ranges: [{
|
||||
start: 0,
|
||||
end: 40,
|
||||
|
|
@ -89,10 +75,18 @@ CircularGauge.Inject(Annotations);
|
|||
color: '#E5C31C',
|
||||
markerWidth: 5
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
circulargauge.appendTo('#user-container');
|
||||
// code for property panel
|
||||
|
||||
function setPointersValue(circulargauge: CircularGauge, pointerValue: number): void {
|
||||
let color: string = getRangeColor(pointerValue, <Range[]>(circulargauge.axes[0].ranges), circulargauge.axes[0].pointers[0].color);
|
||||
circulargauge.axes[0].pointers[0].color = color;
|
||||
|
|
@ -117,12 +111,12 @@ CircularGauge.Inject(Annotations);
|
|||
let pointerchange: EmitType<CheckBoxChangeEvents>;
|
||||
let rangechange: EmitType<CheckBoxChangeEvents>;
|
||||
let pointerchangeCheckBox: CheckBox = new CheckBox(
|
||||
{
|
||||
change: pointerchange,
|
||||
checked: true
|
||||
},
|
||||
'#enable');
|
||||
|
||||
{
|
||||
change: pointerchange,
|
||||
checked: true
|
||||
},
|
||||
'#enable');
|
||||
|
||||
pointerchangeCheckBox.change = pointerchange = (e: CheckBoxChangeEvents) => {
|
||||
let boolean: boolean = e.checked;
|
||||
circulargauge.enablePointerDrag = boolean;
|
||||
|
|
@ -133,9 +127,9 @@ CircularGauge.Inject(Annotations);
|
|||
change: rangechange
|
||||
},
|
||||
'#enable1');
|
||||
|
||||
rangechangeCheckBox.change = rangechange = (e: CheckBoxChangeEvents) => {
|
||||
let boolean: boolean = e.checked;
|
||||
circulargauge.enableRangeDrag = boolean;
|
||||
}
|
||||
};
|
||||
|
||||
rangechangeCheckBox.change = rangechange = (e: CheckBoxChangeEvents) => {
|
||||
let boolean: boolean = e.checked;
|
||||
circulargauge.enableRangeDrag = boolean;
|
||||
}
|
||||
};
|
||||
|
|
@ -36,20 +36,18 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the different types of pointers which are available in the gauge.
|
||||
This sample demonstrates the various pointer types available in the circular gauge.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to customize the pointer for an axis in the circular gauge. Gauge supports different types
|
||||
of pointers like <code>marker</code>, <code>image</code>, <code>needle</code>, <code>rangeBar</code>.
|
||||
</p>
|
||||
<br>
|
||||
<p>
|
||||
Gauge with all type of pointer is used in this sample.
|
||||
In this example, you can see how to customize the pointer for an axis in the circular gauge. The circular gauge
|
||||
supports a variety of pointers, including marker, needle, and range bar. Additionally, the pointer can be
|
||||
customized, and multiple pointers can also be enabled.
|
||||
</p>
|
||||
<p>
|
||||
More information on the pointers can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-pointers/">documentation section</a>.
|
||||
More information on the pointers can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/circular-gauge/gauge-pointers/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,35 +1,22 @@
|
|||
import { CircularGauge, Annotations, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { gauge1, gauge2, gauge3, gauge4, gauge5 } from './pointer-gauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
// custom code start
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
//tslint:disable
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
/**
|
||||
* Pointer sample
|
||||
*/
|
||||
import { CircularGauge, Annotations, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { gauge1, gauge2, gauge3 , gauge4, gauge5 } from './pointer-gauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
(window as any).default = (): void => {
|
||||
// custom code start
|
||||
loadCultureFiles();
|
||||
// custom code end
|
||||
let firstgauge: CircularGauge = new CircularGauge(gauge1());
|
||||
let firstgauge: CircularGauge = gauge1();
|
||||
let gauge5Interval1: any;
|
||||
let gauge6Interval1: any;
|
||||
firstgauge.appendTo('#container2');
|
||||
let secondgauge: CircularGauge = new CircularGauge(gauge2());
|
||||
let secondgauge: CircularGauge = gauge2();
|
||||
secondgauge.appendTo('#container1');
|
||||
let thirdgauge: CircularGauge = new CircularGauge(gauge4());
|
||||
let thirdgauge: CircularGauge = gauge4();
|
||||
thirdgauge.appendTo('#container4');
|
||||
let fourthgauge: CircularGauge = new CircularGauge({
|
||||
// custom code start
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
// custom code end
|
||||
centerY: '40%',
|
||||
background:'transparent',
|
||||
axes: [{
|
||||
startAngle: 270,
|
||||
endAngle: 90,
|
||||
|
|
@ -49,7 +36,7 @@ CircularGauge.Inject(Annotations);
|
|||
minimum: 0,
|
||||
maximum: 100,
|
||||
pointers: [{
|
||||
radius: '80%',
|
||||
radius: '60%',
|
||||
value: 80,
|
||||
markerWidth: 5,
|
||||
markerHeight: 5,
|
||||
|
|
@ -71,7 +58,7 @@ CircularGauge.Inject(Annotations);
|
|||
}, {
|
||||
radius: '60%', value: 40,
|
||||
markerWidth: 5, markerHeight: 5,
|
||||
animation: { duration: 1000 },
|
||||
animation: { enable: true, duration: 1000 },
|
||||
color: '#ffb133',
|
||||
pointerWidth: 10,
|
||||
cap: {
|
||||
|
|
@ -84,19 +71,26 @@ CircularGauge.Inject(Annotations);
|
|||
{
|
||||
angle: 180, zIndex: '1',
|
||||
radius: '25%',
|
||||
content: '<div style="color:#757575; font-family:Segoe UI; font-size:14px; padding-top:20px">Multiple Needles</div>'
|
||||
content: '<div style="font-size:14px; padding-top:20px">Multiple pointers</div>'
|
||||
}
|
||||
]
|
||||
}],
|
||||
load: function (args) {
|
||||
// custom code start
|
||||
var selectTheme = location.hash.split('/')[1];
|
||||
selectTheme = selectTheme ? selectTheme : 'Material';
|
||||
args.gauge.theme = (selectTheme.charAt(0).toUpperCase() +
|
||||
selectTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// custom code end
|
||||
}
|
||||
});
|
||||
fourthgauge.appendTo('#container5');
|
||||
let fifthGauge: CircularGauge = new CircularGauge(gauge3());
|
||||
let fifthGauge: CircularGauge = gauge3();
|
||||
fifthGauge.appendTo('#container3');
|
||||
let sixthGauge: CircularGauge = new CircularGauge(gauge5());
|
||||
let sixthGauge: CircularGauge = gauge5();
|
||||
sixthGauge.appendTo('#container6');
|
||||
|
||||
gauge5Interval1 = setInterval(
|
||||
(): void => {
|
||||
gauge5Interval1 = setInterval((): void => {
|
||||
let newVal: number = Math.random() * (90 - 20) + 20;
|
||||
if (document.getElementById('container3')) {
|
||||
fifthGauge.setPointerValue(0, 0, newVal);
|
||||
|
|
@ -106,9 +100,7 @@ CircularGauge.Inject(Annotations);
|
|||
},
|
||||
1000
|
||||
);
|
||||
|
||||
gauge6Interval1 = setInterval(
|
||||
(): void => {
|
||||
gauge6Interval1 = setInterval((): void => {
|
||||
let newVal: number = Math.random() * (80 - 30) + 30;
|
||||
if (document.getElementById('container6')) {
|
||||
sixthGauge.setPointerValue(0, 0, newVal);
|
||||
|
|
@ -119,4 +111,4 @@ CircularGauge.Inject(Annotations);
|
|||
},
|
||||
1000
|
||||
);
|
||||
};
|
||||
};
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче