chartclick

Events

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<p>
  Click on a chart segment to trigger the <code>chartclick</code> event that
  outputs info about the clicked segment under the component.
</p>

<div id="pivot-container">The component will appear here</div>

<div class="output" id="output">Output will appear here</div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  chartclick: function(chart) {
    showOutput(
      "Click on chart segment with label: " +
      chart.label + ", measure: " +
      chart.measure.uniqueName +
      ", value: " +
      chart.id);
  },
  report: {
    dataSource: {
      filename: "data/sales.csv"
    },
    slice: {
      columns: [{
        uniqueName: "Month"
      }, {
        uniqueName: "[Measures]"
      }],
      rows: [{
        uniqueName: "Category"
      }],
      measures: [{
        "uniqueName": "Revenue",
        "aggregation": "sum"
      }]
    },
    "options": {
      "viewType": "charts",
      "chart": {
        "type": "pie"
      }
    },
    "formats": [{
      "thousandsSeparator": ",",
      "decimalPlaces": 2
    }]
  }
});


let outputInitialized = false;

function showOutput(content) {
  var log = "[" + (new Date()).toLocaleTimeString('en-US') + "] " + content;
  var outputElement = document.getElementById("output");
  if (!outputInitialized) {
    outputElement.innerText = '';
    outputInitialized = true;
  }
  outputElement.innerText += log + "\n";
  outputElement.scrollTop = outputElement.scrollHeight;
}