• 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.     }
    15.  
    16.     #myChart {
    17.       height: 100%;
    18.       width: 100%;
    19.       min-height: 150px;
    20.     }
    21.  
    22.     .zc-ref {
    23.       display: none;
    24.     }
    25.   </style>
    26. </head>
    27.  
    28. <body>
    29.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    32.     var myConfig = {
    33.       "type": "line",
    34.       "utc": true,
    35.       "title": {
    36.         "text": "Webpage Analytics",
    37.         "font-size": "24px",
    38.         "adjust-layout": true
    39.       },
    40.       "plotarea": {
    41.         "margin": "dynamic 45 60 dynamic",
    42.       },
    43.       "legend": {
    44.         "layout": "float",
    45.         "background-color": "none",
    46.         "border-width": 0,
    47.         "shadow": 0,
    48.         "align": "center",
    49.         "adjust-layout": true,
    50.         "toggle-action": "remove",
    51.         "item": {
    52.           "padding": 7,
    53.           "marginRight": 17,
    54.           "cursor": "hand"
    55.         }
    56.       },
    57.       "scale-x": {
    58.         "min-value": 1383292800000,
    59.         "shadow": 0,
    60.         "step": 3600000,
    61.         "transform": {
    62.           "type": "date",
    63.           "all": "%D, %d %M<br />%h:%i %A",
    64.           "item": {
    65.             "visible": false
    66.           }
    67.         },
    68.         "label": {
    69.           "visible": false
    70.         },
    71.         "minor-ticks": 0
    72.       },
    73.       "scale-y": {
    74.         "line-color": "#f6f7f8",
    75.         "shadow": 0,
    76.         "guide": {
    77.           "line-style": "dashed"
    78.         },
    79.         "label": {
    80.           "text": "Page Views",
    81.         },
    82.         "minor-ticks": 0,
    83.         "thousands-separator": ","
    84.       },
    85.       "crosshair-x": {
    86.         "line-color": "#efefef",
    87.         "plot-label": {
    88.           "border-radius": "5px",
    89.           "border-width": "1px",
    90.           "border-color": "#f6f7f8",
    91.           "padding": "10px",
    92.           "font-weight": "bold"
    93.         },
    94.         "scale-label": {
    95.           "font-color": "#000",
    96.           "background-color": "#f6f7f8",
    97.           "border-radius": "5px"
    98.         }
    99.       },
    100.       "tooltip": {
    101.         "visible": false
    102.       },
    103.       "plot": {
    104.         "highlight": true,
    105.         "tooltip-text": "%t views: %v<br>%k",
    106.         "shadow": 0,
    107.         "line-width": "2px",
    108.         "marker": {
    109.           "type": "circle",
    110.           "size": 3
    111.         },
    112.         "highlight-state": {
    113.           "line-width": 3
    114.         },
    115.         "animation": {
    116.           "effect": 1,
    117.           "sequence": 2,
    118.           "speed": 100,
    119.         }
    120.       },
    121.       "series": [{
    122.           "values": [
    123.             149.2,
    124.             174.3,
    125.             187.7,
    126.             147.1,
    127.             129.6,
    128.             189.6,
    129.             230,
    130.             164.5,
    131.             171.7,
    132.             163.4,
    133.             194.5,
    134.             200.1,
    135.             193.4,
    136.             254.4,
    137.             287.8,
    138.             246,
    139.             199.9,
    140.             218.3,
    141.             244,
    142.             312.2,
    143.             284.5,
    144.             249.2,
    145.             305.2,
    146.             286.1,
    147.             347.7,
    148.             278,
    149.             240.3,
    150.             212.4,
    151.             237.1,
    152.             253.2,
    153.             186.1,
    154.             153.6,
    155.             168.5,
    156.             140.9,
    157.             86.9,
    158.             49.4,
    159.             24.7,
    160.             64.8,
    161.             114.4,
    162.             137.4
    163.           ],
    164.           "text": "Pricing",
    165.           "line-color": "#007790",
    166.           "legend-item": {
    167.             "background-color": "#007790",
    168.             "borderRadius": 5,
    169.             "font-color": "white"
    170.           },
    171.           "legend-marker": {
    172.             "visible": false
    173.           },
    174.           "marker": {
    175.             "background-color": "#007790",
    176.             "border-width": 1,
    177.             "shadow": 0,
    178.             "border-color": "#69dbf1"
    179.           },
    180.           "highlight-marker": {
    181.             "size": 6,
    182.             "background-color": "#007790",
    183.           }
    184.         },
    185.         {
    186.           "values": [
    187.             714.6,
    188.             656.3,
    189.             660.6,
    190.             729.8,
    191.             731.6,
    192.             682.3,
    193.             654.6,
    194.             673.5,
    195.             700.6,
    196.             755.2,
    197.             817.8,
    198.             809.1,
    199.             815.2,
    200.             836.6,
    201.             897.3,
    202.             896.9,
    203.             866.5,
    204.             835.8,
    205.             797.9,
    206.             784.7,
    207.             802.8,
    208.             749.3,
    209.             722.1,
    210.             688.1,
    211.             730.4,
    212.             661.5,
    213.             609.7,
    214.             630.2,
    215.             633,
    216.             604.2,
    217.             558.1,
    218.             581.4,
    219.             511.5,
    220.             556.5,
    221.             542.1,
    222.             599.7,
    223.             664.8,
    224.             725.3,
    225.             694.2,
    226.             690.5
    227.           ],
    228.           "text": "Documentation",
    229.           "line-color": "#009872",
    230.           "legend-item": {
    231.             "background-color": "#009872",
    232.             "borderRadius": 5,
    233.             "font-color": "white"
    234.           },
    235.           "legend-marker": {
    236.             "visible": false
    237.           },
    238.           "marker": {
    239.             "background-color": "#009872",
    240.             "border-width": 1,
    241.             "shadow": 0,
    242.             "border-color": "#69f2d0"
    243.           },
    244.           "highlight-marker": {
    245.             "size": 6,
    246.             "background-color": "#009872",
    247.           }
    248.         },
    249.         {
    250.           "values": [
    251.             536.9,
    252.             576.4,
    253.             639.3,
    254.             669.4,
    255.             708.7,
    256.             691.5,
    257.             681.7,
    258.             673,
    259.             701.8,
    260.             636.4,
    261.             637.8,
    262.             640.5,
    263.             653.1,
    264.             613.7,
    265.             583.4,
    266.             538,
    267.             506.7,
    268.             563.1,
    269.             541.4,
    270.             489.3,
    271.             434.7,
    272.             442.1,
    273.             482.3,
    274.             495.4,
    275.             556.1,
    276.             505.4,
    277.             463.8,
    278.             434.7,
    279.             377.4,
    280.             325.4,
    281.             351.7,
    282.             343.5,
    283.             333.2,
    284.             332,
    285.             378.9,
    286.             415.4,
    287.             385,
    288.             412.6,
    289.             445.9,
    290.             441.5
    291.           ],
    292.           "text": "Support",
    293.           "line-color": "#da534d",
    294.           "legend-item": {
    295.             "background-color": "#da534d",
    296.             "borderRadius": 5,
    297.             "font-color": "white"
    298.           },
    299.           "legend-marker": {
    300.             "visible": false
    301.           },
    302.           "marker": {
    303.             "background-color": "#da534d",
    304.             "border-width": 1,
    305.             "shadow": 0,
    306.             "border-color": "#faa39f"
    307.           },
    308.           "highlight-marker": {
    309.             "size": 6,
    310.             "background-color": "#da534d",
    311.           }
    312.         }
    313.       ]
    314.     };
    315.  
    316.     zingchart.render({
    317.       id: 'myChart',
    318.       data: myConfig,
    319.       height: '100%',
    320.       width: '100%'
    321.     });
    322.   </script>
    323. </body>
    324.  
    325. </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. }
    6.  
    7. #myChart {
    8.   height: 100%;
    9.   width: 100%;
    10.   min-height: 150px;
    11. }
    12.  
    13. .zc-ref {
    14.   display: none;
    15. }
    1. var myConfig = {
    2.   "type": "line",
    3.   "utc": true,
    4.   "title": {
    5.     "text": "Webpage Analytics",
    6.     "font-size": "24px",
    7.     "adjust-layout": true
    8.   },
    9.   "plotarea": {
    10.     "margin": "dynamic 45 60 dynamic",
    11.   },
    12.   "legend": {
    13.     "layout": "float",
    14.     "background-color": "none",
    15.     "border-width": 0,
    16.     "shadow": 0,
    17.     "align": "center",
    18.     "adjust-layout": true,
    19.     "toggle-action": "remove",
    20.     "item": {
    21.       "padding": 7,
    22.       "marginRight": 17,
    23.       "cursor": "hand"
    24.     }
    25.   },
    26.   "scale-x": {
    27.     "min-value": 1383292800000,
    28.     "shadow": 0,
    29.     "step": 3600000,
    30.     "transform": {
    31.       "type": "date",
    32.       "all": "%D, %d %M<br />%h:%i %A",
    33.       "item": {
    34.         "visible": false
    35.       }
    36.     },
    37.     "label": {
    38.       "visible": false
    39.     },
    40.     "minor-ticks": 0
    41.   },
    42.   "scale-y": {
    43.     "line-color": "#f6f7f8",
    44.     "shadow": 0,
    45.     "guide": {
    46.       "line-style": "dashed"
    47.     },
    48.     "label": {
    49.       "text": "Page Views",
    50.     },
    51.     "minor-ticks": 0,
    52.     "thousands-separator": ","
    53.   },
    54.   "crosshair-x": {
    55.     "line-color": "#efefef",
    56.     "plot-label": {
    57.       "border-radius": "5px",
    58.       "border-width": "1px",
    59.       "border-color": "#f6f7f8",
    60.       "padding": "10px",
    61.       "font-weight": "bold"
    62.     },
    63.     "scale-label": {
    64.       "font-color": "#000",
    65.       "background-color": "#f6f7f8",
    66.       "border-radius": "5px"
    67.     }
    68.   },
    69.   "tooltip": {
    70.     "visible": false
    71.   },
    72.   "plot": {
    73.     "highlight": true,
    74.     "tooltip-text": "%t views: %v<br>%k",
    75.     "shadow": 0,
    76.     "line-width": "2px",
    77.     "marker": {
    78.       "type": "circle",
    79.       "size": 3
    80.     },
    81.     "highlight-state": {
    82.       "line-width": 3
    83.     },
    84.     "animation": {
    85.       "effect": 1,
    86.       "sequence": 2,
    87.       "speed": 100,
    88.     }
    89.   },
    90.   "series": [{
    91.       "values": [
    92.         149.2,
    93.         174.3,
    94.         187.7,
    95.         147.1,
    96.         129.6,
    97.         189.6,
    98.         230,
    99.         164.5,
    100.         171.7,
    101.         163.4,
    102.         194.5,
    103.         200.1,
    104.         193.4,
    105.         254.4,
    106.         287.8,
    107.         246,
    108.         199.9,
    109.         218.3,
    110.         244,
    111.         312.2,
    112.         284.5,
    113.         249.2,
    114.         305.2,
    115.         286.1,
    116.         347.7,
    117.         278,
    118.         240.3,
    119.         212.4,
    120.         237.1,
    121.         253.2,
    122.         186.1,
    123.         153.6,
    124.         168.5,
    125.         140.9,
    126.         86.9,
    127.         49.4,
    128.         24.7,
    129.         64.8,
    130.         114.4,
    131.         137.4
    132.       ],
    133.       "text": "Pricing",
    134.       "line-color": "#007790",
    135.       "legend-item": {
    136.         "background-color": "#007790",
    137.         "borderRadius": 5,
    138.         "font-color": "white"
    139.       },
    140.       "legend-marker": {
    141.         "visible": false
    142.       },
    143.       "marker": {
    144.         "background-color": "#007790",
    145.         "border-width": 1,
    146.         "shadow": 0,
    147.         "border-color": "#69dbf1"
    148.       },
    149.       "highlight-marker": {
    150.         "size": 6,
    151.         "background-color": "#007790",
    152.       }
    153.     },
    154.     {
    155.       "values": [
    156.         714.6,
    157.         656.3,
    158.         660.6,
    159.         729.8,
    160.         731.6,
    161.         682.3,
    162.         654.6,
    163.         673.5,
    164.         700.6,
    165.         755.2,
    166.         817.8,
    167.         809.1,
    168.         815.2,
    169.         836.6,
    170.         897.3,
    171.         896.9,
    172.         866.5,
    173.         835.8,
    174.         797.9,
    175.         784.7,
    176.         802.8,
    177.         749.3,
    178.         722.1,
    179.         688.1,
    180.         730.4,
    181.         661.5,
    182.         609.7,
    183.         630.2,
    184.         633,
    185.         604.2,
    186.         558.1,
    187.         581.4,
    188.         511.5,
    189.         556.5,
    190.         542.1,
    191.         599.7,
    192.         664.8,
    193.         725.3,
    194.         694.2,
    195.         690.5
    196.       ],
    197.       "text": "Documentation",
    198.       "line-color": "#009872",
    199.       "legend-item": {
    200.         "background-color": "#009872",
    201.         "borderRadius": 5,
    202.         "font-color": "white"
    203.       },
    204.       "legend-marker": {
    205.         "visible": false
    206.       },
    207.       "marker": {
    208.         "background-color": "#009872",
    209.         "border-width": 1,
    210.         "shadow": 0,
    211.         "border-color": "#69f2d0"
    212.       },
    213.       "highlight-marker": {
    214.         "size": 6,
    215.         "background-color": "#009872",
    216.       }
    217.     },
    218.     {
    219.       "values": [
    220.         536.9,
    221.         576.4,
    222.         639.3,
    223.         669.4,
    224.         708.7,
    225.         691.5,
    226.         681.7,
    227.         673,
    228.         701.8,
    229.         636.4,
    230.         637.8,
    231.         640.5,
    232.         653.1,
    233.         613.7,
    234.         583.4,
    235.         538,
    236.         506.7,
    237.         563.1,
    238.         541.4,
    239.         489.3,
    240.         434.7,
    241.         442.1,
    242.         482.3,
    243.         495.4,
    244.         556.1,
    245.         505.4,
    246.         463.8,
    247.         434.7,
    248.         377.4,
    249.         325.4,
    250.         351.7,
    251.         343.5,
    252.         333.2,
    253.         332,
    254.         378.9,
    255.         415.4,
    256.         385,
    257.         412.6,
    258.         445.9,
    259.         441.5
    260.       ],
    261.       "text": "Support",
    262.       "line-color": "#da534d",
    263.       "legend-item": {
    264.         "background-color": "#da534d",
    265.         "borderRadius": 5,
    266.         "font-color": "white"
    267.       },
    268.       "legend-marker": {
    269.         "visible": false
    270.       },
    271.       "marker": {
    272.         "background-color": "#da534d",
    273.         "border-width": 1,
    274.         "shadow": 0,
    275.         "border-color": "#faa39f"
    276.       },
    277.       "highlight-marker": {
    278.         "size": 6,
    279.         "background-color": "#da534d",
    280.       }
    281.     }
    282.   ]
    283. };
    284.  
    285. zingchart.render({
    286.   id: 'myChart',
    287.   data: myConfig,
    288.   height: '100%',
    289.   width: '100%'
    290. });