• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var keysForPlotLabel = {
          1: {
            value: 'aaaaaaa'
          },
          2: {
            value: 'bbbbbbbb'
          },
          3: {
            value: 'cccccccc'
          }
        };
    
        window.customPlotLabel = function(e) {
          var customValue = keysForPlotLabel[e.value].value
          return {
            "text": "<span style='color:%color'>%t: </span>" + customValue,
          }
        }
    
        window.customTooltip = function(e) {
          var customValue = keysForPlotLabel[e.value].value
          return {
            "text": "%t: " + customValue,
          }
        }
    
        var myConfig = {
          "graphset": [{
            "type": "line",
            "crosshair-x": {
              "plot-label": {
                jsRule: 'customPlotLabel()'
              }
            },
            "scale-x": {
              "step": "30minute",
              "transform": {
                "type": "date",
                "all": "%Y-%m-%d, \n %H:%i"
              },
              "zooming": true
            },
            "scale-y": {
              "label": {
                "text": "Price ($/Mwh)"
              },
              "min-value": 0,
              "zooming": true
            },
            "series": [{
                "values": [
                  [1481061600000, 1, "(TP 23)"],
                  [1481061900000, 2, "(TP 23)"],
                  [1481062200000, 3, "(TP 23)"],
                  [1481062500000, 2, "(TP 23)"],
                  [1481062800000, 3, "(TP 23)"]
                ],
              },
              {
                "values": [
                  [1481061600000, 1, "(TP 23)"],
                  [1481063400000, 1, "(TP 24)"],
                  [1481065200000, 2, "(TP 25)"],
                  [1481067000000, 3, "(TP 26)"],
                  [1481068800000, 3, "(TP 27)"]
                ],
              }
            ],
            "tooltip": {
              "visible": 1,
              "text": "%t: %v",
              "font-size": "12px",
              "font-weight": "bold",
              "decimals": 2,
              "thousands-separator": ",",
              jsRule: 'customTooltip()'
            }
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '100%',
          width: '100%'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="myChart"></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    var keysForPlotLabel = {
      1: {
        value: 'aaaaaaa'
      },
      2: {
        value: 'bbbbbbbb'
      },
      3: {
        value: 'cccccccc'
      }
    };
    
    window.customPlotLabel = function(e) {
      var customValue = keysForPlotLabel[e.value].value
      return {
        "text": "<span style='color:%color'>%t: </span>" + customValue,
      }
    }
    
    window.customTooltip = function(e) {
      var customValue = keysForPlotLabel[e.value].value
      return {
        "text": "%t: " + customValue,
      }
    }
    
    var myConfig = {
      "graphset": [{
        "type": "line",
        "crosshair-x": {
          "plot-label": {
            jsRule: 'customPlotLabel()'
          }
        },
        "scale-x": {
          "step": "30minute",
          "transform": {
            "type": "date",
            "all": "%Y-%m-%d, \n %H:%i"
          },
          "zooming": true
        },
        "scale-y": {
          "label": {
            "text": "Price ($/Mwh)"
          },
          "min-value": 0,
          "zooming": true
        },
        "series": [{
            "values": [
              [1481061600000, 1, "(TP 23)"],
              [1481061900000, 2, "(TP 23)"],
              [1481062200000, 3, "(TP 23)"],
              [1481062500000, 2, "(TP 23)"],
              [1481062800000, 3, "(TP 23)"]
            ],
          },
          {
            "values": [
              [1481061600000, 1, "(TP 23)"],
              [1481063400000, 1, "(TP 24)"],
              [1481065200000, 2, "(TP 25)"],
              [1481067000000, 3, "(TP 26)"],
              [1481068800000, 3, "(TP 27)"]
            ],
          }
        ],
        "tooltip": {
          "visible": 1,
          "text": "%t: %v",
          "font-size": "12px",
          "font-weight": "bold",
          "decimals": 2,
          "thousands-separator": ",",
          jsRule: 'customTooltip()'
        }
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });