Enviar dados via php para preencher grafico JS !
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 !Discussão (1)
Carregando comentários...