|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Alternative library</title> |
|
<script src="http://cdn.zingchart.com/zingchart.min.js"></script> |
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
|
<script type="text/javascript"> |
|
var chartData={ |
|
"type": "line", |
|
"backgroundColor":"rgba(224,225,229,0.4)", |
|
"hoverMode":"node", |
|
"title":{ |
|
"text": "Children mortality in South America since 2002", |
|
"fontFamily": "Verdana", |
|
"backgroundColor":"none", |
|
"fontSize": '18px', |
|
"fontWeight": 'bold', |
|
"color": '#5a5a5a', |
|
"position": "0% 0%", |
|
"margin-top": 10, |
|
"margin-right": 0, |
|
"margin-left": 0, |
|
"margin-bottom": 10 |
|
}, |
|
"source":{ |
|
"text":"", |
|
"bold":"false" |
|
}, |
|
"plot":{ |
|
"line-width":"0.6px", |
|
"marker":{ |
|
"size":4, |
|
"type":"circle", |
|
"border-color":"rgba(255,255,255,0.7)", |
|
"border-width":"1px" |
|
}, |
|
"hover-marker":{ |
|
"background-color":"rgba(255,255,255,0.5)" |
|
} |
|
}, |
|
"tooltip": { |
|
"htmlMode":false, |
|
"background-color": "rgba(224,225,229,0.8)", |
|
"fontFamily": "Verdana", |
|
"fontSize": "12px", |
|
"fontColor": "#000000", |
|
"fontWeight": "bold", |
|
"text" : "In this year, the infant mortality was %node-value", |
|
}, |
|
"legend":{ |
|
"adjustLayout": "1", |
|
"layout":"2x", |
|
"offset-y": "60px", |
|
"offset-x": "-50px", |
|
"border-width" : 0, |
|
"background-color": "rgba(224,225,229,0)", |
|
"fontFamily": "Verdana", |
|
}, |
|
"plotarea": { |
|
"width": '100%', |
|
"height": '100%', |
|
"position": "0% 0%", |
|
"margin": '150 20 0 70' |
|
}, |
|
"scale-x":{ |
|
"line-width":"0.5px", |
|
"tick":{ |
|
"size":"6px" |
|
}, |
|
"guide":{ |
|
"line-width": 0 |
|
}, |
|
"values":["2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013"], |
|
"items-overlap":true, |
|
"item":{ |
|
"auto-align":true |
|
} |
|
}, |
|
"scale-y":{ |
|
"tick":{ |
|
"size":"0px" |
|
}, |
|
"line-width":"0px", |
|
"label":{ |
|
"text":"Children mortality" |
|
}, |
|
"values": [0,10000,20000,30000,40000,50000,60000] |
|
}, |
|
"series": [ |
|
{ "values": [6245,6253,5780,5459,5405,5193,5238,5321,5169,5131,4966,4780], "text":"Argentina", "background-color":"#0099FF" }, |
|
{ "values": [11716,11249,10704,10074,9433,8735,8137,7615,7193,6930,6758,6641], "text":"Bolivia", "background-color":"#0099FF" }, |
|
{ "values": [54832,49618,46313,41297,38213,33548,29617,26744,23996,22632,21916,21428], "text":"Brazil", "background-color":"#0099FF" }, |
|
{ "values": [1315,1302,1266,1252,1163,1175,1129,1151,1118,1100,1066,1038], "text":"Chile", "background-color":"#0099FF" }, |
|
{ "values": [10425,10619,10981,10245,10238,10156,9576,9189,8943,8606,8255,7943], "text":"Colombia", "background-color":"#0099FF" }, |
|
{ "values": [5547,5312,5168,5042,4912,4754,4456,4322,4125,3983,3860,3787], "text":"Ecuador", "background-color":"#0099FF" }, |
|
{ "values": [2737,2603,2546,2518,2454,2367,2270,2217,2163,2125,2104,2073], "text":"Paraguay", "background-color":"#0099FF" }, |
|
{ "values": [11315,10543,9716,8983,8399,7788,7230,6735,6313,5868,5612,5286], "text":"Peru", "background-color":"#0099FF" }, |
|
{ "values": [456,445,399,394,376,362,361,368,354,344,332,316], "text":"Uruguay", "background-color":"#0099FF" }, |
|
{ "values": [6252,6319,6292,5979,5819,5736,5640,5513,5412,5312,5170,5033], "text":"Venezuela", "background-color":"#0099FF" } |
|
] |
|
}; |
|
window.onload=function(){ |
|
zingchart.render({ |
|
id:'chartDiv', |
|
height:"600", |
|
width:"600", |
|
data:chartData |
|
}); |
|
}; |
|
</script> |
|
</head> |
|
<body> |
|
|
|
<div id='chartDiv'></div> |
|
|
|
</body> |
|
</html> |
