Real Time Chart Generation using epoch.js - javascript

I am trying to create a simple real time chart using epoch.js which updates itself on a click event.
My code posted below has a total of 3 functions. They are:
1) generate a random value
2) generate the current date and time in milliseconds.
3) onclick event that updates chart datapoints.
Though I have datapoints in the right format as required for the chart. I am unable to update it .
Appreciate any help on find out as to why the graph is not working as it should.
///////////////this function generates the date and time in milliseconds//////////
function getTimeValue() {
var dateBuffer = new Date();
var Time = dateBuffer.getTime();
return Time;
}
////////////// this function generates a random value ////////////////////////////
function getRandomValue() {
var randomValue = Math.random() * 100;
return randomValue;
}
////////////// this function is used to update the chart values ///////////////
function updateGraph() {
var newBarChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
barChartInstance.push(newBarChartData);
}
////////////// real time graph generation////////////////////////////////////////
var barChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
var barChartInstance = $('#barChart').epoch({
type: 'time.bar',
axes: ['right', 'bottom', 'left'],
data: barChartData
});
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js">
</script>
<script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js">
</script>
<script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css">
</head>
<div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div>
<p id="updateMessage" onclick="updateGraph()">click me to update chart</p>

You are pushing the wrong object to barChartInstance when updating the graph. You need to just push the array containing the new data point, instead of pushing the full configuration again.
function updateGraph() {
var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}];
/* Wrong: don't use the full configuration for an update.
var newBarChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
*/
barChartInstance.push(newBarChartData);
}
///////////////this function generates the date and time in milliseconds//////////
function getTimeValue() {
var dateBuffer = new Date();
var Time = dateBuffer.getTime();
return Time;
}
////////////// this function generates a random value ////////////////////////////
function getRandomValue() {
var randomValue = Math.random() * 100;
return randomValue;
}
////////////// this function is used to update the chart values ///////////////
function updateGraph() {
var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}];
/*
var newBarChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
*/
barChartInstance.push(newBarChartData);
}
////////////// real time graph generation////////////////////////////////////////
var barChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
var barChartInstance = $('#barChart').epoch({
type: 'time.bar',
axes: ['right', 'bottom', 'left'],
data: barChartData
});
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js">
</script>
<script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js">
</script>
<script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css">
</head>
<div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div>
<p id="updateMessage" onclick="updateGraph()">click me to update chart</p>

Related

How do I update my X axis header title on highcharts?

