• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            input[type="radio"] {
                display: none;
            }
    
            .pager,
            #displayCurPage {
                border-left: 1px solid #00BAF0;
                border-right: 1px solid #00BAF0;
                display: flex;
                margin: auto;
                max-width: 500px;
            }
    
            .pager__control,
            #displayCurPage {
                background: rgba(0, 0, 0, 0);
                border: none;
                border-top: 1px solid #00BAF0;
                border-bottom: 1px solid #00BAF0;
                color: #00BAF0;
                cursor: pointer;
                flex: 1;
                font-family: 'Roboto';
                text-align: center;
                transition: 0.2s background, 0.2s color;
            }
    
            #displayCurPage {
                cursor: default;
                justify-content: center;
            }
    
            .pager__control:focus {
                outline: none;
            }
    
            .pager__control:active {
                background: rgba(0, 186, 240, 0.9);
            }
    
            .pager__control:hover {
                background: rgba(0, 186, 240, 0.1);
            }
    
            .pager .pager__control:nth-child(n + 2) {
                border-left: 1px solid #00BAF0;
            }
    
            input:checked+label.pager__control {
                background: rgba(0, 186, 240, 0.6);
                color: white;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
    
        <div class="pager">
            <span id="displayCurPage"></span>
            <button class="pager__control" type="button" name="start"><i class="fa fa-chevron-left" aria-hidden="true"></i><i class="fa fa-chevron-left" aria-hidden="true"></i>
            </button>
    
            <button class="pager__control" type="button" name="previous"><i class="fa fa-chevron-left" aria-hidden="true"></i>
            </button>
    
            <input type="number" class="pager__control" id="value_controller" value="1" min="1" max="12" />
    
    
            <button class="pager__control" type="button" name="next"><i class="fa fa-chevron-right" aria-hidden="true"></i>
            </button>
    
            <button class="pager__control" type="button" name="finish"><i class="fa fa-chevron-right" aria-hidden="true"></i><i class="fa fa-chevron-right" aria-hidden="true"></i>
            </button>
        </div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"]; // data structure which is used for paging techniques
            var dataStructure = {
                currentIndex: 1,
                minIndex: 1,
                displayPage: document.getElementById('displayCurPage')
            };
            var pageSize = 8;
    
            // values that came in from a potential http request
            var dataValues = [35, 42, 67, 89, 25, 34, 67, 85, 22, 34, 67, 35, 42, 47, 49, 25, 34, 67, 75, 69, 33, 35, 42, 27, 99, 35, 44, 37, 55, 28, 36, 22, 15, 22, 33, 44, 25, 34, 35, 42, 67, 89, 25, 34, 67, 85, 35, 42, 67, 89, 25, 34, 67, 85, 22, 34, 67, 35, 42, 47, 49, 25, 34, 67, 75, 69, 33, 35, 42, 27, 99, 35, 44, 37, 55, 28, 36, 22, 15, 22, 33, 44, 25, 34, 35, 42, 67, 89, 25, 34, 67, 85];
    
            var dataLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'A', 'B', 'C', 'D', 'E'];
    
    
            // function to chunk a single array into paging for our pagin data structure
            (function chunkDataIntoPages(pageSize, valuesArray, labelsArray) {
                // take ceiling so last page can have a couple values
                var loopSize = Math.ceil(valuesArray.length / pageSize);
                var pageValueArray = [];
                var pageLabelArray = [];
    
                for (var pageIndex = 1; pageIndex <= loopSize; pageIndex++) {
                    // deletes elements and copies deleted elements to tmp array
                    pageValueArray = valuesArray.splice(0, pageSize);
                    pageLabelArray = labelsArray.splice(0, pageSize);
                    // initialize data structure object
                    dataStructure['page' + pageIndex] = {};
                    // assing into values array
                    dataStructure['page' + pageIndex].labels = pageLabelArray
                    dataStructure['page' + pageIndex].values = pageValueArray
                }
    
                // assign max page value
                dataStructure.maxIndex = loopSize;
                dataStructure.displayPage.innerHTML = '1/' + loopSize
            })(pageSize, dataValues, dataLabels); // call this function before myConfig rendered
    
            function NewChartConfig(valuesArray, labelsArray) {
                return {
                    type: "bar",
                    scaleX: {
                        labels: labelsArray
                    },
                    series: [{
                        values: valuesArray
                    }]
                };
            }
    
            // render chart
            zingchart.render({
                id: 'myChart',
                data: NewChartConfig(
                    dataStructure['page1'].values,
                    dataStructure['page1'].labels
                ),
                height: 400,
                width: '100%'
            });
    
    
            /***** Page Controls and Actions *******/
            var prevAndNext = [].slice.call(document.querySelectorAll('button.pager__control'));
    
            var updateIndex = function(pageIndex) {
                zingchart.exec('myChart', 'modify', {
                    data: {
                        scaleX: {
                            labels: dataStructure['page' + pageIndex].labels
                        }
                    }
                });
                zingchart.exec('myChart', 'setseriesvalues', {
                    plotindex: 0,
                    values: dataStructure['page' + pageIndex].values
                });
            }
    
            var shiftIndex = function() {
                var currentIndex = dataStructure.currentIndex;
    
                if (this.name === 'previous') {
                    currentIndex -= 1;
                } else if (this.name === 'next') {
                    currentIndex += 1;
                } else if (this.name === 'start') {
                    currentIndex = dataStructure.minIndex;
                } else if (this.name === 'finish') {
                    currentIndex = dataStructure.maxIndex;
                }
    
                if (currentIndex > dataStructure.maxIndex)
                    currentIndex = dataStructure.maxIndex;
                else if (currentIndex < dataStructure.minIndex)
                    currentIndex = dataStructure.minIndex;
    
                dataStructure.currentIndex = currentIndex;
                document.getElementById('value_controller').value = currentIndex;
                dataStructure.displayPage.innerHTML = currentIndex + '/' + dataStructure.maxIndex;
                updateIndex(currentIndex);
            }
    
            document.getElementById('value_controller').addEventListener('input', function(e) {
                var elem = e.target;
                var currentIndex = e.target.value;
    
                // target length is zero when empty. isNaN still returns false
                if (currentIndex.length == 0 || isNaN(currentIndex)) {
                    return;
                }
    
                currentIndex = Number(currentIndex);
    
    
                if (currentIndex > dataStructure.maxIndex)
                    currentIndex = dataStructure.maxIndex;
                else if (currentIndex < dataStructure.minIndex)
                    currentIndex = dataStructure.minIndex;
    
                dataStructure.currentIndex = currentIndex;
                dataStructure.displayPage.innerHTML = currentIndex + '/' + dataStructure.maxIndex;
    
                updateIndex(currentIndex);
            });
    
            // visually correct malformed number
            document.getElementById('value_controller').addEventListener('blur', function(e) {
                var elem = e.target;
                var currentIndex = e.target.value;
    
                // target length is zero when empty. isNaN still returns false
                if (currentIndex.length == 0 || isNaN(currentIndex)) {
                    elem.value = dataStructure.currentIndex;
                }
    
                if (currentIndex > dataStructure.maxIndex)
                    elem.value = dataStructure.currentIndex;
                else if (currentIndex < dataStructure.minIndex)
                    elem.value = dataStructure.currentIndex;
            });
    
            prevAndNext.forEach(function(button) {
                button.addEventListener('click', shiftIndex);
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    	<div id='myChart'></div>
    		
        <div class="pager">
          <span  id="displayCurPage"></span>
          <button class="pager__control" type="button" name="start"><i class="fa fa-chevron-left" aria-hidden="true"></i><i class="fa fa-chevron-left" aria-hidden="true"></i>
          </button>
        
          <button class="pager__control" type="button" name="previous"><i class="fa fa-chevron-left" aria-hidden="true"></i>
          </button>
          
          <input type="number" class="pager__control" id="value_controller" value="1" min="1" max="12"/>      
      
        
          <button class="pager__control" type="button" name="next"><i class="fa fa-chevron-right" aria-hidden="true"></i>
        </button>
        
          <button class="pager__control" type="button" name="finish"><i class="fa fa-chevron-right" aria-hidden="true"></i><i class="fa fa-chevron-right" aria-hidden="true"></i>
        </button>
        </div>
    	</body>
    </html>
    input[type="radio"] {
      display: none;
    }
    .pager, #displayCurPage {
      border-left: 1px solid #00BAF0;
      border-right: 1px solid #00BAF0;
      display: flex;
      margin: auto;
      max-width:500px;
    }
    .pager__control, #displayCurPage {
      background: rgba(0, 0, 0, 0);
      border: none;
      border-top: 1px solid #00BAF0;
      border-bottom: 1px solid #00BAF0;
      color: #00BAF0;
      cursor: pointer;
      flex: 1;
      font-family: 'Roboto';
      text-align: center;
      transition: 0.2s background, 0.2s color;
    }
    
    #displayCurPage {
      cursor: default;
      justify-content:center;
    }
    .pager__control:focus {
      outline: none;
    }
    .pager__control:active {
      background: rgba(0, 186, 240, 0.9);
    }
    .pager__control:hover {
      background: rgba(0, 186, 240, 0.1);
    }
    .pager .pager__control:nth-child(n + 2) {
      border-left: 1px solid #00BAF0;
    }
    input:checked + label.pager__control {
      background: rgba(0, 186, 240, 0.6);
      color: white;
    }
    // data structure which is used for paging techniques
    var dataStructure = {
      currentIndex: 1,
      minIndex: 1,
      displayPage: document.getElementById('displayCurPage')
    };
    var pageSize = 8;
    
    // values that came in from a potential http request
    var dataValues = [35,42,67,89,25,34,67,85, 22, 34, 67, 35,42,47,49,25,34,67,75, 69, 33, 35,42,27,99,35,44,37,55, 28, 36, 22, 15,22,33,44,25,34,35,42,67,89,25,34,67,85, 35,42,67,89,25,34,67,85, 22, 34, 67, 35,42,47,49,25,34,67,75, 69, 33, 35,42,27,99,35,44,37,55, 28, 36, 22, 15,22,33,44,25,34,35,42,67,89,25,34,67,85];
    
    var dataLabels = ['A','B','C','D','E','F','G','H','I','J','K','L','M','A','B','C','D','E','F','G','H','I','J','K','L','M','A','B','C','D','E','F','G','H','I','J','K','L','M','A','B','C','D','E','F','G','H','I','J','K','L','M','A','B','C','D','E','F','G','H','I','J','K','L','M','A','B','C','D','E','F','G','H','I','J','K','L','M','E','F','G','H','I','J','K','L','M','A','B','C','D','E'];
    
    
    // function to chunk a single array into paging for our pagin data structure
    (function chunkDataIntoPages(pageSize, valuesArray, labelsArray) {
      // take ceiling so last page can have a couple values
      var loopSize = Math.ceil(valuesArray.length / pageSize); 
      var pageValueArray = [];
      var pageLabelArray = [];
      
      for (var pageIndex = 1; pageIndex <= loopSize; pageIndex++) {
        // deletes elements and copies deleted elements to tmp array
        pageValueArray = valuesArray.splice(0, pageSize);
        pageLabelArray = labelsArray.splice(0, pageSize);
        // initialize data structure object
        dataStructure['page' + pageIndex] = {};
        // assing into values array
        dataStructure['page' + pageIndex].labels = pageLabelArray
        dataStructure['page' + pageIndex].values = pageValueArray
      }
      
      // assign max page value
      dataStructure.maxIndex = loopSize;
      dataStructure.displayPage.innerHTML = '1/' + loopSize
    })(pageSize, dataValues, dataLabels); // call this function before myConfig rendered
    
    function NewChartConfig(valuesArray, labelsArray) {
      return {
       	type: "bar", 
       	scaleX: {
       	  labels: labelsArray
       	},
      	series : [
      		{
      			values : valuesArray
      		}
      	]
      };
    }
    
    // render chart
    zingchart.render({ 
    	id : 'myChart', 
    	data : NewChartConfig(
    	  dataStructure['page1'].values, 
    	  dataStructure['page1'].labels
    	), 
    	height: 400, 
    	width: '100%'
    });
    
    
    /***** Page Controls and Actions *******/
    var prevAndNext = [].slice.call(document.querySelectorAll('button.pager__control'));
    
    var updateIndex = function (pageIndex) {
      zingchart.exec('myChart','modify', {
        data: {
          scaleX: {
            labels: dataStructure['page' + pageIndex].labels
          }
        }
      });
      zingchart.exec('myChart','setseriesvalues', {
        plotindex:0,
        values: dataStructure['page' + pageIndex].values
      });
    }
    
    var shiftIndex = function () {
      var currentIndex = dataStructure.currentIndex;
    	
      if (this.name === 'previous') {
    	  currentIndex -= 1;
      } else if (this.name === 'next'){
    	  currentIndex += 1;
      } else if (this.name === 'start'){
    	  currentIndex = dataStructure.minIndex;
      } else if (this.name === 'finish'){
    	  currentIndex = dataStructure.maxIndex;
      }
      
      if (currentIndex > dataStructure.maxIndex)
        currentIndex = dataStructure.maxIndex;
      else if (currentIndex < dataStructure.minIndex)
        currentIndex = dataStructure.minIndex;
      
      dataStructure.currentIndex = currentIndex;
      document.getElementById('value_controller').value = currentIndex;
      dataStructure.displayPage.innerHTML = currentIndex + '/' + dataStructure.maxIndex;
      updateIndex(currentIndex);
    }
    
    document.getElementById('value_controller').addEventListener('input', function(e) {
      var elem = e.target;
      var currentIndex = e.target.value;
      
      // target length is zero when empty. isNaN still returns false
      if (currentIndex.length == 0 || isNaN(currentIndex)) {
        return;
      }
      
      currentIndex = Number(currentIndex);
    
    
      if (currentIndex > dataStructure.maxIndex)
        currentIndex = dataStructure.maxIndex;
      else if (currentIndex < dataStructure.minIndex)
        currentIndex = dataStructure.minIndex;
    
      dataStructure.currentIndex = currentIndex;
      dataStructure.displayPage.innerHTML = currentIndex + '/' + dataStructure.maxIndex;
        
      updateIndex(currentIndex);
    });
    
    // visually correct malformed number
    document.getElementById('value_controller').addEventListener('blur', function(e) {
      var elem = e.target;
      var currentIndex = e.target.value;
    
      // target length is zero when empty. isNaN still returns false
      if (currentIndex.length == 0 || isNaN(currentIndex)) {
        elem.value = dataStructure.currentIndex;
      }
      
      if (currentIndex > dataStructure.maxIndex)
        elem.value = dataStructure.currentIndex;
      else if (currentIndex < dataStructure.minIndex)
        elem.value = dataStructure.currentIndex;
    });
    
    prevAndNext.forEach(function (button) {
    	button.addEventListener('click', shiftIndex);
    });