• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style>
    11.     html,
    12.     body {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.  
    17.     #myChart {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 150px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    31.   <script>
    32.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    33.     var myConfig = {
    34.       "graphset": [{
    35.         "type": "bar",
    36.         "background-color": "white",
    37.         "title": {
    38.           "text": "Tech Giant Quarterly Revenue",
    39.           "font-color": "#7E7E7E",
    40.           "backgroundColor": "none",
    41.           "font-size": "22px",
    42.           "alpha": 1,
    43.           "adjust-layout": true,
    44.         },
    45.         "plotarea": {
    46.           "margin": "dynamic"
    47.         },
    48.         "legend": {
    49.           "layout": "x3",
    50.           "overflow": "page",
    51.           "alpha": 0.05,
    52.           "shadow": false,
    53.           "align": "center",
    54.           "adjust-layout": true,
    55.           "marker": {
    56.             "type": "circle",
    57.             "border-color": "none",
    58.             "size": "10px"
    59.           },
    60.           "border-width": 0,
    61.           "maxItems": 3,
    62.           "toggle-action": "hide",
    63.           "pageOn": {
    64.             "backgroundColor": "#000",
    65.             "size": "10px",
    66.             "alpha": 0.65
    67.           },
    68.           "pageOff": {
    69.             "backgroundColor": "#7E7E7E",
    70.             "size": "10px",
    71.             "alpha": 0.65
    72.           },
    73.           "pageStatus": {
    74.             "color": "black"
    75.           }
    76.         },
    77.         "plot": {
    78.           "bars-space-left": 0.15,
    79.           "bars-space-right": 0.15,
    80.           "animation": {
    81.             "effect": "ANIMATION_SLIDE_BOTTOM",
    82.             "sequence": 0,
    83.             "speed": 800,
    84.             "delay": 800
    85.           }
    86.         },
    87.         "scale-y": {
    88.           "line-color": "#7E7E7E",
    89.           "item": {
    90.             "font-color": "#7e7e7e"
    91.           },
    92.           "values": "0:60:10",
    93.           "guide": {
    94.             "visible": true
    95.           },
    96.           "label": {
    97.             "text": "$ Billions",
    98.             "font-family": "arial",
    99.             "bold": true,
    100.             "font-size": "14px",
    101.             "font-color": "#7E7E7E",
    102.           },
    103.         },
    104.         "scaleX": {
    105.           "values": [
    106.             "Q3",
    107.             "Q4",
    108.             "Q1",
    109.             "Q2"
    110.           ],
    111.           "placement": "default",
    112.           "tick": {
    113.             "size": 58,
    114.             "placement": "cross"
    115.           },
    116.           "itemsOverlap": true,
    117.           "item": {
    118.             "offsetY": -55
    119.           }
    120.         },
    121.         "scaleX2": {
    122.           "values": ["2013", "2014"],
    123.           "placement": "default",
    124.           "tick": {
    125.             "size": 20,
    126.           },
    127.           "item": {
    128.             "offsetY": -15
    129.           }
    130.         },
    131.         "tooltip": {
    132.           "visible": false
    133.         },
    134.         "crosshair-x": {
    135.           "line-width": "100%",
    136.           "alpha": 0.18,
    137.           "plot-label": {
    138.             "header-text": "%kv Sales"
    139.           }
    140.         },
    141.         "series": [{
    142.             "values": [
    143.               37.47,
    144.               57.59,
    145.               45.65,
    146.               37.43
    147.             ],
    148.             "alpha": 0.95,
    149.             "borderRadiusTopLeft": 7,
    150.             "background-color": "purple",
    151.             "text": "Apple",
    152.           },
    153.           {
    154.             "values": [
    155.               2.02,
    156.               2.59,
    157.               2.5,
    158.               2.91
    159.             ],
    160.             "borderRadiusTopLeft": 7,
    161.             "alpha": 0.95,
    162.             "background-color": "orange",
    163.             "text": "Facebook"
    164.           },
    165.           {
    166.             "values": [
    167.               13.4,
    168.               14.11,
    169.               14.89,
    170.               16.86
    171.             ],
    172.             "alpha": 0.95,
    173.             "borderRadiusTopLeft": 7,
    174.             "background-color": "teal",
    175.             "text": "Google"
    176.           },
    177.           {
    178.             "values": [
    179.               18.53,
    180.               24.52,
    181.               20.4,
    182.               23.38
    183.             ],
    184.             "borderRadiusTopLeft": 7,
    185.             "alpha": 0.95,
    186.             "background-color": "red",
    187.             "text": "Microsoft"
    188.           },
    189.           {
    190.             "values": [
    191.               17.09,
    192.               25.59,
    193.               19.74,
    194.               19.34
    195.             ],
    196.             "borderRadiusTopLeft": 7,
    197.             "alpha": 0.95,
    198.             "background-color": "blue",
    199.             "text": "Amazon"
    200.           },
    201.           {
    202.             "values": [
    203.               2.31,
    204.               2.36,
    205.               2.42,
    206.               2.52
    207.             ],
    208.             "borderRadiusTopLeft": 7,
    209.             "alpha": 0.95,
    210.             "background-color": "green",
    211.             "text": "Cognizant"
    212.           }
    213.         ]
    214.       }]
    215.     };
    216.  
    217.     zingchart.render({
    218.       id: 'myChart',
    219.       data: myConfig,
    220.       height: '100%',
    221.       width: '100%'
    222.     });
    223.   </script>
    224. </body>
    225.  
    226. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    14. </body>
    15.  
    16. </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.   "graphset": [{
    3.     "type": "bar",
    4.     "background-color": "white",
    5.     "title": {
    6.       "text": "Tech Giant Quarterly Revenue",
    7.       "font-color": "#7E7E7E",
    8.       "backgroundColor": "none",
    9.       "font-size": "22px",
    10.       "alpha": 1,
    11.       "adjust-layout": true,
    12.     },
    13.     "plotarea": {
    14.       "margin": "dynamic"
    15.     },
    16.     "legend": {
    17.       "layout": "x3",
    18.       "overflow": "page",
    19.       "alpha": 0.05,
    20.       "shadow": false,
    21.       "align": "center",
    22.       "adjust-layout": true,
    23.       "marker": {
    24.         "type": "circle",
    25.         "border-color": "none",
    26.         "size": "10px"
    27.       },
    28.       "border-width": 0,
    29.       "maxItems": 3,
    30.       "toggle-action": "hide",
    31.       "pageOn": {
    32.         "backgroundColor": "#000",
    33.         "size": "10px",
    34.         "alpha": 0.65
    35.       },
    36.       "pageOff": {
    37.         "backgroundColor": "#7E7E7E",
    38.         "size": "10px",
    39.         "alpha": 0.65
    40.       },
    41.       "pageStatus": {
    42.         "color": "black"
    43.       }
    44.     },
    45.     "plot": {
    46.       "bars-space-left": 0.15,
    47.       "bars-space-right": 0.15,
    48.       "animation": {
    49.         "effect": "ANIMATION_SLIDE_BOTTOM",
    50.         "sequence": 0,
    51.         "speed": 800,
    52.         "delay": 800
    53.       }
    54.     },
    55.     "scale-y": {
    56.       "line-color": "#7E7E7E",
    57.       "item": {
    58.         "font-color": "#7e7e7e"
    59.       },
    60.       "values": "0:60:10",
    61.       "guide": {
    62.         "visible": true
    63.       },
    64.       "label": {
    65.         "text": "$ Billions",
    66.         "font-family": "arial",
    67.         "bold": true,
    68.         "font-size": "14px",
    69.         "font-color": "#7E7E7E",
    70.       },
    71.     },
    72.     "scaleX": {
    73.       "values": [
    74.         "Q3",
    75.         "Q4",
    76.         "Q1",
    77.         "Q2"
    78.       ],
    79.       "placement": "default",
    80.       "tick": {
    81.         "size": 58,
    82.         "placement": "cross"
    83.       },
    84.       "itemsOverlap": true,
    85.       "item": {
    86.         "offsetY": -55
    87.       }
    88.     },
    89.     "scaleX2": {
    90.       "values": ["2013", "2014"],
    91.       "placement": "default",
    92.       "tick": {
    93.         "size": 20,
    94.       },
    95.       "item": {
    96.         "offsetY": -15
    97.       }
    98.     },
    99.     "tooltip": {
    100.       "visible": false
    101.     },
    102.     "crosshair-x": {
    103.       "line-width": "100%",
    104.       "alpha": 0.18,
    105.       "plot-label": {
    106.         "header-text": "%kv Sales"
    107.       }
    108.     },
    109.     "series": [{
    110.         "values": [
    111.           37.47,
    112.           57.59,
    113.           45.65,
    114.           37.43
    115.         ],
    116.         "alpha": 0.95,
    117.         "borderRadiusTopLeft": 7,
    118.         "background-color": "purple",
    119.         "text": "Apple",
    120.       },
    121.       {
    122.         "values": [
    123.           2.02,
    124.           2.59,
    125.           2.5,
    126.           2.91
    127.         ],
    128.         "borderRadiusTopLeft": 7,
    129.         "alpha": 0.95,
    130.         "background-color": "orange",
    131.         "text": "Facebook"
    132.       },
    133.       {
    134.         "values": [
    135.           13.4,
    136.           14.11,
    137.           14.89,
    138.           16.86
    139.         ],
    140.         "alpha": 0.95,
    141.         "borderRadiusTopLeft": 7,
    142.         "background-color": "teal",
    143.         "text": "Google"
    144.       },
    145.       {
    146.         "values": [
    147.           18.53,
    148.           24.52,
    149.           20.4,
    150.           23.38
    151.         ],
    152.         "borderRadiusTopLeft": 7,
    153.         "alpha": 0.95,
    154.         "background-color": "red",
    155.         "text": "Microsoft"
    156.       },
    157.       {
    158.         "values": [
    159.           17.09,
    160.           25.59,
    161.           19.74,
    162.           19.34
    163.         ],
    164.         "borderRadiusTopLeft": 7,
    165.         "alpha": 0.95,
    166.         "background-color": "blue",
    167.         "text": "Amazon"
    168.       },
    169.       {
    170.         "values": [
    171.           2.31,
    172.           2.36,
    173.           2.42,
    174.           2.52
    175.         ],
    176.         "borderRadiusTopLeft": 7,
    177.         "alpha": 0.95,
    178.         "background-color": "green",
    179.         "text": "Cognizant"
    180.       }
    181.     ]
    182.   }]
    183. };
    184.  
    185. zingchart.render({
    186.   id: 'myChart',
    187.   data: myConfig,
    188.   height: '100%',
    189.   width: '100%'
    190. });