Skip to content

Commit 5f69470

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 09-04-2025 1:31:01 PM
1 parent ff08991 commit 5f69470

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+6590
-169
lines changed

‎ej2-javascript/Release-notes/31.1.17.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
2-
title: Essential Studio for ##Platform_Name## Release Notes - v31.1.17
3-
description: Essential Studio for ##Platform_Name## 2025 Volume 3 Main Release Release Notes - v31.1.17
2+
title: Essential Studio® for ##Platform_Name## Release Notes - v31.1.17
3+
description: Essential Studio® for ##Platform_Name## 2025 Volume 3 Main Release - Release Notes - v31.1.17
44
platform: ej2-javascript
55
documentation: ug
66
---
77

8-
# Essential Studio for ##Platform_Name## Release Notes - v31.1.17
8+
# Essential Studio® for ##Platform_Name## - v31.1.17 Release Notes
99

10-
{% include release-info.html date="September 01, 2025" version="v31.1.17" passed="99554" failed="0" %}
10+
{% include release-info.html date="September 04, 2025" version="v31.1.17" passed="99554" failed="0" %}
1111

1212
{% directory path: _includes/release-notes/v31.1.17 %}
1313

‎ej2-javascript/accumulation-chart/dynamic-data-update.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,4 @@ To replace the existing data source in the accumulation chart with a new data so
111111
{% endtabs %}
112112

113113
{% previewsample "page.domainurl/code-snippet/chart/addpoint-cs2" %}
114-
{% endif %}
114+
{% endif %}

‎ej2-javascript/accumulation-chart/empty-points.md‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,35 @@ Specific color for an empty point can be set by using the `fill` property in `em
3737
{% endhighlight %}
3838
{% endtabs %}
3939

40-
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs17" %}
40+
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs17" %}
41+
42+
## Handling when no data is available
43+
44+
When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
45+
46+
{% if page.publishingplatform == "typescript" %}
47+
48+
{% tabs %}
49+
{% highlight ts tabtitle="index.ts" %}
50+
{% include code-snippet/chart/chart-types-cs497/index.ts %}
51+
{% endhighlight %}
52+
{% highlight html tabtitle="index.html" %}
53+
{% include code-snippet/chart/chart-types-cs497/index.html %}
54+
{% endhighlight %}
55+
{% endtabs %}
56+
57+
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs497" %}
58+
59+
{% elsif page.publishingplatform == "javascript" %}
60+
61+
{% tabs %}
62+
{% highlight js tabtitle="index.js" %}
63+
{% include code-snippet/chart/chart-types-cs497/index.js %}
64+
{% endhighlight %}
65+
{% highlight html tabtitle="index.html" %}
66+
{% include code-snippet/chart/chart-types-cs497/index.html %}
67+
{% endhighlight %}
68+
{% endtabs %}
69+
70+
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs497" %}
71+
{% endif %}

‎ej2-javascript/chart/working-with-data.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,3 +335,35 @@ Specific color for empty point can be set by `fill` property in `emptyPointSetti
335335

336336
{% previewsample "page.domainurl/code-snippet/chart/working-with-data-cs6" %}
337337
{% endif %}
338+
339+
## Handling when no data is available
340+
341+
When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
342+
343+
{% if page.publishingplatform == "typescript" %}
344+
345+
{% tabs %}
346+
{% highlight ts tabtitle="index.ts" %}
347+
{% include code-snippet/chart/working-with-data-cs11/index.ts %}
348+
{% endhighlight %}
349+
{% highlight html tabtitle="index.html" %}
350+
{% include code-snippet/chart/working-with-data-cs11/index.html %}
351+
{% endhighlight %}
352+
{% endtabs %}
353+
354+
{% previewsample "page.domainurl/code-snippet/chart/working-with-data-cs11" %}
355+
356+
{% elsif page.publishingplatform == "javascript" %}
357+
358+
{% tabs %}
359+
{% highlight js tabtitle="index.js" %}
360+
{% include code-snippet/chart/working-with-data-cs11/index.js %}
361+
{% endhighlight %}
362+
{% highlight html tabtitle="index.html" %}
363+
{% include code-snippet/chart/working-with-data-cs11/index.html %}
364+
{% endhighlight %}
365+
{% endtabs %}
366+
367+
{% previewsample "page.domainurl/code-snippet/chart/working-with-data-cs11" %}
368+
{% endif %}
369+

