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/
Related
I've been messing around with paperjs for a while and have written a 1500+ lines of code single file that I'd really love to split up into multiple files to make it more readable.
Initially I thought i could just make a library.js file that I'd put in the public/scripts directory and load into my page using <script src="/scripts/library.js"></script>. However, calling any function that is retained in library.js would then yield an error such as:
ReferenceError: Path is not defined
So how would i store functions in- and use them from external files the right way?
You got that error because you miss to set your tag type to "text/paperscript", and not "text/javascript" like you use for loading paperjs.
Try this way:
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.min.js"></script>
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="library.js" canvas="myCanvas"></script>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
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
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 have a project built on top of Zurb Foundation, now I need to use some FuelUX components such as "wizard" and "tree". For that I include Twitter Bootstrap library (2.3.2 version downloaded from Bootstrap site) and also include "all.min.js" from FuelUX, when I use the same HTML markup as come in index.html but for some reason it doesn't work. So I tried to fire the plugin using $("#MyWizard").wizard() and get this error:
TypeError: $(...).wizard is not a function
$("MyWizard").wizard();
Any ideas in how to get this work?
How I include scripts
This is the order in which I include scripts:
<script type="text/javascript" src="/bundles/product/js/bootstrap/bootstrap.min.js?0.1"></script>
<script type="text/javascript" src="/bundles/product/js/fuelux/all.min.js?0.1"></script>
<script type="text/javascript" src="/bundles/stock/js/jquery-impromptu.js?0.1"></script>
<script type="text/javascript" src="/bundles/product/js/product.js?0.1"></script>
<script>
$("MyWizard").wizard();
</script>
This was also posted to https://github.com/ExactTarget/fuelux/issues/259 and from what I'm seeing, being careful to follow the instructions at https://github.com/ExactTarget/fuelux/wiki/Using-Fuel-UX#simple-integration-into-a-page should straighten things out. Hope this helps!
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.