Integrate Flexmonster Pivot table with Highcharts library on the base of Vue.js framework.
Use multi-platform charting library together with pivot functionality to create 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 to discover new insights. Link up pivot grid with charts, slice & dice the data any way you want to - 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: "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 the interactive features of the pivot table and different chart types.