Skip to content

Commit 2df9aba

Browse files
farveensulthanafarveensulthana
authored
Merge pull request #4321 from syncfusion-content/964637-chartdev
documentation(964637):Integrate chart in grid topic.
2 parents 791ada5 + 44414f2 commit 2df9aba

File tree

13 files changed

+1170
-0
lines changed

13 files changed

+1170
-0
lines changed

‎ej2-asp-core-mvc/code-snippet/grid/chart-intergartion/chart.cs‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
public ActionResult Index()
2+
{
3+
var Order = SalesService.GetSalesData();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}
7+
8+
public class SalesData
9+
{
10+
public string Product { get; set; }
11+
public string Month { get; set; }
12+
public int Online { get; set; }
13+
public int Retail { get; set; }
14+
public int Total { get; set; }
15+
}
16+
17+
18+
public class SalesService
19+
{
20+
public static List<SalesData> GetSalesData()
21+
{
22+
return new List<SalesData>
23+
{
24+
new SalesData { Product = "Laptop", Month = "January", Online = 1500, Retail = 2000, Total = 3500 },
25+
new SalesData { Product = "Mobile", Month = "February", Online = 1600, Retail = 2500, Total = 4100 },
26+
new SalesData { Product = "Tablet", Month = "March", Online = 1800, Retail = 2200, Total = 4000 },
27+
new SalesData { Product = "Smartwatch", Month = "April", Online = 2000, Retail = 2100, Total = 4100 },
28+
new SalesData { Product = "Camera", Month = "May", Online = 2200, Retail = 2300, Total = 4500 },
29+
new SalesData { Product = "Headphones", Month = "June", Online = 1700, Retail = 1800, Total = 3500 },
30+
new SalesData { Product = "Smart Speaker", Month = "July", Online = 1900, Retail = 2000, Total = 3900 },
31+
new SalesData { Product = "Printer", Month = "August", Online = 2100, Retail = 1900, Total = 4000 },
32+
new SalesData { Product = "Monitor", Month = "September", Online = 2000, Retail = 1900, Total = 3900 },
33+
new SalesData { Product = "Keyboard", Month = "October", Online = 1600, Retail = 1700, Total = 3300 },
34+
new SalesData { Product = "Mouse", Month = "November", Online = 1700, Retail = 1600, Total = 3300 },
35+
new SalesData { Product = "Router", Month = "December", Online = 1800, Retail = 2000, Total = 3800 }
36+
};
37+
}
38+
}

‎ej2-asp-core-mvc/code-snippet/grid/chart-intergartion/chartcore.cs‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
public void OnGet()
2+
{
3+
ViewData["Datasource"] = SalesService.GetSalesData();
4+
}
5+
6+
public class SalesData
7+
{
8+
public string Product { get; set; }
9+
public string Month { get; set; }
10+
public int Online { get; set; }
11+
public int Retail { get; set; }
12+
public int Total { get; set; }
13+
}
14+
15+
16+
public class SalesService
17+
{
18+
public static List<SalesData> GetSalesData()
19+
{
20+
return new List<SalesData>
21+
{
22+
new SalesData { Product = "Laptop", Month = "January", Online = 1500, Retail = 2000, Total = 3500 },
23+
new SalesData { Product = "Mobile", Month = "February", Online = 1600, Retail = 2500, Total = 4100 },
24+
new SalesData { Product = "Tablet", Month = "March", Online = 1800, Retail = 2200, Total = 4000 },
25+
new SalesData { Product = "Smartwatch", Month = "April", Online = 2000, Retail = 2100, Total = 4100 },
26+
new SalesData { Product = "Camera", Month = "May", Online = 2200, Retail = 2300, Total = 4500 },
27+
new SalesData { Product = "Headphones", Month = "June", Online = 1700, Retail = 1800, Total = 3500 },
28+
new SalesData { Product = "Smart Speaker", Month = "July", Online = 1900, Retail = 2000, Total = 3900 },
29+
new SalesData { Product = "Printer", Month = "August", Online = 2100, Retail = 1900, Total = 4000 },
30+
new SalesData { Product = "Monitor", Month = "September", Online = 2000, Retail = 1900, Total = 3900 },
31+
new SalesData { Product = "Keyboard", Month = "October", Online = 1600, Retail = 1700, Total = 3300 },
32+
new SalesData { Product = "Mouse", Month = "November", Online = 1700, Retail = 1600, Total = 3300 },
33+
new SalesData { Product = "Router", Month = "December", Online = 1800, Retail = 2000, Total = 3800 }
34+
};
35+
}
36+
}

