I have solved my issue but can't answer it myself since I am too new to this site:
turns out I needed to use the following:
chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));
I was using JQuery to access the element, $('#pie_today_div'). As of now the evidence points to the fact that the PieChart constructor has to have standard JS code, document.getElementById('pie_today_div')
Maybe something else going on, but changing the way I access the container element fixes my code
ORIGINAL ISSUE FOR REFERENCE TO MY SOLUTION
I am getting a "Container is not defined" error when I am trying to instantiate a Google PieChart object.
I validated my page at http://validator.w3.org/ and i get a pretty green banner saying it validates.
I receive no js errors when the page loads. My Ajax call is making a full round trip with the data I want from the DB.
Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="/css/note.css?10022012" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" language="javascript" src="/call/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
<script type="text/javascript" language="javascript" src="/call/js/init.js?10042012-2"></script>
<title>Call Stats</title>
</head>
<body>
Today Stats
<div id="pie_today_div"></div>
</body>
</html>
here is the js:
function drawPieChartToday() {
$.post('/call/ajax.php5',{
action:'pieToday'
}, function(ticketData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Count');
data.addColumn('number', 'Topic');
for (var key in ticketData){
data.addRow([key, ticketData[key]]);
}
options = {
title: 'Issue Topics'
};
alert($('#pie_today_div').attr('id'));
chart = new google.visualization.PieChart($('#pie_today_div'));
chart.draw(data, options);
},'json');
}
here is my debugging code to make sure the element was being found:
alert($('#pie_today_div').attr('id')); <-- alerts "pie_today_div"
I'm not a jquery fan, but I think that $('#pie_today_div') returns a set of matched elements. The attribute computation works because (from jquery documentation) it "gets the value of an attribute for the first element in the set of matched elements".
So try
chart = new google.visualization.PieChart($('#pie_today_div')[0]);
or directly
chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));
A container error is exactly that, It is looking for the ID
example:
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
You WILL get this error “Container is not defined” for Google Charts if you are missing
that ID
Thus a Div with that chart_div id would fix this
There must be line where you load the types of visualization you want to have in your web page. It looks like this
google.load("visualization", "1", {packages: ["corechart"]});
Here I am loading package corechart. Place this line as the first line after in the <script> tag inside your HTML page like index.html. That should solve he problem.
use $timeout before init, it works well, else you need to destroy the instance
Just wanted to mention, this happened for me after a simple mistake. I changed
var data = new google.visualization.DataTable(huh);
to the following in an effort to change the chart type:
var data = new google.visualization.BarChart(huh);
but this is all wrong, you change the chart where you mention the container:
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
Related
I am trying to create a Release trend chart, but I am getting different results if I run the code inside a rally app versus running the app outside of rally using a valid login key. Below is the code in question.
After getting the chart to work correctly, I would love to be able to show some subset of the data, similar to the actual ReleaseDefectTrend chart inside of Rally, that lets you specifiy XXX number of days/weeks/months/etc. Are there setting(s) for the config of the chart that will allow you to do this.
Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2011 Rally Software Development Corp. All rights reserved -->
<html>
<head>
<!-- <script type="text/javascript" src="/apps/1.32/sdk.js?debug=false"></script> -->
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginKey=myvalidloginkeyhere"></script>
<script type="text/javascript">
function onLoad() {
//alert('ProjOID = ' + __PROJECT_OID__);
/
var rallyDataSource = new rally.sdk.data.RallyDataSource("myvalidworkspaceID","myvalidprojectID","false","false");
var ddown1=document.getElementById("ddown1");
var config = { label: "Select a release " };
var releaseDropdown = new rally.sdk.ui.ReleaseDropdown(config,rallyDataSource);
releaseDropdown.display(ddown1,releaseSelected);
}
function releaseSelected(dropdown,eventArgs) {
var selectedItem=eventArgs.item;
var selectedValue = eventArgs.value;
var releaseObjids = new Array();
releaseObjids[1]=selectedItem.ObjectID;
displayChart1(releaseObjids[1]);
}
function displayChart1(release) {
var config = {
report: rally.sdk.ui.StandardReport.ReleaseDefectTrend,
//itle: 'Technical Debt',
width : 600,
height: 250,
releases: release
};
alert('chart1 release = ' + release);
var report = new rally.sdk.ui.StandardReport(config);
var div1=document.getElementById("div1");
report.display(div1);
}
rally.addOnLoad(onLoad);
</script>
</head>
<body>
<table border="1">
<tr>
<td align="center"><div id="ddown1"></div></td>
</tr>
<tr>
<td><div id="div1"></div></td>
</tr>
</table>
</body>
</html>
Looks like there is no hardcoded Object IDs of releases in your code, and workspace is also not specified. All WS API queries are bound to a workspace, and in the absence of specified workspace and a default for a given user there is no guarantee that what you see inside Rally is going to be the same outside. To narrow this down, you do not need to use login key in this stage of troubleshooting. Please make sure the app works outside of Rally as expected - the login key only allows you to avoid the prompt to login. The scope is not specified in your code, but the app needs to pull available releases from somewhere.
Before you customize the original code found here see if the original code produces identical results for you outside and inside of Rally when you hard code Object ID of a specific release, and then move on to more complex scenarios when you have multiple ObjectIDs hardcoeded, and only then try to use a variable set dynamically from a dropdown value:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="Name" content="Component Example: Standard Report">
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.26/sdk.js"></script>
<script type="text/javascript">
function initPage() {
var config = {
report: rally.sdk.ui.StandardReport.ReleaseDefectTrend,
width : 800,
height: 400,
releases: [1111,2222]
};
var report = new rally.sdk.ui.StandardReport(config);
report.display("aDiv");
}
rally.addOnLoad(initPage);
</script>
</head>
<body>
<div id="aDiv"></div>
</body>
</html>
For more info see Apps Outside of Rally
Generally standard reports are canned reports and cannot be customized further outside of what the JSON configuration object allows. AppSDK1 allows you to load a report in a custom page by providing access to them via this syntax:
report: rally.sdk.ui.StandardReport.ReleaseDefectTrend
but if you want to zoom in, to display more information, perhaps in a chart, this has to be coded from scratch.
I am writing a JSP that displays a list of clubs in a grid. The grid shows the name of the club together with its latitude, longitude, website and description.
The actual data to be displayed is stored in a variable (a dojo.data.ItemFileWriteStore) called clubStore.
When the page is loaded, a call is made to a servlet to retrieve the data. The handling function then deletes all the items held in the store and adds new items returned by the servlet.
The JSP code is shown below:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clubs</title>
<style type="text/css">
#import "./dojoroot/dojo/resources/dojo.css";
#import "./dojoroot/dijit/themes/tundra/tundra.css";
#import "./dojoroot/dojox/grid/resources/Grid.css";
#import "./dojoroot/dojox/grid/resources/nihiloGrid.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false">
</script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
var clubData={
items:[{name:'No Clubs', lat:'---', lon:'---', webSite:'---', description:'---'}]
};
var layoutClub=[{field:"name", name:"Name", width:10},
{field:"lat", name:"Lat", width:5},
{field:"lon", name:"Long", width:5},
{field:"webSite", name:"Web Site", width:10},
{field:"description", name:"Description", width:'auto'}];
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
</script>
<link rel="stylesheet" href="dojoroot/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="dojoroot/dojox/widget/Dialog/Dialog.css" />
</head>
<body class="tundra">
<%#include file="header.jsp"%>
<div id="clubGrid"
style="width: 800px;"
autoHeight="true"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:clubStore,
structure:layoutClub,
query:{},
queryOptions:{'deep':true},
rowsPerPage:40">
</div>
<br>
<script>
var urlString="http://localhost:8080/BasicWeb/ClubsServlet";
dojo.xhrGet({
url: urlString,
handleAs: "text",
load: function(data) {
// remove items...
var allData=clubStore._arrayOfAllItems;
for (i=0; i<allData.length; i++) {
if (allData[i]!=null) {
clubStore.deleteItem(allData[i]);
}
}
var jsonClubArray=JSON.parse(data);
for (var i=0; i<jsonClubArray.clubs.length; i++) {
var club=jsonClubArray.clubs[i];
var newClub={name: club.clubname, lat:club.lat, lon:club.lon, webSite: club.website, description: club.description};
clubStore.newItem(newClub);
}
clubStore.save();
}
});
</script>
</body>
</html>
The script to process the servlet response sometimes fails because clubStore is undefined (debugging using Firebug). This does seem to be a spurious fault as some times everything works perfectly.
Any assistance in understanding how to define the clubStore variable would be appreciated.
Thanks.
James.
I think what might be happening is the body script is sometimes running before the head script, so it is kind of a race condition. You could try wrapping your body script into a dojo.ready. (I assume from your code that you are using dojo 1.6 or earlier since you are not using the AMD loader style.)
dojo.ready(function(){
// Put your xhr request code here.
});
You may also want to try testing with a firebug breakpoint in the head and body script. See if the head is sometimes running first.
So the problem turned out to be a syntax error in the declaration - missing '{' in the line
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
The spurious aspect to the fault was a red herring - I had previously declared the variable as part of the DOM object and that caused a spurious fault. So I messed up my regression testing as well as introducing a syntax error!
Thanks.
James.
You could try switching the order of your require statements, so it's like this:
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
If that fails, you could set parseOnLoad to false, and then call dojo.parser.parse() after your store has been instantiated like so:
(assuming you are using dojo 1.6 or earlier based on your code)
dojo.addOnLoad(function() {
dojo.parser.parse();
});
Put your clubStore in the global space... just remove the var keyword in front of it...
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
I'm defining page with some vars and methods. Then I wanna use it in html markup (for example data-win-bind="textContent: myPage.variable). How can I access page variables in html markup?
In the JavaScript code behind your page, say default.js, you'd include your ViewModel for the data binding, something like:
(function(){
WinJS.Namespace.define("MyModel.myPage", {
variable : null
};
MyModel.myPage.variable = 'foo';
})();
Then in when the page is activated (in default.js), you'll need to initialize the bindings with a call like
WinJS.Binding.processAll(document.body, MyModel);
There's quite a bit more functionality available though, so this is just a simplistic one-way binding case that should get you started. For more info, check out the Quickstart: binding data and styles.
You have to use javascript here's the skeleton:
<html>
<head>
<script type="text/javascript">
//Code goes here
</script>
</head>
<body>
</body>
<html>
I see many references to this error on the web, but they are not helping me. I guess i am new enough to this that i need a specific answer for my problem.
I am attaching the first portion of code on a page that i am running. the last line i show is the line that is creating the error stating in the title. Please let me know if you have any suggestions.
Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CDI Web Portal</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="js\dojo\dojo.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA5a4NhilcmrdMQ5e3o22QWRQWrGbhbxAguaJ-a4SLWYiya7Z2NRTDfQBdxmHdf5ydkZYLZTiz1tDXfg"></script>
<script type="text/javascript" src="ge-poly-fit-hack.js"></script>
<script type="text/javascript" src="kmldomwalk.js"></script>
<style type="text/css">
#import "js/dijit/themes/tundra/tundra.css";
#import "js/dojo/resources/dojo.css";
</style>
<style type="text/css">#import "index.css";</style>
<script type="text/javascript"> dojo.ready(function() { dojo.byId("greeting").innerHTML += ", from " + dojo.version; }); </script>
<script type="text/javascript">
// <![CDATA[
djConfig = { parseOnLoad: true };
// google.load("dojo", "1.6.1");
google.load("maps", "2");
google.load("earth", "1");
var g_ge;
var g_earthDisabled = false;
var g_kmlObject;
google.setOnLoadCallback(function() {
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.layout.SplitContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.Tree');
//dojo.require('CheckboxTree');
dojo.require('dijit.form.CheckBox');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.TextBox');
dojo.require('dojo.data.ItemFileWriteStore');
dojo.require('dojo.parser');
dojo.require('dojo.cookie');
dojo.require('dojo.fx');
dojo.addOnLoad(function() {
// load checkboxtree
var scpt = document.createElement('script');
scpt.src = "dijit.CheckboxTree.js";
document.body.appendChild(scpt);
{ dijit.byId('load-button').setDisabled(true) };
// build earth
google.earth.createInstance(
'map3d',
function(ge) {
g_ge = ge;
g_ge.getWindow().setVisibility(true);
g_ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
g_ge.getLayerRoot().enableLayerById(g_ge.LAYER_BORDERS, true);
g_ge.getLayerRoot().enableLayerById(g_ge.LAYER_BUILDINGS, true);
dijit.byId('load-button').setDisabled(false);
checkAutoload();
},
function() {
g_earthDisabled = true;
dijit.byId('load-button').setDisabled(true);
From your comment, you used declarative syntax to create the dijit, i.e. <button id="load-button" dojoType="dijit.form.Button" onclick="loadKml();">. If the declarative syntax is used, the dijit is actually created after the page is loaded. So you should put the code to use the dijit in the Dojo's load callback, i.e. inside of dojo.addOnLoad callback.
But your code is bad formatted and mingled with Google Maps load callback, it's not easy to inspect the code. My suggestion would be to wrap the dijit.byId('load-button').setDisabled(true); with dojo.addOnLoad, like below:
dojo.addOnLoad(function() {
dijit.byId('load-button').setDisabled(true);
});
It means that you've got a dojo object rather than a dijit object -- or possibly no object named load-button at all, since it's not clear from this where load-button is being created. Make sure there is an object with id="load-button" that was created with dijit.