Get Free Trial
List of all demos

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

    var pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
      width: "100%",
      height: 350,
      toolbar: true,
      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": "revenue"
            },
            {
              "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": "",
            "maxDecimalPlaces": 2
          },
          {
            "name": "roi_format",
            "thousandsSeparator": " ",
            "decimalSeparator": ".",
            "currencySymbol": "%",
            "currencySymbolAlign": "right",
            "nullValue": "",
            "textAlign": "right",
            "isPercent": false
          },
          {
            "name": "revenue",
            "currencySymbol": "$"
          }
        ]
      },
      reportcomplete: function() {
        pivot.off("reportcomplete");
        FusionCharts.options.SVGDefinitionURL = 'absolute';
        createFusionMap();
        createFusionChart();
        createStackedColumn();
      }
    });
    
    function createFusionMap() {
      var map = new FusionCharts({
        "type": "maps/worldwithcountries",
        "renderAt": "fusionmap-container",
        "width": "100%",
        "height": 380,
        "dataFormat": "json"
      });
    
      pivot.fusioncharts.getData({
        type: "maps/" + map.chartType()
      }, function(data) {
        data.chart.showLabels = "0";
        data.chart.showCanvasBorder = "0";
        data.chart.theme = "fusion";
        data.chart.nullEntityColor = "#cccccc";
        data.chart.nullEntityAlpha = "50";
        data.chart.entityFillHoverColor = "#888888";
        data.colorrange = {
          "minvalue": data.extradata.minValue,
          "startlabel": "Low",
          "endlabel": "High",
          "code": "#e44a00",
          "gradient": "1",
          "color": [{
            "minvalue": 0,
            "maxvalue": 15000,
            "code": "#ee3e32"
          }, {
            "minvalue": 15000,
            "maxvalue": 50000,
            "code": "#f68838"
          }, {
            "minvalue": 50000,
            "maxvalue": 100000,
            "code": "#fbb021"
          }, {
            "minvalue": 100000,
            "maxvalue": data.extradata.maxValue,
            "code": "#1b8a5a"
          }]
    
    
        };
        delete data.extradata;
        map.setJSONData(data);
        map.setChartAttribute("theme", "fusion");
        map.render();
      }, function(data) {
        data.chart.showLabels = "0";
        data.chart.showCanvasBorder = "0";
        data.chart.theme = "fusion";
        data.chart.nullEntityColor = "#cccccc";
        data.chart.nullEntityAlpha = "50";
        data.chart.entityFillHoverColor = "#888888";
        data.colorrange = {
          "minvalue": data.extradata.minValue,
          "startlabel": "Low",
          "endlabel": "High",
          "code": "#e44a00",
          "gradient": "1",
          "color": [{
            "minvalue": 0,
            "maxvalue": 15000,
            "code": "#ee3e32"
          }, {
            "minvalue": 15000,
            "maxvalue": 50000,
            "code": "#f68838"
          }, {
            "minvalue": 50000,
            "maxvalue": 100000,
            "code": "#fbb021"
          }, {
            "minvalue": 100000,
            "maxvalue": data.extradata.maxValue,
            "code": "#1b8a5a"
          }]
        };
        delete data.extradata;
        map.setJSONData(data);
        map.setChartAttribute("theme", "fusion");
      });
    }
    
    function createFusionChart() {
      var chart = new FusionCharts({
        "type": "doughnut2d",
        "renderAt": "fusionchart-container",
        "width": "100%",
        "height": 350,
        "dataFormat": "json"
      });
    
      pivot.fusioncharts.getData({
        type: chart.chartType(),
        "slice": {
          "rows": [{
            "uniqueName": "Source"
          }],
          "columns": [{
            "uniqueName": "[Measures]"
          }],
          "measures": [{
            "uniqueName": "Users",
            "aggregation": "sum"
          }]
        }
      }, function(data) {
        data.chart.showBorder = "0";
        data.chart.bgColor = "#ffffff";
        data.chart.showCanvasBorder = "0";
        data.chart.centerLabel = "Users: $value";
        data.chart.centerLabelBold = "1";
        data.chart.showTooltip = "0";
        chart.setJSONData(data);
        chart.setChartAttribute("theme", "fusion");
        chart.render();
      }, function(data) {});
    }
    
    function createLineChart() {
      var chart = new FusionCharts({
        "type": "line",
        "renderAt": "fusionline-container",
        "width": "100%",
        "height": 350
      });
    
      pivot.fusioncharts.getData({
        type: chart.chartType(),
        "slice": {
          "rows": [{
              "uniqueName": "Date.Month"
            }
    
          ],
          "columns": [{
            "uniqueName": "[Measures]"
          }],
          "measures": [{
            "uniqueName": "Revenue",
            "formula": "sum(\"Sales\") * sum(\"Purchase Cost\")",
            "individual": true,
            "caption": "Revenue"
          }]
        }
      }, function(data) {
        data.chart.xAxisName = undefined;
        data.chart.yAxisName = undefined;
        chart.setJSONData(data);
        chart.setChartAttribute("theme", "fusion");
        chart.render();
      }, function(data) {});
    }
    
    function createStackedColumn() {
      var chart = new FusionCharts({
        "type": "stackedcolumn2d",
        "renderAt": "fusioncolumn-container",
        "width": "100%",
        "height": 350
      });
    
      pivot.fusioncharts.getData({
        type: chart.chartType(),
        "slice": {
          "rows": [{
            "uniqueName": "Date.Month"
          }],
          "columns": [{
            "uniqueName": "Traffic"
          }],
          "measures": [{
            "uniqueName": "Sales",
            "aggregation": "sum",
          }]
        }
      }, function(data) {
        data.chart.xAxisName = undefined;
        data.chart.yAxisName = undefined;
        chart.setJSONData(data);
        chart.setChartAttribute("theme", "fusion");
        chart.render();
      }, function(data) {});
    }
    
    <div class="chart-container" id="pivot-container"></div>
    <h2 style=" text-align: center; margin-bottom:5px;">
      <strong>Top Countries by Revenue</strong>
    </h2>
    <div class="chart-container" id="fusionmap-container"></div>
    <h2 style=" text-align: center; margin-bottom:2px;">
      <strong>Top Traffic Sources</strong>
    </h2>
    <div class="chart-container" id="fusionchart-container"></div>
    <h2 style=" text-align: center; margin-bottom:5px;">
      <strong>Revenue per Month</strong>
    </h2>
    <div class="chart-container" id="fusioncolumn-container"></div>
    
    div.chart-container {
      margin-top: 30px;
    }
    

    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 usage of the Сonnector for FusionCharts that enables to establish 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 for further data visualization to the charts.