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