This is simplified version of my chart:
<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 jsonData = '{"cols":[{"id":"","label":"date","type":"string"},{"id":"","label":"a","type":"number"},{"id":"","label":"b","type":"number"}],"rows":[{"c":[{"v":"2012-05-01"},{"v":"1"},{"v":"8"}]},{"c":[{"v":"2012-05-02"},{"v":"1"},{"v":"7"}]},{"c":[{"v":"2012-05-03"},{"v":"1"},{"v":"38"}]}]}';
var data = new google.visualization.DataTable(jsonData);
var options = {
title : 'Company Performance',
pointSize : 5,
chartArea: {width: 800, height: 800},
width: 800+300, height: 800+600,
legend:{position: 'bottom',maxLines: 3},
vAxis: {direction:-1, minValue: 1, viewWindowMode: 'explicit', viewWindow:{min:1}},
colors : ['#0E9DFF','#9616F3']
};
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>
My aim is to set minimum value of vAxis to 0.
It works, but how to make it to be shown?
And how to move the horizontal axis to the bottom?
Related
I would like to use google chart with flask.If i move the js code to html file it works fine.
However, Separating js code from html file does not work. The chart is not displayed.
[main.html]
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="{{ url_for('static',filename='js/g_chart.js')}}"></script>
...
<div id="curve_chart2" style="position:absolute; top:100px;width: 400px; height: 400px"></div>
<div id="curve_chart" style="position:absolute; top:300px;width: 800px; height: 100px"></div>
[g_chart.js]
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'A', 'B'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
backgroundColor: { fill: "#000000"},
fontSize:12,
fontColor:"#FFFFFF",
titlePosition: 'in',
hAxis: {
color: '#FFFFFF',
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
var chart2 = new google.visualization.ScatterChart(document.getElementById('curve_chart2'));
chart.draw(data, options);
chart2.draw(data, options);
}
Is there any solution?
Separated code into js, good. But it still needs to be triggered.
make code to build chart a function
in html script add an event listener to call function in 1
gchart.js
function buildchart() {
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'A', 'B'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
backgroundColor: { fill: "#000000" },
fontSize: 12,
fontColor: "#FFFFFF",
titlePosition: 'in',
hAxis: {
color: '#FFFFFF',
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
var chart2 = new google.visualization.ScatterChart(document.getElementById('curve_chart2'));
chart.draw(data, options);
chart2.draw(data, options);
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GChart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="/static/js/gchart.js"></script>
</head>
<body>
<main>
<section>
<h1>Hello</h1>
<div id="curve_chart2" style="position:absolute; top:100px;width: 400px; height: 400px"></div>
<div id="curve_chart" style="position:absolute; top:300px;width: 800px; height: 100px"></div>
</section>
</main>
<script>
document.addEventListener("load", buildchart());
</script>
</body>
</html>
All I want to do is change the background color to transparent, yet I can't even change the color at all no matter the combination of options I see anywhere in the (fantastic!...) documentation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
In options of course for Classic GViz:
backgroundColor: {fill:'transparent'},
This will not work if you are using Materials BETA
But the following will work for Classic and Materials
Make a <style> block at the closing tag of </head>
Add this ruleset:
rect {
fill:transparent;
}
OP is using Materials and it is documented at the Materials Bar Chart section the following:
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.
Also, the way options are declared is not finalized, so you must convert your options by replacing this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
In Snippet 2 one can plainly see that we can indeed make GViz chart background transparent. The core graphics are SVG, so if we want to have more control of our charts graphically, we would need to know a little SVG.
SNIPPET 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>Basic GVis ChartWrapper Setup</title>
<style>
body {background:url(http://www.koolchart.com/images/background.jpg)no-repeat; background-size:cover;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
var options = {
backgroundColor: {fill:'transparent'},
title: 'Google Visualization ChartWrapper Setup',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 22
},
hAxis: {
textStyle: {
color: '#993300'
},
title: 'Subjects',
titleTextStyle: {
color: '#993300',
fontName: 'Verdana',
fontSize: 22
}
},
vAxis: {
maxValue: 1000,
textStyle: {
fontName: 'Verdana',
color: '#993300'
},
title: 'A Quick Basic ChartWrapper Setup from a Remote Google Sheet Source',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 16
}
}
};
function drawChart() {
chart = new google.visualization.ChartWrapper();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Place your URL within setDataSourceUrl(...HERE...)
chart.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1_ljk07nqJf_A5tM5BJyVCHTc5Uw8jxBqdCDudJJgvmA/edit#gid=1248768532');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
chart.setChartType('LineChart');
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}
</script>
</head>
<body>
<header>
<details>
<summary>
<p><a href='http://embed.plnkr.co/GKvadm3yOBYHJoOjisWs/'>Snippet</a> and <a href='http://plnkr.co/edit/GKvadm3yOBYHJoOjisWs?p=info'>README.md</a> file available at: Plunker.</p>
<p><a href='https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject'>ChartWrapper Reference</a>
</p>
</summary>
</details>
</header>
<section id="chart"></section>
</body>
</html>
SNIPPET 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>G04B32</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: {
fill: 'transparent'
},
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
backgroundColor: {
fill: 'transparent'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
<style>
body {
background: url(http://previews.123rf.com/images/vitalli/vitalli1401/vitalli140100012/25204290-Chessboard-background-texture-Stock-Photo.jpg)no-repeat;
background-size: cover;
}
rect {
fill: transparent;
}
</style>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I'm trying to create an HTML based dashboard from which we can monitor the temperature of different server cabinets around work. My problem is that I can't get the gauges to display at all. Included below is the code I have so far.
Thanks
<!DOCTYPE html?>
<html>
<head>
<title>BCS Temperature Monitor</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']]);
google.charts.setOnLoadCallback(drawChart);
function drawChart (){
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random)));
chart.draw(data, options);
}, 13000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random)));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random)));
chart.draw(data, options);
}, 26000);
}
</script>
</head>
<body>
<div class="page">
<div class="wrapper" id="header">
<div id="chart_div" style="width: 400px; height: 120px;">Hello</div>
</div>
<div class="wrapper" id="content">
</div>
<div class="wrapper" id="footer">
</div>
</div>
</body>
There are a number of small mistakes, see working demo here:
http://codepen.io/anon/pen/wzBArA
Script tags cannot be closed with <script />, you must use <script></script>
Your line calling google.charts.load used a second ] instead of a }
Your setInterval method had an extra ) after the Math.random call
Using a simple google chart, I am trying to use jQuery .load to push/pull that chart into another web page which will have the containing DIV:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"],callback: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',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id="test_div">this div loads fine</div>
</body>
</html>
and here is a sample page that will have the containing DIV:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1query.min.js">
</script>
</head>
<body>
<script>
$(document).ready(function(){
$('#my_div').load('chart.html #chart_div', function() { drawChart(); });
});
</script>
<div id="my_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I have tried various loading techniques by removing google.setOnLoadCallback(drawChart);
and replacing it with the $document.ready but nothing seems to work.
I have gone through each one of the similar questions posted here but cannot seem to get this working.
any insight appreciated, Thanks!
edit: I noticed that by adding this line to the "container.html" file:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
and changing:
$('#my_div').load('chart.html #chart_div', function() { drawChart(); });
to
$('#my_div').load('chart.html', function() { drawChart(); });
or even:
$('#my_div').load('chart.html');
It will indeed load the whole page into "#mydiv" but what I want is to just load the specific "#chart_div" into "#mydiv"
i have similar problem. My google chart not load with jquery version 1.11.1
if you remove jquery-1.11.1 or similar and add
<script type="text/javascript">
google.load("search", "1");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>`
its working
How can I make the second DIV into an on click event? I have both of them displaying right now. I want to display one then when you click it displays the second one and back and forth.
I have never used HTML or JavaScript before so bear with me.
<html>
<head>
<DIV class="container"><HGROUP>
<H1>University of Illinois Hospital and Health Sciences</H1>
<H2>Storage Availability Charts and Graphs</H2></HGROUP><NAV
class="navbar"></div>
<DIV class="container">
<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([
['Storage', 'Terabytes'],
['Raw', 95],
['Usable', 34],
]);
var options = {
legend: 'none',
pieSliceText: 'label',
title: 'EEI VNX5700',
pieStartAngle: 100,
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</div>
<DIV class="container">
<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([
['Unallocated', 'Used', 'Free'],
['Cerner fast pool', 1000, 400],
['General fast pool', 1170, 460],
['Raid', 970, 644]
]);
var options = {
title: 'Unallocated',
vAxis: {title: 'Pools', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</div>
<body>
<div id="piechart" style="width: 700px; height: 400px;"></div>
</body>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</head>
</html>
If you want them to switch visibilities you should give them each a seperate id.
Then you will need to use javascript (jquery is an easy way to work with javascript)
The jquery code would look something like this
$('#div1').click(function(){
$('#div2').show();
$('#div1').hide();
});
$('#div2').click(function(){
$('#div1').show();
$('#div2').hide();
});
To use jquery get the library here: http://jquery.com/
If you don't want to use jquery here are simple show/hide functions:
<script>
function show(id) {
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display='block';
}
return false;
}
function hide(id) {
if(document.getElementById(id).style.display=='block') {
document.getElementById(id).style.display='none';
}
return false;
}
</script>
then just add those to your div onclick: <div id='div1' onclick='show("div2");hide("div1")'></div>
Ok if you want a div to be hidden when the page loads you can do (in jquery) $('#idOfDiv').hide() then to get the div to toggle you can do a $('#idOfDiv').toggle() Now if you want something to be an onClick even all you have to do is put it all in a
$("#secondDiv").hide();
$( "#firstDiv" ).click(function() {
$('#secondDiv').toggle();
});
$( "#secondDiv" ).click(function() {
$('#firstDiv').toggle();
});
example: http://jsfiddle.net/AFPT2/1/