Flexmonster Pivot Table Component Live Demo

View Pivot Charts
Interactive drillable pivot charts

Use Flexmonster Pivot in Charts mode for interactive, analytics dashboard-like way to visualize OLAP data. Power up users with drill-up and drill-down features with usable info tooltips and legend. Flexmonster Pivot supports the following chart types: bar chart, line chart, scatter chart, pie chart, bar stack chart, combination of bar and line chart.

Pivot Charts
Bar chart

To view this page ensure that Adobe Flash Player version 10.2.0 or greater is installed.

View source code

Source code for the Flexmonster Pivot Flash/JS API demo:

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>FlexMonster Pivot Table & Charts</title>
  <link href="css/panels.css" rel="stylesheet" rev="stylesheet" type="text/css">
    <table width="100%">
      <tr width="100%">
      <td style="height: 80px; position: relative;">
        <table width="100%">
          <td style="width:164px;border-right: 1px dotted #555555;"><div class="header-title">Pivot Charts</div>
          <td><div class="ViewIconsArea">
            <a href="javascript:void(0)" onclick="onBtnClick(this)" id="bar" class="Active"><span>Bar chart</span></a>
            <a href="javascript:void(0)" onclick="onBtnClick(this)" id="line"><span>Line chart</span></a> 
            <a href="javascript:void(0)" onclick="onBtnClick(this)" id="scatter"><span>Scatter chart</span></a> 
            <a href="javascript:void(0)" onclick="onBtnClick(this)" id="pie"><span>Pie chart</span></a> 
            <a href="javascript:void(0)" onclick="onBtnClick(this)" id="bar_stack"><span>Bar stack chart</span></a>
            <a href="javascript:void(0)" onclick="onBtnClick(this)" id="bar_line"><span>Bar line chart</span></a> 
            <a href="javascript:void(0)" onclick="onBtnClick(this)" id="grid"><span>Grid</span></a>
            <div class="multiple"><input id="multiple" type="checkbox" name="multiple" value="true" onclick="onMultipleChange()"/>Multiple values</div>
            <div class="clear"></div>
      <td><div class="flexmonster-panel">
        <div id="title" class="title">Bar chart</div>
      <td><div class="border-container">
        <div id="pivotContent">
          <p> To view this page ensure that Adobe Flash Player version 10.2.0 or greater is installed. </p> <script type="text/javascript"> var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); </script>
    <script type="text/javascript" src="flexmonster/flexmonster.js"></script> 
    <script type="text/javascript">
      flexmonster.embedPivotComponent("flexmonster/", "pivotContent", "100%", "400", {
        configUrl: "reports/report-charts.xml"
      var currentButton = document.getElementById("bar");
      var title = document.getElementById("title");
      var multiple = document.getElementById("multiple");
      function onBtnClick(target)
        currentButton.className = "";
        currentButton = target;
        currentButton.className = "Active";
        title.innerHTML = currentButton.innerHTML;
        switchView(currentButton.id, multiple.checked);
      function onMultipleChange()
        switchView(currentButton.id, multiple.checked);

      function switchView(type, multiple)
        if(type == "grid")
          flexmonster.showCharts(type, multiple);