The first library that I choose was Chart.js. I liked it, but the documentation was not as good as Highcharts. Moreover, things like adding labels were really complicated. So I decided to move into Zingchart.
At the very beginning, working with Zingchart was tricky. It's not that different from Highcharts, but it required me to understand how to set up the chart. I feel that Highcharts is more flexible and intuitive, although, I must say, Iām more use now to this library, after working in this homework.
On the other hand, Highcharts documentation is friendlier, and quite intuitive, with its tree structure. Another postive aspect, It's pretty easy to find a lot of information about Highcharts through Google, specially in starckoverflow.
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>Alternative library</title>
<script src="https://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>
ā
Modified http://cdn.zingchart.com/zingchart.min.js to a secure url
https://cdn.zingchart.com/zingchart.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js