‎ej2-javascript/code-snippet/chart/chart-types-cs497/index.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
#container {
2+
visibility: hidden;
3+
}
4+
5+
#loader {
6+
color: #008cff;
7+
font-family: 'Helvetica Neue','calibiri';
8+
font-size: 14px;
9+
height: 40px;
10+
left: 45%;
11+
position: absolute;
12+
top: 45%;
13+
width: 30%;
14+
}
15+
16+
#element {
17+
display: block;
18+
height: 350px;
19+
}

‎ej2-javascript/code-snippet/chart/chart-types-cs497/index.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
var chartData = [{ x: 'English', y: 48.20, text: '18.20%' },
2+
{ x: 'Sanskrit', y: 27.3, text: '27.3%' },
3+
{ x: 'French', y: 27.3, text: '27.3%' },
4+
{ x: 'Tamil', y: 55.9, text: '55.9%' },
5+
{ x: 'Maths', y: 76.8, text: '76.8%' },
6+
{ x: 'Chemistry', y: 86.8, text: '76.8%' },
7+
{ x: 'Biology', y: 96.8, text: '76.8%' },
8+
{ x: 'Physics', y: 100, text: '100%' }];
9+
var checked = false;
10+
11+
var piechart = new ej.charts.AccumulationChart({
12+
series: [{
13+
type: 'Pie', xName: 'x', yName: 'y', animation: { enable: true },
14+
}],
15+
tooltip: { enable: true },
16+
noDataTemplate: '<div id="noDataTemplateContainer" class="light-bg">' +
17+
'<div class="template-align">' +
18+
'<img src="no-data.png" alt="No Data"/>' +
19+
'</div>' +
20+
'<div class="template-align">' +
21+
'<p style="font-size: 15px; margin: 10px 0 0;"><strong>No data available to display.</strong></p>' +
22+
'</div>' +
23+
'<div class="template-align">' +
24+
'<button id="loadDataBtn" style="margin-top: 15px;"></button>' +
25+
'</div>' +
26+
'</div>',
27+
legendSettings: { visible: true },
28+
title: 'Pie Annotation CoordinateUnits Point',
29+
titleStyle: { textOverflow: 'Trim' },
30+
loaded: function (args) {
31+
var btnElem = document.getElementById('loadDataBtn');
32+
if (btnElem) {
33+
var loadBtn = new ej.buttons.Button({
34+
content: 'Load Data',
35+
iconCss: 'e-icons e-refresh',
36+
cssClass: 'e-outline',
37+
isPrimary: false
38+
});
39+
loadBtn.appendTo(btnElem);
40+
41+
loadBtn.element.addEventListener('click', function () {
42+
checked = !checked;
43+
if (checked) {
44+
chart.series[0].dataSource = chartData;
45+
}
46+
chart.refresh();
47+
});
48+
}
49+
}
50+
}, '#element');

