Get Free Trial
List of all demos

Flexmonster Pivot Charts

Flexmonster Pivot Charts — an alternative way to visualize aggregated data and highlight specific information.


    var pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      width: "100%",
      height: 500,
      report: {
        dataSource: {
          filename: "data/demos/pivot-charts-demo-data.json",
        },
        options: {
          viewType: "charts",
          chart: {
            type: "column"
          },
          configuratorActive: false
        },
        "slice": {
          "rows": [{
            "uniqueName": "Order Date.Month"
          }],
          "columns": [{
              "uniqueName": "City",
              "filter": {
                "measure": {
                  "uniqueName": "Orders",
                  "aggregation": "sum"
                },
                "query": {
                  "top": 5
                }
              }
            },
            {
              "uniqueName": "[Measures]"
            }
          ],
          "measures": [{
            "uniqueName": "Orders",
            "aggregation": "sum"
          }]
        }
      }
    });
    
    function showGrid() {
      var pivotReport = pivot.getReport();
      pivotReport.slice = {
        "reportFilters": [{
            "uniqueName": "Order Date.Year"
          },
          {
            "uniqueName": "Order Date.Month"
          },
          {
            "uniqueName": "Order Date.Day"
          }
        ],
        "rows": [{
          "uniqueName": "Payment Type"
        }],
        "columns": [{
            "uniqueName": "[Measures]"
          },
          {
            "uniqueName": "Referring Site"
          }
        ],
        "measures": [{
          "uniqueName": "Revenue",
          "formula": "sum(\"Amount\") * sum(\"Price\")",
          "individual": true,
          "caption": "Revenue",
          "format": "currency"
        }]
      };
      pivotReport.conditions = [{
          "formula": "#value < 45000",
          "measure": "Revenue",
          "format": {
            "backgroundColor": "#df3800",
            "color": "#fff",
            "fontFamily": "Arial",
            "fontSize": "12px"
          }
        },
        {
          "formula": "#value > 400000",
          "measure": "Revenue",
          "format": {
            "backgroundColor": "#00a45a",
            "color": "#fff",
            "fontFamily": "Arial",
            "fontSize": "12px"
          }
        }
      ];
      pivotReport.options = {
        "viewType": "grid"
      };
      pivot.setReport(pivotReport);
    }
    
    function showColumnChart(type) {
      var pivotReport = pivot.getReport();
      pivotReport.slice = {
        "rows": [{
          "uniqueName": "Order Date.Month"
        }],
        "columns": [{
            "uniqueName": "City",
            "filter": {
              "measure": {
                "uniqueName": "Orders",
                "aggregation": "sum"
              },
              "query": {
                "top": 5
              }
            }
          },
          {
            "uniqueName": "[Measures]"
          }
        ],
        "measures": [{
          "uniqueName": "Orders",
          "aggregation": "sum"
        }]
      };
      pivotReport.options = {
        "viewType": "charts",
        "chart": {
          "type": type
        }
      };
      pivot.setReport(pivotReport);
    }
    
    function showLineChart(type) {
      var pivotReport = pivot.getReport();
      pivotReport.slice = {
        "rows": [{
          "uniqueName": "Order Date.Year"
        }],
        "columns": [{
            "uniqueName": "[Measures]"
          },
          {
            "uniqueName": "Referring Site",
            "filter": {
              "measure": {
                "uniqueName": "Orders",
                "aggregation": "sum"
              },
              "query": {
                "top": 2
              }
            }
          }
        ],
        "measures": [{
          "uniqueName": "Orders",
          "aggregation": "sum"
        }],
        "sorting": {
          "row": {
            "type": "desc",
            "tuple": [],
            "measure": {
              "uniqueName": "Orders",
              "aggregation": "sum"
            }
          }
        }
      };
      pivotReport.options = {
        "viewType": "charts",
        "chart": {
          "type": type
        }
      };
      pivot.setReport(pivotReport);
    }
    
    function showStackedColumn(type) {
      var pivotReport = pivot.getReport();
      pivotReport.slice = {
        "rows": [{
          "uniqueName": "Payment Type",
          "filter": {
            "measure": {
              "uniqueName": "Orders"
            },
            "query": {
              "top": 3
            }
          }
        }],
        "columns": [{
            "uniqueName": "Referring Site",
            "filter": {
              "measure": {
                "uniqueName": "Orders"
              },
              "query": {
                "top": 3
              }
            }
          },
          {
            "uniqueName": "[Measures]"
          }
        ],
        "measures": [{
          "uniqueName": "Orders",
          "aggregation": "sum"
        }],
        "sorting": {
          "column": {
            "type": "desc",
            "tuple": [],
            "measure": {
              "uniqueName": "Orders",
              "aggregation": "sum"
            }
          }
        }
      };
      pivotReport.options = {
        "viewType": "charts",
        "chart": {
          "type": type
        }
      };
      pivot.setReport(pivotReport);
    }
    
    function showBarChart(type) {
      var pivotReport = pivot.getReport();
      pivotReport.slice = {
        "rows": [{
          "uniqueName": "Referring Site",
          "filter": {
            "measure": {
              "uniqueName": "Orders",
              "aggregation": "sum"
            },
            "query": {
              "top": 6
            }
          }
        }],
        "columns": [{
            "uniqueName": "[Measures]"
          },
          {
            "uniqueName": "Payment Type",
            "filter": {
              "members": [
                "payment type.[debit card]",
                "payment type.[invoice]"
              ]
            }
          }
        ],
        "measures": [{
          "uniqueName": "Orders",
          "aggregation": "sum"
        }]
      };
      pivotReport.options = {
        "viewType": "charts",
        "chart": {
          "type": type
        }
      };
      pivot.setReport(pivotReport);
    }
    
    function showPieChart(type) {
      var pivotReport = pivot.getReport();
      pivotReport.slice = {
        "rows": [{
          "uniqueName": "City",
          "filter": {
            "measure": {
              "uniqueName": "Revenue"
            },
            "query": {
              "top": 5
            }
          }
    
        }],
        "columns": [{
          "uniqueName": "[Measures]"
        }],
        "measures": [{
            "uniqueName": "Revenue",
            "formula": "sum(\"Amount\") * sum(\"Price\")",
            "individual": true,
            "format": "currency",
            "caption": "Revenue"
          }
    
        ]
      };
      pivotReport.options = {
        "viewType": "charts",
        "chart": {
          "type": type
        }
      };
      pivot.setReport(pivotReport);
    }
    
    function showScatterChart(type) {
      var pivotReport = pivot.getReport();
      pivotReport.slice = {
        "rows": [{
          "uniqueName": "Order Date.Year"
        }],
        "columns": [{
          "uniqueName": "City",
          "filter": {
            "measure": {
              "uniqueName": "Orders",
              "aggregation": "sum"
            },
            "query": {
              "top": 3
            }
          }
        }, {
          "uniqueName": "[Measures]"
        }],
        "measures": [{
          "uniqueName": "Orders",
          "aggregation": "sum"
        }]
      };
      pivotReport.options = {
        "viewType": "charts",
        "chart": {
          "type": type
        }
      };
      pivot.setReport(pivotReport);
    }
    
    function showColumnLineChart(type) {
      var pivotReport = pivot.getReport();
      pivotReport.slice = {
        "rows": [{
          "uniqueName": "Order Date.Year"
        }],
        "columns": [{
          "uniqueName": "[Measures]"
        }],
        "measures": [{
            "uniqueName": "Orders",
            "aggregation": "sum"
          },
          {
            "uniqueName": "Revenue",
            "formula": "sum(\"Amount\") * sum(\"Price\")",
            "individual": true,
            "caption": "Revenue",
            "format": "currency"
          }
        ]
      };
      pivotReport.options = {
        "viewType": "charts",
        "chart": {
          "type": type
        }
      };
      pivot.setReport(pivotReport);
    }
    
    <button onclick="showGrid()">Grid</button>
    <button onclick="showColumnChart('column')">Column</button>
    <button onclick="showBarChart('bar_h')">Bar</button>
    <button onclick="showLineChart('line')">Line</button>
    <button onclick="showScatterChart('scatter')">Scatter</button>
    <button onclick="showPieChart('pie')">Pie</button>
    <button onclick="showColumnLineChart('column_line')">Combo</button>
    <button onclick="showStackedColumn('stacked_column')">Stacked</button>
    <a class="btn-route" target="_blank" 
    href="https://www.flexmonster.com/doc/available-tutorials-charts/#3d-party-charts">
    Need another chart?</a>
    
    <div id="pivot-container"></div>
    
    #fm-pivot-view .fm-chart .fm-circle {
      r: 8;
    }
    
    /* Charts Style  */
    .fm-charts-color-1 {
      fill: rgb(0, 164, 90) !important;
    }
    
    .fm-charts-color-2 {
      fill: rgb(223, 56, 0) !important;
    }
    
    .fm-charts-color-3 {
      fill: rgb(255, 184, 0) !important;
    }
    
    .fm-charts-color-4 {
      fill: rgb(109, 59, 216) !important;
    }
    
    .fm-charts-color-5 {
      fill: rgb(0, 117, 255) !important;
    }
    
    #fm-pivot-view .fm-bar,
    #fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
    #fm-pivot-view .fm-line,
    #fm-pivot-view .fm-arc path,
    #fm-pivot-view .fm-bar-stack,
    #fm-pivot-view .fm-scatter-point {
      opacity: 70% !important;
    }
    
    #fm-yAxis-label,
    #fm-xAxis>text,
    #fm-yAxis>text {
      display: none;
    }
    
    .btn-route {
      margin: 5px 0;
      padding: 10px 10px;
      border: 2px solid #df3800;
      background: #fff;
      color: #df3800;
      white-space: nowrap;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-block;
      font-weight: normal;
      font-size: 14px;
      text-align: center;
      align-items: flex-start;
      box-sizing: border-box;
      text-decoration: none;
      font: 14px Arial;
    }
    
    .btn-route:hover,
    .btn-route:focus {
      outline: none;
      border: 2px solid #df3800;
      background: #df3800;
      color: #fff;
    }
    

    Their core feature is interactivity: end-users can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart’s segments and control the legend’s elements.

    The web pivot charts are easily understood with convenient tooltips and legend information.

    Our web component supports the following charts types: column chart, bar chart, line chart, scatter chart, pie chart, stacked column chart, and a combination of column and line chart.

    Moreover, our drillable pivot charts are built-in — end-users can toggle between charts and grid views via UI or API calls.