Chart options

Options

by jesperra

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<table>
	<tr>
		<td style="width: 162px">
    <button class="btn" onclick="setChartOption('title', 'Results')">Add title</button>
    <button class="btn" onclick="setChartOption('title', '')">Remove title</button>
    <button class="btn" onclick="setChartOption('showFilter', false)">Hide filters</button>
    <button class="btn" onclick="setChartOption('showFilter', true)">Show filters</button>
    <button class="btn" onclick="setChartOption('showLegendButton', true)">Show legend button</button>
    <button class="btn" onclick="setChartOption('showLegendButton', false)">Hide legend button</button>
    <button class="btn" onclick="setChartOption('showMeasures', false)">Hide measures dropdown</button>
    <button class="btn" onclick="setChartOption('showMeasures', true)">Show measures dropdown</button>
    </td>  
		<td style="width: 500px">
			<div id="pivot-container"></div>
		</td>
	</tr>
</table>

CSS

.btn {
 width: 160px;
}

JavaScript

function setChartOption(option, value) {
  flexmonster.setOptions({ 
  	chart: {
  		[option]: value
  	}
  });
  flexmonster.refresh();
}

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 460,
  toolbar: true,
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    options: {
    	viewType: "charts",
      chart: {
      	type: "pie",
        multipleMeasures: true
      }
    },
    slice: {
      pages: [{uniqueName: "Color"}, {uniqueName: "Quantity"}, {uniqueName: "State"}],
      rows: [{uniqueName: "Country"},{uniqueName: "City"}],
      columns: [{uniqueName: "[Measures]"}],
      measures: [{uniqueName: "Price"}],
      expands: {
            rows: [{
                    tuple: [
                        "country.[usa]"
                    ]
            }]
        }
    }
  }
});

function getData() {
  return [{
    "Color":"green",
    "M":"September",
    "W":"Wed",
    "Country" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Price":174,
    "Quantity":22
  },
  {
    "Color":"red",
    "M":"March",
    "W":"Mon",
    "Time":"1000",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":1664,
    "Quantity":19
  },
  {
    "Color":"red",
    "M":"January",
    "W":"Mon",
    "Country" : "Canada",
    "State" : "Quebec",
    "City" : "Montreal",
    "Price":1190,
    "Quantity":292
  },
  {
    "Color":"green",
    "D":"04/08/2014",
    "M":"August",
    "W":"Fri",
    "Time":"1000",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":1222,
    "Quantity":730
  },
  {
    "Color":"white",
    "M":"March",
    "W":"Wed",
    "Country" : "USA",
    "State" : "California",
    "City" : "Los Angeles",
    "Price":7941,
    "Quantity":73
  },
  {
    "Color":"red",
    "M":"August",
    "W":"Wed",
    "Country" : "Canada",
    "State" :...