[Docs] JSON Docs buttons

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
 
    .chart--container {
      min-height: 550px;
      width: 100%;
    }
 
    .zc-ref {
      display: none;
    }
  </style>
</head>
 
<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let gSeriesData = {
      text: '7 Year Data',
      values: []
    };
 
    // toggle the type of chart
 
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
 
 
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
        type: 'line',
        globals: {
          fontFamily: 'Lucida Sans Unicode'
        },
        plotarea: {
          margin: '50px 40px 40px 80px'
        },
        scaleX: {
          item: {
            fontSize: '10px'
          },
          transform: {
            type: 'date',
            item: {
              visible: true
            }
          },
          zooming: true
        },
        scaleY: {
          autoFit: true,
          guide: {
            lineStyle: 'solid'
          },
          item: {
            fontSize: '10px'
          },
          label: {
            text: 'VOLUMES'
          },
          minValue: 'auto',
          short: true
        },
        crosshairX: {
          plotLabel: {
            short: true,
            decimals: 1
          }
        },
        preview: {
          adjustLayout: true,
          borderWidth: '1px',
          handle: {
            height: '20px',
            lineWidth: '0px'
          }
        },
        noData: {
          text: 'No data found',
          backgroundColor: '#efefef'
        },
        // define zoom module options
        options: {
          // define custom buttons
          buttons: [{
              text: '2006',
              type: 'year',
              // Difference from farthest year 2013 - 2006
              count: 2013 - 2010
            },
            {
              text: '2011',
              type: 'year',
 
              count: 2013 - 2011
            },
            {
              text: '2012',
              type: 'year',
              count: 2013 - 2012
            },
            {
              text: 'All',
              type: 'all',
            },
          ]
        },
        // if fetching data remotely define an empty series
        series: [{}]
      };
 
      // ONLY ONCE we have loaded the zoom-button module
      zingchart.loadModules('zoom-buttons', () => {
 
        // render the chart right away
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%',
          modules: 'zoom-buttons',
        });
 
        // fetch the data remotely
        fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data.json')
          .then(res => res.json())
          .then(timeseriesData => {
            // assign data
            gSeriesData.values = timeseriesData.values;
            zingchart.exec('myChart', 'setseriesdata', {
              data: [gSeriesData]
            })
          })
          .catch(e => {
            // if error, render blank chart
            console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
            chartConfig.title = {};
            chartConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
            // just exec setdata api method since we don't need to render the zoom modules
            // https://www.zingchart.com/docs/api/methods/
            zingchart.exec('myChart', 'setdata', {
              data: chartConfig
            });
          });
      });
    });
  </script>
</body>
 
</html>

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
 
<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>
 
</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
 
.chart--container {
  min-height: 550px;
  width: 100%;
}
 
.zc-ref {
  display: none;
}

let gSeriesData = {
  text: '7 Year Data',
  values: []
};
 
// toggle the type of chart
 
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
 
 
  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    type: 'line',
    globals: {
      fontFamily: 'Lucida Sans Unicode'
    },
    plotarea: {
      margin: '50px 40px 40px 80px'
    },
    scaleX: {
      item: {
        fontSize: '10px'
      },
      transform: {
        type: 'date',
        item: {
          visible: true
        }
      },
      zooming: true
    },
    scaleY: {
      autoFit: true,
      guide: {
        lineStyle: 'solid'
      },
      item: {
        fontSize: '10px'
      },
      label: {
        text: 'VOLUMES'
      },
      minValue: 'auto',
      short: true
    },
    crosshairX: {
      plotLabel: {
        short: true,
        decimals: 1
      }
    },
    preview: {
      adjustLayout: true,
      borderWidth: '1px',
      handle: {
        height: '20px',
        lineWidth: '0px'
      }
    },
    noData: {
      text: 'No data found',
      backgroundColor: '#efefef'
    },
    // define zoom module options
    options: {
      // define custom buttons
      buttons: [{
          text: '2006',
          type: 'year',
          // Difference from farthest year 2013 - 2006
          count: 2013 - 2010
        },
        {
          text: '2011',
          type: 'year',
 
          count: 2013 - 2011
        },
        {
          text: '2012',
          type: 'year',
          count: 2013 - 2012
        },
        {
          text: 'All',
          type: 'all',
        },
      ]
    },
    // if fetching data remotely define an empty series
    series: [{}]
  };
 
  // ONLY ONCE we have loaded the zoom-button module
  zingchart.loadModules('zoom-buttons', () => {
 
    // render the chart right away
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
      modules: 'zoom-buttons',
    });
 
    // fetch the data remotely
    fetch('https://cdn.zingchart.com/datasets/timeseries-sample-data.json')
      .then(res => res.json())
      .then(timeseriesData => {
        // assign data
        gSeriesData.values = timeseriesData.values;
        zingchart.exec('myChart', 'setseriesdata', {
          data: [gSeriesData]
        })
      })
      .catch(e => {
        // if error, render blank chart
        console.error('--- error fetching data from: https://cdn.zingchart.com/datasets/timeseries-sample-data.json ---');
        chartConfig.title = {};
        chartConfig.title.text = 'Error Fetching https://cdn.zingchart.com/datasets/timeseries-sample-data.json';
        // just exec setdata api method since we don't need to render the zoom modules
        // https://www.zingchart.com/docs/api/methods/
        zingchart.exec('myChart', 'setdata', {
          data: chartConfig
        });
      });
  });
});