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?
Related
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
Currently, have a web app for appointments. I had a question answered around last week at the following link: jQuery and Bootstrap dialog not coming up
I got this working. However, I just noticed that this messes up my NavBar that is stored in my layout file. On any other page, the NavBar works, but on the Calendar page it doesn't respond. The only thing I can think of is the scripts are clashing.
I tried taking them out of my calendar page but this causes my calendar to not pop up with a dialog. I must be doing something wrong here but I honestly don't know.
Here is my layout file's scripts.
#Styles.Render("~/Content/Site.css")
#Styles.Render("~/Content/jquery.datetimepicker.css")
#Styles.Render("~/Content/fullcalendar.css")
#Scripts.Render("~/bundles/modernizr")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
My Calendar File Scripts:
#section Scripts{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
}
If more code is needed, I can supply it.
EDIT Image of my console after I load Calendar:
EDIT 2 Image of my console after I load Calendar after removing one instance of Jquery:
Turns out I had an error on my Layout Page that was causing hassle.
The scripts section weren't being rendered as I had RenderSection("Scripts", false)
Removed the scripts section and that and the error went away!
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 trying to get a google map loaded into a post.
In the header i load:
<script type="text/javascript" src="http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
In the post in wordpress i load:
<div id="map_div"></div>
You can see the .js here: http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js
The map does not show at all, so i am hoping you guys can help me with this.
As #Anto Jurković mentioned in the comments you need to include your parking.js at last.
You're initialize the map and other objects when these objects don't exist yet because your jquery and Google Maps are loaded later. Also you don't provide your API key when you load the maps javascript, so Google won't provide you the map.
So it must be:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=true" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js"></script>
How you can get the API key is documented in the official Google Maps v3 Documentation.
TL;DR: You'll get it with the Google Developer Console
None of the above worked. It does not matter when the script is loaded, and the script should also be loaded using the functions.php in wordpress i found out.
The div should have a size property, and this resulted in the map being displayed
I am working on a website that I use different jQuery files for different functions.
Such as light box, scrolling page horizontally. these to functions work perfectly togeter. But I added a new plugin which is parallax image. And in a part of the plugin I have to add the following script in the body or head tag. So as soon as I add that, the parallax image works but the horizontal scroll stops.
here is the scripts:
<script type="text/javascript">
$(window).load(function() {
$.noConflict();
jQuery('#world').fhparallax({
editor:'off',
automatic:0,
mobile_auto_start:"yes",
path:'parallax/js/ZeroClipboard.swf'
})
});
</script>
And these are the files related to horizontal scrolling:
<script type="text/javascript" src="style/js/jquery.js">
</script>
<script type="text/javascript" src="style/js/jquery.scripts.js">
</script>
<script type="text/javascript" src="style/js/jquery.nivo.slider.js">
</script>
As I am using the Nvio slider so I think you know about the top links, but if you require I can give the the actual links of these js files.
Anyway I as I tested, everything is about (function() b/c when I changed it, in the top scripts the slider worked.
So is it possible to have both of these tools at the same page? If so, can you guide me to fix it please?
Thanks