Integrate the Flexmonster pivot table with the Highcharts library in the Vue.js framework.
Use the multi-platform charting library together with pivot functionality for insightful business reports. Create a ready-to-use dashboard for your Vue project following an intelligible Integration with Highcharts guide.
The dashboard shows all core metrics that help you discover new insights. Link up the pivot grid with charts, slice and dice the data any way you want, and immediately see the updated result on the charts.
<template>
<Pivot
ref="pivot"
componentFolder="https://cdn.flexmonster.com/"
height="300"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
v-bind:report="report"
v-bind:reportcomplete="reportcomplete"
/>
<div class="demo-box">
<div class="demo-title">Requests vs Answered Calls</div>
<div id="highcharts-container"></div>
</div>
<div class="demo-box">
<div class="demo-title">Revenue vs Support Cost</div>
<div id="highcharts-column-container"></div>
</div>
<div class="demo-box">
<div class="demo-title">Customer Satisfaction</div>
<div id="highcharts-pie-container"></div>
</div>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
import "flexmonster/lib/flexmonster.highcharts";
import Highcharts from "highcharts";
export default {
name: "PivotComponent",
components: {
Pivot,
},
data() {
return {
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/highcharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Requests",
aggregation: "sum",
},
{
uniqueName: "Answered Calls",
aggregation: "sum",
},
{
uniqueName: "Revenue",
aggregation: "sum",
format: "currency",
active: false,
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Answered Calls",
aggregation: "sum",
},
},
},
},
formats: [
{
name: "",
thousandsSeparator: ",",
},
{
name: "currency",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
},
],
options: {
showHeaders: false,
},
},
};
},
methods: {
reportcomplete() {
this.$refs.pivot.flexmonster.off("reportcomplete");
this.setGlobalChartsOptions();
this.createLineChart();
this.createColumnChart();
this.createPieChart();
},
setGlobalChartsOptions() {
Highcharts.setOptions({
colors: [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7",
],
lang: {
thousandsSep: ",",
},
chart: {
plotBackgroundColor: "#fafafa",
backgroundColor: "#fafafa",
style: {
fontFamily: "Serif Typeface",
},
},
});
},
createLineChart() {
this.$refs.pivot.flexmonster.highcharts.getData(
{
type: "line",
},
this.drawLineChart,
this.updateLineChart,
);
},
drawLineChart(chartData) {
chartData.xAxis.title.enabled = false;
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-container", chartData);
},
updateLineChart(chartData) {
this.drawLineChart(chartData);
},
createColumnChart() {
this.$refs.pivot.flexmonster.highcharts.getData(
{
type: "column",
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Revenue",
aggregation: "sum",
},
{
uniqueName: "Support Cost",
aggregation: "sum",
},
],
},
},
this.drawColumnChart,
this.updateColumnChart,
);
},
drawColumnChart(chartData, rawData) {
let currencyFormat = rawData.meta.formats.find(
(format) => format.name == "currency",
);
chartData.xAxis.title.enabled = false;
chartData.legend = {
enabled: false,
};
if (chartData.yAxis == undefined) chartData.yAxis = {};
for (let i = 0; i < chartData.yAxis.length; i++) {
chartData.yAxis[i].labels = {
format: pivot.highcharts.getAxisFormat(currencyFormat),
};
}
for (let i = 0; i < chartData.series.length; i++) {
chartData.series[i].tooltip = {
pointFormat:
"{series.name}: <b>" +
pivot.highcharts.getPointYFormat(currencyFormat) +
"</b><br/>",
};
}
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-column-container", chartData);
},
updateColumnChart(chartData) {
// Here you can add your own logic for updating the chart
},
createPieChart() {
this.$refs.pivot.flexmonster.highcharts.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Customer Satisfaction",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Answered Calls",
aggregation: "sum",
},
],
},
},
this.drawPieChart,
this.updatePieChart,
);
},
drawPieChart(chartData) {
Highcharts.chart("highcharts-pie-container", chartData);
},
updatePieChart(chartData) {
// Here you can add your own logic for updating the chart
},
},
};
</script>
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #555;
}
Empower your Vue.js application with interactive features of the pivot table and different chart types.