‎ej2-asp-core-mvc/code-snippet/grid/chart-intergartion/razor‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height(418).Columns(col =>
2+
{
3+
col.Type("checkbox").Width("50").Add();
4+
col.Field("Product").HeaderText("Products").Width(200).Add();
5+
col.Field("Month").HeaderText("Month").Width(150).Add();
6+
col.Field("Online").HeaderText("Online").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(160).Add();
7+
col.Field("Retail").HeaderText("Retail").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(160).Add();
8+
col.Field("Total").HeaderText("Total").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(160).Add();
9+
}).AllowSelection(true).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).ContextMenuItems(new List<object>() { "Bar", "StackingBar", "StackingBar100", "Pie", "Column", "StackingColumn", "StackingColumn100", "Line", "StackingLine", "StackingLine100", "Area", "StackingArea", "StackingArea100", "Scatter" }).ContextMenuClick("contextMenuClick").Created("created").Render()
10+
11+
<script type="text/javascript">
12+
let gridChart;
13+
14+
function created() {
15+
var grid = document.getElementById("Grid").ej2_instances[0];
16+
gridChart = new ej.gridchart.GridChart({
17+
enableRtl: grid.enableRtl,
18+
locale: grid.locale,
19+
});
20+
}
21+
22+
function contextMenuClick(args) {
23+
if (args.chartType) {
24+
const chartArgs = {
25+
gridInstance: (args.gridInstance),
26+
chartType: args.chartType,
27+
records: (args.records),
28+
};
29+
const chartModel = {
30+
primaryXAxis: {
31+
valueType: 'Category',
32+
labelRotation: 315,
33+
}
34+
};
35+
const model = {
36+
chart: chartModel,
37+
accumulationChart: {}
38+
};
39+
const categorySeries = {
40+
category: ['Product', 'Month'],
41+
series: ['Online', 'Retail']
42+
};
43+
gridChart.render(chartArgs, model, categorySeries);
44+
}
45+
}
46+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/chart-intergartion/tagHelper‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource"
2+
contextMenuItems="@(new List<object>() {
3+
"Bar", "StackingBar", "StackingBar100",
4+
"Pie", "Column", "StackingColumn", "StackingColumn100",
5+
"Line", "StackingLine", "StackingLine100",
6+
"Area", "StackingArea", "StackingArea100", "Scatter"
7+
})" created="created" contextMenuClick="contextMenuClick" Height="418px">
8+
<e-grid-selectionsettings mode="Row" type="Multiple"></e-grid-selectionsettings>
9+
<e-grid-columns>
10+
<e-grid-column type="checkbox" width="50"></e-grid-column>
11+
<e-grid-column field="Product" headerText="Product" width="120"></e-grid-column>
12+
<e-grid-column field="Month" headerText="Month" width="100"></e-grid-column>
13+
<e-grid-column field="Online" headerText="Online" format="C2" textAlign="Right" width="130"></e-grid-column>
14+
<e-grid-column field="Retail" headerText="Retail" format="C2" textAlign="Right" width="130"></e-grid-column>
15+
<e-grid-column field="Total" headerText="Total" format="C2" textAlign="Right" width="130"></e-grid-column>
16+
</e-grid-columns>
17+
</ejs-grid>
18+
19+
<script type="text/javascript">
20+
let gridChart;
21+
22+
function created() {
23+
var grid = document.getElementById("Grid").ej2_instances[0];
24+
gridChart = new ej.gridchart.GridChart({
25+
enableRtl: grid.enableRtl,
26+
locale: grid.locale,
27+
});
28+
}
29+
30+
function contextMenuClick(args) {
31+
if (args.chartType) {
32+
const chartArgs = {
33+
gridInstance: (args.gridInstance),
34+
chartType: args.chartType,
35+
records: (args.records),
36+
};
37+
const chartModel = {
38+
primaryXAxis: {
39+
valueType: 'Category',
40+
labelRotation: 315,
41+
},
42+
};
43+
44+
const model = {
45+
chart: chartModel,
46+
accumulationChart: {}
47+
};
48+
const categorySeries = {
49+
category: ['Product', 'Month'],
50+
series: ['Online', 'Retail']
51+
};
52+
gridChart.render(chartArgs, model, categorySeries);
53+
}
54+
}
55+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/chart-intergartion1/chart.cs‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
public ActionResult Index()
2+
{
3+
var Order = SalesService.GetSalesData();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}
7+
8+
public class SalesData
9+
{
10+
public string Product { get; set; }
11+
public string Month { get; set; }
12+
public int Online { get; set; }
13+
public int Retail { get; set; }
14+
public int Total { get; set; }
15+
}
16+
17+
18+
public class SalesService
19+
{
20+
public static List<SalesData> GetSalesData()
21+
{
22+
return new List<SalesData>
23+
{
24+
new SalesData { Product = "Laptop", Month = "January", Online = 1500, Retail = 2000, Total = 3500 },
25+
new SalesData { Product = "Mobile", Month = "February", Online = 1600, Retail = 2500, Total = 4100 },
26+
new SalesData { Product = "Tablet", Month = "March", Online = 1800, Retail = 2200, Total = 4000 },
27+
new SalesData { Product = "Smartwatch", Month = "April", Online = 2000, Retail = 2100, Total = 4100 },
28+
new SalesData { Product = "Camera", Month = "May", Online = 2200, Retail = 2300, Total = 4500 },
29+
new SalesData { Product = "Headphones", Month = "June", Online = 1700, Retail = 1800, Total = 3500 },
30+
new SalesData { Product = "Smart Speaker", Month = "July", Online = 1900, Retail = 2000, Total = 3900 },
31+
new SalesData { Product = "Printer", Month = "August", Online = 2100, Retail = 1900, Total = 4000 },
32+
new SalesData { Product = "Monitor", Month = "September", Online = 2000, Retail = 1900, Total = 3900 },
33+
new SalesData { Product = "Keyboard", Month = "October", Online = 1600, Retail = 1700, Total = 3300 },
34+
new SalesData { Product = "Mouse", Month = "November", Online = 1700, Retail = 1600, Total = 3300 },
35+
new SalesData { Product = "Router", Month = "December", Online = 1800, Retail = 2000, Total = 3800 }
36+
};
37+
}
38+
}

