pruebas librería chart.js
by Yolanda Robles
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
<div style="width:100%">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
JavaScript
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
//http://www.chartjs.org/samples/latest/charts/radar.html
var color = Chart.helpers.color;
var config = {
type: 'radar',
data: {
labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
backgroundColor: "#145859",
borderColor: "#000",
width:"800px",
//pointBackgroundColor:"#333",
data: [
37,
89,
15,
10,
20,
1,
15
]
}, {
label: "My Second dataset",
backgroundColor: "red",
borderColor: "red",
pointBackgroundColor: "#fff",
data: [
7,
37,
64,
87,
35,
1,
15
]
},]
},
options: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Radar Chart'
},
scale: {
ticks: {
beginAtZero: true
}
}
}
};
window.onload = function() {
alert("hola");
window.myRadar = new Chart(document.getElementById("canvas"), config);
alert(window.myRadar);
};
document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return...