• 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></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        zingchart.THEME = 'classic';
        var myConfig = {
          "background-color": "#e5e5e5 #ccc",
          "type": "mixed",
          "title": {
            "text": "Sales Comparison 2011 vs 2012",
            "background-color": "#555"
          },
          "scale-x": {
            "values": [
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sept"
            ],
            "line-color": "#db0a0a",
            "line-width": "3px",
            "item": {
              "font-color": "#333"
            },
            "tick": {
              "line-color": "#db0a0a",
              "placement": "outer",
              "size": 8,
              "line-width": "3px"
            },
            "guide": {
              "visible": false
            }
          },
          "scale-x-2": {
            "values": [
              "MR 1",
              "MR 2",
              "MR 3",
              "MR 4",
              "MR 5",
              "MR 6",
              "MR 7",
              "MR 8",
              "MR 9",
              "MR 10",
              "MR 11",
              "MR 12"
            ],
            "line-color": "#07be07",
            "line-width": "3px",
            "tick": {
              "line-color": "#07be07",
              "placement": "outer",
              "size": 8,
              "line-width": "3px"
            },
            "items-overlap": true,
            "item": {
              "font-color": "#555"
            },
            "label": {
              "text": "Marketing Report",
              "font-color": "#333"
            },
            "guide": {
              "visible": true,
              "line-color": "#333"
            }
          },
          "scale-y": {
            "values": "0:100:20",
            "line-color": "#db0a0a",
            "line-width": "3px",
            "item": {
              "font-color": "#333",
              "padding": "5px"
            },
            "tick": {
              "line-color": "#db0a0a",
              "placement": "outer",
              "size": 8,
              "line-width": "3px"
            },
            "label": {
              "text": "Number of New Clients Acquired",
              "font-color": "#333",
              "offset-x": 8
            },
            "guide": {
              "visible": false
            }
          },
          "scale-y-2": {
            "values": "0:8000:2000",
            "line-color": "#07be07",
            "line-width": "3px",
            "multiplier": true,
            "tick": {
              "line-color": "#07be07",
              "placement": "outer",
              "size": 8,
              "line-width": "3px"
            },
            "item": {
              "font-color": "#333",
              "padding": "5px"
            },
            "label": {
              "text": "Marketing Dollars Spent",
              "font-color": "#333"
            },
            "guide": {
              "visible": true,
              "line-style": "solid",
              "line-color": "333"
            }
          },
          "plot": {
            "bars-overlap": "55%"
          },
          "plotarea": {
            "margin": "80px 60px 35px 60px"
          },
          "series": [{
              "values": [
                36,
                30,
                20,
                41,
                26,
                21
              ],
              "type": "bar",
              "text": "2011 Sales",
              "z-index": 1,
              "background-color": "#595959 #777",
              "tooltip": {
                "text": "Number of New Clients<br>Acquired In %k 2011<br>%v"
              },
              "hover-state": {
                "visible": 0
              }
            },
            {
              "values": [
                42,
                24,
                28,
                36,
                34,
                28
              ],
              "type": "bar",
              "text": "2012 Sales",
              "z-index": 2,
              "background-color": "#db0a0a #ed0909",
              "tooltip": {
                "text": "Number of New Clients<br>Acquired In %k 2012<br>%v"
              },
              "hover-state": {
                "visible": 0
              }
            },
            {
              "values": [
                4470,
                6300,
                4590,
                4500,
                5550,
                6500,
                4775,
                4950,
                4400,
                4100,
                4800,
                5100
              ],
              "type": "line",
              "text": "2012 Marketing",
              "z-index": 4,
              "line-color": "#07be07",
              "aspect": "spline",
              "scales": "scale-x-2, scale-y-2",
              "tooltip": {
                "text": "Marketing Dollars Spent<br>Per Report %k 2012<br>$%v"
              },
              "marker": {
                "size": 4,
                "background-color": "#07be07",
                "border-color": "fff",
                "border-width": "1px"
              }
            },
            {
              "values": [
                3650,
                4000,
                5150,
                5150,
                3800,
                6100,
                6800,
                4000,
                4030,
                3100,
                2090,
                4100
              ],
              "type": "line",
              "line-color": "#595959",
              "alpha": 0.5,
              "aspect": "spline",
              "scales": "scale-x-2, scale-y-2",
              "tooltip": {
                "text": "Marketing Dollars Spent<br>Per Report %k 2011<br>$%v"
              },
              "marker": {
                "size": 4,
                "background-color": "#595959",
                "border-width": "0px",
                "alpha": 0.5
              }
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          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'></div>
    </body>
    
    </html>
    
          
    zingchart.THEME = 'classic';
    var myConfig = {
      "background-color": "#e5e5e5 #ccc",
      "type": "mixed",
      "title": {
        "text": "Sales Comparison 2011 vs 2012",
        "background-color": "#555"
      },
      "scale-x": {
        "values": [
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sept"
        ],
        "line-color": "#db0a0a",
        "line-width": "3px",
        "item": {
          "font-color": "#333"
        },
        "tick": {
          "line-color": "#db0a0a",
          "placement": "outer",
          "size": 8,
          "line-width": "3px"
        },
        "guide": {
          "visible": false
        }
      },
      "scale-x-2": {
        "values": [
          "MR 1",
          "MR 2",
          "MR 3",
          "MR 4",
          "MR 5",
          "MR 6",
          "MR 7",
          "MR 8",
          "MR 9",
          "MR 10",
          "MR 11",
          "MR 12"
        ],
        "line-color": "#07be07",
        "line-width": "3px",
        "tick": {
          "line-color": "#07be07",
          "placement": "outer",
          "size": 8,
          "line-width": "3px"
        },
        "items-overlap": true,
        "item": {
          "font-color": "#555"
        },
        "label": {
          "text": "Marketing Report",
          "font-color": "#333"
        },
        "guide": {
          "visible": true,
          "line-color": "#333"
        }
      },
      "scale-y": {
        "values": "0:100:20",
        "line-color": "#db0a0a",
        "line-width": "3px",
        "item": {
          "font-color": "#333",
          "padding": "5px"
        },
        "tick": {
          "line-color": "#db0a0a",
          "placement": "outer",
          "size": 8,
          "line-width": "3px"
        },
        "label": {
          "text": "Number of New Clients Acquired",
          "font-color": "#333",
          "offset-x": 8
        },
        "guide": {
          "visible": false
        }
      },
      "scale-y-2": {
        "values": "0:8000:2000",
        "line-color": "#07be07",
        "line-width": "3px",
        "multiplier": true,
        "tick": {
          "line-color": "#07be07",
          "placement": "outer",
          "size": 8,
          "line-width": "3px"
        },
        "item": {
          "font-color": "#333",
          "padding": "5px"
        },
        "label": {
          "text": "Marketing Dollars Spent",
          "font-color": "#333"
        },
        "guide": {
          "visible": true,
          "line-style": "solid",
          "line-color": "333"
        }
      },
      "plot": {
        "bars-overlap": "55%"
      },
      "plotarea": {
        "margin": "80px 60px 35px 60px"
      },
      "series": [{
          "values": [
            36,
            30,
            20,
            41,
            26,
            21
          ],
          "type": "bar",
          "text": "2011 Sales",
          "z-index": 1,
          "background-color": "#595959 #777",
          "tooltip": {
            "text": "Number of New Clients<br>Acquired In %k 2011<br>%v"
          },
          "hover-state": {
            "visible": 0
          }
        },
        {
          "values": [
            42,
            24,
            28,
            36,
            34,
            28
          ],
          "type": "bar",
          "text": "2012 Sales",
          "z-index": 2,
          "background-color": "#db0a0a #ed0909",
          "tooltip": {
            "text": "Number of New Clients<br>Acquired In %k 2012<br>%v"
          },
          "hover-state": {
            "visible": 0
          }
        },
        {
          "values": [
            4470,
            6300,
            4590,
            4500,
            5550,
            6500,
            4775,
            4950,
            4400,
            4100,
            4800,
            5100
          ],
          "type": "line",
          "text": "2012 Marketing",
          "z-index": 4,
          "line-color": "#07be07",
          "aspect": "spline",
          "scales": "scale-x-2, scale-y-2",
          "tooltip": {
            "text": "Marketing Dollars Spent<br>Per Report %k 2012<br>$%v"
          },
          "marker": {
            "size": 4,
            "background-color": "#07be07",
            "border-color": "fff",
            "border-width": "1px"
          }
        },
        {
          "values": [
            3650,
            4000,
            5150,
            5150,
            3800,
            6100,
            6800,
            4000,
            4030,
            3100,
            2090,
            4100
          ],
          "type": "line",
          "line-color": "#595959",
          "alpha": 0.5,
          "aspect": "spline",
          "scales": "scale-x-2, scale-y-2",
          "tooltip": {
            "text": "Marketing Dollars Spent<br>Per Report %k 2011<br>$%v"
          },
          "marker": {
            "size": 4,
            "background-color": "#595959",
            "border-width": "0px",
            "alpha": 0.5
          }
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });