• 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.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       "graphset": [{
    36.         "arrows": [],
    37.         "type": "line",
    38.         "preview": {},
    39.         "title": {
    40.           "text": "Connecting Nodes With Arrows"
    41.         },
    42.         "subtitle": {
    43.           "text": "We use arrows so we can have the gradient color"
    44.         },
    45.         "backgroundColor": "#fff",
    46.         "plotarea": {
    47.           "marginRight": 75,
    48.           "marginLeft": 75
    49.         },
    50.         "plot": {
    51.           "line-width": 0
    52.         },
    53.         "scale-x": {
    54.           "labels": [
    55.             "1/09",
    56.             "1/10",
    57.             "1/11",
    58.             "1/13",
    59.             "1/17",
    60.             "1/18",
    61.             "1/21",
    62.             "1/23",
    63.             "1/24",
    64.             "1/25",
    65.             "1/27",
    66.             "1/28",
    67.             "1/31",
    68.             "2/01",
    69.             "2/03",
    70.             "2/04",
    71.             "2/06",
    72.             "2/07",
    73.             "2/08",
    74.             "2/11",
    75.             "2/13",
    76.             "2/14",
    77.             "2/15",
    78.             "2/17",
    79.             "2/20",
    80.             "2/21",
    81.             "2/22",
    82.             "2/24",
    83.             "2/25",
    84.             "2/27",
    85.             "2/28",
    86.             "3/01",
    87.             "3/03",
    88.             "3/04",
    89.             "3/06",
    90.             "3/07",
    91.             "3/08",
    92.             "3/10",
    93.             "3/11",
    94.             "3/13",
    95.             "3/15",
    96.             "3/17",
    97.             "3/18",
    98.             "3/20",
    99.             "3/21",
    100.             "3/22",
    101.             "3/24",
    102.             "3/25",
    103.             "3/30",
    104.             "3/31",
    105.             "4/07",
    106.             "4/14",
    107.             "4/21",
    108.             "4/22",
    109.             "4/25",
    110.             "4/26",
    111.             "4/28",
    112.             "4/29",
    113.             "5/02",
    114.             "5/03",
    115.             "5/05",
    116.             "5/09",
    117.             "5/10",
    118.             "5/11",
    119.             "5/12",
    120.             "5/13",
    121.             "5/16"
    122.           ],
    123.           "zooming": true,
    124.           "zoom-snap": true,
    125.           "lineColor": "#151515",
    126.           "fontColor": "#333333",
    127.           "offset-end": 25,
    128.           "offset-start": 25,
    129.           "tick": {
    130.             "lineColor": "#cccccc",
    131.             "line-width": "1px"
    132.           },
    133.           "guide": {
    134.             "line-width": "1px",
    135.             "line-color": "#ccc",
    136.             "line-style": "solid"
    137.           },
    138.           "item": {
    139.             "fontColor": "#333333"
    140.           }
    141.         },
    142.         "crosshair-x": {
    143.           "plot-label": {
    144.             "text": "%t: %data-values",
    145.             "decimals": 2,
    146.             "border-radius": "5px"
    147.           }
    148.         },
    149.         "scale-y": {
    150.           "label": {
    151.             "text": "Temperature (ºF)",
    152.             "fontColor": "#333333"
    153.           },
    154.           "decimals": 0,
    155.           "format": "%v",
    156.           "step": 5,
    157.           "markers": [{
    158.             "type": "line",
    159.             "range": [
    160.               "33.98"
    161.             ],
    162.             "lineColor": "#00AEEF",
    163.             "lineWidth": 2
    164.           }],
    165.           "max-value": 90.166,
    166.           "min-value": 28.792285714286002
    167.         },
    168.         "series": [{
    169.             "tooltip": {
    170.               "visible": false
    171.             },
    172.             "values": [
    173.               63.58,
    174.               55.79,
    175.               59.43,
    176.               58.78,
    177.               61.95,
    178.               60.28,
    179.               55.62,
    180.               59.42,
    181.               51.14,
    182.               61.35,
    183.               56.14,
    184.               59.67,
    185.               68.9,
    186.               63.54,
    187.               58.52,
    188.               56.54,
    189.               62.15,
    190.               63.89,
    191.               66.05,
    192.               65.16,
    193.               76.33,
    194.               71.61,
    195.               65.17,
    196.               70.89,
    197.               67.31,
    198.               69.7,
    199.               69.54,
    200.               58.67,
    201.               64.52,
    202.               68.87,
    203.               61.62,
    204.               58.07,
    205.               68.41,
    206.               61.23,
    207.               58.83,
    208.               61.74,
    209.               69.42,
    210.               78.73,
    211.               73.37,
    212.               71.3,
    213.               79.07,
    214.               85.17,
    215.               79.79,
    216.               77.5,
    217.               75.36,
    218.               71.65,
    219.               67.79,
    220.               69.93,
    221.               null,
    222.               null,
    223.               null,
    224.               null,
    225.               60.14,
    226.               57.38,
    227.               59.94,
    228.               59.05,
    229.               70,
    230.               70.02,
    231.               60.3,
    232.               66.41,
    233.               56.21,
    234.               55.25,
    235.               58.92,
    236.               57.99,
    237.               56.69,
    238.               50.64,
    239.               51.3
    240.             ],
    241.             "hover-marker": {
    242.               "visible": false
    243.             },
    244.             "data-values": "%v",
    245.             "marker": {
    246.               "type": "circle",
    247.               "background-color": "#FCB040",
    248.               "size": 6,
    249.               "shadow": 0
    250.             },
    251.             "text": "Avg. PC Entry"
    252.           },
    253.           {
    254.             "tooltip": {
    255.               "visible": false
    256.             },
    257.             "values": [
    258.               42.23,
    259.               37,
    260.               40.61,
    261.               38.73,
    262.               37.15,
    263.               38.9,
    264.               35.87,
    265.               37.17,
    266.               35.45,
    267.               37.05,
    268.               36.34,
    269.               39.36,
    270.               37.58,
    271.               38.98,
    272.               38.15,
    273.               37.55,
    274.               39.03,
    275.               43.3,
    276.               37.35,
    277.               38.2,
    278.               38.59,
    279.               39.7,
    280.               36.42,
    281.               43.9,
    282.               41.64,
    283.               41.21,
    284.               43.1,
    285.               40.6,
    286.               38.73,
    287.               45.35,
    288.               43.45,
    289.               35.15,
    290.               44.16,
    291.               41.51,
    292.               39.79,
    293.               38.56,
    294.               42.36,
    295.               43.14,
    296.               39.26,
    297.               39.92,
    298.               38.97,
    299.               38.41,
    300.               40.88,
    301.               42.97,
    302.               42.65,
    303.               39.67,
    304.               40.57,
    305.               44.29,
    306.               null,
    307.               null,
    308.               null,
    309.               null,
    310.               37.64,
    311.               36.37,
    312.               39.5,
    313.               41.42,
    314.               42.84,
    315.               35.82,
    316.               39.33,
    317.               38.99,
    318.               35.34,
    319.               34.9,
    320.               35.27,
    321.               36.39,
    322.               34.5,
    323.               33.79,
    324.               35.26
    325.             ],
    326.             "hover-marker": {
    327.               "visible": false
    328.             },
    329.             "data-values": "%v",
    330.             "marker": {
    331.               "type": "circle",
    332.               "background-color": "#00AEEF",
    333.               "size": 6,
    334.               "shadow": 0
    335.             },
    336.             "text": "Avg. PC Exit",
    337.             "preview-state": {
    338.               "lineColor": "00AEEF"
    339.             }
    340.           },
    341.         ]
    342.       }]
    343.     };
    344.  
    345.     function Arrow(nodeIndex) {
    346.       return {
    347.         "size": 0,
    348.         "shadow": false,
    349.         "alpha": 0.55,
    350.         "gradient-colors": "#FCB040 #00AEEF",
    351.         "border-width": 0,
    352.         "from": {
    353.           "hook": "node: plot=0,index=" + nodeIndex
    354.         },
    355.         "to": {
    356.           "hook": "node: plot=1,index=" + nodeIndex
    357.         },
    358.         "gradient-stops": "0.25 0.75",
    359.         "offset-y": "6px",
    360.         "aspect": [0, 0] // @here
    361.       }
    362.     }
    363.     zingchart.bind(null, 'dataparse', function(e, oGraph) {
    364.       var arrowArray = [];
    365.  
    366.       // light sanity checks for malformed JSON
    367.       if (oGraph && oGraph.graphset && oGraph.graphset[0]) {
    368.         if (oGraph.graphset[0].series && oGraph.graphset[0].series[0]) {
    369.           oGraph.graphset[0].series[0].values.forEach(function(curVal, curIndex) {
    370.             arrowArray.push(new Arrow(curIndex));
    371.           });
    372.           oGraph.graphset[0].arrows = arrowArray;
    373.         }
    374.       }
    375.       return oGraph;
    376.     });
    377.  
    378.     zingchart.render({
    379.       id: 'myChart',
    380.       data: myConfig,
    381.       height: '100%',
    382.       width: '100%'
    383.     });
    384.   </script>
    385. </body>
    386.  
    387. </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></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. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   "graphset": [{
    3.     "arrows": [],
    4.     "type": "line",
    5.     "preview": {},
    6.     "title": {
    7.       "text": "Connecting Nodes With Arrows"
    8.     },
    9.     "subtitle": {
    10.       "text": "We use arrows so we can have the gradient color"
    11.     },
    12.     "backgroundColor": "#fff",
    13.     "plotarea": {
    14.       "marginRight": 75,
    15.       "marginLeft": 75
    16.     },
    17.     "plot": {
    18.       "line-width": 0
    19.     },
    20.     "scale-x": {
    21.       "labels": [
    22.         "1/09",
    23.         "1/10",
    24.         "1/11",
    25.         "1/13",
    26.         "1/17",
    27.         "1/18",
    28.         "1/21",
    29.         "1/23",
    30.         "1/24",
    31.         "1/25",
    32.         "1/27",
    33.         "1/28",
    34.         "1/31",
    35.         "2/01",
    36.         "2/03",
    37.         "2/04",
    38.         "2/06",
    39.         "2/07",
    40.         "2/08",
    41.         "2/11",
    42.         "2/13",
    43.         "2/14",
    44.         "2/15",
    45.         "2/17",
    46.         "2/20",
    47.         "2/21",
    48.         "2/22",
    49.         "2/24",
    50.         "2/25",
    51.         "2/27",
    52.         "2/28",
    53.         "3/01",
    54.         "3/03",
    55.         "3/04",
    56.         "3/06",
    57.         "3/07",
    58.         "3/08",
    59.         "3/10",
    60.         "3/11",
    61.         "3/13",
    62.         "3/15",
    63.         "3/17",
    64.         "3/18",
    65.         "3/20",
    66.         "3/21",
    67.         "3/22",
    68.         "3/24",
    69.         "3/25",
    70.         "3/30",
    71.         "3/31",
    72.         "4/07",
    73.         "4/14",
    74.         "4/21",
    75.         "4/22",
    76.         "4/25",
    77.         "4/26",
    78.         "4/28",
    79.         "4/29",
    80.         "5/02",
    81.         "5/03",
    82.         "5/05",
    83.         "5/09",
    84.         "5/10",
    85.         "5/11",
    86.         "5/12",
    87.         "5/13",
    88.         "5/16"
    89.       ],
    90.       "zooming": true,
    91.       "zoom-snap": true,
    92.       "lineColor": "#151515",
    93.       "fontColor": "#333333",
    94.       "offset-end": 25,
    95.       "offset-start": 25,
    96.       "tick": {
    97.         "lineColor": "#cccccc",
    98.         "line-width": "1px"
    99.       },
    100.       "guide": {
    101.         "line-width": "1px",
    102.         "line-color": "#ccc",
    103.         "line-style": "solid"
    104.       },
    105.       "item": {
    106.         "fontColor": "#333333"
    107.       }
    108.     },
    109.     "crosshair-x": {
    110.       "plot-label": {
    111.         "text": "%t: %data-values",
    112.         "decimals": 2,
    113.         "border-radius": "5px"
    114.       }
    115.     },
    116.     "scale-y": {
    117.       "label": {
    118.         "text": "Temperature (ºF)",
    119.         "fontColor": "#333333"
    120.       },
    121.       "decimals": 0,
    122.       "format": "%v",
    123.       "step": 5,
    124.       "markers": [{
    125.         "type": "line",
    126.         "range": [
    127.           "33.98"
    128.         ],
    129.         "lineColor": "#00AEEF",
    130.         "lineWidth": 2
    131.       }],
    132.       "max-value": 90.166,
    133.       "min-value": 28.792285714286002
    134.     },
    135.     "series": [{
    136.         "tooltip": {
    137.           "visible": false
    138.         },
    139.         "values": [
    140.           63.58,
    141.           55.79,
    142.           59.43,
    143.           58.78,
    144.           61.95,
    145.           60.28,
    146.           55.62,
    147.           59.42,
    148.           51.14,
    149.           61.35,
    150.           56.14,
    151.           59.67,
    152.           68.9,
    153.           63.54,
    154.           58.52,
    155.           56.54,
    156.           62.15,
    157.           63.89,
    158.           66.05,
    159.           65.16,
    160.           76.33,
    161.           71.61,
    162.           65.17,
    163.           70.89,
    164.           67.31,
    165.           69.7,
    166.           69.54,
    167.           58.67,
    168.           64.52,
    169.           68.87,
    170.           61.62,
    171.           58.07,
    172.           68.41,
    173.           61.23,
    174.           58.83,
    175.           61.74,
    176.           69.42,
    177.           78.73,
    178.           73.37,
    179.           71.3,
    180.           79.07,
    181.           85.17,
    182.           79.79,
    183.           77.5,
    184.           75.36,
    185.           71.65,
    186.           67.79,
    187.           69.93,
    188.           null,
    189.           null,
    190.           null,
    191.           null,
    192.           60.14,
    193.           57.38,
    194.           59.94,
    195.           59.05,
    196.           70,
    197.           70.02,
    198.           60.3,
    199.           66.41,
    200.           56.21,
    201.           55.25,
    202.           58.92,
    203.           57.99,
    204.           56.69,
    205.           50.64,
    206.           51.3
    207.         ],
    208.         "hover-marker": {
    209.           "visible": false
    210.         },
    211.         "data-values": "%v",
    212.         "marker": {
    213.           "type": "circle",
    214.           "background-color": "#FCB040",
    215.           "size": 6,
    216.           "shadow": 0
    217.         },
    218.         "text": "Avg. PC Entry"
    219.       },
    220.       {
    221.         "tooltip": {
    222.           "visible": false
    223.         },
    224.         "values": [
    225.           42.23,
    226.           37,
    227.           40.61,
    228.           38.73,
    229.           37.15,
    230.           38.9,
    231.           35.87,
    232.           37.17,
    233.           35.45,
    234.           37.05,
    235.           36.34,
    236.           39.36,
    237.           37.58,
    238.           38.98,
    239.           38.15,
    240.           37.55,
    241.           39.03,
    242.           43.3,
    243.           37.35,
    244.           38.2,
    245.           38.59,
    246.           39.7,
    247.           36.42,
    248.           43.9,
    249.           41.64,
    250.           41.21,
    251.           43.1,
    252.           40.6,
    253.           38.73,
    254.           45.35,
    255.           43.45,
    256.           35.15,
    257.           44.16,
    258.           41.51,
    259.           39.79,
    260.           38.56,
    261.           42.36,
    262.           43.14,
    263.           39.26,
    264.           39.92,
    265.           38.97,
    266.           38.41,
    267.           40.88,
    268.           42.97,
    269.           42.65,
    270.           39.67,
    271.           40.57,
    272.           44.29,
    273.           null,
    274.           null,
    275.           null,
    276.           null,
    277.           37.64,
    278.           36.37,
    279.           39.5,
    280.           41.42,
    281.           42.84,
    282.           35.82,
    283.           39.33,
    284.           38.99,
    285.           35.34,
    286.           34.9,
    287.           35.27,
    288.           36.39,
    289.           34.5,
    290.           33.79,
    291.           35.26
    292.         ],
    293.         "hover-marker": {
    294.           "visible": false
    295.         },
    296.         "data-values": "%v",
    297.         "marker": {
    298.           "type": "circle",
    299.           "background-color": "#00AEEF",
    300.           "size": 6,
    301.           "shadow": 0
    302.         },
    303.         "text": "Avg. PC Exit",
    304.         "preview-state": {
    305.           "lineColor": "00AEEF"
    306.         }
    307.       },
    308.     ]
    309.   }]
    310. };
    311.  
    312. function Arrow(nodeIndex) {
    313.   return {
    314.     "size": 0,
    315.     "shadow": false,
    316.     "alpha": 0.55,
    317.     "gradient-colors": "#FCB040 #00AEEF",
    318.     "border-width": 0,
    319.     "from": {
    320.       "hook": "node: plot=0,index=" + nodeIndex
    321.     },
    322.     "to": {
    323.       "hook": "node: plot=1,index=" + nodeIndex
    324.     },
    325.     "gradient-stops": "0.25 0.75",
    326.     "offset-y": "6px",
    327.     "aspect": [0, 0] // @here
    328.   }
    329. }
    330. zingchart.bind(null, 'dataparse', function(e, oGraph) {
    331.   var arrowArray = [];
    332.  
    333.   // light sanity checks for malformed JSON
    334.   if (oGraph && oGraph.graphset && oGraph.graphset[0]) {
    335.     if (oGraph.graphset[0].series && oGraph.graphset[0].series[0]) {
    336.       oGraph.graphset[0].series[0].values.forEach(function(curVal, curIndex) {
    337.         arrowArray.push(new Arrow(curIndex));
    338.       });
    339.       oGraph.graphset[0].arrows = arrowArray;
    340.     }
    341.   }
    342.   return oGraph;
    343. });
    344.  
    345. zingchart.render({
    346.   id: 'myChart',
    347.   data: myConfig,
    348.   height: '100%',
    349.   width: '100%'
    350. });