‎ej2-asp-core-mvc/code-snippet/grid/chart-intergartion1/chartcore.cs‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
public void OnGet()
2+
{
3+
ViewData["Datasource"] = SalesService.GetSalesData();
4+
}
5+
6+
public class SalesData
7+
{
8+
public string Product { get; set; }
9+
public string Month { get; set; }
10+
public int Online { get; set; }
11+
public int Retail { get; set; }
12+
public int Total { get; set; }
13+
}
14+
15+
16+
public class SalesService
17+
{
18+
public static List<SalesData> GetSalesData()
19+
{
20+
return new List<SalesData>
21+
{
22+
new SalesData { Product = "Laptop", Month = "January", Online = 1500, Retail = 2000, Total = 3500 },
23+
new SalesData { Product = "Mobile", Month = "February", Online = 1600, Retail = 2500, Total = 4100 },
24+
new SalesData { Product = "Tablet", Month = "March", Online = 1800, Retail = 2200, Total = 4000 },
25+
new SalesData { Product = "Smartwatch", Month = "April", Online = 2000, Retail = 2100, Total = 4100 },
26+
new SalesData { Product = "Camera", Month = "May", Online = 2200, Retail = 2300, Total = 4500 },
27+
new SalesData { Product = "Headphones", Month = "June", Online = 1700, Retail = 1800, Total = 3500 },
28+
new SalesData { Product = "Smart Speaker", Month = "July", Online = 1900, Retail = 2000, Total = 3900 },
29+
new SalesData { Product = "Printer", Month = "August", Online = 2100, Retail = 1900, Total = 4000 },
30+
new SalesData { Product = "Monitor", Month = "September", Online = 2000, Retail = 1900, Total = 3900 },
31+
new SalesData { Product = "Keyboard", Month = "October", Online = 1600, Retail = 1700, Total = 3300 },
32+
new SalesData { Product = "Mouse", Month = "November", Online = 1700, Retail = 1600, Total = 3300 },
33+
new SalesData { Product = "Router", Month = "December", Online = 1800, Retail = 2000, Total = 3800 }
34+
};
35+
}
36+
}

