D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
curved line chart using Google chart API ( cantidad de noticias sobre: A, B y C )
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={ 'modules':[{ 'name':'visualization', 'version':'1', 'packages':['corechart'] }] }"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'fecha'); data.addColumn('number', 'Scioli'); data.addColumn('number', 'Macri'); data.addColumn('number', 'Massa'); data.addRows([ [new Date(2015,0,1),0,0.65, 0.65], [new Date(2015,0,2),0.69,1.72, 0.57], [new Date(2015,0,3),2.57,0.69, 0.34], [new Date(2015,0,4),3.81,0.87, 1.38], [new Date(2015,0,5),3.47,0.96, 0.96], [new Date(2015,0,6),3.62,1.55, 0.69], [new Date(2015,0,7),1.82,0.61, 0.49], [new Date(2015,0,8),1.87,0.66, 1.43], [new Date(2015,0,9),1.42,0.66, 0.95], [new Date(2015,0,10),3.19,1.45, 1.45], [new Date(2015,0,11),3.05,1.53, 2.83], [new Date(2015,0,12),1.24,1.31, 1.09], [new Date(2015,0,13),0.45,0.99, 0.36], [new Date(2015,0,14),1.5,1.25, 1.33], [new Date(2015,0,15),0.87,0.58, 0.68], [new Date(2015,0,16),0.46,1.72, 0.8], [new Date(2015,0,17),0.34,3.03, 0.34], [new Date(2015,0,18),0.72,1.95, 1.13], [new Date(2015,0,19),0.76,0.83, 0.68], [new Date(2015,0,20),0.65,1.14, 0.57], [new Date(2015,0,21),0.43,0.12, 0.24], [new Date(2015,0,22),0.59,0, 0.42], [new Date(2015,0,23),0.27,0.9, 0.72], [new Date(2015,0,24),0.37,0.22, 0.97], [new Date(2015,0,25),1.2,0, 0.22], [new Date(2015,0,26),0.6,0.86, 0.4], [new Date(2015,0,27),0.32,0.92, 0.32], [new Date(2015,0,28),0.43,0.94, 0.46], [new Date(2015,0,29),0.32,0.32, 0.69], [new Date(2015,0,30),0.28,0.15, 0.38], [new Date(2015,0,31),0.29,2.6, 0.16], [new Date(2015,1,1),0.45,2.28, 0.87], [new Date(2015,1,2),0.35,2.53, 0.68], [new Date(2015,1,3),0.93,1.99, 1.5], [new Date(2015,1,4),0.28,1.45, 0.41], [new Date(2015,1,5),0.47,0.64, 0.57], [new Date(2015,1,6),0.91,0.8, 0.41], [new Date(2015,1,7),0.62,0.89, 0.94], [new Date(2015,1,8),0.81,1.51, 1.23], [new Date(2015,1,9),0.43,1.13, 0.9], [new Date(2015,1,10),0.8,1.11, 1.7], [new Date(2015,1,11),0.72,0.94, 2.35], [new Date(2015,1,12),0.44,0.58, 0.73], [new Date(2015,1,13),0.62,0.42, 0.2], [new Date(2015,1,14),0.82,0.39, 0.17], [new Date(2015,1,15),0.58,0.6, 0.68], [new Date(2015,1,16),0.51,0.27, 0.46], [new Date(2015,1,17),0.21,0.37, 0.34], [new Date(2015,1,18),0.34,0.31, 0.48], [new Date(2015,1,19),0.43,1.09, 1.18], [new Date(2015,1,20),0.43,0.52, 0.84], [new Date(2015,1,21),0.65,2.32, 0.62], [new Date(2015,1,22),0.74,1.38, 1.48], [new Date(2015,1,23),0.81,1.92, 1.06], [new Date(2015,1,24),0.99,1.59, 0.79], [new Date(2015,1,25),0.62,1.45, 0.36], [new Date(2015,1,26),0.69,0.56, 1.14], [new Date(2015,1,27),0.75,0.46, 0.6] ]); var options = { title: 'Sciolli, Macri y Massa', curveType: 'function', vAxis: { ticks: [0,1,2,3] } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html>