Use Flexmonster Pivot Table & Charts with FusionCharts — an interactive and responsive charting library for your Vue app.
Configure the dashboard with Flexmonster using different grid layouts, choose the charting library from the FusionCharts charts line, and get a fully interactive analytical instrument for your business.
Create the dashboard for your Vue.js project according to business requirements, provide visual clarity into report metrics.
<template>
<Pivot
ref="pivot"
componentFolder="https://cdn.flexmonster.com/"
height="440"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
v-bind:report="report"
v-bind:reportcomplete="reportcomplete"
/>
<div class="demo-box">
<div class="demo-title">Top Countries by Revenue</div>
<fusioncharts
v-if="dataSourceForMap"
v-bind:type="mapType"
width="100%"
height="400"
v-bind:dataSource="dataSourceForMap"
/>
</div>
<div class="demo-box">
<div class="demo-title">Top Traffic Sources</div>
<fusioncharts
v-if="dataSourceForDoughnut"
v-bind:type="doughnutType"
width="100%"
height="450"
v-bind:dataSource="dataSourceForDoughnut"
/>
</div>
<div class="demo-box">
<div class="demo-title">Revenue per Month</div>
<fusioncharts
v-if="dataSourceForColumn"
v-bind:type="columnType"
width="100%"
height="450"
v-bind:dataSource="dataSourceForColumn"
/>
</div>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
import "flexmonster/lib/flexmonster.fusioncharts";
const backgroundColor = "#fafafa",
baseFontSize = "15",
baseFontColor = "#888",
chartPalette = "4cbf8b, ffcd4c, e8734c, 9875e3, 4c9eff, 8acfc3, cd97e6, f1d34c, 65d2e7";
export default {
name: "PivotComponent",
components: {
Pivot,
},
data() {
return {
report: {
dataSource: {
type: "json",
filename: "data/demos/fusioncharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Country",
},
],
columns: [
{
uniqueName: "Traffic",
},
{
uniqueName: "Source",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Revenue",
formula: "sum("Sales") * sum("Purchase Cost")",
individual: true,
caption: "Revenue",
format: "currency",
},
{
uniqueName: "Conversion Rate",
formula: "sum("Leads") / sum("Clicks")",
individual: true,
caption: "Conversion Rate",
active: false,
},
],
sorting: {
column: {
type: "desc",
tuple: ["Traffic.[Referral]"],
measure: {
uniqueName: "Revenue",
aggregation: "none",
},
},
},
expands: {
rows: [],
columns: [
{
tuple: ["Traffic.[Organic]"],
},
{
tuple: ["Traffic.[Paid]"],
},
],
},
},
options: {
grid: {
showHeaders: false,
},
},
formats: [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
}, {
name: "currency",
currencySymbol: "$",
}],
},
dataSourceForMap: null,
mapType: "maps/worldwithcountries",
dataSourceForDoughnut: null,
doughnutType: "doughnut2d",
dataSourceForColumn: null,
columnType: "mscolumn2d",
};
},
methods: {
reportcomplete() {
this.$refs.pivot.flexmonster.off("reportcomplete");
this.createMapChart();
this.createDoughnutChart();
this.createColumnChart();
},
createMapChart() {
this.$refs.pivot.flexmonster.fusioncharts.getData(
{
type: this.mapType,
},
this.drawMap,
this.drawMap
);
},
drawMap(chartConfig) {
chartConfig.chart.theme = "fusion";
chartConfig.chart.showLabels = "0";
chartConfig.chart.bgColor = backgroundColor;
chartConfig.chart.entityBorderColor = backgroundColor;
chartConfig.chart.entityBorderThickness = "1";
chartConfig.chart.entityFillHoverColor = "#d00000";
chartConfig.chart.nullEntityColor = "#bbbbbb";
chartConfig.chart.nullEntityAlpha = "50";
chartConfig.chart.hoverOnNull = "0";
chartConfig.chart.legendPosition = "top";
chartConfig.colorrange = {
minvalue: chartConfig.extradata.minValue,
code: "#8acfc3",
gradient: "1",
color: [
{
minvalue: chartConfig.extradata.minValue,
maxvalue: 100000,
code: "#8acfc3",
},
{
minvalue: 100000,
maxvalue: 250000,
code: "#4cbf8b",
},
{
minvalue: 250000,
maxvalue: 400000,
code: "#ffcd4c",
},
{
minvalue: 400000,
maxvalue: 550000,
code: "#faa307",
},
{
minvalue: 550000,
maxvalue: 700000,
code: "#f48c06",
},
{
minvalue: 700000,
maxvalue: chartConfig.extradata.maxValue,
code: "#e85d04",
},
],
};
delete chartConfig.extradata;
this.dataSourceForMap = chartConfig;
},
createDoughnutChart() {
this.$refs.pivot.flexmonster.fusioncharts.getData(
{
type: this.doughnutType,
slice: {
rows: [
{
uniqueName: "Source",
filter: {
exclude: ["LinkedIn", "Medium", "Bing"],
},
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Users",
aggregation: "sum",
},
],
},
},
this.drawDoughnut,
this.drawDoughnut
);
},
drawDoughnut(chartConfig) {
chartConfig.chart.theme = "fusion";
chartConfig.chart.baseFontSize = baseFontSize;
chartConfig.chart.baseFontColor = baseFontColor;
chartConfig.chart.bgColor = backgroundColor;
chartConfig.chart.palettecolors = chartPalette;
chartConfig.chart.startingAngle = "-110";
chartConfig.chart.showLegend = "0";
chartConfig.chart.smartLineColor = baseFontColor;
chartConfig.chart.smartLineAlpha = "60";
chartConfig.chart.labelFontColor = baseFontColor;
chartConfig.chart.labelFontSize = baseFontSize;
chartConfig.chart.plotToolText = "Source: $label
Users: $dataValue";
chartConfig.data[2].isSliced = "1";
chartConfig.chart.enableMultiSlicing = "0";
this.dataSourceForDoughnut = chartConfig;
},
createColumnChart() {
this.$refs.pivot.flexmonster.fusioncharts.getData(
{
type: this.columnType,
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "Traffic",
},
],
measures: [
{
uniqueName: "Sales",
aggregation: "sum",
format: "currency"
},
],
},
},
this.drawColumn,
this.drawColumn
);
},
drawColumn(chartConfig, rawData) {
chartConfig.chart.theme = "fusion";
chartConfig.chart.baseFontSize = baseFontSize;
chartConfig.chart.baseFontColor = baseFontColor;
chartConfig.chart.bgColor = backgroundColor;
chartConfig.chart.palettecolors = chartPalette;
chartConfig.chart.xAxisName = undefined;
chartConfig.chart.yAxisName = undefined;
chartConfig.chart.plotFillHoverAlpha = "90";
chartConfig.chart.plotToolText =
"Traffic type: $seriesname
Month: $label
Revenue: $dataValue";
chartConfig.chart.legendPosition = "right";
chartConfig.chart.plotHighlightEffect = "fadeout|alpha=20";
chartConfig.chart.legendCaption = "Traffic type";
chartConfig.chart.legendCaptionBold = "1";
chartConfig.chart.legendCaptionFontSize = "13";
chartConfig.chart.legendCaptionFontColor = baseFontColor;
chartConfig.chart.legendIconScale = "1.2";
chartConfig.chart.legendIconSides = "500";
chartConfig.chart.legendItemFontSize = baseFontSize;
chartConfig.chart.legendItemFontColor = baseFontColor;
chartConfig.chart.adjustDiv = "0";
chartConfig.chart.yAxisMaxvalue = "35000";
chartConfig.chart.yAxisMinValue = "0";
chartConfig.chart.numDivLines = "4";
chartConfig.chart.formatNumberScale = "0";
let format = this.$refs.pivot.flexmonster.fusioncharts.getNumberFormat(rawData.meta.formats[0]);
for (let prop in format) {
chartConfig.chart[prop] = format[prop];
}
this.dataSourceForColumn = chartConfig;
},
},
};
</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;
line-height: 24px;
color: #555;
}
import { createApp } from "vue";
import PivotComponent from "./components/FusionChartsDemo.vue";
// Importing FusionCharts
import VueFusionCharts from "vue-fusioncharts";
import FusionCharts from "fusioncharts";
import Charts from "fusioncharts/fusioncharts.charts";
import FusionMaps from "fusioncharts/fusioncharts.maps";
import WorldwithCountries from "fusionmaps/maps/fusioncharts.worldwithcountries";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
const app = createApp(PivotComponent);
app.use(VueFusionCharts, FusionCharts, Charts, FusionMaps, WorldwithCountries, FusionTheme);
app.mount("#app");
To design your first dashboard with Flexmonster and FusionCharts and add it to your Vue app with short code lines following our integration with FusionCharts guide.