Get Free Trial
List of all demos

Flexmonster Pivot Charts for Vue

Flexmonster Pivot Charts — is one more option to visualize aggregated data and highlight a particular subset of data.


    <template>
    	<button v-on:click="showGrid" class="btn-route">Grid</button>
    	<button v-on:click="showColumnChart()" class="btn-route">Column</button>
    	<button v-on:click="showBarChart()" class="btn-route">Bar</button>
    	<button v-on:click="showLineChart()" class="btn-route">Line</button>
    	<button v-on:click="showScatterChart()" class="btn-route">Scatter</button>
    	<button v-on:click="showPieChart()" class="btn-route">Pie</button>
    	<button v-on:click="showColumnLineChart()" class="btn-route">Combo</button>
    	<button v-on:click="showStackedColumn()" class="btn-route">Stacked</button>
    	<a class="btn-route" target="_blank"
    		href="https://www.flexmonster.com/doc/available-tutorials-charts/#3rd-party-charts">Need another chart?</a>
    			
    	<Pivot
    		ref="pivot"
    		height="500"
    		v-bind:report="report"
    	/>
    </template>
    
    <script>
    import Pivot from "vue-flexmonster/vue3";
    import "flexmonster/flexmonster.css";
    
    export default {
    	name: 'PivotComponent',
    	components: {
    		Pivot
    	},
    	data() {
    		return {
    			report: {
    				"dataSource": {
    					"filename": "https://cdn.flexmonster.com/data/demos/pivot-charts-demo-data.json",
    				},
    				"options": {
    					"viewType": "charts",
    					"chart": {
    						"type": "column"
    					}
    				},
    				"slice": {
    					"rows": [{
    						"uniqueName": "Order Date.Month"
    					}],
    					"columns": [{
    						"uniqueName": "City",
    						"filter": {
    							"measure": {
    								"uniqueName": "Orders",
    								"aggregation": "sum"
    							},
    							"query": {
    								"top": 5
    							}
    						}
    					},
    					{
    						"uniqueName": "[Measures]"
    					}
    					],
    					"measures": [{
    						"uniqueName": "Orders",
    						"aggregation": "sum"
    					}]
    				}
    			}
    		}
    	},
    	methods: {
    		showGrid() {
    			let pivotReport = this.$refs.pivot.flexmonster.getReport();
    			pivotReport.slice = {
    				"reportFilters": [{
    					"uniqueName": "Order Date.Year"
    				},
    				{
    					"uniqueName": "Order Date.Month"
    				},
    				{
    					"uniqueName": "Order Date.Day"
    				}
    				],
    				"rows": [{
    					"uniqueName": "Payment Type"
    				}],
    				"columns": [{
    					"uniqueName": "[Measures]"
    				},
    				{
    					"uniqueName": "Referring Site"
    				}
    				],
    				"measures": [{
    					"uniqueName": "Revenue",
    					"formula": "sum(\"Amount\") * sum(\"Price\")",
    					"individual": true,
    					"caption": "Revenue",
    					"format": "currency"
    				}]
    			};
    			pivotReport.conditions = [{
    				"formula": "#value < 45000",
    				"measure": "Revenue",
    				"format": {
    					"backgroundColor": "#df3800",
    					"color": "#fff",
    					"fontFamily": "Arial",
    					"fontSize": "12px"
    				}
    			},
    			{
    				"formula": "#value > 400000",
    				"measure": "Revenue",
    				"format": {
    					"backgroundColor": "#00a45a",
    					"color": "#fff",
    					"fontFamily": "Arial",
    					"fontSize": "12px"
    				}
    			}
    			];
    			pivotReport.options = {
    				"viewType": "grid"
    			};
    			this.$refs.pivot.flexmonster.setReport(pivotReport);
    		},
    		showColumnChart() {
    			let pivotReport = this.$refs.pivot.flexmonster.getReport();
    			pivotReport.slice = {
    				"rows": [{
    					"uniqueName": "Order Date.Month"
    				}],
    				"columns": [{
    					"uniqueName": "City",
    					"filter": {
    						"measure": {
    							"uniqueName": "Orders",
    							"aggregation": "sum"
    						},
    						"query": {
    							"top": 5
    						}
    					}
    				},
    				{
    					"uniqueName": "[Measures]"
    				}
    				],
    				"measures": [{
    					"uniqueName": "Orders",
    					"aggregation": "sum"
    				}]
    			};
    			pivotReport.options = {
    				"viewType": "charts",
    				"chart": {
    					"type": "column"
    				}
    			};
    			this.$refs.pivot.flexmonster.setReport(pivotReport);
    		},
    		showLineChart() {
    			let pivotReport = this.$refs.pivot.flexmonster.getReport();
    			pivotReport.slice = {
    				"rows": [{
    					"uniqueName": "Order Date.Year"
    				}],
    				"columns": [{
    					"uniqueName": "[Measures]"
    				},
    				{
    					"uniqueName": "Referring Site",
    					"filter": {
    						"measure": {
    							"uniqueName": "Orders",
    							"aggregation": "sum"
    						},
    						"query": {
    							"top": 2
    						}
    					}
    				}
    				],
    				"measures": [{
    					"uniqueName": "Orders",
    					"aggregation": "sum"
    				}],
    				"sorting": {
    					"row": {
    						"type": "desc",
    						"tuple": [],
    						"measure": {
    							"uniqueName": "Orders",
    							"aggregation": "sum"
    						}
    					}
    				}
    			};
    			pivotReport.options = {
    				"viewType": "charts",
    				"chart": {
    					"type": "line"
    				}
    			};
    			this.$refs.pivot.flexmonster.setReport(pivotReport);
    		},
    		showStackedColumn() {
    			let pivotReport = this.$refs.pivot.flexmonster.getReport();
    			pivotReport.slice = {
    				"rows": [{
    					"uniqueName": "Payment Type",
    					"filter": {
    						"measure": {
    							"uniqueName": "Orders"
    						},
    						"query": {
    							"top": 3
    						}
    					}
    				}],
    				"columns": [{
    					"uniqueName": "Referring Site",
    					"filter": {
    						"measure": {
    							"uniqueName": "Orders"
    						},
    						"query": {
    							"top": 3
    						}
    					}
    				},
    				{
    					"uniqueName": "[Measures]"
    				}
    				],
    				"measures": [{
    					"uniqueName": "Orders",
    					"aggregation": "sum"
    				}],
    				"sorting": {
    					"column": {
    						"type": "desc",
    						"tuple": [],
    						"measure": {
    							"uniqueName": "Orders",
    							"aggregation": "sum"
    						}
    					}
    				}
    			};
    			pivotReport.options = {
    				"viewType": "charts",
    				"chart": {
    					"type": "stacked_column"
    				}
    			};
    			this.$refs.pivot.flexmonster.setReport(pivotReport);
    		},
    		showBarChart() {
    			let pivotReport = this.$refs.pivot.flexmonster.getReport();
    			pivotReport.slice = {
    				"rows": [{
    					"uniqueName": "Referring Site",
    					"filter": {
    						"measure": {
    							"uniqueName": "Orders",
    							"aggregation": "sum"
    						},
    						"query": {
    							"top": 6
    						}
    					}
    				}],
    				"columns": [{
    					"uniqueName": "[Measures]"
    				},
    				{
    					"uniqueName": "Payment Type",
    					"filter": {
    						"members": [
    							"payment type.[debit card]",
    							"payment type.[invoice]"
    						]
    					}
    				}
    				],
    				"measures": [{
    					"uniqueName": "Orders",
    					"aggregation": "sum"
    				}]
    			};
    			pivotReport.options = {
    				"viewType": "charts",
    				"chart": {
    					"type": "bar_h"
    				}
    			};
    			this.$refs.pivot.flexmonster.setReport(pivotReport);
    		},
    		showPieChart() {
    			let pivotReport = this.$refs.pivot.flexmonster.getReport();
    			pivotReport.slice = {
    				"rows": [{
    					"uniqueName": "City",
    					"filter": {
    						"measure": {
    							"uniqueName": "Revenue"
    						},
    						"query": {
    							"top": 5
    						}
    					}
    
    				}],
    				"columns": [{
    					"uniqueName": "[Measures]"
    				}],
    				"measures": [{
    					"uniqueName": "Revenue",
    					"formula": "sum(\"Amount\") * sum(\"Price\")",
    					"individual": true,
    					"format": "currency",
    					"caption": "Revenue"
    				}
    
    				]
    			};
    			pivotReport.options = {
    				"viewType": "charts",
    				"chart": {
    					"type": "pie"
    				}
    			};
    			this.$refs.pivot.flexmonster.setReport(pivotReport);
    		},
    		showScatterChart() {
    			let pivotReport = this.$refs.pivot.flexmonster.getReport();
    			pivotReport.slice = {
    				"rows": [{
    					"uniqueName": "Order Date.Year"
    				}],
    				"columns": [{
    					"uniqueName": "City",
    					"filter": {
    						"measure": {
    							"uniqueName": "Orders",
    							"aggregation": "sum"
    						},
    						"query": {
    							"top": 3
    						}
    					}
    				}, {
    					"uniqueName": "[Measures]"
    				}],
    				"measures": [{
    					"uniqueName": "Orders",
    					"aggregation": "sum"
    				}]
    			};
    			pivotReport.options = {
    				"viewType": "charts",
    				"chart": {
    					"type": "scatter"
    				}
    			};
    			this.$refs.pivot.flexmonster.setReport(pivotReport);
    		},
    		showColumnLineChart() {
    			let pivotReport = this.$refs.pivot.flexmonster.getReport();
    			pivotReport.slice = {
    				"rows": [{
    					"uniqueName": "Order Date.Year"
    				}],
    				"columns": [{
    					"uniqueName": "[Measures]"
    				}],
    				"measures": [{
    					"uniqueName": "Orders",
    					"aggregation": "sum"
    				},
    				{
    					"uniqueName": "Revenue",
    					"formula": "sum(\"Amount\") * sum(\"Price\")",
    					"individual": true,
    					"caption": "Revenue",
    					"format": "currency"
    				}
    				]
    			};
    			pivotReport.options = {
    				"viewType": "charts",
    				"chart": {
    					"type": "column_line"
    				}
    			};
    			this.$refs.pivot.flexmonster.setReport(pivotReport);
    		}
    	}
    }
    </script>
    
    /* Charts Style  */
    #fm-pivot-view .fm-chart .fm-circle {
    	r: 8;
    }
    
    .fm-charts-color-1 {
    	fill: rgb(0, 164, 90) !important;
    }
    
    .fm-charts-color-2 {
    	fill: rgb(223, 56, 0) !important;
    }
    
    .fm-charts-color-3 {
    	fill: rgb(255, 184, 0) !important;
    }
    
    .fm-charts-color-4 {
    	fill: rgb(109, 59, 216) !important;
    }
    
    .fm-charts-color-5 {
    	fill: rgb(0, 117, 255) !important;
    }
    
    #fm-pivot-view .fm-bar,
    #fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
    #fm-pivot-view .fm-line,
    #fm-pivot-view .fm-arc path,
    #fm-pivot-view .fm-bar-stack,
    #fm-pivot-view .fm-scatter-point {
    	opacity: 70% !important;
    }
    
    #fm-yAxis-label,
    #fm-xAxis>text,
    #fm-yAxis>text {
    	display: none;
    }
    
    /* Buttons Style  */
    .btn-route {
    	margin: 5px;
    	padding: 10px 10px;
    	border: 2px solid #df3800;
    	background: #fff;
    	color: #df3800;
    	white-space: nowrap;
    	text-transform: uppercase;
    	cursor: pointer;
    	display: inline-block;
    	font-weight: normal;
    	font-size: 14px;
    	text-align: center;
    	align-items: flex-start;
    	box-sizing: border-box;
    	text-decoration: none;
    	font: 14px Arial;
    }
    
    .btn-route:hover,
    .btn-route:focus {
    	outline: none;
    	border: 2px solid #df3800;
    	background: #df3800;
    	color: #fff;
    }
    

    After you add our web component into your Vue project you can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart’s segments and control the legend’s elements.

    Use pivot charts to show the pivot data in graphical format, using 10 charts types: column chart, bar chart, line chart, scatter chart, pie chart, stacked column chart, and a combination of column and line chart.

    Our drillable pivot charts are built-in so you can change you report dynamically switching between grid & charts views via UI or API calls.