I am trying to load the contents of a div which changes when a listener is triggered.
The java code I currently have is:
public static void main(String arg[]) throws IOException{
String url = "http://localhost/chartsTest/test.html";
WebClient wc = new WebClient();
HtmlPage p = null;
try {
System.out.println("Attempting to load page: " + url);
p = wc.getPage(url);
System.out.println("Sucsess!");
} catch (Exception e) {
System.err.println("Failed to get page");
}
JavaScriptJobManager m = p.getEnclosingWindow().getJobManager();
int c;
while ((c = m.getJobCount()) > 0){
System.out.println("Jobs: " + c);
try {
Thread.sleep(1000);
} catch (InterruptedException e) {}
}
div = p.getHtmlElementById("test");
content = div.asText();
System.out.println(content);
wc.close();
}
and my test.html page (which loads a google chart) is:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// var query = new google.visualization.Query('simpleexample?tq=select name,population');
// query.send(handleSimpleDsResponse);
handleSimpleDsResponse(true);
function handleSimpleDsResponse(response) {
// var data = response.getDataTable();
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var chart_div = document.getElementById('chart_div');
var chart_data = document.getElementById('chart_data');
var test = document.getElementById('test');
var chart = new google.visualization.AreaChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
chart_data.innerHTML = chart.getImageURI();
test.innerHTML = "after";
});
chart.draw(data);
}
}
</script>
</head>
<body>
<div id="test">before</div>
<div id='chart_div'></div>
<div id="chart_data"></div>
</body>
</html>
but when I print the div it always equals before and not after. How can I get the value for after the chart has finished loading?
This is a bug of handling Promise.resolve(), and it has been fixed in SVN.
Please use new WebClient(BrowserVersion.CHROME), with the latest build or snapshot.
There is no need to wait(), as it is not AJAX-based.
Related
I've been trying to get a dynamic chart working with CanvasJs. I have a file that gets updated (by another program) and I would like to update my chart each time I have a new record.
I've seen this example (last chart) and I tried to do the same but I'm actually reading from a file.
Here is my code :
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var dps = [{x: new Date(2017, 04, 20, 07, 20, 00 ), y: 30}]; //dataPoints.
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: " Cooling Machine Status "
},
axisX:{
valueFormatString: "DD-MM-YY HH:mm:ss" ,
labelAngle: -50
},
axisY:{
title: "Cooling Temperature (F)"
},
data: [{
type: "line",
showInLegend: true,
name: "Temperature",
dataPoints : dps
}]
});
chart.render();
var updateChart = function () {
var rawFile = new XMLHttpRequest();
rawFile.open("GET","/analyticResults/coolingMachine.csv", true);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var dps = csvLines = points = [];
csvLines = rawFile.responseText.split(/[\r?\n|\r|\n]+/);
for (var i = 0; i < csvLines.length; i++)
if (csvLines[i].length > 0) {
points = csvLines[i].split(",");
var dateTime = points[0].split(" ");//dateTime[0] = date, dateTime[1] = time
var date = dateTime[0].split("-");
var time = dateTime[1].split(":");
dps.push({
x: new Date(date[2], date[1], date[0], time[0], time[1], time[2]),
y: parseFloat(points[1])
});
}
}
}
};
rawFile.send(null);
if (dps.length > 10 )
{
dps.shift();
}
chart.render();
};
setInterval(function(){updateChart()}, 1000);
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 70%;">
</div>
</body>
</html>
When I debug the javascript I can see that the values are getting pushed in dps but the chart is not updating...
Did I miss someting ?
Thank you for your time
You are passing dps to chart-dataPoints. But at the same time you are pushing dps that is declared locally within updateChart method. Removing dps declaration within updateChart method should work in your case.
I want to show google chart using data that i acquired from SQL server using javascript. But i got IE error "Unable to get property arrayToDataTable" even i already add google chart JS. I already check the data by alert it, and the data is ok. How to fix this?
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var array = loadData();
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart(array));
function loadData(){
var array = [
['Year', 'Sales', 'Expenses', 'Profit']
];
//Connection
var connection = new ActiveXObject("ADODB.Connection") ;
var connectionstring="Provider=SQLOLEDB.1;Password=Password1234;Persist Security Info=True;User ID=sa;Initial Catalog=all_data;Data Source=172.16.11.90";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("SELECT * FROM bar_chart", connection);
rs.MoveFirst;
while(!rs.eof)
{
array.push([rs.fields(0), parseInt(rs.fields(1)), parseInt(rs.fields(2)), parseInt(rs.fields(3))]);
rs.movenext;
}
rs.close;
connection.close;
return array;
}
function drawChart(x) {
alert(x[4][3]);
var data = google.visualization.arrayToDataTable(x);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
}
</script>
And here is my html:
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
This error occurs since google.setOnLoadCallback function expects a callback as an argument.
Replace:
var array = loadData();
google.setOnLoadCallback(drawChart(array));
In this case drawChart function is invoked immediately without
waiting google visualization API to load
with:
google.setOnLoadCallback(function () {
var array = loadData();
drawChart(array);
});
Example
google.load("visualization", "1.1", { packages: ["bar"] });
google.setOnLoadCallback(function () {
var data = generateData();
drawChart(data);
});
function generateData() {
var data = [
['Year', 'Sales', 'Expenses', 'Profit']
];
for (var year = 2000; year < 2010; year++) {
data.push([year.toString(), getRandomArbitrary(100, 200), getRandomArbitrary(100, 400), getRandomArbitrary(100, 500)]);
}
return data;
}
function drawChart(data) {
var dataTable = google.visualization.arrayToDataTable(data);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(dataTable, options);
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
I'm trying to make a google line chart with 2 lines in it.
You should be able to turn them on and off(show/hide) by two checkboxes..
Anyone got any idea show to make this, og just give some pointers?
My guess would be some onClick jQuery stuff?
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
try this
Mark up:
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button type="button" id="hideSales" >Hide Sales</button>
<button type="button" id="hideExpenses" >Hide Expence</button>
</body>
Script:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var hideSal = document.getElementById("hideSales");
hideSal.onclick = function()
{
view = new google.visualization.DataView(data);
view.hideColumns([1]);
chart.draw(view, options);
}
var hideExp = document.getElementById("hideExpenses");
hideExp.onclick = function()
{
view = new google.visualization.DataView(data);
view.hideColumns([2]);
chart.draw(view, options);
}
}
</script>
To get your required output check this code.
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is null, we clicked on the legend
if (sel[0].row == null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, options);
}
}
});
Instead of having a checkbox, use the legend to hide/show the lines.
Recently the behavior of the select event changed so Abinaya Selvaraju's answer needs a slight fix
if (typeof sel[0].row === 'undefined') {
...
}
becomes
if (sel[0].row == null) {
...
}
I updated the solution provided by Shinov T to allow real toggling (show/hide) of columns. You can see the result in this fiddle.
I added this code to save the current state of each column to allow toggleing:
var toggleSales = document.getElementById("toggleSales");
var salesHidden = false;
toggleSales.onclick = function() {
salesHidden = !salesHidden;
view = new google.visualization.DataView(data);
if (salesHidden) {
view.hideColumns([1]);
}
chart.draw(view, options);
}
var toggleExp = document.getElementById("toggleExpenses");
var expHidden = false;
toggleExp.onclick = function() {
expHidden = !expHidden;
view = new google.visualization.DataView(data);
if (expHidden) {
view.hideColumns([2]);
}
chart.draw(view, options);
}
I have a javascript file that is loading up the google charts API and drawing a graph, and another javascript file that handles an html form on the page. I'd like to fuse these two together, as the form will be providing the graph with data. However, when I try to put there google charts js file (graph.js), it refuses to load the graph. I've tried putting it in several locations, but it only loads if the graph.js is a separate js file that is linked within the html document. Can someone tell me how I can properly combine these two files:
CostComparer.js (the form handler):
$(document).ready(function(){
//variable setup
var wifi;
var firewall;
var backup;
var vpn;
var install;
var result;
$('#submit').click(function(){
$("#chart_div").show('slow');
$("#table_div").show('slow');
wifi = $('input[name=wifiPrice]').val();
firewall = $('input[name=firewallPrice]').val();
backup = $('input[name=backupPrice]').val();
vpn = $('input[name=vpnPrice]').val();
install = $('input[name=installPrice]').val();
result = parseInt(wifi) + parseInt(firewall) + parseInt(backup) + parseInt(vpn) + parseInt(install);
var resultbox = $('#result');
var cccontainer = $('#cccontainer');
if(resultbox.height() < 10){
cccontainer.hide('slow').delay(500);
cccontainer.show('slow');
setTimeout(function() {
resultbox.append('<h1>You Paid: <br />$' + result + '</h1>')
}, 500);
} else {
resultbox.empty()
cccontainer.hide('slow').delay(500);
cccontainer.show('slow');
setTimeout(function() {
resultbox.append('<h1>You Paid: <br />$' + result + '</h1>')
}, 500);
}
});
});
and graph.js:
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
var competitorCost = function(time){
return 3000 + (time * 300)
};
var ourCost = function(time){
return 1000 + (time * 50);
};
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'Entreda', 'Competitors'],
['0', ourCost(0), competitorCost(0)],
['6', ourCost(6), competitorCost(6)],
['12', ourCost(12), competitorCost(12)],
['18', ourCost(18), competitorCost(18)],
['24', ourCost(24), competitorCost(24)]
]);
var options = {
title: 'Entreda vs Competitor Costs',
width: 445,
height: 250,
pointSize: 5
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
There was a problem with my compiler it seems. It worked after appending graph.js to the bottom outside of $document.ready():
$(document).ready(function(){
//variable setup
var wifi;
var firewall;
var backup;
var vpn;
var install;
var result;
$('#submit').click(function(){
$("#chart_div").show('slow');
$("#table_div").show('slow');
wifi = $('input[name=wifiPrice]').val();
firewall = $('input[name=firewallPrice]').val();
backup = $('input[name=backupPrice]').val();
vpn = $('input[name=vpnPrice]').val();
install = $('input[name=installPrice]').val();
result = parseInt(wifi) + parseInt(firewall) + parseInt(backup) + parseInt(vpn) + parseInt(install);
var resultbox = $('#result');
var cccontainer = $('#cccontainer');
if(resultbox.height() < 10){
cccontainer.hide('slow').delay(500);
cccontainer.show('slow');
setTimeout(function() {
resultbox.append('<h1>You Paid: <br />$' + result + '</h1>')
}, 500);
} else {
resultbox.empty()
cccontainer.hide('slow').delay(500);
cccontainer.show('slow');
setTimeout(function() {
resultbox.append('<h1>You Paid: <br />$' + result + '</h1>')
}, 500);
}
});
});
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
var competitorCost = function(time){
return 3000 + (time * 300)
};
var ourCost = function(time){
return 1000 + (time * 50);
};
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'Entreda', 'Competitors'],
['0', ourCost(0), competitorCost(0)],
['6', ourCost(6), competitorCost(6)],
['12', ourCost(12), competitorCost(12)],
['18', ourCost(18), competitorCost(18)],
['24', ourCost(24), competitorCost(24)]
]);
var options = {
title: 'Entreda vs Competitor Costs Over Time',
width: 480,
height: 270,
pointSize: 5
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Hi I have the following script
The page can also be seen in action here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<!-- Version: 1.0.0 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body onLoad="myFunction()">
Show All Coverafdedge
Show: </div>
<p><span id="x">0</span>, <span id="y">0</span></p>
<p><input id="enableTooltip" type="checkbox">Enable tooltip</p>
<script type="text/javascript">
var datasets = [];
var xmlhttp;
function loadXMLDoc(url,cfunc){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction(){
loadXMLDoc("parsers.json",handleXML);
}
var checkState = function(xmlhttp, callback) {
//document.write(xmlhttp.readyState);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback();
} else {
// Check back again 1 sec later
setTimeout(checkState, 1000);
}
};
function handleXML() {
checkState(xmlhttp, function() {
var txt=xmlhttp.responseText;
datasets = [];
var datasetsCounter =0;
var secondPos = 0;
var aPosition = 0;
var currentCharacterLocation =0;
var textLeft =txt;
do
{
aPosition = textLeft.indexOf("#");
secondPos = textLeft.indexOf(";");
evaluedText = textLeft.substring(aPosition+1,secondPos);
datasets[currentCharacterLocation] = eval("(" + evaluedText + ")");
currentCharacterLocation++;
textLeft = textLeft.substring(secondPos + 1);
}
while (textLeft.indexOf("#") > -1);
});
}
function printing(){
for(var g =0; g < datasets.length; g++ ){
document.write(datasets[g].cover.data + "__");
}
}
$(function () {
var d1 = [];
var d2 = datasets[0].cover.data;
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>
</body>
</html>
Now to my problem that I have with the variable "datasets", if I for example try to print out "datasets[0].cover.data" (Like I do in my function printing(), I can do that (Try yourself clicking on the link on that page). But when I try to use the variable inside the
"var d2 = datasets[0].cover.data", I get the error that its datasets[0].cover.data is not defined :S
Anyone know what I am doing wrong here? =)
Thanks
Your issue is that the function in $(function() { ... }); is running when your body onload is called. You need to do something like
$(function () {
loadXMLDoc("parsers.json", function () {
handleXML(); // possibly add a callback to this function which calls the remaining code in this function
var d1 = [];
var d2 = datasets[0].cover.data;
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [d1, d2, d3]);
});
});
And then remove the call from body onload
Your function is running on document ready, but before the datasets variable is populated.
Move the code to the end of the callback function:
do
{
...
}
while (textLeft.indexOf("#") > -1);
var d1 = [];
var d2 = datasets[0].cover.data;
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ]);
});
}
You haven't initialised the array at the time you call "var d2 = datasets[0].cover.data".
Well, there is nothing in datasets at that point, so there is no datasets[0], so of course there can be no datasets[0].cover.data!
Ask yourself: How is datasets supposed to be populated, and where and when is that to occur?
It gets populated in handleXML but that only happens after the var d2 line.
Also, using eval is generally frowned upon, see this stackoverflow question for details.