I have this google visualization and I would like to maki it full screen on my browser window: http://cl.ly/image/1y0U1m1o2m0m
The code is:
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var a = <?=$elos?>;
var data = google.visualization.arrayToDataTable(a);
var options = {
title: 'blah blah blah',
//curveType: "function",
width: $(window).width(),
height: $(window).height(),
vAxis: {
minValue:800,
maxValue:2000,
textStyle: {color: 'black'}
},
legend:{position: 'none'}
};
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization"></div>
</body>
</html>
Even though it is set to window size and it creates a rect for the size of the window there is a lot of free space around the chart
To make chart be full page size:
chartArea: {width: '90%', height: '90%'}
Related
I am working with jsPDF to create a PDF from my HTML. However, it always generates an empty page doesn't matter which HTML content I enter as the source.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">Hello</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
window.html2canvas = html2canvas;
var doc = new jsPDF("p", "pt", "a4");
doc.html(document.getElementById("content"), {
callback: function(pdf) {
pdf.save("cv-a4.pdf");
}
});
});
</script>
</body>
</html>
What am I doing wrong? In my opinion that matches exactly the documentation. However, as stated above, the pdf generated does not show any content and not the "Hello". ( I took some of the code from this StackOverflow question)
#threxx
Try this code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">
<h1 style="color: brown;">Hello, He/She..</h1>
<p style="color: green;">How Are you ??</p>
Thank you.
</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = window.document.getElementById('content').innerHTML;
doc.fromHTML(source, 30, 30);
doc.save("cv-a4.pdf");
});
</script>
</body>
</html>
I hope above code will be useful for you.
Thank you.
So after doing some more research I found this answer which will return a PDF from the HTML. Small problem: still only very poor CSS styles but afaik jspdf doesn't support custom CSS.
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = document.body;
var margin = {
top: 20,
left: 20,
right: 20,
bottom: 20
};
doc.fromHTML(source, 30, 30, {
'width': 80, // max width of content on PDF
},
function(pdf){doc.save('saveInCallback.pdf');},
margin
);
});
</script>
I have a line chart created in Google Charts API, Now I want to change the LIne Colour and body colour differently,But when i created a chart i can see line and body colour same , please can any one let me know how to change the colours using google API
<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([
['',''],
['',27],
['',25],
['',60],
['',31],
['',25],
['',39],
['',25],
['',31],
['',26],
['',28],
['',80],
['',28],
['',27],
['',31],
['',27],
['',29],
['',26],
['',35],
['',70],
['',25]
]);
var options = {
backgroundColor: {
stroke: '#4322c0',
strokeWidth: 3},
'is3D':true,
series: {0:{color:'#DF013A',lineWidth:2}},
colors:['#D8D8D8'],
backgroundColor: "transparent",
legend: {position: 'none'}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 300px; height: 300px;"></div>
</body>
</html>
<body>
<div id="chart_div"></div>
</body>
</html>
Please refer the below developer documentation to change the line series color and the background color:
Line series color
BG color
Having issue with reading the Excel file on the URL.
Works fine with bar chart, line charts and pie charts.
Geomap code gives this error:
google.setOnLoadCallback(drawVisualization);
HTML:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=0Aih8-LAKMBsKdHRBSllqYkZnS2pfWWtGY2JueHdaRmc&usp=sharing,');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
region: 'US', // US
displayMode: 'markers',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
<head>
<title>NSF Data Online </title>
</head>
<span id='chart_div'></span>
</body>
</head>
<body>
<div id="chart_div" style="width: 700px; height: 500px;"></div>
</body>
<title>Welcome to My Web Page</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<meta content="MSHTML 6.00.2800.1400" name="GENERATOR">
</head>
<body>
These changes must be reflected in the web page .
</body>
<hr>
</html>
My Problem is, when i put js code of any google chart in an external javascript file. it start loading page and dosen't display any thing. in case of inline javascripts its working fine.
following is my HTML code "google barchart.html"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<input type="button" id="btn" value="Show Graph" />
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</body>
</html>
and this is my js file "test.js"
$(document).ready(function() { $('#btn').click(function() { //alert("hi");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
//title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
} }); });
*NOTE: it also working fine in external js when this piece of code is not in any js function. but i want to use this in Javascript function.
Thnx in advance.
Moaz
I fixed up your code into 2 working solutions you may use (tested working with IE, Chrome and Mozilla).
JavaScript loads with index page
JavaScript loads after button click
.
Solution 1: JavaScript loads with index page
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<input type="button" id="btn" value="Show Graph">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test.js
google.load('visualization', '1', {'packages':['corechart']});
$(document).ready(function() {
$("#btn").click(function() {
$("#chart_div").load("", function(){
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip: {trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
});
Solution 2: JavaScript loads after button click
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
function loadjsfile(filename, filetype)
{
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>
</head>
<input type="button" id="btn" value="Show Graph" onclick="loadjsfile('test2.js','js')">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test2.js
$("#chart_div").load("",function(){
var data = new google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip:{trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options)
});
I have the following piece of code to display map in my test web page
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAvY_htg5RzYE1oj2BL4bFvxSRc9RmgUY0ng1PT46gfsZ_uuISzxROX5ZCo6sw1juxfGN03mgyAPAIoA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(xxx,xxx), 13);
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("xxxxxxxxxxxx");
});
map.addOverlay(marker);
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 300px; height: 250px; margin:auto;"></div>
</body>
</html>
I want to redirect to GOOGLE MAP site with exact address location which i used to display Location in Map IF I CLICK ON MAP LOCATION.Hope you understand my requirement. Is it possible?
you could try something like
function returnMapUrl(GLatLngObj){
var point= GLatLngObj || map.getCenter();
return "http://maps.google.com/?ll="+point.lat+','+point.lng;
}
GEvent.addListener(map,"click", function(overlay, latlng) {
window.location = returnMapUrl(latlng);
});