• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="pointHistoryChart" class="point-history-chart"></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var chartData = {
    35.       "type": "line",
    36.       title: {
    37.         text: "My First Chart"
    38.       },
    39.       series: [{
    40.           values: [35, 42, 59, 59]
    41.         },
    42.         {
    43.           values: [35, 41, 59, 59]
    44.         },
    45.         {
    46.           values: [35, 40, 59, 59]
    47.         },
    48.         {
    49.           values: [35, 39, 59, 59]
    50.         },
    51.         {
    52.           values: [35, 38, 59, 59]
    53.         },
    54.         {
    55.           values: [35, 37, 59, 59]
    56.         },
    57.         {
    58.           values: [35, 36, 59, 59]
    59.         },
    60.         {
    61.           values: [35, 35, 59, 59]
    62.         },
    63.         {
    64.           values: [35, 34, 59, 59]
    65.         },
    66.         {
    67.           values: [35, 33, 59, 59]
    68.         },
    69.         {
    70.           values: [35, 32, 59, 59]
    71.         },
    72.         {
    73.           values: [35, 31, 59, 59]
    74.         },
    75.         {
    76.           values: [35, 30, 59, 59]
    77.         },
    78.         {
    79.           values: [35, 29, 59, 59]
    80.         },
    81.         {
    82.           values: [35, 28, 59, 59]
    83.         },
    84.         {
    85.           values: [35, 27, 59, 59]
    86.         },
    87.         {
    88.           values: [35, 26, 59, 59]
    89.         },
    90.         {
    91.           values: [35, 25, 59, 59]
    92.         },
    93.         {
    94.           values: [35, 24, 59, 59]
    95.         },
    96.         {
    97.           values: [35, 23, 59, 59]
    98.         },
    99.         {
    100.           values: [35, 22, 59, 59]
    101.         },
    102.         {
    103.           values: [35, 21, 59, 59]
    104.         },
    105.         {
    106.           values: [35, 20, 59, 59]
    107.         },
    108.         {
    109.           values: [35, 43, 59, 59]
    110.         },
    111.         {
    112.           values: [35, 44, 59, 59]
    113.         },
    114.         {
    115.           values: [35, 45, 59, 59]
    116.         },
    117.         {
    118.           values: [35, 46, 59, 59]
    119.         },
    120.         {
    121.           values: [35, 47, 59, 59]
    122.         },
    123.         {
    124.           values: [35, 48, 59, 59]
    125.         },
    126.         {
    127.           values: [35, 49, 59, 59]
    128.         },
    129.         {
    130.           values: [35, 50, 59, 59]
    131.         },
    132.         {
    133.           values: [35, 51, 59, 59]
    134.         },
    135.         {
    136.           values: [35, 52, 59, 59]
    137.         },
    138.         {
    139.           values: [35, 53, 59, 59]
    140.         },
    141.         {
    142.           values: [35, 54, 59, 59]
    143.         },
    144.         {
    145.           values: [35, 55, 59, 59]
    146.         },
    147.         {
    148.           values: [35, 56, 59, 59]
    149.         },
    150.         {
    151.           values: [35, 57, 59, 59]
    152.         },
    153.         {
    154.           values: [28, 58, 39, 36]
    155.         }
    156.       ],
    157.       "crosshair-x": {
    158.         "plot-label": {
    159.           "html-mode": true,
    160.           "table-columns": 4
    161.         }
    162.       },
    163.       height: "400px",
    164.       "scale-y": {
    165.         "max-value": 60,
    166.         "min-value": 20
    167.       }
    168.     };
    169.     zingchart.render({ // Render Method[3]
    170.       id: "pointHistoryChart",
    171.       data: chartData
    172.     });
    173.   </script>
    174. </body>
    175.  
    176. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="pointHistoryChart" class="point-history-chart"></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var chartData = {
    2.   "type": "line",
    3.   title: {
    4.     text: "My First Chart"
    5.   },
    6.   series: [{
    7.       values: [35, 42, 59, 59]
    8.     },
    9.     {
    10.       values: [35, 41, 59, 59]
    11.     },
    12.     {
    13.       values: [35, 40, 59, 59]
    14.     },
    15.     {
    16.       values: [35, 39, 59, 59]
    17.     },
    18.     {
    19.       values: [35, 38, 59, 59]
    20.     },
    21.     {
    22.       values: [35, 37, 59, 59]
    23.     },
    24.     {
    25.       values: [35, 36, 59, 59]
    26.     },
    27.     {
    28.       values: [35, 35, 59, 59]
    29.     },
    30.     {
    31.       values: [35, 34, 59, 59]
    32.     },
    33.     {
    34.       values: [35, 33, 59, 59]
    35.     },
    36.     {
    37.       values: [35, 32, 59, 59]
    38.     },
    39.     {
    40.       values: [35, 31, 59, 59]
    41.     },
    42.     {
    43.       values: [35, 30, 59, 59]
    44.     },
    45.     {
    46.       values: [35, 29, 59, 59]
    47.     },
    48.     {
    49.       values: [35, 28, 59, 59]
    50.     },
    51.     {
    52.       values: [35, 27, 59, 59]
    53.     },
    54.     {
    55.       values: [35, 26, 59, 59]
    56.     },
    57.     {
    58.       values: [35, 25, 59, 59]
    59.     },
    60.     {
    61.       values: [35, 24, 59, 59]
    62.     },
    63.     {
    64.       values: [35, 23, 59, 59]
    65.     },
    66.     {
    67.       values: [35, 22, 59, 59]
    68.     },
    69.     {
    70.       values: [35, 21, 59, 59]
    71.     },
    72.     {
    73.       values: [35, 20, 59, 59]
    74.     },
    75.     {
    76.       values: [35, 43, 59, 59]
    77.     },
    78.     {
    79.       values: [35, 44, 59, 59]
    80.     },
    81.     {
    82.       values: [35, 45, 59, 59]
    83.     },
    84.     {
    85.       values: [35, 46, 59, 59]
    86.     },
    87.     {
    88.       values: [35, 47, 59, 59]
    89.     },
    90.     {
    91.       values: [35, 48, 59, 59]
    92.     },
    93.     {
    94.       values: [35, 49, 59, 59]
    95.     },
    96.     {
    97.       values: [35, 50, 59, 59]
    98.     },
    99.     {
    100.       values: [35, 51, 59, 59]
    101.     },
    102.     {
    103.       values: [35, 52, 59, 59]
    104.     },
    105.     {
    106.       values: [35, 53, 59, 59]
    107.     },
    108.     {
    109.       values: [35, 54, 59, 59]
    110.     },
    111.     {
    112.       values: [35, 55, 59, 59]
    113.     },
    114.     {
    115.       values: [35, 56, 59, 59]
    116.     },
    117.     {
    118.       values: [35, 57, 59, 59]
    119.     },
    120.     {
    121.       values: [28, 58, 39, 36]
    122.     }
    123.   ],
    124.   "crosshair-x": {
    125.     "plot-label": {
    126.       "html-mode": true,
    127.       "table-columns": 4
    128.     }
    129.   },
    130.   height: "400px",
    131.   "scale-y": {
    132.     "max-value": 60,
    133.     "min-value": 20
    134.   }
    135. };
    136. zingchart.render({ // Render Method[3]
    137.   id: "pointHistoryChart",
    138.   data: chartData
    139. });