Build charts from polling JSON data - javascript

I have a bitcoin miner which can output data in JSON fromat as follows:
{
"Data1": {
"timestamp_raw": 1442856476,
"timestamp": {
"Year": 2015,
"Month": 9,
"Day": 21,
"Hour": 20,
"Minutes": 27,
"Seconds": 56
},
"CG_Uptime": 15572,
"MHS_Avg": 2695618.06,
"DegC_In": "29",
"DegC_TopOut": "54",
"DegC_BotOut": "59",
"Unit_Uptime": 118393,
"FreeMem": "440",
"PSUVolt_Top": "217",
"PSUVolt_Bot": "217",
"FAN": "40",
"Total_Watts": 1264,
"Total_KWh": 0
},
"Data2": {
"timestamp_raw": 1442856495,
"timestamp": {
"Year": 2015,
"Month": 9,
"Day": 21,
"Hour": 20,
"Minutes": 28,
"Seconds": 15
},
"CG_Uptime": 15592,
"MHS_Avg": 2695948.02,
"DegC_In": "29",
"DegC_TopOut": "54",
"DegC_BotOut": "59",
"Unit_Uptime": 118412,
"FreeMem": "440",
"PSUVolt_Top": "217",
"PSUVolt_Bot": "217",
"FAN": "40",
"Total_Watts": 1248,
"Total_KWh": 30.006586944
},
"Data3": {
"timestamp_raw": 1442856535,
"timestamp": {
"Year": 2015,
"Month": 9,
"Day": 21,
"Hour": 20,
"Minutes": 28,
"Seconds": 55
},
"CG_Uptime": 15631,
"MHS_Avg": 2698686.25,
"DegC_In": "29",
"DegC_TopOut": "54",
"DegC_BotOut": "59",
"Unit_Uptime": 118451,
"FreeMem": "440",
"PSUVolt_Top": "217",
"PSUVolt_Bot": "217",
"FAN": "40",
"Total_Watts": 1232,
"Total_KWh": 0.013688752
}, ......
What I want to do is to make a webpage in php which will read this json file and display the values on charts, x-axis would be time (from timestamp section in json) and y-axis would be a value for each chart.
I've seen something similar here
http://powerprice.info/SPT/graphic.php
which uses highcharts.
How can I accomplish this?

I think you are looking just for a general advice.
Live data:
Here is mine: If server, which provides you data for bitcoins supports history data, like specific requests with data range (from-to etc.) then, simply use AJAX call in the HTML file to your server. Then call some GET/POST to the providers server in PHP to get requested data. Then in AJAX response provide data to the chart. Just make sure you have proper format, required by Highcharts.
You will not find many examples on the Highcharts site, because it really doesn't matter for Highcharts what you have in the backend. However, this tutorial explains a little bit. In step #1: Set up the server instead of randomized data, get proper data from your data provider.
Preprocessing data:
Additional advice, according to your question update: I can't tell you how you need to store data for last week, but I guess simple database would be enough. As you said, use some cron task, to get data from the service, then store it in your database.
The question is which property of your JSON is value to be displayed on the chart. In example below, I assume that MHS_Avg is used as y-values. I don't see anything to be x-value (like date or timestamp), though.
Let's say you have /var/www/json.php do load data for the chart:
$(function () {
$.getJSON("/var/www/json.php", function (data) {
var value,
series = [{
name: "MHS_Avg",
data: []
}]; // create series array with all series
// now parse data:
$.each(data, function (i, obj) {
value = parseFloat(obj["MHS_Avg"]);
if (!isNaN(value)) {
series[0].data.push([i, value]);
// or:
// series[0].data.push(value);
// or:
// series[0].data.push({ x: i, y: value });
};
});
// create chart
$('#temps_hist').highcharts({
series: series
});
});
});

Related

Wrong results in group_by by month with javascript date objects in node app

I have a problem using javascript date objects in a node app and running queries through postgresql.
I have following data in a csv file (first column: date, second column: amount)
08/08/2022;620,00
01/08/2022;-73,41
01/08/2022;600,00
01/08/2022;-341,36
Since date format is not standard, I convert it manually to a date object:
new Date(year, month, day);
I store it to a postgresql database through the prisma client.
The date field is following type in schema.prisma
model Transaction {
id Int #id #default(autoincrement())
amount Float
date DateTime #db.Date
which corresponds to this migration:
ALTER TABLE "Transaction" ALTER COLUMN "date" SET DATA TYPE DATE;
Once data is stored, it looks like this:
[
{
"id": 9205,
"date": "2022-08-07T22:00:00.000Z",
},
{
"id": 9206,
"amount": -73.41,
"date": "2022-07-31T22:00:00.000Z",
},
{
"id": 9207,
"amount": 600,
"date": "2022-07-31T22:00:00.000Z",
},
{
"id": 9208,
"amount": -341.36,
"date": "2022-07-31T22:00:00.000Z",
}
]
Dates look good, I double-checked running .getMonth, creating the date again in the browser etc.
I try to run a raw query with prisma:
const expensesByMonths: any[] = await this.prisma.$queryRaw`
SELECT
date_trunc('month', date) as date_month,
sum(amount)
FROM "public"."Transaction"
GROUP BY
date_month
`;
Unfortunately, the results are wrong:
{
"expensesByMonths": [
{
"date_month": "2022-07-01T00:00:00.000Z",
"sum": -414.77
}
],
"incomesByMonths": [
{
"date_month": "2022-07-01T00:00:00.000Z",
"sum": 600
},
{
"date_month": "2022-08-01T00:00:00.000Z",
"sum": 620
}
]
}
I don't understand why group_by from postgresql is not understanding the javascript date objects, since they are strings at the end.
I guess I can't store in postgresql things like 2022-07-31T22:00:00.000Z, I see everywhere dates like '2022-11-23', not sure if it's stored as strings or dates

Filtering json file so it only has certain key-value pairs [duplicate]

This question already has answers here:
How to get a subset of a javascript object's properties
(36 answers)
Closed 3 years ago.
I'm trying to filter the json file so that it only contains certain key-value pairs. I have been looking around stack overflow but none of the solutions meet my needs.
I made the json file into a var and tried using this piece of code but it fails for some reason, saying that [object array] is not a function.
var newArr = data.map(data, function(object) {
return data.pick(object, ['time', 'practical_salinity']);});
[
{
"practical_salinity": 33.435064643342436,
"seawater_pressure": 101.78123944323164,
"corrected_dissolved_oxygen": 164.09190464800648,
"density_qc_executed": 29,
"driver_timestamp": 3765193211.34625,
"conductivity": 1493552,
"seawater_pressure_qc_results": 29,
"practical_salinity_qc_results": 29,
"temperature": 411414,
"density": 1026.3321779687496,
"corrected_dissolved_oxygen_qc_executed": 29,
"corrected_dissolved_oxygen_qc_results": 29,
"seawater_temperature_qc_results": 29,
"pressure_temp": 14964,
"internal_timestamp": 0.0,
"seawater_conductivity_qc_results": 13,
"pk": {
"node": "SF01A",
"stream": "ctdpf_sbe43_sample",
"subsite": "RS01SBPS",
"deployment": 6,
"time": 3765193211.283541,
"sensor": "2A-CTDPFA102",
"method": "streamed"
},
"ext_volt0": 22775,
"seawater_temperature": 9.178755142917169,
"ingestion_timestamp": 3765193215.771,
"port_timestamp": 3765193211.283541,
"seawater_pressure_qc_executed": 29,
"pressure": 629441,
"preferred_timestamp": "port_timestamp",
"seawater_conductivity": 3.5856973775744,
"practical_salinity_qc_executed": 29,
"seawater_temperature_qc_executed": 29,
"density_qc_results": 29,
"time": 3765193211.283541,
"seawater_conductivity_qc_executed": 29
}]
From this json file, I would like the output to be,
[{"practical_salinity": 33.435064643342436,
"pressure": 629441}]
Like smashed-potatoes mentioned, this is mostly of duplicate of How to get a subset of a javascript object's properties. You just need to wrap it correctly in the Array.map function.
map takes the iteratee as the first argument. I don't know what object.pick is supposed to be.
const data = [
{
"practical_salinity": 33.435064643342436,
"seawater_pressure": 101.78123944323164,
"corrected_dissolved_oxygen": 164.09190464800648,
"density_qc_executed": 29,
"driver_timestamp": 3765193211.34625,
"conductivity": 1493552,
"seawater_pressure_qc_results": 29,
"practical_salinity_qc_results": 29,
"temperature": 411414,
"density": 1026.3321779687496,
"corrected_dissolved_oxygen_qc_executed": 29,
"corrected_dissolved_oxygen_qc_results": 29,
"seawater_temperature_qc_results": 29,
"pressure_temp": 14964,
"internal_timestamp": 0.0,
"seawater_conductivity_qc_results": 13,
"pk": {
"node": "SF01A",
"stream": "ctdpf_sbe43_sample",
"subsite": "RS01SBPS",
"deployment": 6,
"time": 3765193211.283541,
"sensor": "2A-CTDPFA102",
"method": "streamed"
},
"ext_volt0": 22775,
"seawater_temperature": 9.178755142917169,
"ingestion_timestamp": 3765193215.771,
"port_timestamp": 3765193211.283541,
"seawater_pressure_qc_executed": 29,
"pressure": 629441,
"preferred_timestamp": "port_timestamp",
"seawater_conductivity": 3.5856973775744,
"practical_salinity_qc_executed": 29,
"seawater_temperature_qc_executed": 29,
"density_qc_results": 29,
"time": 3765193211.283541,
"seawater_conductivity_qc_executed": 29
}];
console.log(data.map(({ time, practical_salinity }) => ({
time, practical_salinity
}))
);
The JSON.parse reviver parameter can be used to exclude key-value pairs from JSON string :
var keys = ['pressure', 'practical_salinity'], json = '[{"practical_salinity":33.435064643342436,"seawater_pressure":101.78123944323164,"corrected_dissolved_oxygen":164.09190464800648,"density_qc_executed":29,"driver_timestamp":3765193211.34625,"conductivity":1493552,"seawater_pressure_qc_results":29,"practical_salinity_qc_results":29,"temperature":411414,"density":1026.3321779687496,"corrected_dissolved_oxygen_qc_executed":29,"corrected_dissolved_oxygen_qc_results":29,"seawater_temperature_qc_results":29,"pressure_temp":14964,"internal_timestamp":0,"seawater_conductivity_qc_results":13,"pk":{"node":"SF01A","stream":"ctdpf_sbe43_sample","subsite":"RS01SBPS","deployment":6,"time":3765193211.283541,"sensor":"2A-CTDPFA102","method":"streamed"},"ext_volt0":22775,"seawater_temperature":9.178755142917169,"ingestion_timestamp":3765193215.771,"port_timestamp":3765193211.283541,"seawater_pressure_qc_executed":29,"pressure":629441,"preferred_timestamp":"port_timestamp","seawater_conductivity":3.5856973775744,"practical_salinity_qc_executed":29,"seawater_temperature_qc_executed":29,"density_qc_results":29,"time":3765193211.283541,"seawater_conductivity_qc_executed":29}]';
var result = JSON.parse(json, (k, v) => keys.includes(k) || !isNaN(k) ? v : void 0);
console.log( result );

How to parse/filter data from JSON file in Javascript

Is there any way to parse/filter the data present in JSON file in a Javascript file.
Basically, I am calling JSON file into my local javascript. I am having trouble in reading specific data and printing.
Can anyone please help.
JSON file contains:
{
"Data": [
{
"name": "John",
"age": 30
},
{
"joined on":"Jan 2015",
"working on": "Automation",
}
]
}
I am trying to read the above JSON file as:
var jfile = require("./Example.json");
var test = JSON.parse(JSON.stringify(jfile))
console.log(test)
I get the output like this:
{ Data:
[ { name: 'John', age: 30 },
{ 'joined on': 'Jan 2015', 'working on': 'Automation' } ] }
From the above, I am interested in accessing/filtering out only one i.e. "name". I would like to print only the value "John" to the console.
I have tried to use the ".filter" method to the JSON.parse method but it throws me an error as:
JSON.parse(...).filter is not a function
Is there any way to perform this activity?
You can access it using . dot notation
var a = {
"Data": [{
"name": "John",
"age": 30
},
{
"joined on": "Jan 2015",
"working on": "Automation",
}
]
}
console.log(a.Data[0].name)
filter is an array method.
JSON.parse(...) will not give you an array. It will give you an object with a Data property. The value of that property is an array.
JSON.parse(...).Data.filter.
You can't just ignore parts of your data structure.
If you have multiple items in your array of different shapes, you can use this
Access the Data key with json.Data
map your array to transform its items into names
apply filter(Boolean) to take out those who are undefined
In your case you'll end up with an array containing only one name John
const getName = json => json.Data.map(x => x.name).filter(Boolean);
const json = {
"Data": [{
"name": "John",
"age": 30
},
{
"joined on": "Jan 2015",
"working on": "Automation",
}
]
};
console.log(getName(json));
Your JSON's main level is an object (not an array) and only arrays have .filter method.
So filter the array under Data key:
var test = JSON.parse(JSON.stringify(jfile)).Data.filter(/*something*/);
But better if you aren't re-parse JSON:
var test = jfile.Data.filter(/*something*/);
As Quentin mentioned in his comment, What is the use of below statement ?
var test = JSON.parse(JSON.stringify(jfile))
You can directly access the name property from the response.
Try this :
var obj = {
"Data": [{
"name": "John",
"age": 30
},
{
"joined on": "Jan 2015",
"working on": "Automation"
}
]
};
// Solution 1
console.log(obj.Data.map(item => item.name).filter(Boolean));
// Solution 2
console.log(obj.Data.filter(item => item.name).map(elem => elem.name));

change row background color Jquery

I have called a webapi and I got json data
{
"orderId": 26,
"userId": "53cf1e15",
"user": {
"editablePropertyNames": [],
"email": "rajesh#tech.com",
"firstName": "Rajesh",
"id": "53cf1e15",
"identities": [],
"lastName": "kumar",
"missingProperties": [],
"phoneNumber": "45877298"
},
"locationId": 4024,
"pickupType": 1,
"pickupTimeUtc": "2015-11-27T17:33:00.417"
},
{
"orderId": 601,
"userId": "06bf5983",
"user": {
"editablePropertyNames": [],
"email": "rtest#wa.com",
"firstName": "Rakesh",
"id": "06bf5983",
"identities": [],
"lastName": "Pkumar",
"missingProperties": [],
},
"locationId": 424,
"pickupType": 1,
"pickupTimeUtc": "2016-11-16T21:30:00",
"total": 4.32,
"tax": 0.83
}
var PickupMethodEnum = _enum({
DineIn: 1, DriveThru: 2, TakeOut: 3
})
index.html
I have 5 columns
#imageIndicator Name PickupName Total scheduledTime
car.png Kumar 1 4.32 2015-11-27T17:33:00.417
my problem is
I want to display value instead of "1" in pickupName column. ( DineIn: 1, DriveThru: 2, TakeOut: 3).
show image in #imageindicaor column if pickupName ="DriveThru" otherwise hide the image.
show scheduledTime in custom format
if scheduledTime is current date then display as 12:15 pm.
if scheduled time is tomorrow date the display as 8/10 - 7:00am.
if pickupName ="TakeOut" then change that` row background color to gray and then remove that row after 2 minutes.
I want to display value instead of "1" in pickupName column. ( DineIn: 1, DriveThru: 2, TakeOut: 3).
Object.keys( objectName )[ propertyIndex ]
will return the desired property's name
The rest of your issues can be resolved with conditional statements once you've obtained the JSON data. You haven't provided your attempt so there isn't much to work with.
Hi for first point you need to write your enum properly numbers:"String" because you are getting numbers from JSON.
//Global Object
var pickupNameEnum = {
0: "DineIn",
1: "DriveThru",
2: "TakeOut"
};
Write a function as showRow(singleRowObject) in which while traversing your JSON
function showRow(singleRowObject){
var imageString="";
var hideImage=false;
var showString='';
var retutnObject={};
if(pickupNameEnum[singleRowObject.pickupType]!=undefiend){
showString='DineIn';
//DineIn
}else if(singleRowObject.pickupType==){
//DriveThru
showString='DriveThru';
imageString="<img src='abc.png' alt='img'></img>";
}else if(singleRowObject.pickupType==){
//TakeOut and change Color on basis of this flag
hideImage=true;
showString='TakeOut ';
}
retutnObject.hideImage=hideImage;
retutnObject.imageString=imageString;
retutnObject.showString=showString;
}
For date split dateString and refer to this question
For Removing Row change refer this

Load javascript array into Chartist.js as serie

I decided it would be a fun project to see if i could take data from Google Analytics and display that in a custom dashboard, and hopefully learn a thing or two about using json, and javascript.
after a lot of debugging i now managed to pull the data from the Google Analytics server with their php api, and save the output into data.json on the server.
below the data.json, it's valid as per JSONLint.com:
{
"0": {
"date": "20160113",
"pageviews": "46",
"sessions": "21"
},
"1": {
"date": "20160114",
"pageviews": "66",
"sessions": "18"
},
"2": {
"date": "20160112",
"pageviews": "50",
"sessions": "14"
},
"3": {
"date": "20160116",
"pageviews": "19",
"sessions": "14"
},
"4": {
"date": "20160117",
"pageviews": "23",
"sessions": "14"
},
"5": {
"date": "20160115",
"pageviews": "38",
"sessions": "11"
},
"6": {
"date": "20160118",
"pageviews": "35",
"sessions": "9"
},
"7": {
"date": "20160119",
"pageviews": "15",
"sessions": "7"
}
}
Now i've tried to use the data from data.json and feed it into chartist's labels/series in order to draw a graph.
var labelArray = [];
var seriesArray = [];
var labelOutput = [];
$.getJSON("data.json", function(json) {
//var jsonObj = JSON.parse(json);
for (var i in json){
labelArray.push(json[i].date);
};
for (var i in json){
seriesArray.push(json[i].sessions);
};
// var myData = {
// labels:
// }
// labelOutput = labelArray.join(',')
// seriesOutput = serieArray.join(',')
console.log(labelArray);
console.log(seriesArray);
// this will show the info it in firebug console
});
new Chartist.Line('.ct-chart', {
labels: [labelArray],
series: [[seriesArray]]
});
However I'm currently out of ideas why this would not work, the labels on X and Y axis are correctly shown, but no graph shows up.
I've tried using .join to see if that makes a difference, but using labelOutput instead of labelArray also doesn't change anything.
In the console the array that is being fed into chartist seems all right to me, if I copy paste it from the console into the script everything works.
Current output for labelArray and seriesArray:
labelArray
Array [ "20160113", "20160114", "20160112", "20160116", "20160117", "20160115", "20160118", "20160119" ]
seriesArray
Array [ "21", "18", "14", "14", "14", "11", "9", "7" ]
Anyone knows why chartist.js does manage to add the correct labels along the axes but fails to read the same data and draw the chart?
Although the answer by #mnutsch works, there is an easier way to add dynamic content into the chart.
You can simply add the arrays directly as parameters, which I think is what the OP was trying to do.
response object would be the ajax data
var seriesVals = [];
var labelsVals = [];
for (var i = 0; i < response.length; i++) {
seriesVals.push(response[i].total);
labelsVals.push(response[i].response_code);
}
var pieData = {
series: seriesVals,
labels: labelsVals
};
In case anyone comes across this later, you can also do it like this:
//Create javascript arrays with the values and labels, replace this with code to read from the database/API/etc.
var array_1_values = [100, 120, 180, 200, 90]; //these are the values of the first line
var array_2_values = [20, 35, 65, 125, 245]; //these are the values of the second line
var array_labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; //these are the labels that will appear at the bottom of the chart
//create a prototype multi-dimensional array
var data_chart1 = {
labels: [],
series: [
[],
[]
]
};
//populate the multi-dimensional array
for (var i = 0; i < array_1_values.length; i += 1)
{
data_chart1.series[0].push(array_1_values[i])
data_chart1.series[1].push(array_2_values[i])
data_chart1.labels.push(array_labels[i])
}
//set the size of chart 1
var options_chart1 = {
width: '300px',
height: '200px'
};
//create chart 1
new Chartist.Line('#chart1', data_chart1, options_chart1);
In case anyone else stumbles upon the problem, below is what I came up with to get it to work.
After another day of trail and error i managed to pinpoint the problem.
The problem was:
In the original situation I tried to use a plain array as input for both labels and series. However, Chartist requires objects to render the labels/series as well as the graph.
The below works for me pulling the data from the data.json, adding it to an object and provide it to chartist.
var labelArray = {};
var seriesArray = {};
var labelOutput = [];
var Output
// $.getJSON("data.json", function(json) {
$.ajax({
url: 'data.json',
async: false,
dataType: 'text',
success: function(json) {
labelArray = JSON.parse(json);
data = {
labels:
[
labelArray[0].date,
labelArray[1].date,
labelArray[2].date,
labelArray[3].date,
labelArray[4].date,
labelArray[5].date,
labelArray[6].date
],
series: [[
labelArray[0].sessions,
labelArray[1].sessions,
labelArray[2].sessions,
labelArray[3].sessions,
labelArray[4].sessions,
labelArray[5].sessions,
labelArray[6].sessions
]]
}
}
});
new Chartist.Line('.ct-chart', data);
Decided to go with $.ajax to get the json file rather than getJSON as this allows me to disable asynchronous loading, ensuring the data is available when the graph is drawn.
Also, it is possible to set the dataType to Json rather than text, but this gives error in the JSON.parse line. Assuming that is because it tries to parse json as json, and fails to do so. But this is the only way i managed to get it to work, and add the json to an object.
Most likely the whole labelArray[0].date, labelArray[1].date is rather inefficient and should be improved but it works for now.

Categories