• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="40M/M98dxNYlXzR3FYyuYw==" 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;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      <script nonce="40M/M98dxNYlXzR3FYyuYw==">
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "graphset": [{
            "arrows": [],
            "type": "line",
            "preview": {},
            "title": {
              "text": "Connecting Nodes With Arrows"
            },
            "subtitle": {
              "text": "We use arrows so we can have the gradient color"
            },
            "backgroundColor": "#fff",
            "plotarea": {
              "marginRight": 75,
              "marginLeft": 75
            },
            "plot": {
              "line-width": 0
            },
            "scale-x": {
              "labels": [
                "1/09",
                "1/10",
                "1/11",
                "1/13",
                "1/17",
                "1/18",
                "1/21",
                "1/23",
                "1/24",
                "1/25",
                "1/27",
                "1/28",
                "1/31",
                "2/01",
                "2/03",
                "2/04",
                "2/06",
                "2/07",
                "2/08",
                "2/11",
                "2/13",
                "2/14",
                "2/15",
                "2/17",
                "2/20",
                "2/21",
                "2/22",
                "2/24",
                "2/25",
                "2/27",
                "2/28",
                "3/01",
                "3/03",
                "3/04",
                "3/06",
                "3/07",
                "3/08",
                "3/10",
                "3/11",
                "3/13",
                "3/15",
                "3/17",
                "3/18",
                "3/20",
                "3/21",
                "3/22",
                "3/24",
                "3/25",
                "3/30",
                "3/31",
                "4/07",
                "4/14",
                "4/21",
                "4/22",
                "4/25",
                "4/26",
                "4/28",
                "4/29",
                "5/02",
                "5/03",
                "5/05",
                "5/09",
                "5/10",
                "5/11",
                "5/12",
                "5/13",
                "5/16"
              ],
              "zooming": true,
              "zoom-snap": true,
              "lineColor": "#151515",
              "fontColor": "#333333",
              "offset-end": 25,
              "offset-start": 25,
              "tick": {
                "lineColor": "#cccccc",
                "line-width": "1px"
              },
              "guide": {
                "line-width": "1px",
                "line-color": "#ccc",
                "line-style": "solid"
              },
              "item": {
                "fontColor": "#333333"
              }
            },
            "crosshair-x": {
              "plot-label": {
                "text": "%t: %data-values",
                "decimals": 2,
                "border-radius": "5px"
              }
            },
            "scale-y": {
              "label": {
                "text": "Temperature (ºF)",
                "fontColor": "#333333"
              },
              "decimals": 0,
              "format": "%v",
              "step": 5,
              "markers": [{
                "type": "line",
                "range": [
                  "33.98"
                ],
                "lineColor": "#00AEEF",
                "lineWidth": 2
              }],
              "max-value": 90.166,
              "min-value": 28.792285714286002
            },
            "series": [{
                "tooltip": {
                  "visible": false
                },
                "values": [
                  63.58,
                  55.79,
                  59.43,
                  58.78,
                  61.95,
                  60.28,
                  55.62,
                  59.42,
                  51.14,
                  61.35,
                  56.14,
                  59.67,
                  68.9,
                  63.54,
                  58.52,
                  56.54,
                  62.15,
                  63.89,
                  66.05,
                  65.16,
                  76.33,
                  71.61,
                  65.17,
                  70.89,
                  67.31,
                  69.7,
                  69.54,
                  58.67,
                  64.52,
                  68.87,
                  61.62,
                  58.07,
                  68.41,
                  61.23,
                  58.83,
                  61.74,
                  69.42,
                  78.73,
                  73.37,
                  71.3,
                  79.07,
                  85.17,
                  79.79,
                  77.5,
                  75.36,
                  71.65,
                  67.79,
                  69.93,
                  null,
                  null,
                  null,
                  null,
                  60.14,
                  57.38,
                  59.94,
                  59.05,
                  70,
                  70.02,
                  60.3,
                  66.41,
                  56.21,
                  55.25,
                  58.92,
                  57.99,
                  56.69,
                  50.64,
                  51.3
                ],
                "hover-marker": {
                  "visible": false
                },
                "data-values": "%v",
                "marker": {
                  "type": "circle",
                  "background-color": "#FCB040",
                  "size": 6,
                  "shadow": 0
                },
                "text": "Avg. PC Entry"
              },
              {
                "tooltip": {
                  "visible": false
                },
                "values": [
                  42.23,
                  37,
                  40.61,
                  38.73,
                  37.15,
                  38.9,
                  35.87,
                  37.17,
                  35.45,
                  37.05,
                  36.34,
                  39.36,
                  37.58,
                  38.98,
                  38.15,
                  37.55,
                  39.03,
                  43.3,
                  37.35,
                  38.2,
                  38.59,
                  39.7,
                  36.42,
                  43.9,
                  41.64,
                  41.21,
                  43.1,
                  40.6,
                  38.73,
                  45.35,
                  43.45,
                  35.15,
                  44.16,
                  41.51,
                  39.79,
                  38.56,
                  42.36,
                  43.14,
                  39.26,
                  39.92,
                  38.97,
                  38.41,
                  40.88,
                  42.97,
                  42.65,
                  39.67,
                  40.57,
                  44.29,
                  null,
                  null,
                  null,
                  null,
                  37.64,
                  36.37,
                  39.5,
                  41.42,
                  42.84,
                  35.82,
                  39.33,
                  38.99,
                  35.34,
                  34.9,
                  35.27,
                  36.39,
                  34.5,
                  33.79,
                  35.26
                ],
                "hover-marker": {
                  "visible": false
                },
                "data-values": "%v",
                "marker": {
                  "type": "circle",
                  "background-color": "#00AEEF",
                  "size": 6,
                  "shadow": 0
                },
                "text": "Avg. PC Exit",
                "preview-state": {
                  "lineColor": "00AEEF"
                }
              },
            ]
          }]
        };
    
        function Arrow(nodeIndex) {
          return {
            "size": 0,
            "shadow": false,
            "alpha": 0.55,
            "gradient-colors": "#FCB040 #00AEEF",
            "border-width": 0,
            "from": {
              "hook": "node: plot=0,index=" + nodeIndex
            },
            "to": {
              "hook": "node: plot=1,index=" + nodeIndex
            },
            "gradient-stops": "0.25 0.75",
            "offset-y": "6px",
            "aspect": [0, 0] // @here
          }
        }
        zingchart.bind(null, 'dataparse', function(e, oGraph) {
          var arrowArray = [];
    
          // light sanity checks for malformed JSON
          if (oGraph && oGraph.graphset && oGraph.graphset[0]) {
            if (oGraph.graphset[0].series && oGraph.graphset[0].series[0]) {
              oGraph.graphset[0].series[0].values.forEach(function(curVal, curIndex) {
                arrowArray.push(new Arrow(curIndex));
              });
              oGraph.graphset[0].arrows = arrowArray;
            }
          }
          return oGraph;
        });
    
        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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var myConfig = {
      "graphset": [{
        "arrows": [],
        "type": "line",
        "preview": {},
        "title": {
          "text": "Connecting Nodes With Arrows"
        },
        "subtitle": {
          "text": "We use arrows so we can have the gradient color"
        },
        "backgroundColor": "#fff",
        "plotarea": {
          "marginRight": 75,
          "marginLeft": 75
        },
        "plot": {
          "line-width": 0
        },
        "scale-x": {
          "labels": [
            "1/09",
            "1/10",
            "1/11",
            "1/13",
            "1/17",
            "1/18",
            "1/21",
            "1/23",
            "1/24",
            "1/25",
            "1/27",
            "1/28",
            "1/31",
            "2/01",
            "2/03",
            "2/04",
            "2/06",
            "2/07",
            "2/08",
            "2/11",
            "2/13",
            "2/14",
            "2/15",
            "2/17",
            "2/20",
            "2/21",
            "2/22",
            "2/24",
            "2/25",
            "2/27",
            "2/28",
            "3/01",
            "3/03",
            "3/04",
            "3/06",
            "3/07",
            "3/08",
            "3/10",
            "3/11",
            "3/13",
            "3/15",
            "3/17",
            "3/18",
            "3/20",
            "3/21",
            "3/22",
            "3/24",
            "3/25",
            "3/30",
            "3/31",
            "4/07",
            "4/14",
            "4/21",
            "4/22",
            "4/25",
            "4/26",
            "4/28",
            "4/29",
            "5/02",
            "5/03",
            "5/05",
            "5/09",
            "5/10",
            "5/11",
            "5/12",
            "5/13",
            "5/16"
          ],
          "zooming": true,
          "zoom-snap": true,
          "lineColor": "#151515",
          "fontColor": "#333333",
          "offset-end": 25,
          "offset-start": 25,
          "tick": {
            "lineColor": "#cccccc",
            "line-width": "1px"
          },
          "guide": {
            "line-width": "1px",
            "line-color": "#ccc",
            "line-style": "solid"
          },
          "item": {
            "fontColor": "#333333"
          }
        },
        "crosshair-x": {
          "plot-label": {
            "text": "%t: %data-values",
            "decimals": 2,
            "border-radius": "5px"
          }
        },
        "scale-y": {
          "label": {
            "text": "Temperature (ºF)",
            "fontColor": "#333333"
          },
          "decimals": 0,
          "format": "%v",
          "step": 5,
          "markers": [{
            "type": "line",
            "range": [
              "33.98"
            ],
            "lineColor": "#00AEEF",
            "lineWidth": 2
          }],
          "max-value": 90.166,
          "min-value": 28.792285714286002
        },
        "series": [{
            "tooltip": {
              "visible": false
            },
            "values": [
              63.58,
              55.79,
              59.43,
              58.78,
              61.95,
              60.28,
              55.62,
              59.42,
              51.14,
              61.35,
              56.14,
              59.67,
              68.9,
              63.54,
              58.52,
              56.54,
              62.15,
              63.89,
              66.05,
              65.16,
              76.33,
              71.61,
              65.17,
              70.89,
              67.31,
              69.7,
              69.54,
              58.67,
              64.52,
              68.87,
              61.62,
              58.07,
              68.41,
              61.23,
              58.83,
              61.74,
              69.42,
              78.73,
              73.37,
              71.3,
              79.07,
              85.17,
              79.79,
              77.5,
              75.36,
              71.65,
              67.79,
              69.93,
              null,
              null,
              null,
              null,
              60.14,
              57.38,
              59.94,
              59.05,
              70,
              70.02,
              60.3,
              66.41,
              56.21,
              55.25,
              58.92,
              57.99,
              56.69,
              50.64,
              51.3
            ],
            "hover-marker": {
              "visible": false
            },
            "data-values": "%v",
            "marker": {
              "type": "circle",
              "background-color": "#FCB040",
              "size": 6,
              "shadow": 0
            },
            "text": "Avg. PC Entry"
          },
          {
            "tooltip": {
              "visible": false
            },
            "values": [
              42.23,
              37,
              40.61,
              38.73,
              37.15,
              38.9,
              35.87,
              37.17,
              35.45,
              37.05,
              36.34,
              39.36,
              37.58,
              38.98,
              38.15,
              37.55,
              39.03,
              43.3,
              37.35,
              38.2,
              38.59,
              39.7,
              36.42,
              43.9,
              41.64,
              41.21,
              43.1,
              40.6,
              38.73,
              45.35,
              43.45,
              35.15,
              44.16,
              41.51,
              39.79,
              38.56,
              42.36,
              43.14,
              39.26,
              39.92,
              38.97,
              38.41,
              40.88,
              42.97,
              42.65,
              39.67,
              40.57,
              44.29,
              null,
              null,
              null,
              null,
              37.64,
              36.37,
              39.5,
              41.42,
              42.84,
              35.82,
              39.33,
              38.99,
              35.34,
              34.9,
              35.27,
              36.39,
              34.5,
              33.79,
              35.26
            ],
            "hover-marker": {
              "visible": false
            },
            "data-values": "%v",
            "marker": {
              "type": "circle",
              "background-color": "#00AEEF",
              "size": 6,
              "shadow": 0
            },
            "text": "Avg. PC Exit",
            "preview-state": {
              "lineColor": "00AEEF"
            }
          },
        ]
      }]
    };
    
    function Arrow(nodeIndex) {
      return {
        "size": 0,
        "shadow": false,
        "alpha": 0.55,
        "gradient-colors": "#FCB040 #00AEEF",
        "border-width": 0,
        "from": {
          "hook": "node: plot=0,index=" + nodeIndex
        },
        "to": {
          "hook": "node: plot=1,index=" + nodeIndex
        },
        "gradient-stops": "0.25 0.75",
        "offset-y": "6px",
        "aspect": [0, 0] // @here
      }
    }
    zingchart.bind(null, 'dataparse', function(e, oGraph) {
      var arrowArray = [];
    
      // light sanity checks for malformed JSON
      if (oGraph && oGraph.graphset && oGraph.graphset[0]) {
        if (oGraph.graphset[0].series && oGraph.graphset[0].series[0]) {
          oGraph.graphset[0].series[0].values.forEach(function(curVal, curIndex) {
            arrowArray.push(new Arrow(curIndex));
          });
          oGraph.graphset[0].arrows = arrowArray;
        }
      }
      return oGraph;
    });
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });