I am building a demo to use Durandal to work with D3.js. I modified on the Starter Kit.
It has two views: Welcome and Flickr. I added a new view Chart and copied some d3js visualization javascript code inside my view:
<section>
chart demo
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
//more scripts
<div id="container" style="height: 500px; min-width: 500px"></div>
<script type="text/javascript">
d3 visualization code here.
</script>
chart end
</section>
But I find that in a Durandal view, JavaScript code cannot be included. The above code can only display something like:
chart begin
a empty box of size style="height: 500px; min-width: 500px"
chart end
It seems that all the javascirpt code are removed automatically by Durandal.
My question is how to use JavaScript inside a Durandal view? Thanks!
You could leverage the viewAttached function of your durandal view model to execute d3 code. Like so:
define(function (require) {
var vm = {};
vm.viewAttached = function (view) {
// d3 visualization code here
// use class names to find the container instead of id and you can have multiple instances on the same page
d3.select(view).select(".d3container")
.classed("well", true)
.text('I just styled this div using the magic of D3.');
};
return vm;
});
Related
I'm trying to use a chart component from Syncfusion in a simple application I'm developing.
It's pure JS, no Angular, no React, no TypeScript. I've not even used NPM
My problem is that I'm not able to import the necessary files to make the chart component works!
Following the documentation founded here
https://ej2.syncfusion.com/javascript/documentation/chart/es5-getting-started/
I've added a systemjs.config.js in my folder /_assets/systemjs.config.js and I've configured this way:
System.config({
paths: {
'syncfusion:': './_assets/vendors/Syncfusion/#syncfusion',
},
map: {
app: 'app',
//Syncfusion packages mapping
"#syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"#syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"#syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
"#syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"#syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"#syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"#syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
"#syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
"#syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"#syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"#syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"#syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"#syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
"#syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
,
},
packages: {
'app': { main: 'app', defaultExtension: 'js' }
}
});
It talks about "app" but I don't have an app variable... I'm not using Angular neither React.
In the folder /_assets/vendors/Syncfusion/ I've inserted all the scripts files of Syncfusion:
Then in my HTML page I've added:
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="/_assets/js/systemjs.config.js"></script>
but when I run the page from the local dev web server I get:
Test:94 Uncaught ReferenceError: ej is not defined
We have analyzed your query. And we have prepared a sample based on your requirement. To render EJ2 charts, you need to just refer the following scripts. There is no need to config the system.cofig as like the configuration you have done. We have already change the documentation from our side. It will be refreshed in the month of June.
Please find the below code snippet to achieve this requirement,
<head>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="line-container" align="center"></div>
<script>
var chart = new ej.charts.Chart({
//Initializing
});
chart.appendTo('#line-container');
</script>
</body>
Sample link: https://stackblitz.com/edit/3ugmn8?file=index.html
Kindly revert us, if you have any concerns.
Regards,
Baby.
We have analyzed your query. If you want to load only chart scripts instead of loading entire scripts. You can refer the charts and its dependency scripts alone.
Please find the below code snippet to achieve this requirement,
<head>
<script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
<script src="http://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var chart = new ej.charts.Chart({
// Other customization
});
chart.appendTo('#container');
</script>
</body>
Sample for your reference can be found from below link,
chart sample
Kindly revert us, if you have any concerns.
Regards,
Baby.
First off I do apologize if this is already answered somewhere.
I am having an issue with AngularJS and external libs. For some reason when I attempt to have an external lib preform any sort of visual operation on an element it simply does not run.
One of such external libraries is the jscolor library which adds a really simplistic color picker (source link: http://jscolor.com)
Here is the include code in my index.html:
<link rel="stylesheet" type="text/css" href="app/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<script src="app/js/lib/jscolor.min.js"></script>
<script src="app/js/lib/angular.min.js"></script>
<script src="app/js/lib/bootstrap.min.js"></script>
<script src="app/js/services/drawCanvas.js"></script>
<script src="app/js/services/colorpicker.js"></script>
<script src="app/js/app.module.js"></script>
<script src="app/js/components/drawableComponent.js"></script>
<script src="app/js/components/navigationComponent.js"></script>
<script src="app/js/components/canvasComponent.js"></script>
As you can see I do have jscolor.min.js included and I can assure you the file is there.
Here is the code in the relative component that contains the input that I am attempting to attach the JS color to.
(function(){
'use strict';
var app = angular.module('app');
app.component('drawable', {
templateUrl: 'app/js/components/drawableComponent.html',
controller: ['$rootScope','$scope', function ElementController($rootScope, $scope){
var self = this;
$scope.drawables = [];
self.$onInit = function() {
//$scope.drawables.push("test");
}
$scope.addDrawable = function(type, css) {
$scope.drawables.push({type:type,css:css});
console.log($scope.drawables);
}
$rootScope.$on("pushDrawable", function(event, args){
$scope.addDrawable(args.type,args.css);
});
self.animateTooltip = function(e) {
$(e.target).find(".draggableTooltip").toggle("slow").css("transform", "translateY(-60%)");
}
}
]
});
})();
Here is the template that is included in this controller (what angular calls when the component is included)
<div class="draggable" ng-repeat="drag in drawables track by $index" style="{{drag.css}}" ng-click="$ctrl.animateTooltip($event)">
<div class="draggableTooltip" style="display:none" >This is a tooltip <input class="jscolor" value="ab2567"></div>
<p> You can drag one element </p>
</div>
As you can see, I am attempting to include jscolor just like they explain in the examples on the jscolor documentation (honestly the implementation of this color picker should be simple and I have no doubts that I am doing it correctly, The calling and implementing that is)
What happens specifically is the input element is a simple text field much like what is shown on jscolor's site. However clicking that element and giving it focus does not launch the color picker as expected.
This is just one example of issues that I have had, another issue I have had and still do have is accordion nav menus dont animate slide down, or function at all whilst inside of a component's template. I think it has something to do with how angular injects templates, however I am wondering if someone can help me out with more experience as to show me the correct way of getting these external libraries to work.
Since the issue is a tad more complex I wasnt able to set up a jsfiddle.
Thanks for your help!
Why don't you try this:
https://ruhley.github.io/angular-color-picker/
It's fully integrated in angular without dependencies on jQuery.
This is my file graph.json
{
"nodes":[
{"data":{"id": "Node 1"}},
{"data":{"id": "Node 2"}}
],
"edges":[
{"data":{"source":"Node 1", "target":"Node 2"}}
]
}
which I am trying to visualize with cytoscape.js in the CoSE layout using the code below. Unfortunately I only get an empty graph without any nodes. It does work however if I use the 'concentric' or 'grid' layout, or if I write the graph data directly into the cytoscape.js initialization part. Why does it not work the way I did it: with the 'CoSE' layout and a graph loaded from a JSON file?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.js"></script>
<script>
$(function () {
$('#cy').cytoscape({
layout: {name: 'cose'},
style: cytoscape.stylesheet()
.selector('node')
.css({'content': 'data(id)'}),
ready: function () {window.cy = this;}
});
$.getJSON('graph.json', function(data) {cy.load(data)});
});
</script>
</head>
<body>
<div id="cy" style="height: 100%; width: 100%; position: absolute; left: 0; top: 0;">
</div>
</body>
</html>
(1) Cytoscape is doing exactly what you're telling it to do. You initialise with no elements, running CoSE on them. You load additional elements asynchronously, which will certainly happen after init.
(2) This blog seems to have a decent description of sync/async. You may want read a book on JS if you're new to the language or if you're new to programming in general.
(3) If you want to keep things simple, pass a fetch promise as options.elements. Read the init section for more info: http://js.cytoscape.org/#core/initialisation
I am facing this strange issue.
The bing map does not display on my page where as all the controls even pushpins displays properly.
I googled a lot and same the functionality is working great in my other project(s)
I suspect that something is wrong with the reference to the dev.virtualearth.net, Or I am missing something
Here is my code:
ASCX (is inside the content place holder of dynamically generated aspx):
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=de-de">
</script>
<div>
.
.
.
<div id="bigMapContainer">
<div id="eventMap">
</div>
</div>
</div>
Code behind:
string script = #"
function GetVEMap() {
map = new VEMap('eventMap');
map.SetDashboardSize(VEDashboardSize.Small);
map.LoadMap();
DisplayEventsOnMap();
}
function DisplayEventsOnMap() {
var eventMapLayer = new VEShapeLayer();
eventMapLayer.Id = 'eventMapLayer';
var points = null;
.
.
.
//Code to get the data for pin display etc
.
.
map.AddShapeLayer(eventMapLayer);
map.SetMapView(eventMapLayer.GetBoundingRectangle());
map.SetZoomLevel(15);
});
}
$(window).load(function() {
GetVEMap();
}
);";
ScriptManager.RegisterStartupScript(this, typeof(Page), "MapDisplay", script, true);
CSS:
#bigMapContainer {display: block;}
#eventMap { position: absolute; width: 550px height: 500px; }
I have added some references on the master pages which are not related to the map but might conflict with my map implementation(?)
<script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.responsivemenu.js"></script>
<script type="text/javascript" src="/js/client.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
Help is very much appreciated.
First off, it looks like you are pointing to Virtual Earth 6.2 which was deprecated several years ago and now points to v6.3. That said v6.3 is really old and is not recommended for new development projects. If this is a new project you should be using Bing Maps V7 which is the latest and greatest version of Bing Maps (Virtual earth was renamed to Bing Maps in 2009). V7 is much faster, has a lot more features, and also a lot smaller.
Assuming that this is an existing project that just started having issues. Looking at your code, one thing I notice right away is that there are no credentials specified when loading the map. This is required. Right before you call the LoadMap method you should have a line of code like this:
map.SetCredentials('YOUR_BING_MAPS_KEY');
If you do not have a Bing Maps key you can get one by creating a Bing Maps account in the Bing Maps portal: http://bingmapsportal.com Here is some documentation on creating a key: http://msdn.microsoft.com/en-us/library/ff428642.aspx
Next, the eventMap div, do you specify any styles for this? It should have a position, width and height specified in as either a CSS class or as an inline style. Without this you will get odd rendering in some browsers.
After a huge reserach I found that the issue was with the css. Thanks #rbrunditt for help
mapcontrol.css inside http://ecn.dev.virtualearth.net/mapcontrol/v6.3/css/bin/6.3.20091207154938.04/de/mapcontrol.css have a class for the map container- .MSVE_Map which have the attribute position:absolute which was making the tiles display out of the screen.
I have overridden the class to position:relative which actually solved the issue..
Trying to get gist-embed (https://github.com/blairvanderhoof/gist-embed) working within my Angular app but with no luck.
It works no problem on my homepage (which is not part of the Angular app) but when I use something like:
<code data-gist-id="<gist-id>"></code>
within the app it won't show. There are no messages in the console to explain why though.
Could someone explain why and offer a solution?
(function($) {
$(function() {
// find all elements containing "data-gist-id" attribute.
$('[data-gist-id]').each(function() {
var $elem = $(this),
id,
that lib is coded in such a way one cant really use it in angular,you'll have to look for a fork that offers a proper jquery plugin architecture you can use into a directive.That lib doesnt respect basic jQuery plugin architecture.
And no Error will show up because it's likely the .each will execute before your angular app runs.
As of June (version 1.8), the gist-embed project is now a jQuery plugin.
var $code = $('<code data-gist-id="474f6d7839fccffc4b2a"/>');
$code.appendTo('body').gist();
Basically you have to trigger "gist()" on the dom elements.
Try this, it worked for me very well.
// register trigger gist on every template include
$rootScope.$on('$includeContentLoaded', function() {
// initialize gist on new elements
angular.element(document).ready(function() {
if (typeof(angular.element(document).gist) === 'function') {
angular.element('[data-gist-id]').gist();
}
});
});
I put together a small library hoping to solve the problem.
Check it out : https://github.com/pasupulaphani/angular-gist-embed
Chekout this angular module : https://github.com/kiran3807/another-angular-gist-embed
This allows you to include the gists in your angular project in the form of a directive, one of the attributes for which is the gist-id :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="path/to/another-angular-gist-embed.js"></script>
<script>
angular.module('example',['another-angular-gist-embed']);
angular.module.controller('exampleCtrl',['$scope',function($scope){
$scope.gistId = 'a85770344febb8e30935';
}]);
</script>
</head>
</head>
<body ng-app="example">
<div ng-controller="exampleCtrl">
<!-- This loads a gist with a specific id-->
<gist-embed data-gist-id="gistId"></gist-embed>
</div>
</body>
</html>
Declaration : I am the author of this module