• 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 = {
          "graphset": [{
              "type": "hbar",
              "height": "50%",
              "background-color": "#363b42",
              "border-color": "#111a21",
              "border-width": "2px",
              "title": {
                "margin-top": "10px",
                "margin-left": "20px",
                "text": "Company Performance",
                "background-color": "none",
                "shadow": 0,
                "text-align": "left",
                "font-size": "18px"
              },
              "scale-y": {
                "line-color": "none",
                "tick": {
                  "visible": false
                },
                "item": {
                  "visible": false
                },
                "guide": {
                  "visible": false
                }
              },
              "scale-x": {
                "values": [
                  "Puma",
                  "Converse",
                  "Adidas",
                  "Nike"
                ],
                "line-color": "none",
                "tick": {
                  "visible": false
                },
                "item": {
                  "width": 200,
                  "text-align": "left",
                  "offset-x": 210,
                  "color": "#fff"
                },
                "guide": {
                  "visible": false
                }
              },
              "plot": {
                "bars-overlap": "100%",
                "bar-width": "17px",
                "thousands-separator": ",",
                "animation": {
                  "effect": "ANIMATION_SLIDE_BOTTOM"
                }
              },
              "plotarea": {
                "margin": "50px 25px 20px 25px"
              },
              "series": [{
                  "values": [
                    103902,
                    112352,
                    121823,
                    154092
                  ],
                  "z-index": 2,
                  "styles": [{
                      "background-color": "#009016"
                    },
                    {
                      "background-color": "#017790"
                    },
                    {
                      "background-color": "#ee5b18"
                    },
                    {
                      "background-color": "#c94742"
                    }
                  ],
                  "tooltip": {
                    "shadow": false
                  },
                  "tooltip-text": "$%node-value",
                  "hover-state": {
                    "visible": false
                  }
                },
                {
                  "max-trackers": 0,
                  "values": [
                    300000,
                    300000,
                    300000,
                    300000
                  ],
                  "data-rvalues": [
                    103902,
                    112352,
                    121823,
                    154092
                  ],
                  "background-color": "#000",
                  "z-index": 1,
                  "value-box": {
                    "visible": true,
                    "offset-y": "-1px",
                    "offset-x": "3px",
                    "placement": "top-in",
                    "text-align": "right",
                    "font-color": "#fff",
                    "font-size": "10px",
                    "text": "$%data-rvalues"
                  }
                }
              ]
            },
            {
              "type": "line",
              "y": "50%",
              "height": "50%",
              "background-color": "#363b42",
              "border-color": "#111a21",
              "border-width": "2px",
              "legend": {
                "layout": "float",
                "width": "75%",
                "x": "25%",
                "background-color": "none",
                "shadow": 0,
                "margin": "auto auto 10 auto",
                "border-width": 0,
                "item": {
                  "font-color": "#eee",
                  "padding": "3px",
                  "font-size": "12px"
                },
                "marker": {
                  "show-line": "true",
                  "size": 4,
                  "line-width": 2
                }
              },
              "plot": {
                "tooltip": {
                  "visible": false
                },
                "animation": {
                  "effect": "ANIMATION_SLIDE_BOTTOM"
                },
                "tooltip-text": "Items Sold: %v"
              },
              "plotarea": {
                "margin": "20 30 75 55"
              },
              "scale-y": {
                "values": "0:100:25",
                "line-color": "none",
                "guide": {
                  "line-style": "solid",
                  "line-color": "#7d8285",
                  "line-width": "2px"
                },
                "tick": {
                  "visible": false
                },
                "item": {
                  "font-color": "#fff",
                  "font-size": "10px",
                  "padding-right": 5
                }
              },
              "scale-x": {
                "line-color": "#fff",
                "line-width": "1px",
                "values": [
                  "Jan",
                  "Feb",
                  "Mar",
                  "Apr",
                  "May",
                  "Jun",
                  "Jul",
                  "Aug",
                  "Sep",
                  "Oct",
                  "Nov",
                  "Dec"
                ],
                "tick": {
                  "line-color": "#fff",
                  "line-width": "1px"
                },
                "guide": {
                  "visible": false
                },
                "item": {
                  "font-color": "#FFFFFF",
                  "font-size": "10px",
                  "padding-top": 5
                }
              },
              "crosshair-x": {
                "scale-label": {
                  "font-color": "#000000"
                }
              },
              "series": [{
                  "values": [
                    25,
                    15,
                    26,
                    21,
                    24,
                    26,
                    33,
                    25,
                    15,
                    25,
                    22,
                    24
                  ],
                  "text": "Nike",
                  "line-color": "#c94742",
                  "line-width": "2px",
                  "shadow": 0,
                  "marker": {
                    "background-color": "#c94742",
                    "size": 3,
                    "border-width": 0,
                    "shadow": 0
                  },
                  "legend-marker": {
                    "type": "circle",
                    "size": 5,
                    "border-color": "#c94742"
                  },
                  "palette": 3
                },
                {
                  "values": [
                    42,
                    43,
                    30,
                    50,
                    31,
                    48,
                    55,
                    46,
                    48,
                    32,
                    50,
                    38
                  ],
                  "text": "Adidas",
                  "line-color": "#ee5b18",
                  "line-width": "2px",
                  "shadow": 0,
                  "marker": {
                    "background-color": "#ee5b18",
                    "size": 3,
                    "border-width": 0,
                    "shadow": 0
                  },
                  "legend-marker": {
                    "type": "circle",
                    "size": 5,
                    "border-color": "#ee5b18"
                  },
                  "palette": 2,
                  "visible": 1
                },
                {
                  "values": [
                    51,
                    53,
                    47,
                    60,
                    48,
                    52,
                    75,
                    52,
                    55,
                    47,
                    60,
                    48
                  ],
                  "text": "Converse",
                  "line-width": "2px",
                  "line-color": "#017790",
                  "shadow": 0,
                  "marker": {
                    "background-color": "#017790",
                    "size": 3,
                    "border-width": 0,
                    "shadow": 0
                  },
                  "legend-marker": {
                    "type": "circle",
                    "size": 5,
                    "border-color": "#017790"
                  },
                  "palette": 1,
                  "visible": 1
                },
                {
                  "values": [
                    69,
                    68,
                    54,
                    48,
                    70,
                    74,
                    98,
                    70,
                    72,
                    68,
                    49,
                    69
                  ],
                  "text": "Puma",
                  "line-color": "#009016",
                  "line-width": "2px",
                  "shadow": 0,
                  "marker": {
                    "background-color": "#009016",
                    "size": 3,
                    "border-width": 0,
                    "shadow": 0
                  },
                  "legend-marker": {
                    "type": "circle",
                    "size": 5,
                    "border-color": "#009016"
                  },
                  "palette": 0
                }
              ]
            }
          ]
        };
    
        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 = {
      "graphset": [{
          "type": "hbar",
          "height": "50%",
          "background-color": "#363b42",
          "border-color": "#111a21",
          "border-width": "2px",
          "title": {
            "margin-top": "10px",
            "margin-left": "20px",
            "text": "Company Performance",
            "background-color": "none",
            "shadow": 0,
            "text-align": "left",
            "font-size": "18px"
          },
          "scale-y": {
            "line-color": "none",
            "tick": {
              "visible": false
            },
            "item": {
              "visible": false
            },
            "guide": {
              "visible": false
            }
          },
          "scale-x": {
            "values": [
              "Puma",
              "Converse",
              "Adidas",
              "Nike"
            ],
            "line-color": "none",
            "tick": {
              "visible": false
            },
            "item": {
              "width": 200,
              "text-align": "left",
              "offset-x": 210,
              "color": "#fff"
            },
            "guide": {
              "visible": false
            }
          },
          "plot": {
            "bars-overlap": "100%",
            "bar-width": "17px",
            "thousands-separator": ",",
            "animation": {
              "effect": "ANIMATION_SLIDE_BOTTOM"
            }
          },
          "plotarea": {
            "margin": "50px 25px 20px 25px"
          },
          "series": [{
              "values": [
                103902,
                112352,
                121823,
                154092
              ],
              "z-index": 2,
              "styles": [{
                  "background-color": "#009016"
                },
                {
                  "background-color": "#017790"
                },
                {
                  "background-color": "#ee5b18"
                },
                {
                  "background-color": "#c94742"
                }
              ],
              "tooltip": {
                "shadow": false
              },
              "tooltip-text": "$%node-value",
              "hover-state": {
                "visible": false
              }
            },
            {
              "max-trackers": 0,
              "values": [
                300000,
                300000,
                300000,
                300000
              ],
              "data-rvalues": [
                103902,
                112352,
                121823,
                154092
              ],
              "background-color": "#000",
              "z-index": 1,
              "value-box": {
                "visible": true,
                "offset-y": "-1px",
                "offset-x": "3px",
                "placement": "top-in",
                "text-align": "right",
                "font-color": "#fff",
                "font-size": "10px",
                "text": "$%data-rvalues"
              }
            }
          ]
        },
        {
          "type": "line",
          "y": "50%",
          "height": "50%",
          "background-color": "#363b42",
          "border-color": "#111a21",
          "border-width": "2px",
          "legend": {
            "layout": "float",
            "width": "75%",
            "x": "25%",
            "background-color": "none",
            "shadow": 0,
            "margin": "auto auto 10 auto",
            "border-width": 0,
            "item": {
              "font-color": "#eee",
              "padding": "3px",
              "font-size": "12px"
            },
            "marker": {
              "show-line": "true",
              "size": 4,
              "line-width": 2
            }
          },
          "plot": {
            "tooltip": {
              "visible": false
            },
            "animation": {
              "effect": "ANIMATION_SLIDE_BOTTOM"
            },
            "tooltip-text": "Items Sold: %v"
          },
          "plotarea": {
            "margin": "20 30 75 55"
          },
          "scale-y": {
            "values": "0:100:25",
            "line-color": "none",
            "guide": {
              "line-style": "solid",
              "line-color": "#7d8285",
              "line-width": "2px"
            },
            "tick": {
              "visible": false
            },
            "item": {
              "font-color": "#fff",
              "font-size": "10px",
              "padding-right": 5
            }
          },
          "scale-x": {
            "line-color": "#fff",
            "line-width": "1px",
            "values": [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec"
            ],
            "tick": {
              "line-color": "#fff",
              "line-width": "1px"
            },
            "guide": {
              "visible": false
            },
            "item": {
              "font-color": "#FFFFFF",
              "font-size": "10px",
              "padding-top": 5
            }
          },
          "crosshair-x": {
            "scale-label": {
              "font-color": "#000000"
            }
          },
          "series": [{
              "values": [
                25,
                15,
                26,
                21,
                24,
                26,
                33,
                25,
                15,
                25,
                22,
                24
              ],
              "text": "Nike",
              "line-color": "#c94742",
              "line-width": "2px",
              "shadow": 0,
              "marker": {
                "background-color": "#c94742",
                "size": 3,
                "border-width": 0,
                "shadow": 0
              },
              "legend-marker": {
                "type": "circle",
                "size": 5,
                "border-color": "#c94742"
              },
              "palette": 3
            },
            {
              "values": [
                42,
                43,
                30,
                50,
                31,
                48,
                55,
                46,
                48,
                32,
                50,
                38
              ],
              "text": "Adidas",
              "line-color": "#ee5b18",
              "line-width": "2px",
              "shadow": 0,
              "marker": {
                "background-color": "#ee5b18",
                "size": 3,
                "border-width": 0,
                "shadow": 0
              },
              "legend-marker": {
                "type": "circle",
                "size": 5,
                "border-color": "#ee5b18"
              },
              "palette": 2,
              "visible": 1
            },
            {
              "values": [
                51,
                53,
                47,
                60,
                48,
                52,
                75,
                52,
                55,
                47,
                60,
                48
              ],
              "text": "Converse",
              "line-width": "2px",
              "line-color": "#017790",
              "shadow": 0,
              "marker": {
                "background-color": "#017790",
                "size": 3,
                "border-width": 0,
                "shadow": 0
              },
              "legend-marker": {
                "type": "circle",
                "size": 5,
                "border-color": "#017790"
              },
              "palette": 1,
              "visible": 1
            },
            {
              "values": [
                69,
                68,
                54,
                48,
                70,
                74,
                98,
                70,
                72,
                68,
                49,
                69
              ],
              "text": "Puma",
              "line-color": "#009016",
              "line-width": "2px",
              "shadow": 0,
              "marker": {
                "background-color": "#009016",
                "size": 3,
                "border-width": 0,
                "shadow": 0
              },
              "legend-marker": {
                "type": "circle",
                "size": 5,
                "border-color": "#009016"
              },
              "palette": 0
            }
          ]
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });