Dynamic Highcharts is not updating - javascript

Here is my use case. I am using Flume and Spark Streaming to count the number of events generated from the server. So in the output of the spark i get timestamp and number of events. After every 10 second the old value is erased and new value is written in a file in HDFS.
I have created Spring framework which will pull the data from HDFS convert it to json and push it to Highcharts. So I am trying to generate a live spline chart which will show timestamp in the x-axis and number of count in the y-axis and update it as it gets new data from the spark output after every 10 seconds. But the x-axis is not shifting and I can see 10 zero values in y-axis. So I am unable to get the updated y value. I am sure I am missing something in the java script. Because from the console of the spring i can see the events are updating after every 10 seconds. But its not reflecting in the chart.
I am stuck here for past two weeks and desperately need help. Any help will be much appreciated. Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/maps/modules/exporting.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="js/app/appStart.js" ></script>
<link type="text/css" href="css/app.css" rel="stylesheet">
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div class="chart" id="statusChart" >
</div>
</body>
$(function() {
var url = 'statistics';
$.ajax(url).done(function(data) {
loadStatusChart(data);
});
});
function updateStatusSeries(series){
var url = 'statistics';
$.ajax(url).done(function(data) {
var statusCode = data.statusCode[0];
series.addPoint([statusCode.label, statusCode.value], true, true);
});
}
function loadStatusChart(statistics) {
var StatusCode = statistics.statusCode;
var StatusSeries = [];
$.each(StatusCode, function(index, item) {
var timeInSeconds = item.label/1000;
for(var i = 10; i >= 1; i--){
StatusSeries.push({
x : (timeInSeconds - (i*10))*1000,
y : 0
});
}
StatusSeries.push({
x : item.label,
y : item.value
});
})
var x = StatusCode.length;
$("#statusChart").highcharts({
chart : {
type : 'spline',
//animation : Highcharts.svg,
marginRight : 10,
events : {
load : function(){
//set up updating of the chart each second
var series = this.series[0];
setInterval(function (){
updateStatusSeries(series);
}, 10000);
}
}
},
title: {
text: 'Live Data'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Number of Counts'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('yyyy/mm/dd hh:mm:ss', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{ data: StatusSeries }]
});
};

First, you're getting leading zeroes in the chart because of this code:
for(var i = 10; i >= 1; i--){ // <----- 10
StatusSeries.push({
x : (timeInSeconds - (i*10))*1000,
y : 0 // <----- zero values
});
}
Second, your chart isn't advancing because in this part
events : {
load : function(){
//set up updating of the chart each second
var series = this.series[0];
setInterval(function (){
updateStatusSeries(series); // <----- Not updating series
}, 10000);
}
}
updateStatusSeries(series) actually doesn't update series, thus the chart doesn't get new data and simply stays on the same spot.
To fix that you can either
create a global chart object and use it to access its series, like described here: http://www.highcharts.com/docs/working-with-data/live-data
modify your updateStatusSeries() so that it uses a callback passed to it, like shown here: http://www.in-example.com/?p=316
Also, date formatting (in tooltip.formatter) should be done like so:
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)

Related

Plotly.js traces not showing

I'm trying to use Plotly.js to create some graphs of historical cryptocurrency prices, and am running into the problem that my data is not showing up on the graph created. I'm building my code from the sample code at https://plot.ly/javascript/ajax-call/ but tooling it for my own data source and a local copy of plotly-latest.min.js. I'm using a small subset of my data and only one trace to get the code functional, and I've placed console.log statements after the processing of the data and the creation of the trace that show me my data is properly formatted judging by the sample code and its dataset. I've set the range of the chart to the range of my data, but I still see nothing on the chart when its created despite modeling it after working sample code. Where am I going wrong?
My code:
<!DOCTYPE html>
<html>
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"></div>
<script>
function makePlot() {
Plotly.d3.csv("bitcoin.csv", function(data){ processData(data) } );
}
function processData(allRows) {
var Date = [], Open = [], High = [], Low = [], Volume = [], MarketCap = [];
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
tmpDate = row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[0]
Date.unshift( tmpDate.split('/')[2] + '-' + tmpDate.split('/')[1] + '-' + tmpDate.split('/')[0]);
Open.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[1]);
High.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[2]);
Low.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[3]);
Volume.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[4]);
MarketCap.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[5]);
};
makePlotly(Date, Open);
}
function makePlotly(Date, Open) {
var plotDiv = document.getElementById("plot");
var traces = [{
Date: Date,
Open: Open}
];
console.log(traces);
var layout = {
xaxis: {
type: 'date',
title: 'Date',
range: ['2017-11-12', '2017-11-22']
},
yaxis: {
title: 'Price (USD)',
range: [4000, 10000]
},
title: 'Cryptocurrency Historical Prices'
}
Plotly.newPlot('myDiv', traces, layout);
}
makePlot();
</script>
</body>
</html>
bitcoin.csv (1 column)
Date;Open;High;Low;Close;Volume;MarketCap
22/11/2017;8077.95;8302.26;8075.47;8253.55;3633530000;134851000000
21/11/2017;8205.74;8348.66;7762.71;8071.26;4277610000;136967000000
20/11/2017;8039.07;8336.86;7949.36;8200.64;3488450000;134167000000
19/11/2017;7766.03;8101.91;7694.10;8036.49;3149320000;129595000000
18/11/2017;7697.21;7884.99;7463.44;7790.15;3667190000;128425000000
17/11/2017;7853.57;8004.59;7561.09;7708.99;4651670000;131026000000
16/11/2017;7323.24;7967.38;7176.58;7871.69;5123810000;122164000000
15/11/2017;6634.76;7342.25;6634.76;7315.54;4200880000;110667000000
14/11/2017;6561.48;6764.98;6461.75;6635.75;3197110000;109434000000
13/11/2017;5938.25;6811.19;5844.29;6559.49;6263250000;99029000000
12/11/2017;6295.45;6625.05;5519.01;5950.07;8957350000;104980000000
I guess it should be your variable traces causes the problem
var traces = [{
x: Date, //not Date: Date
y: Open //not Open: Open
}];

