You need to have a easy a quick chart for your website.
Here there is a free JS library, fast, light and easy to use.
It can cover the most common needs, it is free and it is very easy to use and also well documented.
It is missing just the legend: there is no legend you can add...
But actually I found on internet a fix for it.
In particular there is:
I used it for my website as well. Here a short tutorial.
In order to explain my language skills, I have used a bit of iconographic and this is the result
I choose the following chart and then I have included the correspondent legend.
You need first of all Chart.js, you can find it here:
Then you need to add the JS file for the legend. You can find it here:
I think that the code of the legend is amazing because (currently) it is just that:
function legend(parent, data) {
parent.className = 'legend';
var datas = data.hasOwnProperty('datasets') ? data.datasets : data;
datas.forEach(function(d) {
var title = document.createElement('span');
title.className = 'title';
title.style.borderColor = d.hasOwnProperty('strokeColor') ? d.strokeColor : d.color;
title.style.borderStyle = 'solid';
parent.appendChild(title);
var text = document.createTextNode(d.title);
title.appendChild(text);
});
}
Well now, into the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
[...]
</head>
<body>
[...]
<div class="row featurette">
<div class="col-md-7">
<div class="text_container">
<h2 class="featurette-heading">Language Skills<span class="text-muted"> - A mean of trasfer</span></h2>
<p class="lead">
To travel, to meet new culture, to understand the other point of view, to be sure that the message you drop is perceived in the proper way. Comunication is an amazing science.
<br>"Take advantage of every opportunity to practice your communication skills so that when important occasions arise, you will have the gift, the style, the sharpness, the clarity, and the emotions to affect other people." Jim Rohn</p>
<div class="legend" id="lang_legend"></div>
</div>
</div>
<div class="col-md-5">
<canvas id="lang_canvas" class="chart" width="600" height="450"></canvas>
</div>
</div>
[...]
<script src="js/Chart.js"></script>
<script src="js/legend.js"></script>
<script>
[...]
var chartData = [
{
value : 0.99999,
color : "#00FF00",
title : 'Italian - Native'
},
{
value : 0.95,
color : "#FF0000",
title : 'English - Fluent'
},
{
value : 0.9,
color : "#000000",
title : 'German - Fluent'
},
{
value : 0.7,
color : "#0000FF",
title : 'French - Good'
},
{
value : 0.4999,
color : "#FFFF00",
title : 'Spanish - Basics'
}
];
var myPolarArea = new Chart(document.getElementById("lang_canvas").getContext("2d")).PolarArea(chartData);
legend(document.getElementById("lang_legend"), chartData);
</script>
</body>
</html>
Please, note that I did not use fix numbers for the extreme values.
I mean that I did not give to english a value of 1 or to spanish a value of 0.5.
I think I found a small bug: giving such values, the library did not work properly (it was hiding spanish) and it was having such problem not only with such chart but also with other.
Anyway, not a big issue ;)
Globally the libraries are both very good!!!!
