How to add google charts using Rally SDK2.1 - javascript

I am hitting my head to wall with this.
APP SDK 2.0: Charts in the short term?
I followed above post to add google charts to rally report but ran into problem. I was expecting the answer by mattparrish in that post to work. but it throws following error:
sdk-debug.js:147611 Error: success callback for Deferred transformed result of Deferred transformed result of Deferred threw: TypeError: Cannot read property 'dom' of undefined
at constructor._drawChart (App.js?_dc=0.8649522877525893:36)
at constructor.launch (App.js?_dc=0.8649522877525893:30)
at constructor._applyDefaultSettingsAndLaunch (sdk-debug.js:155148)
at constructor.loadSettingsAndLaunch (sdk-debug.js:155054)
at constructor.initComponent (sdk-debug.js:155032)
at constructor (sdk-debug.js:30211)
at constructor.callParent (sdk-debug.js:4469)
at constructor [as _componentConstructor] (sdk-debug.js:34291)
at constructor.callParent (sdk-debug.js:4469)
at constructor (sdk-debug.js:144823)
This is how i am adding google jsapi to rally report:
<!DOCTYPE html>
<html>
<head>
<title>ExtPlusGoogleCharts</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.1/sdk-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback( Rally.loadScripts(
[
"App.js",
],
function() {
Rally.launchApp('CustomApp', {
name:"ExtPlusGoogleCharts"
});
}, true));
</script>
<link rel="stylesheet" type="text/css" href="app.css"/>
</head>
<body>
</body>
</html>
Can we add google charts in rally SDK2.1? If yes, how? Thanks!

Just out of curiosity, is there a special reason you'd like to use google charts? That question you referenced is pretty old and pre-dates the current charting platform in App SDK 2.1, which uses Highcharts.
There's a solid example of how to do this here: https://help.rallydev.com/apps/2.1/doc/#!/example/bare-metal-chart
I'm not all that familiar with google charts, so if you'd still like to use those someone else will probably have to post an answer on that. But hopefully you can use our built-in chart component...

Related

Bing Maps Error - Microsoft is not defined? [duplicate]

I am using bing map in my application for searching.
Bing map V8 control.
I have used this CDN
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key' async defer></script>
after that when I am trying to use Microsoft.Maps. It is saying:
Uncaught ReferenceError: Microsoft is not defined
new Microsoft.Maps.Color(100,100,0,100);
Any one have idea about this?
Don't use async while loading Bing API,
<script src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key'
type='text/javascript' ></script>
And if you are using jQuery then add $.ready() to use maps like
<script>
$(function(){
var color = new Microsoft.Maps.Color(100,100,0,100);
....
});
</script>
I encountered a similar error while using bing maps js sdk. All you have to do is to add 'windows.' before you write: Microsoft.Maps.Color(100,100,0,100);
So now the new code is :
new window.Microsoft.Maps.Color(100,100,0,100);

Django admin many to many horizontal filter not working

I'm using a many-to-many field in my django model, exposing it on the admin interface and trying to use a filter_horizontal widget. Now, I've added some custom html to my change_form.html so simply adding a filter_horizontal = ('teams', 'players', ) is not helping.
I googled around, and found out that the widget requires some default js, so I went ahead and included the following in my change_form.html
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectBox.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectFilter2.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
I see the following error in my browser's console right now:
Uncaught ReferenceError: interpolate is not definedinit #
SelectFilter2.js:47 (anonymous function) # (index):1275
Digging into the SelectFilter2.js, I found that it requires a file addevent.js. I'm guessing this is where the interpolate function would've been defined since all other imports are satisfied. But I cannot find any such file in my project, and google did not help out on this. Can anyone help me here? What am I missing?
So for whatever it's worth, the horizontal filter didn't work, and this did the job for me easily so I went ahead with this:
raw_id_fields = ('teams', 'players', )
Also, please don't forget to include the following in your custom template for this widget to work:
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>

Using GMaps.js for integrating Google Maps API - can't see where to add my API Key

