• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       type: "scatter",
    18.       utc: true,
    19.       labels: [{ //ok. Defaults to nearest tick. Not actual timestamp value
    20.           text: 'timestamp hook',
    21.           hook: 'scale:value=1420501300000;',
    22.           backgroundColor: '#e91e63'
    23.         },
    24.         {
    25.           text: 'scale/index hook',
    26.           hook: 'scale:name=scale-y,index=3',
    27.           backgroundColor: '#2196f3'
    28.         },
    29.         {
    30.           text: 'scale/value hook',
    31.           hook: 'scale:name=scale-y,value=150',
    32.           backgroundColor: '#2196f3'
    33.         },
    34.         {
    35.           text: 'scale/index hook',
    36.           hook: 'scale:index=3',
    37.           backgroundColor: '#4caf50'
    38.         }
    39.       ],
    40.       plotarea: {
    41.         margin: 'dynamic'
    42.       },
    43.       scaleY: {
    44.         label: {
    45.           text: "Sales"
    46.         },
    47.         format: '$%v',
    48.       },
    49.       scaleX: {
    50.         label: {
    51.           text: "time"
    52.         },
    53.         minValue: 1420070400000,
    54.         step: 86400000,
    55.         transform: {
    56.           type: "date",
    57.           all: "%h:%i:%s<br>%d %M, %Y",
    58.           guide: {
    59.             "visible": false
    60.           },
    61.           item: {
    62.             "visible": false
    63.           }
    64.         }
    65.       },
    66.       tooltip: {
    67.         text: '%t <br> Sales: $%v'
    68.       },
    69.       series: [{
    70.           values: [
    71.             [1420070400000, 35],
    72.             [1420156800000, 42],
    73.             [1420243200000, 67],
    74.             [1420329600000, 89],
    75.             [1420416000000, 25],
    76.             [1420502400000, 50],
    77.             [1420588800000, 75]
    78.           ],
    79.           text: 'Department 1'
    80.         },
    81.         {
    82.           values: [
    83.             [1420070400000, 135],
    84.             [1420156800000, 142],
    85.             [1420243200000, 167],
    86.             [1420329600000, 189],
    87.             [1420416000000, 125],
    88.             [1420502400000, 150],
    89.             [1420588800000, 175]
    90.           ],
    91.           text: 'Department 2'
    92.         }
    93.       ]
    94.     };
    95.  
    96.  
    97.  
    98.     zingchart.render({
    99.       id: 'myChart',
    100.       data: myConfig,
    101.       height: 400,
    102.       width: '100%'
    103.     });
    104.   </script>
    105. </body>
    106.  
    107. </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='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2.   type: "scatter",
    3.   utc: true,
    4.   labels: [{ //ok. Defaults to nearest tick. Not actual timestamp value
    5.       text: 'timestamp hook',
    6.       hook: 'scale:value=1420501300000;',
    7.       backgroundColor: '#e91e63'
    8.     },
    9.     {
    10.       text: 'scale/index hook',
    11.       hook: 'scale:name=scale-y,index=3',
    12.       backgroundColor: '#2196f3'
    13.     },
    14.     {
    15.       text: 'scale/value hook',
    16.       hook: 'scale:name=scale-y,value=150',
    17.       backgroundColor: '#2196f3'
    18.     },
    19.     {
    20.       text: 'scale/index hook',
    21.       hook: 'scale:index=3',
    22.       backgroundColor: '#4caf50'
    23.     }
    24.   ],
    25.   plotarea: {
    26.     margin: 'dynamic'
    27.   },
    28.   scaleY: {
    29.     label: {
    30.       text: "Sales"
    31.     },
    32.     format: '$%v',
    33.   },
    34.   scaleX: {
    35.     label: {
    36.       text: "time"
    37.     },
    38.     minValue: 1420070400000,
    39.     step: 86400000,
    40.     transform: {
    41.       type: "date",
    42.       all: "%h:%i:%s<br>%d %M, %Y",
    43.       guide: {
    44.         "visible": false
    45.       },
    46.       item: {
    47.         "visible": false
    48.       }
    49.     }
    50.   },
    51.   tooltip: {
    52.     text: '%t <br> Sales: $%v'
    53.   },
    54.   series: [{
    55.       values: [
    56.         [1420070400000, 35],
    57.         [1420156800000, 42],
    58.         [1420243200000, 67],
    59.         [1420329600000, 89],
    60.         [1420416000000, 25],
    61.         [1420502400000, 50],
    62.         [1420588800000, 75]
    63.       ],
    64.       text: 'Department 1'
    65.     },
    66.     {
    67.       values: [
    68.         [1420070400000, 135],
    69.         [1420156800000, 142],
    70.         [1420243200000, 167],
    71.         [1420329600000, 189],
    72.         [1420416000000, 125],
    73.         [1420502400000, 150],
    74.         [1420588800000, 175]
    75.       ],
    76.       text: 'Department 2'
    77.     }
    78.   ]
    79. };
    80.  
    81.  
    82.  
    83. zingchart.render({
    84.   id: 'myChart',
    85.   data: myConfig,
    86.   height: 400,
    87.   width: '100%'
    88. });