3D Pie With Local Storage State Management

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body,
    #myChart {
      height: 100%;
      width: 100%;
    }

    #myChart button {
      position: absolute;
      top: 15px;
      left: 10px;
      z-index: 1000;
    }
  </style>
</head>

<body>
  <div id='myChart'>
    <button onclick="window.parent.location.reload()">Reload</button>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myJson = {
      "type": "ring3d",
      "globals": {
        "font-family": "Ubuntu"
      },
      "3d-aspect": {
        "x-angle": 65,
        "y-angle": 0,
        "z-angle": 0
      },
      "plot": {
        "tooltip": {
          "decimals": 0,
          "text": "%t: $%v (%npv%)",
          "fontSize": 15,
          "align": "left",
          "borderRadius": 3,
          "borderWidth": 2,
          "borderColor": "%color-1",
          "backgroundColor": "#fff",
          "alpha": 0.9,
          "padding": 10,
          "color": "#666",
          "negation": "currency",
          "thousandsSeparator": ",",
          "shadow": 0
        },
        "border-color": "#fff",
        "highlight": true,
        "value-box": {
          "type": "none"
        }
      },
      "legend": {
        "toggleAction": 'remove',
        "layout": "float",
        "align": "center",
        "vertical-align": "bottom",
        "shadow": 0,
        "border-width": 0,
        "item": {
          "font-color": "#666",
          "padding": "5px",
          "margin": "0px",
          "cursor": "pointer"
        },
        "marker": {
          "cursor": "pointer",
          "type": "circle"
        }
      },
      "series": [{
          "background-color": "#FFEB3B",
          "values": [
            109392632
          ],
          "text": "BPA CALL",
          "visible": localStorage.getItem('zingchart_plot_0_visibility') ? localStorage.getItem('zingchart_plot_0_visibility') : true
        },
        {
          "background-color": "#00BCD4",
          "values": [
            536459206
          ],
          "text": "CONTRACT",
          "visible": localStorage.getItem('zingchart_plot_1_visibility') ? localStorage.getItem('zingchart_plot_1_visibility') : true
        },
        {
          "background-color": "#FF9800",
          "values": [
            115376811
          ],
          "text": "P-CARD",
          "visible": localStorage.getItem('zingchart_plot_2_visibility') ? localStorage.getItem('zingchart_plot_2_visibility') : true
        },
        {
          "background-color": "#4CAF50",
          "values": [
            635009731
          ],
          "text": "RELEASE(TO/DO)",
          "visible": localStorage.getItem('zingchart_plot_3_visibility') ? localStorage.getItem('zingchart_plot_3_visibility') : true
        },
        {
          "background-color": "#F44336",
          "values": [
            64063481
          ],
          "text": "STANDARD PO",
          "visible": localStorage.getItem('zingchart_plot_4_visibility') ? localStorage.getItem('zingchart_plot_4_visibility') : true
        }
      ]
    };


    function legendToggle(e) {
      localStorage.setItem('zingchart_plot_' + e.plotindex + '_visibility', !e.visible);
    }

    zingchart.bind('myChart', 'legend_item_click', legendToggle);
    zingchart.bind('myChart', 'legend_marker_click', legendToggle);

    zingchart.render({
      id: 'myChart',
      data: myJson,
      height: '100%',
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'>
    <button onclick="window.parent.location.reload()">Reload</button>
  </div>
</body>

</html>

html,
body,
#myChart {
  height: 100%;
  width: 100%;
}

#myChart button {
  position: absolute;
  top: 15px;
  left: 10px;
  z-index: 1000;
}

var myJson = {
  "type": "ring3d",
  "globals": {
    "font-family": "Ubuntu"
  },
  "3d-aspect": {
    "x-angle": 65,
    "y-angle": 0,
    "z-angle": 0
  },
  "plot": {
    "tooltip": {
      "decimals": 0,
      "text": "%t: $%v (%npv%)",
      "fontSize": 15,
      "align": "left",
      "borderRadius": 3,
      "borderWidth": 2,
      "borderColor": "%color-1",
      "backgroundColor": "#fff",
      "alpha": 0.9,
      "padding": 10,
      "color": "#666",
      "negation": "currency",
      "thousandsSeparator": ",",
      "shadow": 0
    },
    "border-color": "#fff",
    "highlight": true,
    "value-box": {
      "type": "none"
    }
  },
  "legend": {
    "toggleAction": 'remove',
    "layout": "float",
    "align": "center",
    "vertical-align": "bottom",
    "shadow": 0,
    "border-width": 0,
    "item": {
      "font-color": "#666",
      "padding": "5px",
      "margin": "0px",
      "cursor": "pointer"
    },
    "marker": {
      "cursor": "pointer",
      "type": "circle"
    }
  },
  "series": [{
      "background-color": "#FFEB3B",
      "values": [
        109392632
      ],
      "text": "BPA CALL",
      "visible": localStorage.getItem('zingchart_plot_0_visibility') ? localStorage.getItem('zingchart_plot_0_visibility') : true
    },
    {
      "background-color": "#00BCD4",
      "values": [
        536459206
      ],
      "text": "CONTRACT",
      "visible": localStorage.getItem('zingchart_plot_1_visibility') ? localStorage.getItem('zingchart_plot_1_visibility') : true
    },
    {
      "background-color": "#FF9800",
      "values": [
        115376811
      ],
      "text": "P-CARD",
      "visible": localStorage.getItem('zingchart_plot_2_visibility') ? localStorage.getItem('zingchart_plot_2_visibility') : true
    },
    {
      "background-color": "#4CAF50",
      "values": [
        635009731
      ],
      "text": "RELEASE(TO/DO)",
      "visible": localStorage.getItem('zingchart_plot_3_visibility') ? localStorage.getItem('zingchart_plot_3_visibility') : true
    },
    {
      "background-color": "#F44336",
      "values": [
        64063481
      ],
      "text": "STANDARD PO",
      "visible": localStorage.getItem('zingchart_plot_4_visibility') ? localStorage.getItem('zingchart_plot_4_visibility') : true
    }
  ]
};


function legendToggle(e) {
  localStorage.setItem('zingchart_plot_' + e.plotindex + '_visibility', !e.visible);
}

zingchart.bind('myChart', 'legend_item_click', legendToggle);
zingchart.bind('myChart', 'legend_marker_click', legendToggle);

zingchart.render({
  id: 'myChart',
  data: myJson,
  height: '100%',
  width: '100%'
});