Skip to content

Commit 5537b26

Browse files
SasthaPrathapSasthaPrathap
authored
Merge pull request #1 from MeenaAlagiah/master
Adding the Vue Pivot Chart Customization sample
2 parents 764eebf + 6daee07 commit 5537b26

File tree

11 files changed

+363
-2
lines changed

11 files changed

+363
-2
lines changed

‎README.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,13 @@
1-
# how-to-customize-the-pivot-chart-in-a-vue-pivot-table
2-
A quick start Vue project that shows how to display a pivot chart in the Vue Pivot Table Component. This project includes a code snippet for customizing the axes, data labels, legends and displaying the accumulation charts.
1+
# How to Customize the Pivot Chart in a Vue Pivot Table
2+
A quick start Vue project that shows how to display a pivot chart in the Vue Pivot Table Component. This project includes a code snippet for customizing the axes, data labels, legends and displaying the accumulation charts.
3+
4+
Refer to the following documentation to learn about the Vue Pivot Table component:
5+
https://ej2.syncfusion.com/vue/documentation/pivotview/pivot-chart
6+
7+
Check out this online example of the Vue Pivot Table Component:
8+
https://ej2.syncfusion.com/vue/demos/#/material3/pivot-table/pivot-chart.html
9+
10+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
11+
12+
### How to run this application?
13+
To run this application, you need to clone the `how-to-customize-the-pivot-chart-in-a-vue-pivot-table` repository and then open it in Visual Studio Code. Now, simply install all the necessary vue packages into your current project using the `npm install` command and run your project using the `npm run dev` command.

