I am having an issue in Dojox charts wherein the zooming in operation is making the data points at the end of the series disappear for some reason. The more I zoom in the more data values I lose. Is there a workaround for this. I am using the MouseZoomAndPan module with a line chart.
Attaching code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="atk.graph.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
var c;
<% String data = "[{value: 1, text: \"X\"}, {value: 2, text: \"Z\"}]"; %> // Some test labels
<% String labels = new LabelMaker().makeLabels(10);%> // Generating labels in java class
</script>
<style type="text/css">
#import
url("http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/claro/claro.css") ;
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js'></script>
<script>
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedLines"
, "dojo/ready", "dojox/charting/action2d/Tooltip",
"dojox/charting/action2d/Highlight","dojox/charting/themes/PlotKit/blue","dojox/charting/action2d/MouseZoomAndPan"],
function(Chart, _axis, StackedLines,ready, Tooltip,Highlight,theme_green, MouseZoomAndPan){
ready(function(){
c = new Chart("chartOne");
c.setTheme(theme_green);
c.addPlot("default", {type: StackedLines, markers: true, tension:3, enable\Cache: true})
.addAxis("x", {fixLower: "major", fixUpper: "major", enableCache: true, majorTickStep:1, natural:false, fixed: true, minorTicks: false, labels: <% out.println(labels); %>})
.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0, enableCache: true})
.addSeries("Series A", [ 1, 2, 5, 0, 8,7, 20]);
var anim2b = new Highlight(c, "default");
var animc = new Tooltip(c, "default");
new MouseZoomAndPan(c, "default", {axis:"x"});
c.render();
});
});
</script>
</head>
<body class="claro">
<div id="chartOne"
style="width: 800px; height: 540px; align:center";></div>
</body>
</html>
Seemed to be a version issue, fixed when switched to 1.10.1.
Related
I am creating a new radial gauge and I am using canvas for this purpose. The data that I have entered inside the canvas tag needs to be placed in another file and then rendered on load of the page.
How can I do this? Please help me with it.
The following is my code.
I tried many methods but it is not working for me. I also need to pass data to this to make the pointer move. But I need this functionality to happen first. Please help me.
var gauge = new RadialGauge({
renderTo: 'canvas-id',
width: 400,
height: 400,
//units: "Km/h",
minValue: 0,
startAngle: 90,
ticksAngle: 180,
valueBox: false,
maxValue: 100,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100"
],
minorTicks: 4,
strokeTicks: true,
borders: true,
needleType: "arrow",
needleWidth: 1,
needleCircleSize: 5,
needleCircleOuter: true,
needleCircleInner: true,
animationDuration: 1500,
animationRule: "circular"
}).draw();
<html>
<head>
<title>Gauges as Components</title>
<script src="gauge.min.js"></script>
</head>
<body>
<canvas
data-type="radial-gauge"
data-width="400"
data-height="400"
data-min-value="0"
data-start-angle="90"
data-ticks-angle="180"
data-value-box="false"
data-max-value="100"
data-major-ticks="0,20,40,60,80,100"
data-minor-ticks="4"
data-stroke-ticks="true"
data-border-shadow-width="0"
data-borders="false"
data-needle-type="arrow"
data-needle-width="1"
data-needle-circle-size="5"
data-needle-circle-outer="true"
data-needle-circle-inner="true"
data-animation-duration="1500"
data-animation-rule="circular"
></canvas>
</body>
</html>
In the below jsp code the fields are hard code but can i get the fields by using loop from a list which may grow dynamically
List list=[userid,firstname,lastname,email];
for every new request this list may grow or shrink dynamically depends on the columns of the table present in database ,so is there any way to get the field name without hard coding..
<%# 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">
<!-- Include one of jTable styles. -->
<link href="css/metro/crimson/jtable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Table of people',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
actions: {
listAction: 'CRUDController?action=list',
createAction:'CRUDController?action=create',
updateAction: 'CRUDController?action=update',
deleteAction: 'CRUDController?action=delete'
},
fields: {
userid: {
title:'S.NO',
key: true,
list: true,
create:true
},
firstName: {
title: 'First Name',
width: '30%',
edit:false
},
lastName: {
title: 'Last Name',
width: '30%',
edit:true
},
email: {
title: 'Email',
width: '20%',
edit: true
}
}
});
$('#PersonTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width:60%;margin-right:20%;margin-left:20%;text-align:center;">
<div id="PersonTableContainer"></div>
</div>
</body>
</html>
this can be achieved by iterating over a list
<%
HttpSession sec = request.getSession();
List<String> columnsList=(List<String>)sec.getAttribute("columnsList");
%>
<script type="text/javascript">
var jsArray = [<%for (int i = 0; i < columnsList.size(); i++) {%>"<%=columnsList.get(i)%>"<%=i + 1 < columnsList.size() ? ",":""%><%}%>];
var fields={};
var arrayLength = jsArray.length;
for(var i=0;i<arrayLength;i++)
{
fields[jsArray[i]] = {
title: jsArray[i],
width: '40%',
};
}
$(document).ready(function() {
$('#PersonTableContainer').jtable({
title : 'Table of people',
paging : true, //Enable paging
sorting: true, //Enable sorting
defaultSorting: 'Name ASC', //Set default sorting
pageSize : 10, //Set page size (default: 10)
actions : {
listAction : 'DATA?action=list'
},
fields : fields
});
//Load all records when page is first shown
$('#PersonTableContainer').jtable('load');
});
</script>
i'm working through this example:
http://road2ruby.blogspot.com/2013/01/jquery-full-calendar-with-rails3.html
and when I run my server and try to go to the /events url, I get the following error:
ExecJS::RuntimeError at /events
SyntaxError: unexpected COMPARE
(in /Users/rabdelaz/swap/app/assets/javascripts/calendar.js.coffee)
The error is pointing to this line of my application.js:
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
Here's my whole application.js
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "Swap" %></title>
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Swap" %>">
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<header>
<%= render 'layouts/navigation' %>
</header>
<main role="main">
<%= render 'layouts/messages' %>
<%= yield %>
</main>
</body>
</html>
I'm not sure exactly what this error means or why I'm getting it. I'm very new to javascript and coffeescript.
$(document).ready ->
$('#calendar').fullCalendar
editable: true,
header:
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
defaultView: 'month',
height: 500,
slotMinutes: 30,
eventSources: [{
url: '/events',
}],
timeFormat: 'h:mm t{ - h:mm t} ',
dragOpacity: "0.5"
eventDrop: (event, dayDelta, minuteDelta, allDay, revertFunc) ->
updateEvent(event);
eventResize: (event, dayDelta, minuteDelta, revertFunc) ->
updateEvent(event);
<br/>
updateEvent = (the_event) ->
$.update "/events/" + the_event.id,
event:
title: the_event.title,
starts_at: "" + the_event.start,
ends_at: "" + the_event.end,
description: the_event.description
There's some formatting you accidentally picked up from the tutorial - on line 20, there's a <br> tag, which isn't valid CoffeeScript. Removing it should do the trick.
As a designer, I am a big fan of the notion of a beautiful "empty-state" message when there is no data to dislplay, which encourages the user to take action. (In fact, there is a whole tumblr blog dedicated to this: http://emptystat.es/)
As a happy and devoted user of Flexigrid, I'd love to be able to substitute an empty-state message when the system I'm building doesn't have any search results to display in the grid (e.g. "You have no pending requests! Click New to start."). Ideally, such an empty-state message would be graphic and larger than an individual row and would replace the entire contents of the grid. Can anyone provide some advice on how I might go about replacing the content of the flexigrid with a graphic empty-state message when there are no rows returned?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="../css/flexigrid.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../js/flexigrid.js"></script>
</head>
<body>
<p>This is a sample implementation attached to a form, to add additional parameters.</p>
<form id="sform">
<p>
The values you entered will be place in name column for demo's sake.<br />
Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
Value 3 :
<select name="val3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select><br />
Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<button onclick=hide()>HIDE</button>
<button onclick=show()>SHOW</button>
<table id="empty1" style="display:none">
<tr><td><b>Please</b> <u>fill some</u> data</td></tr>
</table>
<table id="flex1" style="display:block">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
<script type="text/javascript">
var old = undefined
function hide() {
if (old == undefined) {
old = flex1.innerHTML
flex1.innerHTML = empty1.innerHTML
}
}
function show() {
if (old != undefined) {
flex1.innerHTML = old
old = undefined
}
}
$("#flex1").flexigrid({
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
onSubmit: addFormData,
height: 200
});
//This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit
function addFormData(){
//passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
$("#flex1").flexOptions({params: dt});
return true;
}
$('#sform').submit(function (){
$('#flex1').flexOptions({newp: 1}).flexReload();
return false;
});
</script>
</body>
</html>
I solved this using dojo, as we were already using this framework in our site. I'm sure there are similar solutions in different libraries. Essentially I created a new class which, after creating the flexigrid, notices if there is no data in the flexigrid and puts in a background-image to the table if one is specified:
dojo.provide("app.components.EmptyStateFlexigrid");
dojo.require("dijit._Widget");
// Provides a custom Flexigrid with an empty-state
dojo.declare("app.components.EmptyStateFlexigrid", [dijit._Widget], {
emptyStateUrl: null,
id: null,
url: null,
colModel: null,
buttons: null,
sortField: null,
sortOrder: null,
height: null,
usePager: null,
resizable: null,
// Create the flexigrid object
makeGrid: function() {
var gridObj = $('#' + this.id + "_flexigrid");
gridObj.flexigrid({
url: this.url,
dataType : 'json',
colModel : this.colModel,
buttons : this.buttons,
sortname : this.sortField,
sortorder : this.sortOrder,
height: this.height,
usepager : this.usePager,
resizable: this.resizable,
onSuccess: this.checkEmptyState,
useRp : true,
rpOptions: [2, 10, 15, 20, 30, 50],
rp : 15,
showTableToggleBtn : false
});
}
},
// EMPTY-STATE: make a nice graphic here if there is no data
// Note that "this" is a flexigrid object
checkEmptyState: function() {
var self = dijit.byId(this.id);
var gridObj = $('#' + this.id + "_flexigrid");
if (gridObj[0].id === this.id + '_flexigrid') {
var gridChildren = gridObj.children();
if (gridChildren.length === 0) {
var gblocks = $(".gBlock");
for (var i = 0; i < gblocks.length; i++) {
var styleObj = gblocks[i].style;
// The only way I could find to identify "our" flexigrid (if there is
// more than one on the page) is to test to see if the height is the
// same as our height. Kind of a lousy hack, but the best I could figure
// out. -pbanka
if (styleObj.height == self.height + 'px') {
styleObj.backgroundSize = "450px";
styleObj.backgroundRepeat = "no-repeat";
styleObj.backgroundImage = "url('" + self.emptyStateUrl + "')";
}
}
}
}
},
I'm working with the Twitter search widget and currently I have the javascript embedded in the within the body tags of the HTML, something like this:
<body>
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 1,
interval: 7200000,
title: '',
subject: '',
width: 500,
height: 65,
theme: {
shell: {
background: '#a4c9b9',
color: '#ffffff'
},
tweets: {
background: '#a4c9b9',
color: '#ffffff',
links: '#444444'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('exampleuser').start();
</script>
</body>
Instead though, I'd rather move all that javascript to the header (or maybe the footer?) tag, then simply have it rendered in the body without the tags. Is there a simple way to do this?
You can use one of either native JS...
window.onload = function() {
// your code here
};
or jQuery...
$(document).ready(function() {
// your code here
});
...to ensure the code will not run until the document has finished loading.
This explains the slight difference between window.onload and $(document).ready().
Another option would be to wrap your code in a named function and call it in the body somewhere but you would still have to put it in <script> tags.
EDIT: Using window.onload...
<html>
<head>
<script>
window.onload = function() {
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 1,
interval: 7200000,
title: '',
subject: '',
width: 500,
height: 65,
theme: {
shell: {
background: '#a4c9b9',
color: '#ffffff'
},
tweets: {
background: '#a4c9b9',
color: '#ffffff',
links: '#444444'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('exampleuser').start();
};
</script>
</head>
<body></body></html>