All geek questions in one place

Javascript violation in google charts

My problem is when I add the js code of any google diagram to an external javascript file. he starts to load the page and does not show anything. in case of embedded javascripts its working mode.

Below 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 works great in external js when this piece of code is not in any js function. but I want to use this in a Javascript function.

Thnx in advance.

MoAZ

+4
source share
1 answer

I fixed the code in 2 working solutions that you can use (tested working with IE, Chrome and Mozilla).

  • JavaScript loading with index page
  • JavaScript loading after button click

.

Solution 1: loading JavaScript with an 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: loading JavaScript after clicking a button

 <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) });
+5
source

Source: https://habr.com/ru/post/1443945/

More articles:


All Articles