Drop down menu disappears after the chart is created

My intention is to develop a pie chart from a csv file. The perspectives are the headers. My code takes the csv file. The headers are to be stored as options in the drop down menu. When a drop down menu item is selected a visualisation of the selected perspective is to be shown. A sample of the csv file is as follows:
,org_title,role_title,continent,country,updated_at_date
1,Startup,Founder,Oceania,Australia,27/06/2016
2,SME,C-Level / Owner,Oceania,Australia,27/06/2016
3,School / University,Student,Oceania,Australia,27/06/2016
4,School / University,Student,South America,Brazil,27/06/2016
5,Government Department,other,Asia,Philippines,28/06/2016
6,other,other,Asia,Singapore,27/06/2016
7,Non Profit Organisation,other,Asia,Malaysia,27/06/2016
8,Non Profit Organisation,other,Asia,Mongolia,27/06/2016
My code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file"/>
<div id='container'/>
<select id='options'/>
<script>
$('#options').change(function () {
var v =this.value;
var res=[];
Object.keys(CSVARRAY[v]).forEach(function(k) {
res.push({'name':k,'y':CSVARRAY[v][k]});
});
console.log(JSON.stringify(res));
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
data: res
}]
});
});
//Selecting file and converting it to tabular form
var file = document.getElementById('file');
var CSVARRAY;
file.addEventListener('change', function() {
var reader = new FileReader();
var f = file.files[0];
reader.onload = function(e) {
CSVARRAY = parseResult(e.target.result); //this is where the csv array will be
};
reader.readAsText(f);
});
function parseResult(result) {
var res = result.split("\n");
var headers = res[0].split(',');
headers.shift();
res.shift();
var d = {};
var prev={};
headers.forEach(function(h) {
d[h] = {};
prev[h] = [];
});
res.forEach(function(row) {
var i=0;
var r = row.split(",");
r.shift();
r.forEach(function(cell) {
if (cell !== prev[headers[i]])
{
d[headers[i]][cell]=[];
d[headers[i]][cell]=[];
d[headers[i]][cell]=1;
}
else
{
d[headers[i]][cell]+=1;
}
prev[headers[i]]=cell;
i += 1;
});
});
//return resultArray;
var options = $("#options");
headers.forEach(function(h) {
options.append($("<option />").val(h).text(h));
});
return d;
}
</script>
</body>
</html>
It is almost correct. However, the drop down menu dissappears after I click on any item.
The reason is actually because your div with the id "container" is not closed correctly. This means that the browser is interpreting that the select tag is actually within the container div. The same container div which is being overwritten with your chart.
If you change the following from:
<div id='container'/>
// javascript references are here
<select id='options'/>
To:
<input type="file" id="file" name="file"/>
<div id='container'>
</div>
// javascript references are here
<select id='options'/>
On an aside, your JavaScript code is very hard to follow, mostly because there is a lot of strange indenting going on. Take a look at airBnB's JavaScript style guide for information on making your code easier for others to read.

Tying changes made in handsontable to another value in the same row in handsontable

