Facet Column Number Control

Use chart State to control the number of column view

by YeongCY

HTML

<script src="https://cdn.zoomcharts-cloud.com/1/18/9/zoomcharts.js"></script>
<button onclick="reloadData()">Reload</button>
<button onclick="changeViewColumn()">View 1 Column</button>
<div id="demo"></div>

JavaScript

var data = [{
  id: "IE",
  name: "Internet Explorer",
  value: 200,
  subvalues: [{
    // id: 
  }]
}];



var f = new FacetChart({
  container: document.getElementById("demo"),
  data: {
    dataFunction: function(id, offset, limit, success, fail) {
    console.log(f.saveState());
    console.log(id, offset, limit);
      var data = {
        id: id,
        subvalues: null
      };

      if (!id) {
        data.subvalues = [{
          id: "IE",
          name: "Internet Explorer",
          value: 200
        }, {
          id: "FF",
          name: "Firefox",
          value: 150
        }];
      } else if (id === "IE") {
        data.subvalues = [{
          id: "IE1",
          name: "IE1",
          value: 150,
          extra: {
            expandable: false
          }
        }, {
          id: "IE2",
          name: "IE2",
          value: 50,
          extra: {
            expandable: false
          }
        }, {
          id: "IE3",
          name: "IE3",
          value: 50,
          extra: {
            expandable: false
          }
        }, {
          id: "IE4",
          name: "IE4",
          value: 50,
          extra: {
            expandable: false
          }
        }, {
          id: "IE5",
          name: "IE5",
          value: 50,
          extra: {
            expandable: false
          }
        }, {
          id: "IE6",
          name: "IE6",
          value: 50,
          extra: {
            expandable: false
          }
        }, {
          id: "IE7",
          name: "IE7",
          value: 50,
          extra: {
            expandable: false
          }
        }, {
          id: "IE8",
          name: "IE8",
          value: 50,
          extra: {
            expandable: false
          }
        }, {
          id: "IE9",
          name: "IE9",
          value: 50,
          extra: {
            expandable: false
          }
        }, {
          id: "IE10",
          name: "IE10",
          value: 50,
         ...