I am using Datatables to create Highcharts. Everything functions as intended, however I am not sure how to extract the X axis title from Column 1. (Data1, Data2, Data3, Data4, Data5 etc.). I am not sure what am I missing in my code. Any advice would be appreciated because I don't know much about Javascript. Thanks in advance.
The chart should look like this.
See screenshot below.
Link to code - http://live.datatables.net/muvoyacu/2/edit
$(document).ready(function() {
var table = $("#example_full2").DataTable({
searching:false,
lengthChange: false,
ordering: false,
info: false,
paging: false,
} );
//var salary = getSalaries(table);
var salary = getRow(table,0);
var salary2 = getRow(table, 1);
var salary3 = getRow(table, 2);
var salary4 = getRow(table, 3);
var salary5 = getRow(table, 4);
// Declare axis for the column graph
var axis = {
id: "salary",
min: 0,
title: {
text: "Number"
}
};
// Declare inital series with the values from the getSalaries function
var series = {
name: "2012",
data: Object.values(salary)
};
var series2 = {
name: "2013",
data: Object.values(salary2)
};
var series3 = {
name: "2014",
data: Object.values(salary3)
};
var series4 = {
name: "2015",
data: Object.values(salary4)
};
var series5 = {
name: "2016",
data: Object.values(salary5)
};
var myChart = Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: "Test Data"
},
xAxis: {
categories: Object.keys(salary)
},
yAxis: axis,
series: [series, series2, series3, series4, series5]
});
// On draw, get updated salaries and refresh axis and series
table.on("draw", function() {
salary = getSalaries(table);
myChart.axes[0].categories = Object.keys(salary);
myChart.series[0].setData(Object.values(salary));
});
});
function getSalaries(table) {
var salaryCounts = {};
var salary = {};
}
function getRow(table, row) {
var chart = {};
var data = table.row(row).data();
for (i=1; i<data.length; i++) {
var x = $( table.column( i ).header() ).html();
var y = data[i].replace(/[^0-9.]/g, "") * 1;
chart[x] = y;
}
return chart;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div id="container" style=" width: 100%; height: 400px;"></div>
<div class="container">
<table id="example_full2" class="display nowrap" width="100%"><thead>
<tr><th>Year</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th><th>2020</th><th>2021</th></tr></thead>
<tr ><td> Data1</td><td>3,823</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
<tr ><td> Data2</td><td>800</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
<tr ><td> Data3</td><td>900</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
<tr ><td> Data4</td><td>200</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
<tr ><td> Data5</td><td>300</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
<tr ><td> Data6</td><td>400</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr>
</tbody></table>

Javascript Plotly: only 2 out of 5 graphs updating

I’m new to Javascript and Plotly so apologies if this is a schoolboy error.
I have a webpage requesting 5 floats from a Bluetooth Low Energy device (Arduino Nano BLE 33 Sense), which are received. I then proceed to parse the floats, update the 5 data arrays and call Plotly.react. The floats are correctly parsed and the buffers updated (verified on the console.log). I have incremented the datarevision property in the layout information (which applies to all 5 graphs) but only graphs 1 and 3 are updated.
The browser is Chrome (for BLE support), in case that makes a difference. The URL is the local file:/// path. Can someone please advise what I’m doing wrong?
Jason
HTML (now edited to remove any BLE interaction):
<!DOCTYPE html>
<html>
<head>
<title>Temperature monitor</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<button id="connectBtn">Connect</button>
<div id="temp0"></div>
<div id="temp1"></div>
<div id="temp2"></div>
<div id="temp3"></div>
<div id="temp4"></div>
<div id="temp5"></div>
<script>
const connectBtn = document.getElementById("connectBtn");
const MAX_BUFFER_LENGTH = 64;
const temp1 = [];
const temp2 = [];
const temp3 = [];
const temp4 = [];
const temp5 = [];
var temp1Data =
{
y: temp1,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
};
var temp2Data =
[{
y: temp2,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var temp3Data =
{
y: temp3,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
};
var temp4Data =
[{
y: temp4,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var temp5Data =
[{
y: temp5,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var allTempLayout =
{
plot_bgcolor: '#111111',
paper_bgcolor: '#111111',
margin: {l:8,r:8,b:18,t:18},
showlegend: false,
datarevision: 0,
yaxis:
{
'range': [0,120],
'showticklabels':false
},
xaxis:
{
'range': [0,64],
'showticklabels':false,
'autorange': false,
'showgrid': true,
'zeroline': true,
tickfont: {size: 8}
}
}
async function connectSensors()
{
setInterval(function() {
if(temp1.length === MAX_BUFFER_LENGTH)
{
temp1.shift();
temp2.shift();
temp3.shift();
temp4.shift();
temp5.shift();
}
temp1.push(Math.random() * 100.0);
temp2.push(Math.random() * 100.0);
temp3.push(Math.random() * 100.0);
temp4.push(Math.random() * 100.0);
temp5.push(Math.random() * 100.0);
allTempLayout.datarevision++;
console.log("Plot " + allTempLayout.datarevision);
Plotly.react("temp1", [temp1Data], allTempLayout);
Plotly.react("temp2", [temp2Data], allTempLayout);
Plotly.react("temp3", [temp3Data], allTempLayout);
Plotly.react("temp4", [temp4Data], allTempLayout);
Plotly.react("temp5", [temp5Data], allTempLayout);
}, 1000);
}
connectBtn.addEventListener ( "click", async () => {
try { connectSensors(); }
catch (err) {
console.log(err);
alert("An error occured while fetching device details");
}
});
Plotly.newPlot("temp1", [temp1Data], allTempLayout);
Plotly.newPlot("temp2", [temp2Data], allTempLayout);
Plotly.newPlot("temp3", [temp3Data], allTempLayout);
Plotly.newPlot("temp4", [temp4Data], allTempLayout);
Plotly.newPlot("temp5", [temp5Data], allTempLayout);
</script>
</body>
</html>
Looking at your code, you declare var temp1Data = {...} as an object, while you declare var temp2Data = [...] as an array. Looks like changing the type to object should solve the problem.

How to convert JSON object to datetime

I need to show JSON data in Kendo chart.
My code as follows,
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
$("#chart").kendoChart({
series: [{
data: [new Date(formatTime(360)).getTime(), // here 360 means seconds
new Date(formatTime(100)).getTime(),
new Date(formatTime(125)).getTime(),
new Date(formatTime(146)).getTime(),
new Date(formatTime(65)).getTime(),
new Date(formatTime(185)).getTime(),
new Date(formatTime(236)).getTime(),
new Date(formatTime(100)).getTime()],
color: "Blue",
name: "Average time",
type: "line"
},
{
data: [new Date(formatTime(760)).getTime(),
new Date(formatTime(100)).getTime(),
new Date(formatTime(125)).getTime(),
new Date(formatTime(148)).getTime(),
new Date(formatTime(65)).getTime(),
new Date(formatTime(185)).getTime(),
new Date(formatTime(236)).getTime(),
new Date(formatTime(100)).getTime()],
color: "Red",
name: "Wait time",
type: "bar",
}
]
,
valueAxis: {
labels: {
template: "#= kendo.format('{0:HH:mm:ss}', new Date(value)) #"
},
min: new Date("2018/02/01").getTime(),
majorUnit: 10 * 60 * 1000 // 20 minutes step
},
tooltip: {
visible: true,
template: "#= kendo.format('{0:HH:mm:ss}', new Date(value)) #"
}
});
function formatTime(time) {
var rootDate = new Date(new Date(2018, 1, 1, 0, 0, 0).setSeconds(time));
return rootDate;
}
here you can see, I set static chart data as data: [new Date(formatTime(360)).getTime()] I need to set dynamic JSOn object to chart data from JSON object.
I have the following JSON object.
[{
day: "YYY",
second: "100",
second2: "125"
}, {
day: "XXX",
second: "145",
second2: "117"
}, {
day: "TTT",
second: "565",
second2: "340"
}, {
day: "SSS",
second: "125",
second2: "250"
}]
I receiving separate JSON key from backend as second and second2.I need to set those fields to Chart series as new date object. how can I do it
If you're thinking about getting a new javascript values parsing some string that contains js codes, Just run eval function and let it do it's magic. Check this code:
let x = 'new Date()';
console.log(eval(x))
Assuming that second should populate the first series (average time) and second2 the second series (wait time), you could do this:
series: [{
data: arr.map(function (o) {
return new Date(formatTime(o.second)).getTime();
}),
color: "Blue",
name: "Average time",
type: "line"
},
{
data: arr.map(function (o) {
return new Date(formatTime(o.second2)).getTime();
}),
color: "Red",
name: "Wait time",
type: "bar",
}]
...where arr is the array you get from your back-end (after conversion from JSON of course).

Javascript - Plotly.js number frequency in order

I have a plot.ly that inputs a number and digits to view the number of frequency. Per say you enter 111222333 and digits 1,2,3. It will display a bar graph of the repetition of each digit. Everything seems to work except one detail, whenever I add random numbers, the graph does not display in order. Here is an example
Below is my JS code:
function plotIt() {
event.preventDefault();
var entireNumber = document.getElementById('fullNumber').value.split("");
var number = document.getElementById('digit').value.split("");
var matchedNumbers = [];
entireNumber.forEach(digit => {
if (number.includes(digit)) {
matchedNumbers.push(digit);
}
});
var layout = {
categoryorder: 'category ascending',
xaxis: {
type: 'category',
title: 'Values',
},
yaxis: {
title: '# of repetitions'
},
title:'Count'
};
var histElements = {
x: matchedNumbers,
type: 'histogram',
marker: {
color: 'rgba(235, 77, 75,1.0);',
},
};
var data = [histElements];
//Using ID for div to plot the graph
Plotly.newPlot('graph', data, layout,{scrollZoom:true});
}
You are using categoryorder: 'category ascending' in layout which does not exist for histograms in Plotly. As of July 2018 you cannot sort categorical data in histograms. But simply sorting your array before passing it to Plotly should work.
function plotIt() {
var entireNumber = document.getElementById('fullNumber').value.split("");
var number = document.getElementById('digit').value.split("");
number.sort();
var matchedNumbers = [];
entireNumber.forEach(digit => {
if (number.includes(digit)) {
matchedNumbers.push(digit);
}
});
matchedNumbers.sort();
var layout = {
xaxis: {
type: 'category',
title: 'Values',
}
};
var histElements = {
x: matchedNumbers,
type: 'histogram'
};
var data = [histElements];
Plotly.newPlot('graph', data, layout);
}
var button = document.getElementById('button');
button.addEventListener("click", plotIt(), false);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<form>
<input type='number' id='fullNumber' value='144445522123' >
<input type='number' id='digit' value='0123456789'>
</form>
<button type="button" id='button'>Plot me!</button>
<div id='graph'>
</div>

Display many charts with data of the same source javascript ( map (key,value) )

I have a map of this form
Object{485:Array[4],2072:Array[4],9665:Array[3]...}
I would like to display a chart per key.
I have an example which is similar to what i'm looking for and i tried to display my values in many charts : In this example, my key is : car_id
First step : sort my array to get a map with my keys. It works fine. But the second one is not working... I would like to display a chart per data based on car_id and per panel bootstrap...
What am I doing wrong ?
Thank you
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<body >
<div >
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
</div>
</body>
<script>var json = {
'cars': [{
"car_id": "1",
"price": "925",
"full_option": "EEEE"
}, {
"car_id": "1",
"price": "990",
"full_option": "DDDDD"
}, {
"car_id": "2",
"price": "500",
"full_option": "FFF"
}, {
"car_id": "2",
"price": "900",
"full_option": "GGGGGGG"
}, {
"car_id": "4",
"price": "900",
"full_option": "JJJ"
}]
};
var car_array = json.cars.reduce((prev, t, index, arr) => {
if (typeof prev[t.car_id] === 'undefined') {
prev[t.car_id] = [];
}
prev[t.car_id].push(t);
return prev;
}, {});
Object.keys(car_array).forEach(i => {
var array_of_cars_with_same_id = car_array[i];
for (var i=0; i<=array_of_cars_with_same_id.length-1;i++){
console.log(array_of_cars_with_same_id[i].price);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [array_of_cars_with_same_id[i].full_option],
datasets: [{
label: '# of Votes',
data: [array_of_cars_with_same_id[i].price]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
console.log("AAAAAAAAAAAAA");
});
</script>
There are a couple of problems with your code.
First, you are only using a single canvas element. Each chart needs its own canvas element. Because of this every chart you add simply renders on top of the prior chart.
At a minimum, you have to give each item a new canvas. You could change your code to accomplish that.
Change the root element for the charts to a basic <div> element that you will append the charts to.
<div class="panel-body">
<div id="chart-holder"></div>
</div>
I would create a variable to hold the cart count, and the root element.
var chart_holder = $('#chart-holder');
var chart_count = 0;
Change the for loop to use these new variables.
for (var i = 0; i <= car_type.length - 1; i++) {
chart_holder.append('<canvas id="myChart' + chart_count + '" width="400" height="400"></canvas>')
var ctx = $("#myChart" + chart_count);
var data = [];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [car_type[i].full_option],
datasets: [{
label: '# of Votes',
data: [car_type[i].price]
}]
},
options: chart_opts
});
chart_count++;
}
This will create a new chart for each object in each array.
I created a fiddle to demonstrate.
Based on the data, however, I would recommend a different approach. I would create a single chart per unique key, rather than a chart for every element.
You would need to parse each array to pull out labels and data for each chart. Here is an example that would get that data out of each array. There is a variable to capture the data for the chart and the labels for the chart.
var car_data = [], car_labels = [];
for (var i = 0; i <= car_type.length - 1; i++) {
car_data.push(car_type[i].price);
car_labels.push(car_type[i].full_option);
}
We can pass car_data and car_labels to the Chart.js initialization.
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: car_labels,
datasets: [{
label: 'Car Type ' + ct,
data: car_data
}]
},
options: chart_opts
});
Here is a fiddle to demonstrate a single chart per car_id.

Categories