• 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.     .zc-body {
    10.       background-color: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   ​
    28.   <div id="myChart" class="chart--container">
    29.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    30.   </div>
    31.  
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    34.     // -----------------------------
    35.     let chartConfig = {
    36.       type: 'range',
    37.       backgroundColor: '#ffffff',
    38.       title: {
    39.         text: 'Average Temperature',
    40.         backgroundColor: '#ffffff',
    41.         fontColor: '#000',
    42.       },
    43.       legend: {
    44.         align: 'center',
    45.         backgroundColor: '#e0e0e0',
    46.         borderColor: '#fff',
    47.         layout: 'x4',
    48.         shadow: false,
    49.         verticalAlign: 'bottom',
    50.       },
    51.       plot: {
    52.         tooltip: {
    53.           visible: false,
    54.         },
    55.         alphaArea: 1,
    56.         aspect: 'spline',
    57.         hoverState: {
    58.           backgroundColor: 'none',
    59.         },
    60.         lineWidth: '0px',
    61.         marker: {
    62.           visible: false,
    63.         },
    64.       },
    65.       scaleX: {
    66.         guide: {
    67.           alpha: 1,
    68.           lineStyle: 'solid',
    69.           lineWidth: '1px',
    70.         },
    71.         item: {
    72.           offsetX: '0px',
    73.           textAlign: 'left',
    74.         },
    75.         label: {
    76.           text: 'Year',
    77.         },
    78.         labels: ['01/2017', '01/2018', '01/2019', '01/2020', '01/2021', '01/2022'],
    79.         lineWidth: '1px',
    80.         tick: {
    81.           lineWidth: '1px',
    82.           placement: 'outer',
    83.           size: '10px',
    84.         },
    85.       },
    86.       scaleY: {
    87.         label: {
    88.           text: 'Celsius',
    89.         },
    90.         lineWidth: '1px',
    91.         tick: {
    92.           lineWidth: '1px',
    93.         },
    94.       },
    95.  
    96.       series: [{
    97.           text: 'Pacific Ocean',
    98.           values: [
    99.             [5, 12],
    100.             [2, 10],
    101.             [6, 14],
    102.             [4, 14],
    103.             [5, 16],
    104.             [6, 15],
    105.           ],
    106.           backgroundColor: '#0ce9d1',
    107.           lineColor: '#0ce9d1',
    108.         },
    109.         {
    110.           text: 'Atlantic Ocean',
    111.           values: [
    112.             [6, 10],
    113.             [4, 6],
    114.             [7, 13],
    115.             [6, 12],
    116.             [8, 14],
    117.             [6, 14],
    118.           ],
    119.           backgroundColor: '#e7ffcc',
    120.           lineColor: '#e7ffcc',
    121.         },
    122.         {
    123.           text: 'Southern Ocean',
    124.           values: [
    125.             [7, 8],
    126.             [4, 6],
    127.             [8, 9],
    128.             [6, 12],
    129.             [9, 12],
    130.             [6, 14],
    131.           ],
    132.           backgroundColor: '#ccfff9',
    133.           lineColor: '#ccfff9',
    134.         },
    135.         {
    136.           text: 'Indian Ocean',
    137.           values: [
    138.             [7, 8],
    139.             [4, 5],
    140.             [8, 9],
    141.             [6, 8],
    142.             [9, 11],
    143.             [9, 13],
    144.           ],
    145.           backgroundColor: '#8bdceb',
    146.           lineColor: '#8bdceb',
    147.         },
    148.       ],
    149.       guide: {
    150.         marker: {
    151.           type: 'triangle',
    152.           size: '7px',
    153.         },
    154.         plotLabel: {
    155.           text: '<span style="color:%color">%t</span><span style="color:%color"> Min: %node-min-value  Max: %node-max-value</span> ',
    156.           backgroundColor: '#000',
    157.           borderRadius: '5px',
    158.           fontColor: '#FFF',
    159.           fontSize: '15px',
    160.           headerText: '%kt',
    161.         },
    162.       },
    163.     };
    164.  
    165.     // RENDER CHARTS
    166.     // -----------------------------
    167.     zingchart.render({
    168.       id: 'myChart',
    169.       data: chartConfig,
    170.       height: '100%',
    171.       width: '100%',
    172.     });
    173.   </script>
    174. </body>
    175.  
    176. </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. .zc-body {
    2.   background-color: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. // CHART CONFIG
    2. // -----------------------------
    3. let chartConfig = {
    4.   type: 'range',
    5.   backgroundColor: '#ffffff',
    6.   title: {
    7.     text: 'Average Temperature',
    8.     backgroundColor: '#ffffff',
    9.     fontColor: '#000',
    10.   },
    11.   legend: {
    12.     align: 'center',
    13.     backgroundColor: '#e0e0e0',
    14.     borderColor: '#fff',
    15.     layout: 'x4',
    16.     shadow: false,
    17.     verticalAlign: 'bottom',
    18.   },
    19.   plot: {
    20.     tooltip: {
    21.       visible: false,
    22.     },
    23.     alphaArea: 1,
    24.     aspect: 'spline',
    25.     hoverState: {
    26.       backgroundColor: 'none',
    27.     },
    28.     lineWidth: '0px',
    29.     marker: {
    30.       visible: false,
    31.     },
    32.   },
    33.   scaleX: {
    34.     guide: {
    35.       alpha: 1,
    36.       lineStyle: 'solid',
    37.       lineWidth: '1px',
    38.     },
    39.     item: {
    40.       offsetX: '0px',
    41.       textAlign: 'left',
    42.     },
    43.     label: {
    44.       text: 'Year',
    45.     },
    46.     labels: ['01/2017', '01/2018', '01/2019', '01/2020', '01/2021', '01/2022'],
    47.     lineWidth: '1px',
    48.     tick: {
    49.       lineWidth: '1px',
    50.       placement: 'outer',
    51.       size: '10px',
    52.     },
    53.   },
    54.   scaleY: {
    55.     label: {
    56.       text: 'Celsius',
    57.     },
    58.     lineWidth: '1px',
    59.     tick: {
    60.       lineWidth: '1px',
    61.     },
    62.   },
    63.  
    64.   series: [{
    65.       text: 'Pacific Ocean',
    66.       values: [
    67.         [5, 12],
    68.         [2, 10],
    69.         [6, 14],
    70.         [4, 14],
    71.         [5, 16],
    72.         [6, 15],
    73.       ],
    74.       backgroundColor: '#0ce9d1',
    75.       lineColor: '#0ce9d1',
    76.     },
    77.     {
    78.       text: 'Atlantic Ocean',
    79.       values: [
    80.         [6, 10],
    81.         [4, 6],
    82.         [7, 13],
    83.         [6, 12],
    84.         [8, 14],
    85.         [6, 14],
    86.       ],
    87.       backgroundColor: '#e7ffcc',
    88.       lineColor: '#e7ffcc',
    89.     },
    90.     {
    91.       text: 'Southern Ocean',
    92.       values: [
    93.         [7, 8],
    94.         [4, 6],
    95.         [8, 9],
    96.         [6, 12],
    97.         [9, 12],
    98.         [6, 14],
    99.       ],
    100.       backgroundColor: '#ccfff9',
    101.       lineColor: '#ccfff9',
    102.     },
    103.     {
    104.       text: 'Indian Ocean',
    105.       values: [
    106.         [7, 8],
    107.         [4, 5],
    108.         [8, 9],
    109.         [6, 8],
    110.         [9, 11],
    111.         [9, 13],
    112.       ],
    113.       backgroundColor: '#8bdceb',
    114.       lineColor: '#8bdceb',
    115.     },
    116.   ],
    117.   guide: {
    118.     marker: {
    119.       type: 'triangle',
    120.       size: '7px',
    121.     },
    122.     plotLabel: {
    123.       text: '<span style="color:%color">%t</span><span style="color:%color"> Min: %node-min-value  Max: %node-max-value</span> ',
    124.       backgroundColor: '#000',
    125.       borderRadius: '5px',
    126.       fontColor: '#FFF',
    127.       fontSize: '15px',
    128.       headerText: '%kt',
    129.     },
    130.   },
    131. };
    132.  
    133. // RENDER CHARTS
    134. // -----------------------------
    135. zingchart.render({
    136.   id: 'myChart',
    137.   data: chartConfig,
    138.   height: '100%',
    139.   width: '100%',
    140. });