Menu
In jsfiddle they have option to set no wrap(head), no wrap(body), OnDomReady and OnLoad in left side option. In my program to set no wrap(head) condition. Its work fine. But how I change in to HTML file. The same condition I need to set in my HTML file
Demo: JSFIDDLE
Here I set no-wrap(head), How I set HTML file the same condition as no-wrap(head)?.
Here my full code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['Russia', 700]
]);
// this chart is drawn in a visible div and then immediately hidden
var chart1 = new google.visualization.PieChart(document.getElementById('chart_1'));
google.visualization.events.addListener(chart1, 'ready', function () {
// hide the div when done drawing
document.getElementById('chart_1').style.display = 'none';
// create an event listener for the button that shows the chart
document.getElementById('clickMe1').onclick = function () {
document.getElementById('chart_1').style.display = 'block';
}
});
// show the div before you draw
document.getElementById('chart_1').style.display = 'block';
chart1.draw(data, {
height: 300,
width: 400,
title: 'Chart 1'
});
// this chart only gets drawn when the button is clicked
var chart2 = new google.visualization.PieChart(document.getElementById('chart_2'));
// create an event listener for the button that shows the chart
document.getElementById('clickMe2').onclick = function () {
document.getElementById('chart_2').style.display = 'block';
chart2.draw(data, {
height: 300,
width: 400,
title: 'Chart 2'
});
}
}
</script>
<style type="text/css">
#visualization path {
cursor: pointer
}
</style>
</head>
<body>
<input type="button" value="Show chart 1" id="clickMe1" />
<input type="button" value="Show chart 2" id="clickMe2" />
<div id="chart_1" style="display: none"></div>
<div id="chart_2" style="display: none"></div>
</body>
</html>
Thanks for advise.
449
That simply means place your JavaScript between the <head> tags
From the documentation page
Reference
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
