• 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: {
            "font-family": "Roboto"
          },
          type: "bar",
          backgroundColor: "#f4f2f2",
          title: {
            text: "Revenue Comparison",
            "background-color": "none",
            color: "#333"
          },
          subtitle: {
            text: "Q1-Q4 2015",
            color: "#333"
          },
          plotarea: {
            "margin-top": 100,
            "margin-bottom": 30,
            "background-color": "#fff"
          },
          scaleX: {
            values: ["Q1", "Q2", "Q3", "Q4"],
            lineColor: "#7d7d7d",
            tick: {
              lineColor: "#7d7d7d"
            },
            guide: {
              visible: false
            },
            markers: [{
              type: "area",
              range: [1.5, 2.5],
              backgroundColor: "red",
              alpha: 0.2,
              label: {
                text: "Netflix reduces fee",
                angle: 0,
                "offset-x": 13,
                "offset-y": -210,
                color: "#7d7d7d"
              }
            }]
          },
          scaleY: {
            lineColor: "#7d7d7d",
            tick: {
              lineColor: "#7d7d7d"
            },
            format: "$%v",
            multiplier: true
          },
          legend: {
            borderRadius: "3px",
            borderColor: "none",
            backgroundColor: "none",
            layout: "h",
            verticalAlign: "bottom",
            align: "center",
            shadow: 0,
            marker: {
              borderRadius: "2px",
              borderColor: "none"
            }
          },
          tooltip: {
            borderRadius: "3px",
            borderColor: "#F4F2F2",
            borderWidth: 2,
            width: 90,
            callout: true,
            height: 50,
            fontSize: 12,
            shadowColor: "none",
            text: "%kt: $%v in %t Sales",
            short: true,
            "short-unit": "M",
            decimals: 1,
            rules: [{
              rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
              text: "%kt Projected: $%v in %t Sales",
              backgroundColor: "#7d7d7d"
            }]
          },
          plot: {
            alpha: 0.8,
            borderRadius: "3px",
            rules: [{
                rule: "%p === 0 && %i === 3",
                backgroundColor: "none",
                "line-style": "dashed",
                "border-color": "#447884",
                "border-width": 1
              },
              {
                rule: "%p === 1 && %i === 3",
                backgroundColor: "none",
                "line-style": "dashed",
                "border-color": "#ff9800",
                "border-width": 1
              },
            ]
          },
          labels: [{
              "text": "Adjust Projections",
              fontSize: 12,
              y: 4,
              x: 38
            },
            {
              text: "Internet:",
              y: 30,
              x: 20
            },
            {
              text: "Cable:",
              y: 60,
              x: 28
            },
            {
              id: "i10plus",
              text: "+10%",
              y: 30,
              x: 70,
              backgroundColor: "white",
              borderColor: "#7d7d7d",
              borderWidth: 1,
              borderRadius: 3,
              width: 35,
              hoverState: {
                backgroundColor: "#333",
                borderColor: "#fff",
                color: "#fff"
              }
            },
            {
              id: "i10minus",
              text: "-10%",
              y: 30,
              x: 110,
              backgroundColor: "white",
              borderColor: "#7d7d7d",
              borderWidth: 1,
              borderRadius: 3,
              width: 35,
              hoverState: {
                backgroundColor: "#333",
                borderColor: "#fff",
                color: "#fff"
              }
            },
            {
              id: "c10plus",
              text: "+10%",
              y: 60,
              x: 70,
              backgroundColor: "white",
              borderColor: "#7d7d7d",
              borderWidth: 1,
              borderRadius: 3,
              width: 35,
              hoverState: {
                backgroundColor: "#333",
                borderColor: "#fff",
                color: "#fff"
              }
            },
            {
              id: "c10minus",
              text: "-10%",
              y: 60,
              x: 110,
              backgroundColor: "white",
              borderColor: "#7d7d7d",
              borderWidth: 1,
              borderRadius: 3,
              width: 35,
              hoverState: {
                backgroundColor: "#333",
                borderColor: "#fff",
                color: "#fff"
              }
            }
          ],
          series: [{
              values: [3500000, 4200000, 6700000, 8900000],
              backgroundColor: "#447884 #69a3af",
              text: "Internet"
            },
            {
              values: [2800000, 4000000, 3900000, 3600000],
              backgroundColor: "#ff9800 #f2b157",
              text: "Cable"
            }
          ]
        }
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: 600,
          events: {
            label_click: function(p) {
              console.log('Hey there!');
            }
          }
        });
      </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: {
        "font-family": "Roboto"
      },
      type: "bar",
      backgroundColor: "#f4f2f2",
      title: {
        text: "Revenue Comparison",
        "background-color": "none",
        color: "#333"
      },
      subtitle: {
        text: "Q1-Q4 2015",
        color: "#333"
      },
      plotarea: {
        "margin-top": 100,
        "margin-bottom": 30,
        "background-color": "#fff"
      },
      scaleX: {
        values: ["Q1", "Q2", "Q3", "Q4"],
        lineColor: "#7d7d7d",
        tick: {
          lineColor: "#7d7d7d"
        },
        guide: {
          visible: false
        },
        markers: [{
          type: "area",
          range: [1.5, 2.5],
          backgroundColor: "red",
          alpha: 0.2,
          label: {
            text: "Netflix reduces fee",
            angle: 0,
            "offset-x": 13,
            "offset-y": -210,
            color: "#7d7d7d"
          }
        }]
      },
      scaleY: {
        lineColor: "#7d7d7d",
        tick: {
          lineColor: "#7d7d7d"
        },
        format: "$%v",
        multiplier: true
      },
      legend: {
        borderRadius: "3px",
        borderColor: "none",
        backgroundColor: "none",
        layout: "h",
        verticalAlign: "bottom",
        align: "center",
        shadow: 0,
        marker: {
          borderRadius: "2px",
          borderColor: "none"
        }
      },
      tooltip: {
        borderRadius: "3px",
        borderColor: "#F4F2F2",
        borderWidth: 2,
        width: 90,
        callout: true,
        height: 50,
        fontSize: 12,
        shadowColor: "none",
        text: "%kt: $%v in %t Sales",
        short: true,
        "short-unit": "M",
        decimals: 1,
        rules: [{
          rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
          text: "%kt Projected: $%v in %t Sales",
          backgroundColor: "#7d7d7d"
        }]
      },
      plot: {
        alpha: 0.8,
        borderRadius: "3px",
        rules: [{
            rule: "%p === 0 && %i === 3",
            backgroundColor: "none",
            "line-style": "dashed",
            "border-color": "#447884",
            "border-width": 1
          },
          {
            rule: "%p === 1 && %i === 3",
            backgroundColor: "none",
            "line-style": "dashed",
            "border-color": "#ff9800",
            "border-width": 1
          },
        ]
      },
      labels: [{
          "text": "Adjust Projections",
          fontSize: 12,
          y: 4,
          x: 38
        },
        {
          text: "Internet:",
          y: 30,
          x: 20
        },
        {
          text: "Cable:",
          y: 60,
          x: 28
        },
        {
          id: "i10plus",
          text: "+10%",
          y: 30,
          x: 70,
          backgroundColor: "white",
          borderColor: "#7d7d7d",
          borderWidth: 1,
          borderRadius: 3,
          width: 35,
          hoverState: {
            backgroundColor: "#333",
            borderColor: "#fff",
            color: "#fff"
          }
        },
        {
          id: "i10minus",
          text: "-10%",
          y: 30,
          x: 110,
          backgroundColor: "white",
          borderColor: "#7d7d7d",
          borderWidth: 1,
          borderRadius: 3,
          width: 35,
          hoverState: {
            backgroundColor: "#333",
            borderColor: "#fff",
            color: "#fff"
          }
        },
        {
          id: "c10plus",
          text: "+10%",
          y: 60,
          x: 70,
          backgroundColor: "white",
          borderColor: "#7d7d7d",
          borderWidth: 1,
          borderRadius: 3,
          width: 35,
          hoverState: {
            backgroundColor: "#333",
            borderColor: "#fff",
            color: "#fff"
          }
        },
        {
          id: "c10minus",
          text: "-10%",
          y: 60,
          x: 110,
          backgroundColor: "white",
          borderColor: "#7d7d7d",
          borderWidth: 1,
          borderRadius: 3,
          width: 35,
          hoverState: {
            backgroundColor: "#333",
            borderColor: "#fff",
            color: "#fff"
          }
        }
      ],
      series: [{
          values: [3500000, 4200000, 6700000, 8900000],
          backgroundColor: "#447884 #69a3af",
          text: "Internet"
        },
        {
          values: [2800000, 4000000, 3900000, 3600000],
          backgroundColor: "#ff9800 #f2b157",
          text: "Cable"
        }
      ]
    }
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 600,
      events: {
        label_click: function(p) {
          console.log('Hey there!');
        }
      }
    });