• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
    9.  
    10.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    11.   <style>
    12.     html,
    13.     body,
    14.     #myChart {
    15.       width: 100%;
    16.       height: 100%;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24.  
    25. <body>
    26.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    27.   <script>
    28.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    29.     var myConfig = {
    30.       "globals": {
    31.         "font-family": "Roboto"
    32.       },
    33.       "graphset": [{
    34.         "type": "area",
    35.         "background-color": "#fff",
    36.         "utc": true,
    37.         "title": {
    38.           "y": "15px",
    39.           "text": "Website Traffic Metrics",
    40.           "background-color": "none",
    41.           "font-color": "#05636c",
    42.           "font-size": "24px",
    43.           "height": "25px",
    44.           "adjust-layout": true
    45.         },
    46.         "plotarea": {
    47.           "margin-top": "10%",
    48.           "margin-right": "dynamic",
    49.           "margin-bottom": "dynamic",
    50.           "margin-left": "dynamic",
    51.           "adjust-layout": true
    52.         },
    53.         "labels": [{
    54.             "text": "Visitors: %plot-2-value",
    55.             "default-value": "",
    56.             "color": "#8da0cb",
    57.             "x": "20%",
    58.             "y": 50,
    59.             "width": 120,
    60.             "text-align": "left",
    61.             "bold": 0,
    62.             "font-size": "14px",
    63.             "font-weight": "bold"
    64.           },
    65.           {
    66.             "text": "Clicks: %plot-1-value",
    67.             "default-value": "",
    68.             "color": "#66c2a5",
    69.             "x": "45%",
    70.             "y": 50,
    71.             "width": 120,
    72.             "text-align": "left",
    73.             "bold": 0,
    74.             "font-size": "14px",
    75.             "font-weight": "bold"
    76.           },
    77.           {
    78.             "text": "Returns: %plot-0-value",
    79.             "default-value": "",
    80.             "color": "#fc8d62",
    81.             "x": "70%",
    82.             "y": 50,
    83.             "width": 120,
    84.             "text-align": "left",
    85.             "bold": 0,
    86.             "font-size": "14px",
    87.             "font-weight": "bold"
    88.           }
    89.         ],
    90.         "scale-x": {
    91.           "label": {
    92.             "text": "Date Range",
    93.             "font-size": "14px",
    94.             "font-weight": "normal",
    95.             "offset-x": "10%",
    96.             "font-angle": 360
    97.           },
    98.           "item": {
    99.             "text-align": "center",
    100.             "font-color": "#05636c"
    101.           },
    102.           "zooming": 1,
    103.           "max-labels": 12,
    104.           "labels": [
    105.             "Sept<br>19",
    106.             "Sept<br>20",
    107.             "Sept<br>21",
    108.             "Sept<br>22",
    109.             "Sept<br>23",
    110.             "Sept<br>24",
    111.             "Sept<br>25",
    112.             "Sept<br>26",
    113.             "Sept<br>27",
    114.             "Sept<br>28",
    115.             "Sept<br>29",
    116.             "Sept<br>30"
    117.           ],
    118.           "max-items": 12,
    119.           "items-overlap": true,
    120.           "guide": {
    121.             "line-width": "0px"
    122.           },
    123.           "tick": {
    124.             "line-width": "2px"
    125.           },
    126.         },
    127.         "crosshair-x": {
    128.           "line-color": "#fff",
    129.           "line-width": 1,
    130.           "plot-label": {
    131.             "visible": false
    132.           }
    133.         },
    134.         "scale-y": {
    135.           "values": "0:2500:500",
    136.           "item": {
    137.             "font-color": "#05636c",
    138.             "font-weight": "normal"
    139.           },
    140.           "label": {
    141.             "text": "Metrics",
    142.             "font-size": "14px"
    143.           },
    144.           "guide": {
    145.             "line-width": "0px",
    146.             "alpha": 0.2,
    147.             "line-style": "dashed"
    148.           }
    149.         },
    150.         "plot": {
    151.           "line-width": 2,
    152.           "marker": {
    153.             "size": 1,
    154.             "visible": false
    155.           },
    156.           "tooltip": {
    157.             "font-family": "Roboto",
    158.             "font-size": "15px",
    159.             "text": "There were %v %t on %data-days",
    160.             "text-align": "left",
    161.             "border-radius": 5,
    162.             "padding": 10
    163.           }
    164.         },
    165.         "series": [{
    166.             "values": [
    167.               1204,
    168.               1179,
    169.               1146,
    170.               1182,
    171.               1058,
    172.               1086,
    173.               1141,
    174.               1105,
    175.               1202,
    176.               992,
    177.               373,
    178.               466
    179.             ],
    180.             "data-days": [
    181.               "Sept 19",
    182.               "Sept 20",
    183.               "Sept 21",
    184.               "Sept 22",
    185.               "Sept 23",
    186.               "Sept 24",
    187.               "Sept 25",
    188.               "Sept 26",
    189.               "Sept 27",
    190.               "Sept 28",
    191.               "Sept 29",
    192.               "Sept 30"
    193.             ],
    194.             "line-color": "#fc8d62",
    195.             "aspect": "spline",
    196.             "background-color": "#fc8d62",
    197.             "alpha-area": ".5",
    198.             "font-family": "Roboto",
    199.             "font-size": "14px",
    200.             "text": "returns"
    201.           },
    202.           {
    203.             "values": [
    204.               1625,
    205.               1683,
    206.               1659,
    207.               1761,
    208.               1904,
    209.               1819,
    210.               1631,
    211.               1592,
    212.               1498,
    213.               1594,
    214.               1782,
    215.               1644
    216.             ],
    217.             "data-days": [
    218.               "Sept 19",
    219.               "Sept 20",
    220.               "Sept 21",
    221.               "Sept 22",
    222.               "Sept 23",
    223.               "Sept 24",
    224.               "Sept 25",
    225.               "Sept 26",
    226.               "Sept 27",
    227.               "Sept 28",
    228.               "Sept 29",
    229.               "Sept 30"
    230.             ],
    231.             "line-color": "#66c2a5",
    232.             "background-color": "#66c2a5",
    233.             "alpha-area": ".3",
    234.             "text": "clicks",
    235.             "aspect": "spline",
    236.             "font-family": "Roboto",
    237.             "font-size": "14px"
    238.           },
    239.           {
    240.             "values": [
    241.               314,
    242.               1395,
    243.               1292,
    244.               1259,
    245.               1269,
    246.               1132,
    247.               1012,
    248.               1082,
    249.               1116,
    250.               1039,
    251.               1132,
    252.               1227
    253.             ],
    254.             "data-days": [
    255.               "Sept 19",
    256.               "Sept 20",
    257.               "Sept 21",
    258.               "Sept 22",
    259.               "Sept 23",
    260.               "Sept 24",
    261.               "Sept 25",
    262.               "Sept 26",
    263.               "Sept 27",
    264.               "Sept 28",
    265.               "Sept 29",
    266.               "Sept 30"
    267.             ],
    268.             "line-color": "#8da0cb",
    269.             "background-color": "#8da0cb",
    270.             "aspect": "spline",
    271.             "alpha-area": "0.2",
    272.             "text": "visitors",
    273.             "font-family": "Roboto",
    274.             "font-size": "14px"
    275.           }
    276.         ]
    277.       }]
    278.     };
    279.  
    280.     zingchart.render({
    281.       id: 'myChart',
    282.       data: myConfig,
    283.       height: '100%',
    284.       width: '100%'
    285.     });
    286.   </script>
    287. </body>
    288.  
    289. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
    9.  
    10.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    11. </head>
    12.  
    13. <body>
    14.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   width: 100%;
    5.   height: 100%;
    6. }
    7.  
    8. .zc-ref {
    9.   display: none;
    10. }
    1. var myConfig = {
    2.   "globals": {
    3.     "font-family": "Roboto"
    4.   },
    5.   "graphset": [{
    6.     "type": "area",
    7.     "background-color": "#fff",
    8.     "utc": true,
    9.     "title": {
    10.       "y": "15px",
    11.       "text": "Website Traffic Metrics",
    12.       "background-color": "none",
    13.       "font-color": "#05636c",
    14.       "font-size": "24px",
    15.       "height": "25px",
    16.       "adjust-layout": true
    17.     },
    18.     "plotarea": {
    19.       "margin-top": "10%",
    20.       "margin-right": "dynamic",
    21.       "margin-bottom": "dynamic",
    22.       "margin-left": "dynamic",
    23.       "adjust-layout": true
    24.     },
    25.     "labels": [{
    26.         "text": "Visitors: %plot-2-value",
    27.         "default-value": "",
    28.         "color": "#8da0cb",
    29.         "x": "20%",
    30.         "y": 50,
    31.         "width": 120,
    32.         "text-align": "left",
    33.         "bold": 0,
    34.         "font-size": "14px",
    35.         "font-weight": "bold"
    36.       },
    37.       {
    38.         "text": "Clicks: %plot-1-value",
    39.         "default-value": "",
    40.         "color": "#66c2a5",
    41.         "x": "45%",
    42.         "y": 50,
    43.         "width": 120,
    44.         "text-align": "left",
    45.         "bold": 0,
    46.         "font-size": "14px",
    47.         "font-weight": "bold"
    48.       },
    49.       {
    50.         "text": "Returns: %plot-0-value",
    51.         "default-value": "",
    52.         "color": "#fc8d62",
    53.         "x": "70%",
    54.         "y": 50,
    55.         "width": 120,
    56.         "text-align": "left",
    57.         "bold": 0,
    58.         "font-size": "14px",
    59.         "font-weight": "bold"
    60.       }
    61.     ],
    62.     "scale-x": {
    63.       "label": {
    64.         "text": "Date Range",
    65.         "font-size": "14px",
    66.         "font-weight": "normal",
    67.         "offset-x": "10%",
    68.         "font-angle": 360
    69.       },
    70.       "item": {
    71.         "text-align": "center",
    72.         "font-color": "#05636c"
    73.       },
    74.       "zooming": 1,
    75.       "max-labels": 12,
    76.       "labels": [
    77.         "Sept<br>19",
    78.         "Sept<br>20",
    79.         "Sept<br>21",
    80.         "Sept<br>22",
    81.         "Sept<br>23",
    82.         "Sept<br>24",
    83.         "Sept<br>25",
    84.         "Sept<br>26",
    85.         "Sept<br>27",
    86.         "Sept<br>28",
    87.         "Sept<br>29",
    88.         "Sept<br>30"
    89.       ],
    90.       "max-items": 12,
    91.       "items-overlap": true,
    92.       "guide": {
    93.         "line-width": "0px"
    94.       },
    95.       "tick": {
    96.         "line-width": "2px"
    97.       },
    98.     },
    99.     "crosshair-x": {
    100.       "line-color": "#fff",
    101.       "line-width": 1,
    102.       "plot-label": {
    103.         "visible": false
    104.       }
    105.     },
    106.     "scale-y": {
    107.       "values": "0:2500:500",
    108.       "item": {
    109.         "font-color": "#05636c",
    110.         "font-weight": "normal"
    111.       },
    112.       "label": {
    113.         "text": "Metrics",
    114.         "font-size": "14px"
    115.       },
    116.       "guide": {
    117.         "line-width": "0px",
    118.         "alpha": 0.2,
    119.         "line-style": "dashed"
    120.       }
    121.     },
    122.     "plot": {
    123.       "line-width": 2,
    124.       "marker": {
    125.         "size": 1,
    126.         "visible": false
    127.       },
    128.       "tooltip": {
    129.         "font-family": "Roboto",
    130.         "font-size": "15px",
    131.         "text": "There were %v %t on %data-days",
    132.         "text-align": "left",
    133.         "border-radius": 5,
    134.         "padding": 10
    135.       }
    136.     },
    137.     "series": [{
    138.         "values": [
    139.           1204,
    140.           1179,
    141.           1146,
    142.           1182,
    143.           1058,
    144.           1086,
    145.           1141,
    146.           1105,
    147.           1202,
    148.           992,
    149.           373,
    150.           466
    151.         ],
    152.         "data-days": [
    153.           "Sept 19",
    154.           "Sept 20",
    155.           "Sept 21",
    156.           "Sept 22",
    157.           "Sept 23",
    158.           "Sept 24",
    159.           "Sept 25",
    160.           "Sept 26",
    161.           "Sept 27",
    162.           "Sept 28",
    163.           "Sept 29",
    164.           "Sept 30"
    165.         ],
    166.         "line-color": "#fc8d62",
    167.         "aspect": "spline",
    168.         "background-color": "#fc8d62",
    169.         "alpha-area": ".5",
    170.         "font-family": "Roboto",
    171.         "font-size": "14px",
    172.         "text": "returns"
    173.       },
    174.       {
    175.         "values": [
    176.           1625,
    177.           1683,
    178.           1659,
    179.           1761,
    180.           1904,
    181.           1819,
    182.           1631,
    183.           1592,
    184.           1498,
    185.           1594,
    186.           1782,
    187.           1644
    188.         ],
    189.         "data-days": [
    190.           "Sept 19",
    191.           "Sept 20",
    192.           "Sept 21",
    193.           "Sept 22",
    194.           "Sept 23",
    195.           "Sept 24",
    196.           "Sept 25",
    197.           "Sept 26",
    198.           "Sept 27",
    199.           "Sept 28",
    200.           "Sept 29",
    201.           "Sept 30"
    202.         ],
    203.         "line-color": "#66c2a5",
    204.         "background-color": "#66c2a5",
    205.         "alpha-area": ".3",
    206.         "text": "clicks",
    207.         "aspect": "spline",
    208.         "font-family": "Roboto",
    209.         "font-size": "14px"
    210.       },
    211.       {
    212.         "values": [
    213.           314,
    214.           1395,
    215.           1292,
    216.           1259,
    217.           1269,
    218.           1132,
    219.           1012,
    220.           1082,
    221.           1116,
    222.           1039,
    223.           1132,
    224.           1227
    225.         ],
    226.         "data-days": [
    227.           "Sept 19",
    228.           "Sept 20",
    229.           "Sept 21",
    230.           "Sept 22",
    231.           "Sept 23",
    232.           "Sept 24",
    233.           "Sept 25",
    234.           "Sept 26",
    235.           "Sept 27",
    236.           "Sept 28",
    237.           "Sept 29",
    238.           "Sept 30"
    239.         ],
    240.         "line-color": "#8da0cb",
    241.         "background-color": "#8da0cb",
    242.         "aspect": "spline",
    243.         "alpha-area": "0.2",
    244.         "text": "visitors",
    245.         "font-family": "Roboto",
    246.         "font-size": "14px"
    247.       }
    248.     ]
    249.   }]
    250. };
    251.  
    252. zingchart.render({
    253.   id: 'myChart',
    254.   data: myConfig,
    255.   height: '100%',
    256.   width: '100%'
    257. });