• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="//www.zingchart.com/scripts/zcDocs.js"></script>
    8.   <link href='//www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style>
    11.     .chart--container {
    12.       height: 100%;
    13.       width: 100%;
    14.       min-height: 530px;
    15.     }
    16.  
    17.     .zc-ref {
    18.       display: none;
    19.     }
    20.   </style>
    21. </head>
    22. ​
    23.  
    24. <body class="zc-body">
    25.   ​
    26.   <div id="myChart" class="chart--container">
    27.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    28.   </div>
    29.   <script>
    30.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // INIT
    31.     // -----------------------------
    32.     zingchart.loadModules('scalableyaxis', function(e) {
    33.       // CHART CONFIG
    34.       // -----------------------------
    35.       let chartConfig = {
    36.         type: 'line',
    37.         title: {
    38.           text: 'Click on the Scale to start the drag',
    39.           adjustLayout: true,
    40.           flat: true
    41.         },
    42.         subtitle: {
    43.           text: 'Click Button To Reset The Scales'
    44.         },
    45.         scalableYaxis: { // need this object
    46.           scalable: true,
    47.           chartid: 'myChart', // could get chartId in a more dynamic way if needed
    48.         },
    49.         scaleY: {
    50.           maxItems: 10,
    51.           lineColor: '#e53935' // make scale line color match (not necessary)
    52.         },
    53.         scaleY2: {
    54.           maxItems: 6,
    55.           lineColor: '#9c27b0', // make scale line color match (not necessary)
    56.           guide: {
    57.             visible: false // you can change this to true to show the guide
    58.           },
    59.           placement: 'default'
    60.         },
    61.         scaleY3: {
    62.           lineColor: '#4caf50' // make scale line color match (not necessary)
    63.           // dont even have to set maxItems!
    64.         },
    65.         scaleY4: {
    66.           placement: 'default',
    67.           lineColor: '#00bcd4' // make scale line color match (not necessary)
    68.         },
    69.         scaleY5: {
    70.           lineColor: '#ffeb3b',
    71.         },
    72.         scaleY6: {
    73.           lineColor: '#3f51b5'
    74.         },
    75.         plotarea: {
    76.           margin: 'dynamic'
    77.         },
    78.         series: [{
    79.             values: [35, 42, 67, 89, 25, 34, 67, 85],
    80.             lineColor: '#e53935',
    81.             marker: {
    82.               backgroundColor: '#e53935'
    83.             },
    84.             scales: 'scale-x, scale-y'
    85.           }, {
    86.             values: [135, 242, 167, 289, 325, 434, 567, 785],
    87.             lineColor: '#9c27b0',
    88.             marker: {
    89.               backgroundColor: '#9c27b0'
    90.             },
    91.             scales: 'scale-x, scale-y-2'
    92.           },
    93.           {
    94.             values: [25135, 25542, 33167, 22289, 32335, 43224, 51167, 73385],
    95.             lineColor: '#4caf50',
    96.             marker: {
    97.               backgroundColor: '#4caf50'
    98.             },
    99.             scales: 'scale-x, scale-y-3'
    100.           },
    101.           {
    102.             values: [5135, 2542, 3167, 2289, 3335, 4224, 5167, 7385],
    103.             lineColor: '#00bcd4',
    104.             marker: {
    105.               backgroundColor: '#00bcd4'
    106.             },
    107.             scales: 'scale-x, scale-y-4'
    108.           },
    109.           {
    110.             values: [135, 542, 167, 289, 335, 224, 1167, 385],
    111.             lineColor: '#ffeb3b',
    112.             marker: {
    113.               backgroundColor: '#ffeb3b'
    114.             },
    115.             scales: 'scale-x, scale-y-5'
    116.           },
    117.           {
    118.             values: [44135, 22542, 11167, 21289, 22335, 41224, 41167, 63385],
    119.             lineColor: '#3f51b5',
    120.             marker: {
    121.               backgroundColor: '#3f51b5'
    122.             },
    123.             scales: 'scale-x, scale-y-6'
    124.           }
    125.         ],
    126.         labels: [{
    127.           x: 15,
    128.           y: 5,
    129.           text: 'Reset and Set Data',
    130.           border: '1px solid black',
    131.           padding: 7,
    132.           borderRadius: 4,
    133.           cursor: 'pointer',
    134.           id: 'reset-scales',
    135.           hoverState: {
    136.             border: '2px solid black'
    137.           }
    138.         }]
    139.       };
    140.  
    141.       // EVENTS
    142.       // -----------------------------
    143.       zingchart.bind(null, 'label_click', function(e) {
    144.         if (e.labelid === 'reset-scales') {
    145.           /*
    146.            * custom events for the plugin.
    147.            * 1) getscaleminmax - allows you to get the current minMax value
    148.            * for each scale AND the original. This allows you to save the
    149.            * state of the scales.
    150.            *    - maxValue/minValue are the original scale values
    151.            *    - _maxValue/_minValue are the new scale values
    152.            *
    153.            * 2) resetscales - will reset the scales to the original value
    154.            */
    155.           console.log(zingchart.exec(e.loader.id, 'getscaleminmax'))
    156.           zingchart.exec(e.loader.id, 'resetsetseriesdata', {
    157.             data: [{
    158.               values: [51, 24, 53, 44, 25, 33, 49, 70],
    159.               lineColor: '#e53935',
    160.               marker: {
    161.                 backgroundColor: '#e53935'
    162.               },
    163.               scales: 'scale-x, scale-y'
    164.             }]
    165.           });
    166.         }
    167.       });
    168.  
    169.       // RENDER CHARTS
    170.       // -----------------------------
    171.       zingchart.render({
    172.         id: 'myChart',
    173.         data: chartConfig,
    174.         height: '100%',
    175.         width: '100%',
    176.         modules: 'scalableYaxis'
    177.       });
    178.     });
    179.   </script>
    180. </body>
    181.  
    182. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="//www.zingchart.com/scripts/zcDocs.js"></script>
    8.   <link href='//www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11. ​
    12.  
    13. <body class="zc-body">
    14.   ​
    15.   <div id="myChart" class="chart--container">
    16.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    17.   </div>
    18. </body>
    19.  
    20. </html>
    1. .chart--container {
    2.   height: 100%;
    3.   width: 100%;
    4.   min-height: 530px;
    5. }
    6.  
    7. .zc-ref {
    8.   display: none;
    9. }
    1. // INIT
    2. // -----------------------------
    3. zingchart.loadModules('scalableyaxis', function(e) {
    4.   // CHART CONFIG
    5.   // -----------------------------
    6.   let chartConfig = {
    7.     type: 'line',
    8.     title: {
    9.       text: 'Click on the Scale to start the drag',
    10.       adjustLayout: true,
    11.       flat: true
    12.     },
    13.     subtitle: {
    14.       text: 'Click Button To Reset The Scales'
    15.     },
    16.     scalableYaxis: { // need this object
    17.       scalable: true,
    18.       chartid: 'myChart', // could get chartId in a more dynamic way if needed
    19.     },
    20.     scaleY: {
    21.       maxItems: 10,
    22.       lineColor: '#e53935' // make scale line color match (not necessary)
    23.     },
    24.     scaleY2: {
    25.       maxItems: 6,
    26.       lineColor: '#9c27b0', // make scale line color match (not necessary)
    27.       guide: {
    28.         visible: false // you can change this to true to show the guide
    29.       },
    30.       placement: 'default'
    31.     },
    32.     scaleY3: {
    33.       lineColor: '#4caf50' // make scale line color match (not necessary)
    34.       // dont even have to set maxItems!
    35.     },
    36.     scaleY4: {
    37.       placement: 'default',
    38.       lineColor: '#00bcd4' // make scale line color match (not necessary)
    39.     },
    40.     scaleY5: {
    41.       lineColor: '#ffeb3b',
    42.     },
    43.     scaleY6: {
    44.       lineColor: '#3f51b5'
    45.     },
    46.     plotarea: {
    47.       margin: 'dynamic'
    48.     },
    49.     series: [{
    50.         values: [35, 42, 67, 89, 25, 34, 67, 85],
    51.         lineColor: '#e53935',
    52.         marker: {
    53.           backgroundColor: '#e53935'
    54.         },
    55.         scales: 'scale-x, scale-y'
    56.       }, {
    57.         values: [135, 242, 167, 289, 325, 434, 567, 785],
    58.         lineColor: '#9c27b0',
    59.         marker: {
    60.           backgroundColor: '#9c27b0'
    61.         },
    62.         scales: 'scale-x, scale-y-2'
    63.       },
    64.       {
    65.         values: [25135, 25542, 33167, 22289, 32335, 43224, 51167, 73385],
    66.         lineColor: '#4caf50',
    67.         marker: {
    68.           backgroundColor: '#4caf50'
    69.         },
    70.         scales: 'scale-x, scale-y-3'
    71.       },
    72.       {
    73.         values: [5135, 2542, 3167, 2289, 3335, 4224, 5167, 7385],
    74.         lineColor: '#00bcd4',
    75.         marker: {
    76.           backgroundColor: '#00bcd4'
    77.         },
    78.         scales: 'scale-x, scale-y-4'
    79.       },
    80.       {
    81.         values: [135, 542, 167, 289, 335, 224, 1167, 385],
    82.         lineColor: '#ffeb3b',
    83.         marker: {
    84.           backgroundColor: '#ffeb3b'
    85.         },
    86.         scales: 'scale-x, scale-y-5'
    87.       },
    88.       {
    89.         values: [44135, 22542, 11167, 21289, 22335, 41224, 41167, 63385],
    90.         lineColor: '#3f51b5',
    91.         marker: {
    92.           backgroundColor: '#3f51b5'
    93.         },
    94.         scales: 'scale-x, scale-y-6'
    95.       }
    96.     ],
    97.     labels: [{
    98.       x: 15,
    99.       y: 5,
    100.       text: 'Reset and Set Data',
    101.       border: '1px solid black',
    102.       padding: 7,
    103.       borderRadius: 4,
    104.       cursor: 'pointer',
    105.       id: 'reset-scales',
    106.       hoverState: {
    107.         border: '2px solid black'
    108.       }
    109.     }]
    110.   };
    111.  
    112.   // EVENTS
    113.   // -----------------------------
    114.   zingchart.bind(null, 'label_click', function(e) {
    115.     if (e.labelid === 'reset-scales') {
    116.       /*
    117.        * custom events for the plugin.
    118.        * 1) getscaleminmax - allows you to get the current minMax value
    119.        * for each scale AND the original. This allows you to save the
    120.        * state of the scales.
    121.        *    - maxValue/minValue are the original scale values
    122.        *    - _maxValue/_minValue are the new scale values
    123.        *
    124.        * 2) resetscales - will reset the scales to the original value
    125.        */
    126.       console.log(zingchart.exec(e.loader.id, 'getscaleminmax'))
    127.       zingchart.exec(e.loader.id, 'resetsetseriesdata', {
    128.         data: [{
    129.           values: [51, 24, 53, 44, 25, 33, 49, 70],
    130.           lineColor: '#e53935',
    131.           marker: {
    132.             backgroundColor: '#e53935'
    133.           },
    134.           scales: 'scale-x, scale-y'
    135.         }]
    136.       });
    137.     }
    138.   });
    139.  
    140.   // RENDER CHARTS
    141.   // -----------------------------
    142.   zingchart.render({
    143.     id: 'myChart',
    144.     data: chartConfig,
    145.     height: '100%',
    146.     width: '100%',
    147.     modules: 'scalableYaxis'
    148.   });
    149. });