• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "graphset": [{
            "type": "bar",
            "background-color": "white",
            "title": {
              "text": "Tech Giant Quarterly Revenue",
              "font-color": "#7E7E7E",
              "backgroundColor": "none",
              "font-size": "22px",
              "alpha": 1,
              "adjust-layout": true,
            },
            "plotarea": {
              "margin": "dynamic"
            },
            "legend": {
              "layout": "x3",
              "overflow": "page",
              "alpha": 0.05,
              "shadow": false,
              "align": "center",
              "adjust-layout": true,
              "marker": {
                "type": "circle",
                "border-color": "none",
                "size": "10px"
              },
              "border-width": 0,
              "maxItems": 3,
              "toggle-action": "hide",
              "pageOn": {
                "backgroundColor": "#000",
                "size": "10px",
                "alpha": 0.65
              },
              "pageOff": {
                "backgroundColor": "#7E7E7E",
                "size": "10px",
                "alpha": 0.65
              },
              "pageStatus": {
                "color": "black"
              }
            },
            "plot": {
              "bars-space-left": 0.15,
              "bars-space-right": 0.15,
              "animation": {
                "effect": "ANIMATION_SLIDE_BOTTOM",
                "sequence": 0,
                "speed": 800,
                "delay": 800
              }
            },
            "scale-y": {
              "line-color": "#7E7E7E",
              "item": {
                "font-color": "#7e7e7e"
              },
              "values": "0:60:10",
              "guide": {
                "visible": true
              },
              "label": {
                "text": "$ Billions",
                "font-family": "arial",
                "bold": true,
                "font-size": "14px",
                "font-color": "#7E7E7E",
              },
            },
            "scaleX": {
              "values": [
                "Q3",
                "Q4",
                "Q1",
                "Q2"
              ],
              "placement": "default",
              "tick": {
                "size": 58,
                "placement": "cross"
              },
              "itemsOverlap": true,
              "item": {
                "offsetY": -55
              }
            },
            "scaleX2": {
              "values": ["2013", "2014"],
              "placement": "default",
              "tick": {
                "size": 20,
              },
              "item": {
                "offsetY": -15
              }
            },
            "tooltip": {
              "visible": false
            },
            "crosshair-x": {
              "line-width": "100%",
              "alpha": 0.18,
              "plot-label": {
                "header-text": "%kv Sales"
              }
            },
            "series": [{
                "values": [
                  37.47,
                  57.59,
                  45.65,
                  37.43
                ],
                "alpha": 0.95,
                "borderRadiusTopLeft": 7,
                "background-color": "purple",
                "text": "Apple",
              },
              {
                "values": [
                  2.02,
                  2.59,
                  2.5,
                  2.91
                ],
                "borderRadiusTopLeft": 7,
                "alpha": 0.95,
                "background-color": "orange",
                "text": "Facebook"
              },
              {
                "values": [
                  13.4,
                  14.11,
                  14.89,
                  16.86
                ],
                "alpha": 0.95,
                "borderRadiusTopLeft": 7,
                "background-color": "teal",
                "text": "Google"
              },
              {
                "values": [
                  18.53,
                  24.52,
                  20.4,
                  23.38
                ],
                "borderRadiusTopLeft": 7,
                "alpha": 0.95,
                "background-color": "red",
                "text": "Microsoft"
              },
              {
                "values": [
                  17.09,
                  25.59,
                  19.74,
                  19.34
                ],
                "borderRadiusTopLeft": 7,
                "alpha": 0.95,
                "background-color": "blue",
                "text": "Amazon"
              },
              {
                "values": [
                  2.31,
                  2.36,
                  2.42,
                  2.52
                ],
                "borderRadiusTopLeft": 7,
                "alpha": 0.95,
                "background-color": "green",
                "text": "Cognizant"
              }
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '100%',
          width: '100%'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var myConfig = {
      "graphset": [{
        "type": "bar",
        "background-color": "white",
        "title": {
          "text": "Tech Giant Quarterly Revenue",
          "font-color": "#7E7E7E",
          "backgroundColor": "none",
          "font-size": "22px",
          "alpha": 1,
          "adjust-layout": true,
        },
        "plotarea": {
          "margin": "dynamic"
        },
        "legend": {
          "layout": "x3",
          "overflow": "page",
          "alpha": 0.05,
          "shadow": false,
          "align": "center",
          "adjust-layout": true,
          "marker": {
            "type": "circle",
            "border-color": "none",
            "size": "10px"
          },
          "border-width": 0,
          "maxItems": 3,
          "toggle-action": "hide",
          "pageOn": {
            "backgroundColor": "#000",
            "size": "10px",
            "alpha": 0.65
          },
          "pageOff": {
            "backgroundColor": "#7E7E7E",
            "size": "10px",
            "alpha": 0.65
          },
          "pageStatus": {
            "color": "black"
          }
        },
        "plot": {
          "bars-space-left": 0.15,
          "bars-space-right": 0.15,
          "animation": {
            "effect": "ANIMATION_SLIDE_BOTTOM",
            "sequence": 0,
            "speed": 800,
            "delay": 800
          }
        },
        "scale-y": {
          "line-color": "#7E7E7E",
          "item": {
            "font-color": "#7e7e7e"
          },
          "values": "0:60:10",
          "guide": {
            "visible": true
          },
          "label": {
            "text": "$ Billions",
            "font-family": "arial",
            "bold": true,
            "font-size": "14px",
            "font-color": "#7E7E7E",
          },
        },
        "scaleX": {
          "values": [
            "Q3",
            "Q4",
            "Q1",
            "Q2"
          ],
          "placement": "default",
          "tick": {
            "size": 58,
            "placement": "cross"
          },
          "itemsOverlap": true,
          "item": {
            "offsetY": -55
          }
        },
        "scaleX2": {
          "values": ["2013", "2014"],
          "placement": "default",
          "tick": {
            "size": 20,
          },
          "item": {
            "offsetY": -15
          }
        },
        "tooltip": {
          "visible": false
        },
        "crosshair-x": {
          "line-width": "100%",
          "alpha": 0.18,
          "plot-label": {
            "header-text": "%kv Sales"
          }
        },
        "series": [{
            "values": [
              37.47,
              57.59,
              45.65,
              37.43
            ],
            "alpha": 0.95,
            "borderRadiusTopLeft": 7,
            "background-color": "purple",
            "text": "Apple",
          },
          {
            "values": [
              2.02,
              2.59,
              2.5,
              2.91
            ],
            "borderRadiusTopLeft": 7,
            "alpha": 0.95,
            "background-color": "orange",
            "text": "Facebook"
          },
          {
            "values": [
              13.4,
              14.11,
              14.89,
              16.86
            ],
            "alpha": 0.95,
            "borderRadiusTopLeft": 7,
            "background-color": "teal",
            "text": "Google"
          },
          {
            "values": [
              18.53,
              24.52,
              20.4,
              23.38
            ],
            "borderRadiusTopLeft": 7,
            "alpha": 0.95,
            "background-color": "red",
            "text": "Microsoft"
          },
          {
            "values": [
              17.09,
              25.59,
              19.74,
              19.34
            ],
            "borderRadiusTopLeft": 7,
            "alpha": 0.95,
            "background-color": "blue",
            "text": "Amazon"
          },
          {
            "values": [
              2.31,
              2.36,
              2.42,
              2.52
            ],
            "borderRadiusTopLeft": 7,
            "alpha": 0.95,
            "background-color": "green",
            "text": "Cognizant"
          }
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });