JavaScript Pivot Table with FusionCharts

Flexmonster Pivot Table & Charts seamlessly integrates with FusionCharts — a data visualization library that offers modern interactive charts.

A web-based dashboard created with Flexmonster and FusionCharts is a self-service analytics tool that can speed up decision-making within any department.

Top Countries by Revenue

It is possible to tailor the dashboard based on the business logic and provide visual clarity into metrics and KPIs.

Top Traffic Sources

Revenue per Month

Edit in JSfiddle Get Free Trial

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 440,
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  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: "$",
    }],
  },
  reportcomplete: () => {
    pivot.off("reportcomplete");
    createMapChart();
    createDoughnutChart();
    createColumnChart();
  },
});

let mapChart, doughnutChart, columnChart;

const backgroundColor = "#fafafa",
  baseFontSize = "15",
  baseFontColor = "#888",
  chartPalette = "4cbf8b, ffcd4c, e8734c, 9875e3, 4c9eff, 8acfc3, cd97e6, f1d34c, 65d2e7";

function createMapChart() {
  mapChart = new FusionCharts({
    type: "maps/worldwithcountries",
    renderAt: "fusionmap-container",
    width: "100%",
    height: 400,
    dataFormat: "json",
  });

  pivot.fusioncharts.getData(
    {
      type: "maps/" + mapChart.chartType(),
    },
    (chartConfig) => {
      drawMap(chartConfig);
      mapChart.render();
    },
    drawMap
  );
}

function 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;

  mapChart.setJSONData(chartConfig);
}

function createDoughnutChart() {
  doughnutChart = new FusionCharts({
    type: "doughnut2d",
    renderAt: "fusionchart-container",
    width: "100%",
    height: 450,
    dataFormat: "json",
  });

  pivot.fusioncharts.getData(
    {
      type: doughnutChart.chartType(),
      slice: {
        rows: [
          {
            uniqueName: "Source",
            filter: {
              exclude: ["LinkedIn", "Medium", "Bing"],
            },
          },
        ],
        columns: [
          {
            uniqueName: "[Measures]",
          },
        ],
        measures: [
          {
            uniqueName: "Users",
            aggregation: "sum",
          },
        ],
      },
    },
    (chartConfig) => {
      drawDoughnut(chartConfig);
      doughnutChart.render();
    },
    drawDoughnut
  );
}

function 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";

  doughnutChart.setJSONData(chartConfig);
}

function createColumnChart() {
  columnChart = new FusionCharts({
    type: "mscolumn2d",
    renderAt: "fusioncolumn-container",
    width: "100%",
    height: 450,
  });

  pivot.fusioncharts.getData(
    {
      type: columnChart.chartType(),
      slice: {
        rows: [
          {
            uniqueName: "Date.Month",
          },
        ],
        columns: [
          {
            uniqueName: "Traffic",
          },
        ],
        measures: [
          {
            uniqueName: "Sales",
            aggregation: "sum",
            format: "currency"
          },
        ],
      },
    },
    (chartConfig, rawData) => {
      drawColumn(chartConfig, rawData);
      columnChart.render();
    },
    drawColumn
  );
}

function 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 = pivot.fusioncharts.getNumberFormat(rawData.meta.formats[0]);
  for (let prop in format) {
    columnChart[prop] = format[prop];
  }

  columnChart.setJSONData(chartConfig);
}

<div id="pivot-container"></div>

<div class="demo-box">
  <div class="demo-title">Top Countries by Revenue</div>
  <div id="fusionmap-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Top Traffic Sources</div>
  <div id="fusionchart-container"></div>
</div>

<div class="demo-box">
  <div class="demo-title">Revenue per Month</div>
  <div id="fusioncolumn-container"></div>
</div>

.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;
}

Read our Integration with FusionCharts guide to learn how to design the dashboard with Flexmonster and FusionCharts and add it to your app with minimum lines of code.

The integration process is based on the usage of the Сonnector for FusionCharts that establishes real-time communication between the pivot table and charts. The principle of the dashboard’s work is simple: Flexmonster takes raw data, summarizes it, and sends it for further data visualization to the charts.

With Highcharts With Google Charts

Prev Next

Frequently asked questions

Can't find your answer?
Visit the FAQ

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?

JavaScript Pivot Table with FusionCharts

For the best experience

See our live examples

Frequently asked questions