Hello,
Iwanttodothis:
Thecodeforthepage:
var yLabels = {0: '', 4: 'Pessimo', 6: 'Trancamento', 8: 'Ruim', 14: 'Excelente', 12: 'Mobilidade Acadêmica', 10: 'Regular', 16: 'Sucesso', 2: 'Fracasso', 18: ''}
var lineChartData = {
labels: [, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, , , ,],
datasets: [{
data: [, , , , , , , , , , , , , , , , , , 6, , , , ],
pointBackgroundColor: '#00bfff',
borderColor: '#000',
borderWidth: 1,
fill: false,
pointRadius: 15,
pointHoverRadius: 15
},{
data: [, 10, 14, 10, 10, 10, 14, 10, 10, 10, 10, 14, 10, 8, 8, 8, 8, 6, 6, , , ,],
pointBackgroundColor: '#ffce56',
borderColor: '#000',
fill: false,
borderWidth: 1,
pointRadius: 5,
pointHoverRadius: 5
},{
data: [, , , , , , , , , , , , , , , , , , 6, , , 16, ],
pointBackgroundColor: '#008000',
borderColor: '#000',
borderWidth: 1,
fill: false,
borderDash: [10,5],
pointRadius: 5,
pointHoverRadius: 5
},{
data: [, , , , , , , , , , , , , , , , , , 6, , , 2, ],
pointBackgroundColor: '#8b0000',
borderColor: '#000',
borderWidth: 1,
fill: false,
borderDash: [10,5],
pointRadius: 5,
pointHoverRadius: 5
}]
}
var lineChartOptions = {
tooltips: {enabled: false},
hover: {mode: null},
elements: {line: {tension: 0}},
legend: {display: false},
scales: {
xAxes: [{gridLines: {display: true}}],
yAxes: [{
gridLines: {display: false},
ticks: {
min: 0,
max: 18,
callback: function(value, index, values) {
return yLabels[value];
}
}
}]
},
title: {display: true, text: 'Classificação do estudante ao longo dos semestres'}
}
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {type: 'line', data: lineChartData, options: lineChartOptions});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<canvas id="myChart"></canvas>