I am using google visualization api javascript for some images on my website. So when i am using the javascript and if the user clicks on view source, it is revealing all the information in the javascript source code which i do not want it to happen.
So i have tried to save the javascript into piechart.js file and call it like this
<script type="text/javascript" src="piechart.js"></script>
and then call the ID of the chart in the div like this on the same page. But the chart is not being displayed on the webpage.
Here is the code of index.php
<script type="text/javascript" src="piechart.js">
<div id="piechart"></div>
I am sure my code is correct for the chart to display because when i place the code instead of the piechart.js i can see the chart and along with code, the values are also being shown. Please help me here. How and where should i call the div?
piechart.js code (would appreciate if someone could align this javascript code correctly.)
<script type="text/javascript">
`
google.load('visualization', '1', {packages: ['corechart']}); <script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Visits');
data.addRows(5);
data.setValue(0, 0, 'Internet Explorer (50.8%)');
data.setValue(0, 1, 50.81);
data.setValue(1, 0, 'Firefox (25.3%)');
data.setValue(1, 1, 25.30);
data.setValue(2, 0, 'Safari (16.09%)');
data.setValue(2, 1, 16.09);
data.setValue(3, 0, 'Chrome (7.53%)');
data.setValue(3, 1, 7.53);
data.setValue(4, 0, 'Opera (0.25%)');
data.setValue(4, 1, 0.25);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('piechart')).
draw(data, {title:"Visits by Browser",width:420, height:300, backgroundColor:'cccccc'});
}
google.setOnLoadCallback(drawVisualization);
</script> `