I am using handsontable to facilitate changes to a large table, through a web browser.
the catch is that the changes need to be tied to a unique ID, like a primary ID in case of RDBMS.
for the data in question/example/code, custId is as good as a primary key or unique identifier.
How do i tie the changes: values in the array changes: to the custId..?
It looks like i am trying to call a function on hot5, even as hot5 is being rendered. [looks improbable, and is possibly the root cause] which is why getchangedPin2 returns null, which brings me to the second part pf the question is there a different way to achieve this..?
$(document).ready(function () {
container = document.getElementById('example');
hot5 = new Handsontable(container, {
data: request,
dataSchema: {custID: null, areaCode: null, pinNo: null, importantStatus: null, subAreaCode: null},
colHeaders: ['custID', 'areaCode', 'pinNo', 'importantStatus', 'subAreaCode'],
columns: [
{ data: 'custID'},
{ data: 'areaCode'},
{ data: 'pinNo'},
{ data: 'importantStatus'},
{ data: 'subAreaCode'}
],
afterChange: function (changes, source) {
if (source=== 'loadData') {
return;
}
showValInConsole(changes);
console.log("the changes "+ getchangedpinNo2(changes[0],'custID'));
},
columnSorting: true,
minSpareRows: 1
});
var showValInConsole = function(changes){
var rowIndex = changes[0];
var col = changes[1];
var oldCellValue = changes[2];
var newCellValue = changes[3];
var row_ref = getchangedPin2(changes[0],'custID');
console.log(rowIndex + " " + col + " "+ oldCellValue + " "+ newCellValue + " " +getchangedPin2(rowIndex,'custID') );
};
var getchangedPin2 = function(row, col){
var urnChanged2 = hot5.getDataAtRowProp(row, col);
return urnChanged2;
};
});
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet"/>
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
<meta charset="ISO-8859-1">
<script src="js/handsontable.full.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" media="screen" href="css/handsontable.full.css">
</head>
<body>
<div id="hoTable"></div>
<input id="SubmitButton" type="button" value="Submit" />
</body>
</html>
Note : unable to add
handsontable.full.min.css
and
handsontable.full.js
This SO question has an answer which explains your situation. In summary, you can read the documentation here to understand the sorting plugin used by Handsontable. It makes use of what they call logicalIndex since the data array is never mutated; instead, they keep a second data structure with references to physicalIndex-es.
It all boils down to the following line of code:
physicalIndex = instance.sortIndex[logicalIndex][0];
Where your instance should be the Handson instance, and logicalIndex should be your changes[0][0].

Trouble parsing XML into JSON - Javascript

I am trying to parse some XML data into JSON using Javascript/Jquery for use in a Highcharts project. Unfortunately, I can't figure out what is wrong with my code as it will not even read the XML. So far I have:
xml:
<Row>
<Category>data</Category>
<actual>data</actual>
</row>
....
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<div id="container" style="height: 400px; width: 500px"></div>
<script type = "text/javascript" src = "jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type = "text/javascript" src = "test.js"></script>
</body>
</html>
Javascript:
$(document).ready(function(){
var globalData = new Array();
// $("h1").click(function(){
// Load the data from the XML file
$.get('C:\\Users\\xxxxxx\\Desktop\\xmloutput.xml', function(xml) {
alert("it works");
// Split the lines
var $xml = $(xml);
// push series
$xml.find('Row').each(function(i, row) {
var seriesOptions = {
Category: $(series).find('Category').text(),
Actual: $(series).find('Actual').text(),
};
// add it to the options
globalData.push(seriesOptions);
});
});
// });
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '60%'
}
},
series: [{
data: globalData
}]
},
// using
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#ddd',
}).add();
// Render the text
chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
});
I believe my actual problem may be that my xml-parsing syntax is incorrect but running this on the development console in Firefox reveals no errors. Hopefully the experts here can spot the issue(s)
Thanks for your time.
One imediate problem that I can see is using local path
$.get('C:\\Users\\xxxxxx\\Desktop\\xmloutput.xml',
$.get first parameter is url that is location on network it could be something like $.get('http://localhost/xmls/xmloutput.xml,...

How to update a value in a cvs file through a mouse click on highcharts graphs

I want to update my cvs file through a mouse click on a graph, like I create a graph by reading a data from the same cvs file and when I get a graph what I want is that whenever I click on a point it make that point equal to zero on y-axis and update the corresponding value in a cvs file equal to 0.
Please can someone help. Here is my code which can take values from cvs file but is not updating but the same code works fine if I take hard coded series of an array.
Don't understand why isn't these plot options working.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'},
title: { text: 'Output'},
xAxis: { categories: []},
yAxis: {
title: { text: 'Units'} },
plotOptions: {
series: { cursor: 'pointer',
point: {
events: { click: function() {
var y = this.item(y);
var x = this.x;
chart.series[0].data[x].update(y -= y);} } } },
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item));
});
options.series.push(series); });
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
You can catch click point action http://api.highcharts.com/highcharts#plotOptions.series.point.events.click and then use get new value from csv by ajax and use update() function http://api.highcharts.com/highcharts#Point.update()

Categories