I am using the GMaps.js library and the code I am using is working 100% fine (running locally on localhost) - the 'webapp' I have created also uses the Google Maps Geocoding API.
I cannot see where I add my API keys anywhere within my code - although I am kinda confused as it currently works? Surely it should only work with a valid API key.
https://hpneo.github.io/gmaps/
<!DOCTYPE html>
<html>
<head>
<link href='example.css' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="style/style.css">
<script type="text/javascript" src="gmaps.js"></script>
<script type="text/javascript">
map = new GMaps({
div: '#map',
lat: 52.4801,
lng: -1.8835,
zoom: 7
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
Replace the placeholder text in the above snippet with your gmaps api key and insert in your header above the gmaps.js script.
By viewing the example codes, no API key is used. So I would guess you don't need one.
Although you could supply google with a API key when embedding the maps api
Ok - i have found the answer here:
When is a Google Maps API key required?
In a nutshell version 3 doesn't require an API (v2 did) but it is recommended from what other developer are saying in regards to setting them up.

Need help setting up backbone.js: Uncaught ReferenceError: Backbone is not defined

I am trying to set up a backbone driven web application but cannot get Backbone to load correctly. I get two errors when I load the required files:
-Uncaught ReferenceError: Backbone is not defined test.html: 17
-Uncaught TypeError: Cannot read property 'each' of undefined backbone.min.js: 1
I have tried multiple sources for the backbone, underscore and jquery files and am still having the same errors. Any help would be appreciated. Thanks.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="backbone-min.js"></script>
<script "text/javascript" src="jquery-2.1.1.js"></script>
<script "text/javascript" src="underscore-min.js"></script>
<script>
Person = Backbone.Model.extend({
initialize: function(){
console.log("hello world");
}
});
var person = new Person();
</script>
</body>
</html>
You must include your libraries properly to fulfill missing dependencies:
<script src="jquery-2.1.1.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
It's important to include underscore before you include backbone because underscore is a dependency of backbone.
include Backbone.js and Underscore.js(a dependency of Backbone.js)
Related introduction on backbone.
This is a common mistake with common libraries such as jQuery, wherea libraries like Bootstrap rely on components provided by an external provider.
A quick glance and I can't see anything immediately wrong, although you are missing the 'type' on your second and third script tags. When you run the page in browser, are there any errors logged out to the console, can you see the libraries being loaded fine in the network viewer too? My immediate hunch would be the source paths are wrong and so the libraries aren't being loaded.
Dependencies!!! The order matters, backbone needs jQuery and underscore
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script>
Person = Backbone.Model.extend({
initialize: function(){
console.log("hello world");
}
});
var person = new Person();
</script>
</body>

How to use JsonRestStore with my RESTful service

I try to use dojox.data.JsonRestStore with my RESTful service. I read the articles by sitepen and dojox documentation but I can't understand what they are all about.
My service gets requests like http://<host>/rest/relatedsuggestion?query=weath&results=3 and returns JSON
{
Suggestions: [
“weather channel”,
“weather forecast”,
“weather bbc”
]
}
It means that it can't understand request like http://<host>/rest/relatedsuggestion/3 which are used in every tutorial. How can I make it to understand my format? And as far as I understood the responce is also unusual for this class.
In order to try JsonRestStore I wrote the following mock up page, of cource it doesn't work and returns 4 errors "Type error: _57 is null":
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.data.JsonRestStore");
dojo.require("dojox.grid.DataGrid");
dojo.addOnLoad(function() {
var poStore = new dojox.data.JsonRestStore({target:"http://<host>/rest/features/relatedsuggestion"});
poStore.fetchItemByIdentity({
identity:"3433",
onItem:function(poItem){
poItem.completeOrder();
}
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div id="gridElement"></div>
</body>
This IBM developerWorks article might be of help: Use Dojo's JsonRestStore with your REST services.
From your description, your service is non-standard, so you'll need to adapt both the URLs and the response mangling to fit what JsonRestStore expects. That article explains how you can do that by implementing your own service.

Categories

Resources