• 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.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <div id="myChart"></div>
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    30.     var keysForPlotLabel = {
    31.       1: {
    32.         value: 'aaaaaaa'
    33.       },
    34.       2: {
    35.         value: 'bbbbbbbb'
    36.       },
    37.       3: {
    38.         value: 'cccccccc'
    39.       }
    40.     };
    41.  
    42.     window.customPlotLabel = function(e) {
    43.       var customValue = keysForPlotLabel[e.value].value
    44.       return {
    45.         "text": "<span style='color:%color'>%t: </span>" + customValue,
    46.       }
    47.     }
    48.  
    49.     window.customTooltip = function(e) {
    50.       var customValue = keysForPlotLabel[e.value].value
    51.       return {
    52.         "text": "%t: " + customValue,
    53.       }
    54.     }
    55.  
    56.     var myConfig = {
    57.       "graphset": [{
    58.         "type": "line",
    59.         "crosshair-x": {
    60.           "plot-label": {
    61.             jsRule: 'customPlotLabel()'
    62.           }
    63.         },
    64.         "scale-x": {
    65.           "step": "30minute",
    66.           "transform": {
    67.             "type": "date",
    68.             "all": "%Y-%m-%d, \n %H:%i"
    69.           },
    70.           "zooming": true
    71.         },
    72.         "scale-y": {
    73.           "label": {
    74.             "text": "Price ($/Mwh)"
    75.           },
    76.           "min-value": 0,
    77.           "zooming": true
    78.         },
    79.         "series": [{
    80.             "values": [
    81.               [1481061600000, 1, "(TP 23)"],
    82.               [1481061900000, 2, "(TP 23)"],
    83.               [1481062200000, 3, "(TP 23)"],
    84.               [1481062500000, 2, "(TP 23)"],
    85.               [1481062800000, 3, "(TP 23)"]
    86.             ],
    87.           },
    88.           {
    89.             "values": [
    90.               [1481061600000, 1, "(TP 23)"],
    91.               [1481063400000, 1, "(TP 24)"],
    92.               [1481065200000, 2, "(TP 25)"],
    93.               [1481067000000, 3, "(TP 26)"],
    94.               [1481068800000, 3, "(TP 27)"]
    95.             ],
    96.           }
    97.         ],
    98.         "tooltip": {
    99.           "visible": 1,
    100.           "text": "%t: %v",
    101.           "font-size": "12px",
    102.           "font-weight": "bold",
    103.           "decimals": 2,
    104.           "thousands-separator": ",",
    105.           jsRule: 'customTooltip()'
    106.         }
    107.       }]
    108.     };
    109.  
    110.     zingchart.render({
    111.       id: 'myChart',
    112.       data: myConfig,
    113.       height: '100%',
    114.       width: '100%'
    115.     });
    116.   </script>
    117. </body>
    118.  
    119. </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. 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. }
    1. var keysForPlotLabel = {
    2.   1: {
    3.     value: 'aaaaaaa'
    4.   },
    5.   2: {
    6.     value: 'bbbbbbbb'
    7.   },
    8.   3: {
    9.     value: 'cccccccc'
    10.   }
    11. };
    12.  
    13. window.customPlotLabel = function(e) {
    14.   var customValue = keysForPlotLabel[e.value].value
    15.   return {
    16.     "text": "<span style='color:%color'>%t: </span>" + customValue,
    17.   }
    18. }
    19.  
    20. window.customTooltip = function(e) {
    21.   var customValue = keysForPlotLabel[e.value].value
    22.   return {
    23.     "text": "%t: " + customValue,
    24.   }
    25. }
    26.  
    27. var myConfig = {
    28.   "graphset": [{
    29.     "type": "line",
    30.     "crosshair-x": {
    31.       "plot-label": {
    32.         jsRule: 'customPlotLabel()'
    33.       }
    34.     },
    35.     "scale-x": {
    36.       "step": "30minute",
    37.       "transform": {
    38.         "type": "date",
    39.         "all": "%Y-%m-%d, \n %H:%i"
    40.       },
    41.       "zooming": true
    42.     },
    43.     "scale-y": {
    44.       "label": {
    45.         "text": "Price ($/Mwh)"
    46.       },
    47.       "min-value": 0,
    48.       "zooming": true
    49.     },
    50.     "series": [{
    51.         "values": [
    52.           [1481061600000, 1, "(TP 23)"],
    53.           [1481061900000, 2, "(TP 23)"],
    54.           [1481062200000, 3, "(TP 23)"],
    55.           [1481062500000, 2, "(TP 23)"],
    56.           [1481062800000, 3, "(TP 23)"]
    57.         ],
    58.       },
    59.       {
    60.         "values": [
    61.           [1481061600000, 1, "(TP 23)"],
    62.           [1481063400000, 1, "(TP 24)"],
    63.           [1481065200000, 2, "(TP 25)"],
    64.           [1481067000000, 3, "(TP 26)"],
    65.           [1481068800000, 3, "(TP 27)"]
    66.         ],
    67.       }
    68.     ],
    69.     "tooltip": {
    70.       "visible": 1,
    71.       "text": "%t: %v",
    72.       "font-size": "12px",
    73.       "font-weight": "bold",
    74.       "decimals": 2,
    75.       "thousands-separator": ",",
    76.       jsRule: 'customTooltip()'
    77.     }
    78.   }]
    79. };
    80.  
    81. zingchart.render({
    82.   id: 'myChart',
    83.   data: myConfig,
    84.   height: '100%',
    85.   width: '100%'
    86. });