Vue Pivot Table with FusionCharts

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 chart type from the FusionCharts list of charts, and get a fully interactive analytical instrument for your business.

Top Countries by Revenue

Create the dashboard for your Vue.js project according to business requirements and provide visual clarity into report metrics.

Top Traffic Sources

Revenue per Month

Edit in JSfiddle Get Free Trial

<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: "https://cdn.flexmonster.com/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: 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<br />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<br />Month: $label<br />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;
  font-weight: 600;
  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 a few code lines, follow our Integration with FusionCharts guide.

With Highcharts With Google Charts

Prev Next

Frequently asked questions

Can't find your answer here?
Visit the FAQ page

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Changes to Flexmonster Software License Agreement

Vue Pivot Table with FusionCharts

For the best experience

See our live examples

Frequently asked questions