I am trying to use chinmaymk.github.io angular-charts from https://github.com/chinmaymk/angular-charts.
I have copied code from the plnkr example: http://plnkr.co/edit/T9J7bz?p=preview
<div data-ac-chart="'bar'" data-ac-data="data" data-ac-config="config" class="chart"></div>
However I don't get any bars on the chart. I can see the legend, horizontal and vertical axis, just no bars.
The data is set up in the controller.
My index.html file has the following imports:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
<script src="~/App/Vendor/Scripts/d3/d3.min.js"></script>
<script src="~/App/Vendor/Scripts/angular-charts-0.2.0/dist/angular-charts.min.js"></script>
<script src="~/App/app.js"></script>
There are other imports, however I think these are the relevant ones.
My controller and view follow the example above but still I don't see the actual bars.
I don't get any errors in the console.
Any ideas? I am happy to post more code if it would help...
This was solved by removing a script tag referencing a local date.js file. I could not reproduce the error when using: <script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>.
It might have been a corrupt date.js file on my side...
Related
I'm trying to implement Angular UI Bootstrap Iconpicker in my project but it doesn't work because I'm using those js files for angularjs tabs:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
and for ui-iconpicker I use those files:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="#routes.Assets.versioned("bower_components/ui-iconpicker/dist/scripts/ui-iconpicker.min.js")"></script>
I think there is a confusion between the two files (ui-bootstrap-tpls) but when I remove one of them the associated component don't work!! any help please
This problem is known to the author of ui-iconpicker.
See ui-iconpicker Issue #4: Doesn't work with ui-bootstrap >= 0.11.0
#justin-lau justin-lau added the wontfix label on Jan 29, 2015
#rapheki commented on May 20:
i had a similar issue, you need to modifiy the ui-iconpicker.js file and replace in line 156 (the templates/iconpicker.html):
"dropdown>" to "uib-dropdown>"
"dropdown-toggle>" to "uib-dropdown-toggle>"
on my html header i have this two lines:
<html>
<head>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
but if i have this two lines at the same time, bootstrap doesn't work. If i comment the line of the angularjs and leave the line for bootstrap alone, bootstrap will process correctly and format the elements on the page.
i have already tried change the order on headers and add diferent links to download the files, but nothing have worked.
Anyone knows a solution for both to work at the same time?
Thanks
You get the followed error in your console:
Uncaught Error: Bootstrap's JavaScript requires jQuery
So just do it as follow, and you get no errors:
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
This must work :)
I am trying to include one html file (with JSS and CSS code embedded in HTML) into other html file using following code.
File a.html
<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(function(){
$("#includedContent").load("mychart2.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
File mycharts2.html
http://www.megafileupload.com/en/file/585768/mychart2-html.html
After using developer tool, i found following error:
ReferenceError: Highcharts is not defined
jquery-1.9.1.js line 603 > eval:4
and there is no output. How can i fix this issue?
After downloading your html file and taking a look at the code. I believe your issue is the following line:
var chart = new Highcharts.Chart({
According to this highcharts demo I found on jsfiddle. You have the initialization of highcharts incorrect. The code should look like this:
$('#chart116319a1dae9').highcharts({data:...,otherStuff:...});
I highly recommend taking a look at the HighCharts site and taking a look at their Demos
I have a folder with several HTML files. Each of the HTML file uses AngularJS and contain the same declaration like below;
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="vendor/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="vendor/underscore-min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
I think this is bad practice as it violates the DRY (don't repeat yourself) principle. I tried to avoid repeating the above declaration by putting them into a html partial called header.html and put this following line <div ng-include src="'partials/header.html'"></div> into every HTML file in the folder.
However, it did not work and the HTML page did not render the AngularJS scope correctly. Is there something wrong with my approach or are there better ways to go about doing this?
AngularJS embrace the Single Page Application concept.
Technically this means you have only 1 HTML file (lets call it index.html) which contain the <head> and <body> tags.
This means that you can put all your included script files once in this index.html file.
By using the ng-route or ui-router modules, you can contain other partial HTML files that will "use" the same script files.
ng-include is an AngularJS defined directive. AngularJS needs to be loaded for it to be parsed correctly.
However, here you have included angular.min.js as part of the header.html partial. When the browser encounters the ng-include, it has no idea what it means, and simply ignores it. So none of the scripts and styles are loaded.
At a minimum, you need to have angular.min.js loaded in the main file. Everything else can then be inside the partial.
<script src="lib/angular/angular.min.js"></script>
...
<div ng-include src="'partials/header.html'"></div>
There is probably a simple answer to my question although any help will be appreciated.
I use ExtJs with my GE plugin. To get the plugin working I need to include the following in my main HTML page.
<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDS</title>
<script src="https://www.google.com/jsapi" id="GoogleEarth"></script>
<script src="/static/googleearth/Ext.ux.GEarthPanel-1.3.js" id="GoogleEarth"> </script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
</script>
</head>
<body></body>
</html>
Now when I want to remove the following code and try to run it as javascript alone the page seems to keep on loading.
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.xx");
</script>
Even if I remove the code and paste it inside it's own .js file the problem persist.
For example use
<script type="text/javascript" src="/static/GoogleEarthStartup.js" id="Test"></script>
with content like
google.load("earth", "1");
google.load("maps", "2.xx");
It seems to want to stay in the main page with the script tags.
Is there anyway I can get around this problem?
My main reason for asking is I am using a package that overides my main html everytime I save the project.
The package allows me to add scripts via a link as seen above, although it does not make a difference with the outcome.
I get an error saying TypeError: google.earth is undefined
Please advice.
It is probably simply the order of your script elements.
The scripts are executed in the order they are in the document so your error is because something in app.js or Ext.ux.GEarthPanel-1.3.js is referencing google.earth before the file GoogleEarthStartup.js has been executed - hence google.earth is undefined because google.load("earth", "1"); has not yet been called.
Try fix try simply reordering the script elements like so...
<script type="text/javascript" src="//www.google.com/jsapi" id="GoogleEarth"></script>
<script type="text/javascript" src="/static/GoogleEarthStartup.js" id="Test"></script>
<script type="text/javascript" src="/static/googleearth/Ext.ux.GEarthPanel-1.3.js" id="GoogleEarth"></script>
<script type="text/javascript" src="app.js"></script>