Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Salve lista, senhores estou montando um dashboard e ele tem varios graficos com a seguinte estrutura:
try {
//Sales chart
var ctx = document.getElementById("sales-chart");
if (ctx) {
ctx.height = 150;
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
type: 'line',
defaultFontFamily: 'Poppins',
datasets: [{
label: "Foods",
data: [0, 30, 10, 120, 50, 63, 10],
backgroundColor: 'transparent',
borderColor: 'rgba(220,53,69,0.75)',
borderWidth: 3,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(220,53,69,0.75)',
}, {
label: "Electronics",
data: [0, 50, 40, 80, 40, 79, 120],
backgroundColor: 'transparent',
borderColor: 'rgba(40,167,69,0.75)',
borderWidth: 3,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(40,167,69,0.75)',
}]
},
options: {
responsive: true,
tooltips: {
mode: 'index',
titleFontSize: 12,
titleFontColor: '#000',
bodyFontColor: '#000',
backgroundColor: '#fff',
titleFontFamily: 'Poppins',
bodyFontFamily: 'Poppins',
cornerRadius: 3,
intersect: false,
},
legend: {
display: false,
labels: {
usePointStyle: true,
fontFamily: 'Poppins',
},
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: false,
labelString: 'Month'
},
ticks: {
fontFamily: "Poppins"
}
}],
yAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Value',
fontFamily: "Poppins"
},
ticks: {
fontFamily: "Poppins"
}
}]
},
title: {
display: false,
text: 'Normal Legend'
}
}
});
}
} catch (error) {
console.log(error);
}
Todos em um aquivo main.js eu chamo ele no html assim:
<div class="col-lg-6">
<div class="au-card m-b-30">
<div class="au-card-inner">
<h3 class="title-2 m-b-40">Comparativo Visitante/Membros</h3>
<canvas id="sales-chart"></canvas>
</div>
</div>
</div>
Meu problema e que estou usando um modelo ja pronto de dashboard e preciso setar dados neste grafico eu nao sei como fazer, vi na internet que eu preciso criar um arquivo json mas como faço para incorporar no js !Carregando comentários...