‎ej2-asp-core-mvc/code-snippet/grid/chart-intergartion1/razor‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height(418).Columns(col =>
2+
{
3+
col.Type("checkbox").Width("50").Add();
4+
col.Field("Product").HeaderText("Products").Width(200).Add();
5+
col.Field("Month").HeaderText("Month").Width(150).Add();
6+
col.Field("Online").HeaderText("Online").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(160).Add();
7+
col.Field("Retail").HeaderText("Retail").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(160).Add();
8+
col.Field("Total").HeaderText("Total").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(160).Add();
9+
}).AllowSelection(true).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple))ContextMenuItems(new List<object>() { "Bar", "StackingBar", "StackingBar100", "Pie", "Column", "StackingColumn", "StackingColumn100", "Line", "StackingLine", "StackingLine100", "Area", "StackingArea", "StackingArea100", "Scatter" }).ContextMenuClick("contextMenuClick").Created("created").Render()
10+
11+
<script type="text/javascript">
12+
let gridChart;
13+
14+
function created() {
15+
var grid = document.getElementById("Grid").ej2_instances[0];
16+
gridChart = new ej.gridchart.GridChart({
17+
enablePropertyPanel: true,
18+
enableRtl: grid.enableRtl,
19+
allowExport: true,
20+
locale: grid.locale,
21+
updateChartSettings: updateChartSettings
22+
});
23+
}
24+
25+
function contextMenuClick(args) {
26+
if (args.chartType) {
27+
const chartArgs = {
28+
gridInstance: (args.gridInstance),
29+
chartType: args.chartType,
30+
records: (args.records),
31+
};
32+
const chartModel = {
33+
primaryXAxis: {
34+
valueType: 'Category',
35+
labelRotation: 315,
36+
},
37+
margin: {
38+
top: 20,
39+
bottom: 20,
40+
right: 20,
41+
left: 20
42+
},
43+
tooltip: {
44+
enable: true,
45+
textStyle: {
46+
size: '16px',
47+
fontFamily: 'Arial, Helvetica, sans-serif'
48+
}
49+
},
50+
title: 'Sales Data',
51+
titleStyle: {
52+
size: '24px',
53+
fontFamily: 'Arial, Helvetica, sans-serif',
54+
fontWeight: 'Bold'
55+
},
56+
57+
subTitle: 'Sales data for various products over the months',
58+
load: (args) => {
59+
if (args.chart.titleStyle) {
60+
args.chart.titleStyle.color = '#1976d2';
61+
}
62+
}
63+
};
64+
const accumulationChartModel= {
65+
title :'Sales Distribution'
66+
};
67+
const model = {
68+
chart: chartModel,
69+
accumulationChart: accumulationChartModel
70+
};
71+
const categorySeries = {
72+
category: ['Product', 'Month'],
73+
series: ['Online', 'Retail']
74+
};
75+
gridChart.render(chartArgs, model, categorySeries);
76+
}
77+
}
78+
79+
function updateChartSettings(args) {
80+
const chart = args.changes?.chart;
81+
if (!chart) return;
82+
83+
// Restrict margin values to minimum 20.
84+
const margin = chart.margin;
85+
if (margin) {
86+
if (margin.top < 20) margin.top = 20;
87+
if (margin.bottom < 20) margin.bottom = 20;
88+
if (margin.left < 20) margin.left = 20;
89+
if (margin.right < 20) margin.right = 20;
90+
}
91+
}
92+
</script>

0 commit comments

Comments
 (0)