homepage amcharts
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/xy.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/gauge.js"></script>
<script src="http://www.amcharts.com/lib/3/funnel.js"></script>
JavaScript
var chartData = [{
"category": "Migración de Fibra Optica-Mapa V2",
"cancelado": 2,
"completado": 3,
"en_proceso": 4,
"proceso": [{
"category": "1) Aprobación de Cancelación de Casos",
"en_proceso": 3,
"caso": [{
"category": "Usuario: 1",
"no_casos": 1,
"tarea": []
}, {
"category": "Usuario: 2",
"no_casos": 2,
"tarea": []
}, {
"category": "Usuario: 3",
"no_casos": 3,
"tarea": []
}, {
"category": "Usuario: 4",
"no_casos": 4,
"tarea": []
}, {
"category": "Usuario: 5",
"no_casos": 5,
"tarea": []
}]
}]
}];
var chart = AmCharts.makeChart("chartdiv", {
"titles": [{
"text": "Procesos"
}],
"dataProvider" : chartData ,
"theme": "light",
"type": "serial",
"depth3D": 20,
"legend": {
"horizontalGap": 10,
"useGraphSettings": true,
"markerSize": 10
},
"fontFamily": "Lato",
"autoMargins": true,
"addClassNames": true,
"zoomOutText": "",
"fontSize": 10,
"valueAxes": [{
"axisAlpha": 0,
"gridAlpha": 0.1
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>Casos en Proceso</b><br><span style='font-size:14px'>[[en_proceso]]</span>",
"labelPosition":"middle",
"labelText": "Casos En Proceso : [[en_proceso]]",
"fillColors" : ["#5e8c40", "#84b761"],
"fillAlphas": 8.8,
"lineAlpha": 0,
"title": "En_proceso",
"type": "column",
"color": "#000000",
"valueField": "en_proceso"
},{
"balloonText": "<b>Casos Cancelados</b><br><span style='font-size:14px'>[[cancelado]]</span>",
"labelPosition":"middle",
"labelText": "Casos Cancelados : [[cancelado]]",
"fillColors" : ["#b39500", "#fdd400"],
"fillAlphas": 8.8,
"lineAlpha": 0,
...