• 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: [],
    20.       title: {
    21.         text: 'Click On A Node!',
    22.       },
    23.       plot: {
    24.         marker: {
    25.           size: 12
    26.         }
    27.       },
    28.       plotarea: {
    29.         margin: '35 dynamic'
    30.       },
    31.       scaleY: {
    32.         label: {
    33.           text: "Sales"
    34.         },
    35.         format: '$%v',
    36.       },
    37.       scaleX: {
    38.         guide: {
    39.           "visible": false
    40.         },
    41.         label: {
    42.           text: "time"
    43.         },
    44.         minValue: 1420070400000,
    45.         step: 86400000,
    46.         transform: {
    47.           type: "date",
    48.           all: "%h:%i:%s<br>%d %M, %Y",
    49.           item: {
    50.             "visible": false
    51.           }
    52.         }
    53.       },
    54.       tooltip: {
    55.         text: '%t <br> Sales: $%v'
    56.       },
    57.       series: [{
    58.           values: [
    59.             [1420070400000, 35],
    60.             [1420156800000, 42],
    61.             [1420243200000, 67],
    62.             [1420329600000, 89],
    63.             [1420416000000, 25],
    64.             [1420502400000, 50],
    65.             [1420588800000, 75]
    66.           ],
    67.           text: 'Department 1'
    68.         },
    69.         {
    70.           values: [
    71.             [1420070400000, 135],
    72.             [1420156800000, 142],
    73.             [1420243200000, 167],
    74.             [1420329600000, 189],
    75.             [1420416000000, 125],
    76.             [1420502400000, 150],
    77.             [1420588800000, 175]
    78.           ],
    79.           text: 'Department 2'
    80.         }
    81.       ]
    82.     };
    83.  
    84.  
    85.     zingchart.render({
    86.       id: 'myChart',
    87.       data: myConfig,
    88.       height: 400,
    89.       width: '100%'
    90.     });
    91.  
    92.     /*
    93.      * define NodeLabel class to construct
    94.      * node labels on the fly easier.
    95.      */
    96.     function NodeLabel(hook, plotIndex) {
    97.       return {
    98.         text: hook,
    99.         hook: hook,
    100.         fontColor: '#fff',
    101.         fontSize: 15,
    102.         padding: 5,
    103.         offsetY: -35,
    104.         callout: true,
    105.         position: 'bottom',
    106.         backgroundColor: plotIndex == 0 ? '#2196f3' : '#e91e63'
    107.       }
    108.     }
    109.  
    110.     // global array for NodeLabels since you can only update the whole array
    111.     var nodeLabelsArray = [];
    112.  
    113.     // hash table for markers
    114.     var nodeLabelsHashTable = {};
    115.     nodeLabelsHashTable['plotindex_0'] = {};
    116.     nodeLabelsHashTable['plotindex_1'] = {};
    117.  
    118.     /*
    119.      * Register a node_click event and then render a chart with the markers
    120.      */
    121.     zingchart.bind('myChart', 'node_click', function(e) {
    122.       /*
    123.        * example output: node:plot=2;index=9
    124.        */
    125.       var labelHookString = 'node:plot=' + e.plotindex + ';index=' + e.nodeindex;
    126.  
    127.       // check hash table. Add marker
    128.       if (!nodeLabelsHashTable['plotindex_' + e.plotindex][e.value]) {
    129.  
    130.  
    131.         // create a marker
    132.         var newNodeLabel = new NodeLabel(labelHookString, e.plotindex);
    133.  
    134.         nodeLabelsHashTable['plotindex_' + e.plotindex][e.value] = true;
    135.         nodeLabelsArray.push(newNodeLabel);
    136.  
    137.         // render the marker
    138.         myConfig.labels = nodeLabelsArray;
    139.         zingchart.exec('myChart', 'setdata', {
    140.           data: myConfig
    141.         });
    142.       }
    143.  
    144.     });
    145.   </script>
    146. </body>
    147.  
    148. </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: [],
    5.   title: {
    6.     text: 'Click On A Node!',
    7.   },
    8.   plot: {
    9.     marker: {
    10.       size: 12
    11.     }
    12.   },
    13.   plotarea: {
    14.     margin: '35 dynamic'
    15.   },
    16.   scaleY: {
    17.     label: {
    18.       text: "Sales"
    19.     },
    20.     format: '$%v',
    21.   },
    22.   scaleX: {
    23.     guide: {
    24.       "visible": false
    25.     },
    26.     label: {
    27.       text: "time"
    28.     },
    29.     minValue: 1420070400000,
    30.     step: 86400000,
    31.     transform: {
    32.       type: "date",
    33.       all: "%h:%i:%s<br>%d %M, %Y",
    34.       item: {
    35.         "visible": false
    36.       }
    37.     }
    38.   },
    39.   tooltip: {
    40.     text: '%t <br> Sales: $%v'
    41.   },
    42.   series: [{
    43.       values: [
    44.         [1420070400000, 35],
    45.         [1420156800000, 42],
    46.         [1420243200000, 67],
    47.         [1420329600000, 89],
    48.         [1420416000000, 25],
    49.         [1420502400000, 50],
    50.         [1420588800000, 75]
    51.       ],
    52.       text: 'Department 1'
    53.     },
    54.     {
    55.       values: [
    56.         [1420070400000, 135],
    57.         [1420156800000, 142],
    58.         [1420243200000, 167],
    59.         [1420329600000, 189],
    60.         [1420416000000, 125],
    61.         [1420502400000, 150],
    62.         [1420588800000, 175]
    63.       ],
    64.       text: 'Department 2'
    65.     }
    66.   ]
    67. };
    68.  
    69.  
    70. zingchart.render({
    71.   id: 'myChart',
    72.   data: myConfig,
    73.   height: 400,
    74.   width: '100%'
    75. });
    76.  
    77. /*
    78.  * define NodeLabel class to construct
    79.  * node labels on the fly easier.
    80.  */
    81. function NodeLabel(hook, plotIndex) {
    82.   return {
    83.     text: hook,
    84.     hook: hook,
    85.     fontColor: '#fff',
    86.     fontSize: 15,
    87.     padding: 5,
    88.     offsetY: -35,
    89.     callout: true,
    90.     position: 'bottom',
    91.     backgroundColor: plotIndex == 0 ? '#2196f3' : '#e91e63'
    92.   }
    93. }
    94.  
    95. // global array for NodeLabels since you can only update the whole array
    96. var nodeLabelsArray = [];
    97.  
    98. // hash table for markers
    99. var nodeLabelsHashTable = {};
    100. nodeLabelsHashTable['plotindex_0'] = {};
    101. nodeLabelsHashTable['plotindex_1'] = {};
    102.  
    103. /*
    104.  * Register a node_click event and then render a chart with the markers
    105.  */
    106. zingchart.bind('myChart', 'node_click', function(e) {
    107.   /*
    108.    * example output: node:plot=2;index=9
    109.    */
    110.   var labelHookString = 'node:plot=' + e.plotindex + ';index=' + e.nodeindex;
    111.  
    112.   // check hash table. Add marker
    113.   if (!nodeLabelsHashTable['plotindex_' + e.plotindex][e.value]) {
    114.  
    115.  
    116.     // create a marker
    117.     var newNodeLabel = new NodeLabel(labelHookString, e.plotindex);
    118.  
    119.     nodeLabelsHashTable['plotindex_' + e.plotindex][e.value] = true;
    120.     nodeLabelsArray.push(newNodeLabel);
    121.  
    122.     // render the marker
    123.     myConfig.labels = nodeLabelsArray;
    124.     zingchart.exec('myChart', 'setdata', {
    125.       data: myConfig
    126.     });
    127.   }
    128.  
    129. });