Я пытаюсь создать базовую систему входа в систему, в которой после входа в систему данные запрашиваются из базы данных SQL и должны отображаться в новом html-файле.
После входа в систему я отправляю новый файл с экспресс через sendFile () и запрашиваю базу данных. Как я могу использовать запрашиваемую информацию и отображать ее в своих диаграммах в файле chart.html?
Это даже правильный способ делать вещи?
app.get('/home', function(request, response) {
if (request.session.loggedin) {
response.setHeader('Content-Type', 'text/html');
connection.query("SELECT * FROM accounts",(err, result)=>{
if (err) {
console.log(err);
response.json({"error":true});
} else {
console.log(result);
response.json(result);
}
});
response.sendFile(path.join(__dirname+'/chart.html'));
} else {
response.send('Please login to view this page!');
}
//response.end();
});
Вот файл chart.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<!-- import plugin script -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>
<body>
<!-- line chart canvas element -->
<canvas id="buyers" width="600" height="400"></canvas>
<!-- pie chart canvas element -->
<canvas id="countries" width="600" height="400"></canvas>
<!-- bar chart canvas element -->
<canvas id="income" width="600" height="400"></canvas>
<script>
// line chart data
var buyerData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : [203,156,99,251,305,247]
}
]
}
// get line chart canvas
var buyers = document.getElementById('buyers').getContext('2d');
// draw line chart
new Chart(buyers).Line(buyerData);
// pie chart data
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// pie chart options
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
// get pie chart canvas
var countries= document.getElementById("countries").getContext("2d");
// draw pie chart
new Chart(countries).Pie(pieData, pieOptions);
// bar chart data
var barData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "#48A497",
strokeColor : "#48A4D1",
data : [456,479,324,569,702,600]
},
{
fillColor : "rgba(73,188,170,0.4)",
strokeColor : "rgba(72,174,209,0.4)",
data : [364,504,605,400,345,320]
}
]
}
// get bar chart canvas
var income = document.getElementById("income").getContext("2d");
// draw bar chart
new Chart(income).Bar(barData);
</script>
</body>
</html>
Я просто скопировал его из примера и хочу вставить данные, которые я запрашивал ранее, в диаграммы.