‎alphanumeric_data.js‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
define(["require", "exports"], function (require, exports) {
2+
"use strict";
3+
Object.defineProperty(exports, "__esModule", { value: true });
4+
5+
exports.alphanumeric_data = [
6+
{
7+
"ProductID": "618-XW",
8+
"Country": "Canada",
9+
"Sold": 90,
10+
"Amount": 9219069
11+
},
12+
{
13+
"ProductID": "1111-GQ",
14+
"Sold": 37,
15+
"Amount": 1571126,
16+
"Country": "Australia"
17+
},
18+
{
19+
"ProductID": "330-BR",
20+
"Sold": 31,
21+
"Amount": 9523258,
22+
"Country": "Germany"
23+
},
24+
{
25+
"ProductID": "1035-VC",
26+
"Sold": 86,
27+
"Amount": 1004572,
28+
"Country": "United States"
29+
},
30+
{
31+
"ProductID": "36-SW",
32+
"Sold": 73,
33+
"Amount": 4532163,
34+
"Country": "United Kingdom"
35+
},
36+
{
37+
"ProductID": "71-AJ",
38+
"Sold": 45,
39+
"Amount": 1916052,
40+
"Country": "Germany"
41+
},
42+
{
43+
"ProductID": "980-PP",
44+
"Sold": 85,
45+
"Amount": 6586156,
46+
"Country": "Canada"
47+
},
48+
{
49+
"ProductID": "209-FB",
50+
"Sold": 51,
51+
"Amount": 6348087,
52+
"Country": "Australia"
53+
},
54+
{
55+
"ProductID": "428-PL",
56+
"Sold": 65,
57+
"Amount": 1365854,
58+
"Country": "Germany"
59+
},
60+
{
61+
"ProductID": "618-XW",
62+
"Sold": 81,
63+
"Amount": 6461768,
64+
"Country": "United States"
65+
},
66+
{
67+
"ProductID": "1111-GQ",
68+
"Sold": 33,
69+
"Amount": 6181560,
70+
"Country": "United Kingdom"
71+
},
72+
{
73+
"ProductID": "330-BR",
74+
"Sold": 17,
75+
"Amount": 611364,
76+
"Country": "Germany"
77+
},
78+
{
79+
"ProductID": "1035-VC",
80+
"Sold": 41,
81+
"Amount": 3688930,
82+
"Country": "Canada"
83+
},
84+
{
85+
"ProductID": "36-SW",
86+
"Sold": 51,
87+
"Amount": 4648920,
88+
"Country": "Australia"
89+
},
90+
{
91+
"ProductID": "71-AJ",
92+
"Sold": 56,
93+
"Amount": 4579862,
94+
"Country": "Germany"
95+
},
96+
{
97+
"ProductID": "980-PP",
98+
"Sold": 25,
99+
"Amount": 1249117,
100+
"Country": "United States"
101+
},
102+
{
103+
"ProductID": "209-FB",
104+
"Sold": 60,
105+
"Amount": 9603891,
106+
"Country": "United Kingdom"
107+
},
108+
{
109+
"ProductID": "428-PL",
110+
"Sold": 31,
111+
"Amount": 9548655,
112+
"Country": "Canada"
113+
},
114+
{
115+
"ProductID": "618-XW",
116+
"Sold": 93,
117+
"Amount": 7496742,
118+
"Country": "Australia"
119+
},
120+
{
121+
"ProductID": "1111-GQ",
122+
"Sold": 62,
123+
"Amount": 8692814,
124+
"Country": "Germany"
125+
},
126+
{
127+
"ProductID": "330-BR",
128+
"Sold": 22,
129+
"Amount": 4789234,
130+
"Country": "United States"
131+
},
132+
{
133+
"ProductID": "1035-VC",
134+
"Sold": 61,
135+
"Amount": 7927531,
136+
"Country": "United Kingdom"
137+
},
138+
{
139+
"ProductID": "36-SW",
140+
"Sold": 68,
141+
"Amount": 5440025,
142+
"Country": "Germany"
143+
},
144+
{
145+
"ProductID": "71-AJ",
146+
"Sold": 87,
147+
"Amount": 8097913,
148+
"Country": "Canada"
149+
},
150+
{
151+
"ProductID": "980-PP",
152+
"Sold": 87,
153+
"Amount": 1809071,
154+
"Country": "Australia"
155+
},
156+
{
157+
"ProductID": "209-FB",
158+
"Sold": 96,
159+
"Amount": 9893092,
160+
"Country": "Germany"
161+
},
162+
{
163+
"ProductID": "428-PL",
164+
"Sold": 22,
165+
"Amount": 8136252,
166+
"Country": "United States"
167+
},
168+
{
169+
"ProductID": "618-XW",
170+
"Sold": 29,
171+
"Amount": 9190577,
172+
"Country": "United Kingdom"
173+
},
174+
{
175+
"ProductID": "1111-GQ",
176+
"Sold": 85,
177+
"Amount": 5410172,
178+
"Country": "Germany"
179+
}
180+
];
181+
});

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-pivotview": "^22.1.36",
13+
"vue": "^3.2.47"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^4.1.0",
17+
"vite": "^4.3.9"
18+
}
19+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<script>
2+
import { PivotViewComponent, FieldList, GroupingBar } from "@syncfusion/ej2-vue-pivotview";
3+
4+
export default{
5+
components: {
6+
"ejs-pivotview": PivotViewComponent
7+
},
8+
data()
9+
{
10+
return{
11+
dataSourceSettings:{
12+
dataSource:[
13+
{ Amount: 5100, Country: "Canada", Date: "FY 2006", Quarter: "Q1", Product: "Car", Quantity: 21, State: "Alberta" },
14+
{ Amount: 1900, Country: "France", Date: "FY 2007", Quarter: "Q2", Product: "Bike", Quantity: 23, State: "Alberta" },
15+
{ Amount: 1000, Country: "Sweden", Date: "FY 2008", Quarter: "Q3", Product: "Car", Quantity: 29, State: "Alberta" },
16+
{ Amount: 2060, Country: "Canada", Date: "FY 2006", Quarter: "Q4", Product: "Bike", Quantity: 93, State: "British Columbia" },
17+
{ Amount: 6200, Country: "France", Date: "FY 2007", Quarter: "Q1", Product: "Car", Quantity: 36, State: "British Columbia" },
18+
{ Amount: 2000, Country: "Sweden", Date: "FY 2008", Quarter: "Q2", Product: "Bike", Quantity: 31, State: "British Columbia" },
19+
{ Amount: 1300, Country: "Canada", Date: "FY 2005", Quarter: "Q3", Product: "Car", Quantity: 45, State: "Brunswick" },
20+
{ Amount: 3400, Country: "France", Date: "FY 2006", Quarter: "Q4", Product: "Bike", Quantity: 47, State: "Brunswick" },
21+
{ Amount: 2300, Country: "Sweden", Date: "FY 2007", Quarter: "Q1", Product: "Car", Quantity: 43, State: "Brunswick" },
22+
{ Amount: 5100, Country: "Canada", Date: "FY 2006", Quarter: "Q2", Product: "Bike", Quantity: 21, State: "Alberta" },
23+
{ Amount: 1900, Country: "France", Date: "FY 2007", Quarter: "Q3", Product: "Car", Quantity: 23, State: "Alberta" },
24+
{ Amount: 1000, Country: "Sweden", Date: "FY 2008", Quarter: "Q4", Product: "Bike", Quantity: 29, State: "Alberta" },
25+
{ Amount: 2060, Country: "Canada", Date: "FY 2006", Quarter: "Q1", Product: "Car", Quantity: 93, State: "British Columbia" },
26+
{ Amount: 6200, Country: "France", Date: "FY 2007", Quarter: "Q2", Product: "Bike", Quantity: 36, State: "British Columbia" },
27+
{ Amount: 2000, Country: "Sweden", Date: "FY 2008", Quarter: "Q3", Product: "Car", Quantity: 31, State: "British Columbia" },
28+
{ Amount: 1300, Country: "Canada", Date: "FY 2005", Quarter: "Q4", Product: "Bike", Quantity: 45, State: "Brunswick" },
29+
{ Amount: 3400, Country: "France", Date: "FY 2006", Quarter: "Q1", Product: "Car", Quantity: 47, State: "Brunswick" },
30+
{ Amount: 2300, Country: "Sweden", Date: "FY 2007", Quarter: "Q2", Product: "Bike", Quantity: 43, State: "Brunswick" },
31+
],
32+
rows: [{name:'Country'},{name: 'Product'}],
33+
columns: [{name:'Date'}],
34+
values: [{name:'Amount'}, {name:'Quantity', caption:'Units Sold'}],
35+
formatSettings: [{name:'Amount', format:'C1'}]
36+
},
37+
height:'350px',
38+
width:'900px',
39+
displayOption:{view:'Chart'},
40+
chartSettings: { chartSeries: { type: 'Pie', explode: true, legendShape: 'Pentagon', marker:{ dataLabel: { visible: true}} },
41+
primaryXAxis:{ isInversed:true },
42+
primaryYAxis:{ title: 'Sales Revenue' },
43+
legendSettings: { position: 'Right', alignment: 'Far' }},
44+
showFieldList: true,
45+
showGroupingBar: true
46+
}},
47+
provide:{
48+
pivotview: [FieldList, GroupingBar]
49+
}
50+
}
51+
</script>
52+
<template>
53+
<ejs-pivotview :height="height" :width="width"
54+
:dataSourceSettings="dataSourceSettings"
55+
:displayOption="displayOption"
56+
:chartSettings="chartSettings"
57+
:showFieldList="showFieldList"
58+
:showGroupingBar="showGroupingBar"
59+
></ejs-pivotview>
60+
</template>
61+
62+
<style >
63+
@import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";
64+
@import "../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css";
65+
@import "../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css";
66+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
67+
@import "../node_modules/@syncfusion/ej2-calendars/styles/bootstrap5.css";
68+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
69+
@import "../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css";
70+
@import "../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css";
71+
@import "../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css";
72+
@import "../node_modules/@syncfusion/ej2-grids/styles/bootstrap5.css";
73+
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/bootstrap5.css";
74+
75+
</style>
76+
77+

‎src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/main.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import {registerLicense} from '@syncfusion/ej2-base';
5+
registerLicense("ORg4AjUWIQA/Gnt2V1hhQlJAfVddX2BWfFN0RnNYfVR0d19DZUwxOX1dQl9gSXlRcEVnXHtec3NWRmU=");
6+
createApp(App).mount('#app')

‎src/style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)