I am fighting this problem for almost a week. After googleing it a lot I decide to put here exactly what is my problem to see if someone can provide some light.
I am developing a website application using google chart. I am developing it with Visual Studio 2013 in ASP .NET. The application is published in IIS 8.5. The weird thing is that it was working fine until last week when I had do perform a server restart. After restarting it the application seems to be no able to load the JS API (not just google chart but any JS, including JQuery).
If I copy a google chart example (plain html with JS inside it) and open in Chrome it works so the javascript api is loading. The problem happen just when I try to run it from inside VS Studio (the erro message is [0x800a1391 - JavaScript runtime error: 'google' is undefined] or try to publish it.
Could it be some kind of network policie blocking it? How can I check it?
Here is the head of the default.aspx file
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
font-size: xx-large;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.gstatic.com/charts/loader.js">
google.load('visualization', '1', { packages: ['corechart', 'bar', 'table', 'controls']});
</script>
<script src="GraphsAndTables.js"></script>
<script>google.setOnLoadCallback(DrawAll);</script>
As you can see the src are correct (I double check it and it loads in plain htlm).
I change the position of google.load() but it still giving the same erro.
You are using old library loader code you need to update your loader code or load both the old library loader and the new library loader.
Limitations: For Geochart and Map Chart, you must load both the old library loader
and the new library loader.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Your code should look like below
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>// Old Library Loader
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart', 'bar', 'table', 'controls'] });
</script>
Check Google documntation to Update Library Loader Code
Related
I have a d3 plot that uses the following script:
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
I get the error:
(index):677 Uncaught ReferenceError: d3 is not defined
*I have tried the previous solutions where I save the script locally and add the charset without any luck
I should also say that I can load v3 without issues:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
But v4 has a function d3.stratify which my visualization uses. I'm hosting this page in a larger enterprise web application where jquery is being loaded. When I host my project separately from the enterprise app (no jquery, just d3) it loads fine.
Is there any way that I can verify this conflict for sure before turning jquery off?
Thanks
The problem occurs if you have requirejs or ther Commonjs/AMD implementation library in your page.
The default UMD bundle is now anonymous. No d3 global is exported if AMD or CommonJS is detected. In a vanilla environment, the D3 microlibraries share the d3 global, even if you load them independently; thus, code you write is the same whether or not you use the default bundle.
So your code should be either like this:
<html>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script>console.log(d3)</script>
</body>
</html>
https://jsfiddle.net/3dxuvjke/2/
or like this:
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
<!-- <script src="https://d3js.org/d3.v4.js"></script> -->
<script>
require.config({
paths: {
d3: "https://d3js.org/d3.v4"
}
});
require(['d3'], function(d3){
console.log(d3)
})
</script>
</body>
</html>
https://jsfiddle.net/3dxuvjke/
I am using amcharts library for charting.
Amcharts sometimes doesnt load.Its loading after few page refreshing.
It doesnt any errors on console.
Here is order of chart library js:
<script src="js/amcharts.js"></script>
<script src="js/ammap.js"></script>
<script src="js/turkeyLow.js"></script>
<script src="js/amchart_serial.js"></script>
what can I do for this issue?
I am loading Google Visualization (for the core chart module) and am having issues with Microsoft Edge 20.1040.16384.0.
Here is a pared down version of the page which does nothing other than load the module:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
</script>
</head>
<body>
</body>
</html>
I am getting "Unexpected end tag." on the console reported on line 7 (the close tag on the block that is running google.load
Does anyone have any clue what is going on here?
P.S. The non-pared down version of my page (not shown here) is working fine in Chrome, but there are some issues in Firefox (though no error on the console)... so I am wondering if the Firefox issue might be connected to this. But I figure I can solve this issue and then try to figure out what is happening with Firefox.
My project is in angualr js which is working in my local with highcharts fine but when I tried to deploy on the server it is giving error highhcarts is not define . whne i searched on the internet i found there is problem with grunt.js which is minify the js so does any one have idea how to get rid of that error (highchart is not define!!! )
Either you have included the highcharts script twice, or you haven't included the highcharts script at all.
When using highcharts-ng you need to include these:
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="../../src/highcharts-ng.js"></script>
<script src="app.js"></script>
</head>
Here is a DEMO of using "highvcharts-ng". Click on "ExternalResources" to see what scripts are loaded.
I'm adding these headers corresponding to my local system path
<script language="javascript" src="/js/graphael/raphael.js" type="text/javascript"></script>
<script language="javascript" src="/js/graphael/g.raphael.js" type="text/javascript"></script>
<script language="javascript" src="/js/graphael/g.pie.js" type="text/javascript"></script>
But I'm getting JavaScript error like:
Raphael is not defined in g.raphael.js file
latest version of g.raphael and raphael are not compatible with each other. They changed their API and never really bothered to document it properly
Are you sure the paths to the files are correct? You can inspect them using firebug, or add an alert statement to each of the files and verify that they are run.