‎ej2-javascript/code-snippet/chart/chart-types-cs497/index.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
2+
3+
4+
import {
5+
AccumulationChart, AccumulationDataLabel, FunnelSeries, PieSeries,
6+
PyramidSeries, AccumulationAnnotation, AccumulationLegend, AccumulationTooltip, ILoadedEventArgs
7+
} from '@syncfusion/ej2-charts';
8+
AccumulationChart.Inject(AccumulationLegend, AccumulationTooltip, AccumulationAnnotation, AccumulationDataLabel, FunnelSeries, PieSeries, PyramidSeries);
9+
import { Button } from '@syncfusion/ej2-buttons';
10+
11+
let chartData: Object[] = [{ x: 'English', y: 48.20, text: '18.20%' },
12+
{ x: 'Sanskrit', y: 27.3, text: '27.3%' },
13+
{ x: 'French', y: 27.3, text: '27.3%' },
14+
{ x: 'Tamil', y: 55.9, text: '55.9%' },
15+
{ x: 'Maths', y: 76.8, text: '76.8%' },
16+
{ x: 'Chemistry', y: 86.8, text: '76.8%' },
17+
{ x: 'Biology', y: 96.8, text: '76.8%' },
18+
{ x: 'Physics', y: 100, text: '100%' }];
19+
20+
let checked: boolean = false;
21+
let chart: AccumulationChart = new AccumulationChart({
22+
series: [{
23+
type: 'Pie', xName: 'x', yName: 'y', animation: { enable: true },
24+
}],
25+
tooltip: { enable: true },
26+
noDataTemplate: `
27+
<div id="noDataTemplateContainer" class="light-bg">
28+
<div class="template-align">
29+
<img src="no-data.png" alt="No Data"/>
30+
</div>
31+
<div class="template-align">
32+
<p style="font-size: 15px; margin: 10px 0 0;"><strong>No data available to display.</strong></p>
33+
</div>
34+
<div class="template-align">
35+
<button id="loadDataBtn" style="margin-top: 15px;"></button>
36+
</div>
37+
</div>
38+
`,
39+
legendSettings: { visible: false },
40+
title: 'Pie Annotation CoordinateUnits Point',
41+
titleStyle: { textOverflow: 'Trim' },
42+
loaded: (args: ILoadedEventArgs) => {
43+
const btnElem: HTMLElement | null = document.getElementById('loadDataBtn');
44+
if (btnElem) {
45+
const loadBtn: Button = new Button({
46+
content: 'Load Data',
47+
iconCss: 'e-icons e-refresh',
48+
cssClass: 'e-outline',
49+
isPrimary: false
50+
});
51+
loadBtn.appendTo(btnElem);
52+
53+
loadBtn.element.onclick = (): void => {
54+
checked = !checked;
55+
if (checked) {
56+
chart.series[0].dataSource = chartData;
57+
}
58+
chart.refresh();
59+
};
60+
}
61+
}
62+
});
63+
chart.appendTo('#element');

‎ej2-javascript/code-snippet/chart/chart-types-cs497/js/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 Animation</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="description" content="Typescript UI Controls">
9+
<meta name="author" content="Syncfusion">
10+
<link href="index.css" rel="stylesheet">
11+
<style>
12+
#noDataTemplateContainer {
13+
height: inherit;
14+
width: inherit;
15+
}
16+
17+
.load-data-btn {
18+
border-radius: 4px !important;
19+
text-transform: none !important;
20+
}
21+
22+
.light-bg {
23+
background-color: #fafafa;
24+
color: #000000;
25+
}
26+
27+
.template-align img {
28+
max-width: 150px;
29+
/* Adjust size as needed */
30+
max-height: 150px;
31+
margin-top: 55px;
32+
}
33+
34+
.template-align {
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
text-align: center;
39+
}
40+
</style>
41+
42+
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
43+
</head>
44+
45+
<body>
46+
47+
<div id="container">
48+
<div id="element"></div>
49+
</div>
50+
<script>
51+
var ele = document.getElementById('container');
52+
if (ele) {
53+
ele.style.visibility = "visible";
54+
}
55+
</script>
56+
<script src="index.js" type="text/javascript"></script>
57+
</body>
58+
59+
</html>

‎ej2-javascript/code-snippet/chart/chart-types-cs497/no-data.png‎

20.3 KB
Loading

‎ej2-javascript/code-snippet/chart/chart-types-cs497/systemjs.config.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
14+
},
15+
map: {
16+
main: "index.ts",
17+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
20+
"@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
21+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
22+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
23+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
24+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
25+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
26+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
27+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
30+
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
31+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
32+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js"
33+
}
34+
});
35+
36+
System.import('index.ts').catch(console.error.bind(console)).then(function () {
37+
document.getElementById('loader').style.display = "none";
38+
document.getElementById('container').style.visibility = "visible";
39+
});

0 commit comments

Comments
 (0)