Zing Char - Ejemplo 1

Animated Horizontal Bar with Icons

by Manuel Gertrudix

HTML

<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
	<body>
		<h3>
    Ejemplo de Zinkchart
    </h3>
    <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
	</body>
</html>

CSS

.zc-ref {
  display: none;
}
h3 {
  text-align: center;
  font-size: 30px;
  font-family: Arial;
  font-style: bold;
}

JavaScript

var myConfig =         {
            "type":"hbar",
            "font-family":"Arial",
            "title":{
                "text":"Encuesta a usuarios",
                "font-family":"Arial",
                "background-color":"none",
                "font-color":"#A4A4A4",
                "font-size":"18px"
            },
            "labels":[
                {
                    "text":"DĂ­AS",
                    "font-size":"12px",
                    "font-color":"#9d9d9d",
                    "x":"11.5%",
                    "y":"10%"
                },
                {
                    "text":"CLIENTES",
                    "font-size":"12px",
                    "font-color":"#9d9d9d",
                    "x":"20%",
                    "y":"10%"
                },
                {
                    "text":"OBJ.",
                    "font-size":"12px",
                    "font-color":"#9d9d9d",
                    "x":"4%",
                    "y":"10%"
                }
            ],
            "arrows":[
              {
                "backgroundColor":"#CCCCCC",
                "direction":"bottom",
                "borderWidth": 0,
                "to":{
                  "x": "6%",
                  "y": "27%"
                },
                "from":{
                  "x": "6%",
                  "y": "79%"
                }
              }
            ],
            "shapes":[
              {
                "type":"circle",
                "x": 45,
                "y": 99,
                "backgroundColor": "white",
                "borderColor":"#6FA6DF",
                "borderWidth":3,
                "size": 14
              },
              {
                "type":"circle",
                "x": 40,
                "y": 95,
                "backgroundColor": "#6FA6DF",
                "size": 2
              },
               {
                "type":"circle",
                "x": 50,
                "y": 95,
               ...