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