• 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;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            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(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(Arrow(curIndex));
          });
          oGraph.graphset[0].arrows = arrowArray;
        }
      }
      return oGraph;
    });
    
    zingchart.render({ 
    	id: 'myChart', 
    	data: myConfig, 
    	height: '100%', 
    	width: '100%' 
    });