Graphing the "Best Javascript charting library" Google search
List of all charting libraries and the number of times they appear on the "Best javascript charting libraries" google search (results only from 2016). Showing only libraries with at least 4 hits.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
CSS
#chart {
width: 640px;
height: 480px;
border: 1px solid #DADADA;
background: white;
}
JavaScript
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: {
labels: ["Chart.JS", "D3.js", "Highcharts", "Chartist", "jqPlot", "Google Charts", "FusionCharts", "Dygraphs", "ZingChart", "N3-charts", "Flot"],
datasets: [{
label: '# of Votes',
data: [9, 8, 8, 7, 6, 5, 5, 5, 5, 4, 4],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
],
borderWidth: 2
}]
},
options: {
title: {
display: true,
fontSize: 16,
text: '"Best Javascript charting library" Google search'
},
legend: {
display: false
},
...