57
Na verdade, quase isso. Embora já
se tenhaoelemento, serápreciso
FRQíJXUDU H LQIRUPDU RV GDGRV
quedevem ser apresentados.
Alémdisso, é importanteescolher
R IRUPDWRGRJU£íFRD VHU JHUDGR
Para isso, useum script
TXHYDL GHíQLU RV SDU¤PHWURV H
DWULEXWRV SDUDRJU£íFRGHVHMDGR
Inicialmente, serãodados
estáticos,mas é relativamente
simples criar dados dinâmicos
comPHPouASP.
Primeiro, seráabordada
a variável comos dados do
JU£íFR (ODHTXLYDOH¢V F«OXODV
selecionadas emumaplanilha
SDUDJHUDU XPJU£íFR 6HU£
chamadade lineChatData (ou
GDGRV SDUDXPJU£íFRGH OLQKDV
<script>
var lineChartData = {
...
}
</script>
3DUDSUHHQFKHU RJU£íFR
YDPRV GHíQLU DV OHJHQGDV ODEHOV
para cadaponto:
labels : ["Janeiro","Feve
reiro","Março","Abril","Ma
io","Junho","Julho"],
Depois os dados, que
recebem tambémparâmetros
como cor depreenchimento,
cor do "ponto" epor aí vai:
datasets : [
{
fillColor :
"rgba(220,220,220,0.5)",
strokeColor :
"rgba(220,220,220,1)",
pointColor :
"rgba(220,220,220,1)",
pointStrokeColor : "#fff",
}
$V FRUHV V¥RGHíQLGDV FRPR
rgba. Pode-seusar algum siteda
redeoumesmoumprograma
de imagemparaencontrar as
referências de cores nesse
formato. Este linkpode ser bem
útil:
.
Agora, só faltamos dados
que vão construir as linhas do
JU£íFR 8PD YDUL£YHO ÛGDWDÜ GHYH
VHU GHíQLGDQRFµGLJRDVVLP
data : [65,59,90,81,56,55,40]
O código completo:
var lineChartData = {
labels : ["January",
"February","March","April",
May","June","July"],
datasets : [
{
fillColor :
"rgba(220,220,220,0.5)",
strokeColor :
"rgba(220,220,220,1)",
pointColor :
"rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data :
[65,59,90,81,56,55,40]
}
]
}
Épossível gerarmais deuma
OLQKDQRPHVPRJU£íFR SDUD
comparaçãodedados. Basta
acrescentarmais dados.
var lineChartData = {
labels : ["January",
"February","March","April",
May","June","July"],
datasets : [
{
fillColor :
"rgba(220,220,220,0.5)",
strokeColor :
"rgba(220,220,220,1)",
pointColor :
"rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data :
[65,59,90,81,56,55,40]
},
{
fillColor :
"rgba(151,187,205,0.5)",
strokeColor :
"rgba(151,187,205,1)",
pointColor :
"rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data :
[28,48,40,19,96,27,100]
}
Háagoraduas linhas de
dados a seremapresentadas.
)DOWDDSHQDV LQVWDQFLDU RJU£íFRD
partir desses dados comaúltima
linhade código. Vejaabaixo:
var myLine = new
Chart(document.
getElementById("myChart").
getContext("2d")).
Line(lineChartData);
Noteque “myChart” éo
nomedoelemento criadopara
UHFHEHU RJU£íFR 3DUDGLIHUHQWHV
elementos namesmapágina, é
preciso criar nomes edados para
LGHQWLíF£ ORV 2FµGLJRDFLPD
pode ser visto funcionandoneste
link:
Variações
O componenteCharts.js
permite seis diferentes tipos de
JU£íFRV LQFOXVLYHR ÛWRUWDÜ ÛSLHÜ
XPJU£íFR VLPSOHV GHFRQVWUXLU
H FRGLíFDU 9HMD FRPRíFDULDR
FµGLJRSDUDXPJU£íFRGH WRUWD
criado comoCharts.js.
2HOHPHQWRJU£ëFR
<canvas id="torta"
height="450" width="450"></
canvas>
Eocódigoque
usaoCharts.js:
<script>
var pieData = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
];
var myPie = new
Chart(document.
getElementById("torta").
getContext("2d")).
Pie(pieData);
</script>
Observequeos dados de
valores serão considerados de
formaproporcional. A somade
todos os valores seráo total.
Cadaporcentagem será calculada
em tempo real. No casoacima,
UHSUHVHQWDR WRWDO
VHU£
apresentado como16,6%do
JU£íFR 2 UHVXOWDGRSRGH VHU YLVWR
neste link:
.
OCharts.js aindapermite
FULDU JU£íFRV HPEDUUDV UDGDU
polar e rosquinha. Estepequeno
arquivo js, commenos de5Kb,
éuma forma simples, rápida
HîH[¯YHO GHFRQVWUXLU JU£íFRV
online, sejamestáticos,
sejamem tempo real.
Acima, possibilidades
de gráficos, como
barras, radar, polar
e rosquinha
[
COMMENOSDE5KB,OCHARTS.JSÉUMAFORMASIMPLES, RÁPIDAE
FLEXÍVELDECONSTRUIRGRÁFICOSON-LINE, ESTÁTICOSOUDINÂMICOS
]
Sobreoautor
HomeroOttoniéprogramadore
sócio-proprietáriodaempresaMake
Mediadedesenvolvimentoweb.
LW
REVISTA LOCAWEB
