I have a server.js page and it get datas from database. I want to use this datas in a HTML page. How can I get this datas.
I don't use Express but Hapi (because i'm happy lol).
This is my code :
<script>var ctx = document.getElementById('graph').getContext('2d');
var graph = new Chart(ctx, {
type: 'line',
data: {
labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
datasets: [{
label: 'CPU',
data: [22, 19, 25, 65, 30, 47, 14],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'RAM',
data: [31, 29, 31, 35, 28, 34, 30],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
</script>
I want to change "22, 19, 25, 65, 30, 47, 14" by the new values gets with postgreSQL.
Thanks for your help.
Related
I have some problem using apex charts in angular 9, essentially I'm able to see the chart (line chart) when I mock the data as in the first screenshot, but I can't get data from REST API, I mean the chart disappears.
mocked datas
This is the method containing the chart:
drawGraph(){
this.projectService.getLineChartData(this.getID()).then((data) =>{
for(let i = 0; i<data.resourceListSize; i++){
this.chartOptions = {
series: [
{
name: "data",
data: [28, 29, 33, 36, 32, 32, 33]
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
],
chart: {
height: 350,
type: "line",
dropShadow: {
enabled: true,
color: "#000",
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
}
},
colors: ["#77B6EA", "#545454"],
dataLabels: {
enabled: true
},
stroke: {
curve: "smooth"
},
title: {
text: "Average High & Low Temperature",
align: "left"
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5
}
},
markers: {
size: 1
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
title: {
text: "Month"
}
},
yaxis: {
title: {
text: "Temperature"
},
min: 5,
max: 40
},
legend: {
position: "top",
horizontalAlign: "right",
floating: true,
offsetY: -25,
offsetX: -5
}
};
}
})
}
Any help would be appreciated! Thank you
Step 1,
set the configuration with out data like below(minimum configuration)
this.chartOptions = {
series: [],
chart: {
height: 350,
type: "line"
},
xaxis: {}
}
Step 2:
Data from api response and set to "chartoptions" variable,
this.chartOptions.series=[{
name: "data",
data: [28, 29, 33, 36, 32, 32, 33]
}, {
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
];
this.chartOptions.xaxis=
{
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
}
I'm working through adding the ChartJS library to a Node web app and am having trouble dynamically passing through data from a "Player" model. Here's the script tag portion of the EJS template:
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let pointAvg = [1, 2, 3, 4]
console.log(pointAvg)
let playerStatChart = new Chart(myChart, {
type: 'bar',
data: {
labels: ['Freshman', 'Sophomore', 'Junior', 'Senior'],
datasets: [{
label: 'Points',
data: pointAvg,
backgroundColor: 'rgb(149,16,16, 0.4)',
borderWidth: 1,
borderColor: '#000',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}]
},
options: {
title: {
display: true,
text: "Points: <%= player.name %>",
fontSize: 25
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
And here's an example of a "player" in the Player model:
_id: 5e94ac2d81fa5428b0323fc1,
name: 'Naz Mitrou-Long',
season: [
{
year: '2012-2013',
grade: 'Freshman',
gp: 18,
gs: 0,
mpg: 6.9,
fg: 0.348,
tp: 0.278,
ft: 1,
rpg: 0.8,
apg: 1,
spg: 0.3,
bpg: 0,
ppg: 1.4
},
{
year: '2013-2014',
grade: 'Sophomore',
gp: 36,
gs: 7,
mpg: 20.3,
fg: 0.432,
tp: 0.4,
ft: 0.643,
rpg: 1.6,
apg: 1.1,
spg: 0.2,
bpg: 0.1,
ppg: 7.1
},
{
year: '2014-2015',
grade: 'Junior',
gp: 34,
gs: 33,
mpg: 27.5,
fg: 0.449,
tp: 0.391,
ft: 0.755,
rpg: 2.9,
apg: 2,
spg: 0.8,
bpg: 0.1,
ppg: 10.1
},
{
year: '2015-2016',
grade: 'R. Senior',
gp: 8,
gs: 8,
mpg: 31.6,
fg: 0.425,
tp: 0.291,
ft: 0.6,
rpg: 2.9,
apg: 1.9,
spg: 0.6,
bpg: 0.3,
ppg: 12
},
{
year: '2016-2017',
grade: 'Senior',
gp: 35,
gs: 35,
mpg: 33.3,
fg: 0.473,
tp: 0.384,
ft: 0.795,
rpg: 4.6,
apg: 2.7,
spg: 1.2,
bpg: 0,
ppg: 15.1
}
]
This player data has already been passed through to the client side from the Node server and is available for use. Currently I pass through other values to the template like so:
<h1><%= player.name %></h1>
How can I populate that static pointAvg array with the ppg from each object in the season array and make it dynamic instead?
<script>
var vPlayer = '<%- JSON.stringify(player) %>';
console.log(vPlayer);
</script>
Now you have the model data. Use it as you want.
If you are sending data from nodejs into client side script tag with EJS. Use this method.
<script>
let data='<%- JSON.stringify(player) %>';
data= JSON.parse(data);
</script>
Stringify will return your Object string-ed. Parse will convert it back into an Object for further use.
I have a jsfiddle here - https://jsfiddle.net/nhww0uor/4/
I have a simple line graph using chart.js
The data is hard coded in the code.
How do I do the same thing but with data from json
var data = {
'January' : '65',
'February' : '59',
'March' : '80',
'April' : '81',
'May' : '56',
'June' : '55'
}
const CHART = document.getElementById('lineChart');
var lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: ['January','February','March','April','May','June'],
datasets:[
{
label: 'My first dataset',
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJointStyle: 'miter',
data: [65,59,80,81,56,55]
}
]
}
})
Considering you have the following JSON data ...
{
"January": 65,
"February": 59,
"March": 80,
"April": 81,
"May": 56,
"June": 55
}
You can use Object.keys() and Object.values() methods to parse labels and data respectively from that JSON data, for creating the chart.
Example
var data = {
"January": 65,
"February": 59,
"March": 80,
"April": 81,
"May": 56,
"June": 55
}
const CHART = document.getElementById('lineChart');
var lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: Object.keys(data),
datasets: [{
label: 'My first dataset',
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJointStyle: 'miter',
data: Object.values(data)
}]
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<canvas id="lineChart" width="400" height="400"></canvas>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
How to generate the following json data using prototype.js?
var testData=[{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}];
You can use Object.toJSON(testData);
I have used the code available from http://codeblitz.wordpress.com/2009/06/22/jquery-charts/
It uses jqPlot. So I have the following sample code Default.html that works:
<script type="text/javascript">
var jsonObj = { "pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'] };
$(function () {
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: jsonObj.xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
I have copied the code and put it into Default.aspx. The only thing I want to change is to be able to get the data from an external file, so now my code is:
<script type="text/javascript">
var jsonObj;
$.getJSON('example.json', function (response)
{
jsonObj = response;
alert(jsonObj.property);
});
$(function () {
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: jsonObj.xAxis
}
},
series: [{ label: 'Page Hits' }, { label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults: {
shadow: true,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
But jsonObj is always undefined, I'm presuming my file is not formatted properly. I have tried example.json to contain this:
{"pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009']}
and this:
{"pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ["Jan 2009", "Feb 2009", "Mar 2009", "Apr 2009", "May 2009", "June 2009", "Jul 2009"]}
But to no avail. What am I doing wrong?
Thanks for any assistance,
Julian
You'd probably need to do something like:
$.getJSON('example.json', function (response)
{
var jsonObj = response;
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
The way you have it now your annon function to trigger jqplot will run 'inline', while the ajax loading will still be going on.