• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          globals: {
            fontFamily: "Roboto"
          },
          type: "bar",
          backgroundColor: "#f4f2f2",
          title: {
            text: "Revenue Comparison",
            backgroundColor: "none",
            color: "#333"
          },
          subtitle: {
            text: "Q1-Q4 2014",
            color: "#333"
          },
          plotarea: {
            backgroundColor: "#fff"
          },
          scaleX: {
            values: ["Q1", "Q2", "Q3", "Q4"]
          },
          scaleY: {
            format: "$%v",
            short: true
          },
          legend: {
            backgroundColor: "none",
            layout: "h",
            verticalAlign: "bottom",
            align: "center",
            borderRadius: "3px",
            shadow: false,
            borderWidth: 0,
            marker: {
              borderWidth: 0,
              borderRadius: "3px"
            }
          },
          tooltip: {
            callout: true,
            borderColor: "#F4F2F2",
            borderWidth: 2,
            borderRadius: "3px",
            shadow: false
          },
          plot: {
            alpha: 0.8,
            borderRadius: "3px"
          },
          series: [{
              "values": [3500000, 4200000, 6700000, 8900000],
              text: "Internet",
              backgroundColor: "#447884 #69a3af",
            },
            {
              "values": [2800000, 4000000, 3900000, 3600000],
              text: "Cable",
              backgroundColor: "#ff9800 #f2b157",
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: 600
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    var myConfig = {
      globals: {
        fontFamily: "Roboto"
      },
      type: "bar",
      backgroundColor: "#f4f2f2",
      title: {
        text: "Revenue Comparison",
        backgroundColor: "none",
        color: "#333"
      },
      subtitle: {
        text: "Q1-Q4 2014",
        color: "#333"
      },
      plotarea: {
        backgroundColor: "#fff"
      },
      scaleX: {
        values: ["Q1", "Q2", "Q3", "Q4"]
      },
      scaleY: {
        format: "$%v",
        short: true
      },
      legend: {
        backgroundColor: "none",
        layout: "h",
        verticalAlign: "bottom",
        align: "center",
        borderRadius: "3px",
        shadow: false,
        borderWidth: 0,
        marker: {
          borderWidth: 0,
          borderRadius: "3px"
        }
      },
      tooltip: {
        callout: true,
        borderColor: "#F4F2F2",
        borderWidth: 2,
        borderRadius: "3px",
        shadow: false
      },
      plot: {
        alpha: 0.8,
        borderRadius: "3px"
      },
      series: [{
          "values": [3500000, 4200000, 6700000, 8900000],
          text: "Internet",
          backgroundColor: "#447884 #69a3af",
        },
        {
          "values": [2800000, 4000000, 3900000, 3600000],
          text: "Cable",
          backgroundColor: "#ff9800 #f2b157",
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 600
    });