Adding title text inside gauge Dojo - svg

i need to insert a title (not a tooltip, a text on the top) inside the svg rendered by Dojo. How can i do that?
Here my Dgauge:
http://jsfiddle.net/MacroX/pZU93/1/
PD: The line
gauge.title = 'Test Report'
doesnt show the title

EDIT: The question is regarding a label at the top of the gauge, not the title attribute as I originally thought.
You can use a TextIndicator much like you did for the value label below the needle, but you can set a labelFunc property that defines a function called to set a label and displays whatever string is returned from it.
var labelText = new TextIndicator();
labelText.set('x', 73.3);
labelText.set('y', 55);
labelText.set('labelFunc', function() {return 'Test Report';});
gauge.addElement('labelText', labelText);
Here is a modified version of your fiddle with the title text in place.
Original answer remans below in case someone else needs it
Pass the title in when you create the gauge:
var gauge = new CircularLinearGauge({
title: 'Test Report'
}, dojo.byId("gauge"));
You can also use set to set it after the gauge is created:
gauge.set('title', 'Test Report'); //does work :)
The reason for this is that the gauge widget needs to set the text you give as the title on a specific element within the widget's template. gauge.title just sets the title property of the gauge widget, and the widget has no idea when or with what value that property is being set and thus is not able to make it show up as a title attribute on the gauge.

Finally i got a way to resolve this, and this is useful when you need to personalize your dgauge. Here the example:
http://jsfiddle.net/MacroX/THJqV/
What i did is basicly create a gauge, fill it with background white, and then add elements inside
var baseWidth = 400;
gauge.addElement("background", function (g) {
var auxHeight = baseWidth * objGauge.offsetHeight / objGauge.offsetWidth;
g.createRect({
width: 400, height: auxHeight
//width: 400, height: 300
}).setFill("#FFF");
});
I dont know if is the best way, but works and i didnt find something similar in other sites
And what I think is great, this support multiple chart dgauges in only one SVG
I hope this will useful to someone else

Related

DOJO ContentPane inner DIV height changing on ContentPane resize

I'm using DOJO's ContentPane module. I have a div element in one of the panes and I need to give it a certain height - 100 pixels less than the height of the ContentPane so that the div changes its height dynamically when you change the ContentPane size by dragging the splitters. I'm new to Dojo and would be happy if somebody could help me with this.
Thanks.
I think the best solution is via nested BorderContainers with properly set splitters, because that way dijit/layout will take care of resizing and you won't need to write any JavaScript code and your layout will be based solely on CSS.
It's kinda cumbersome to explain, so I created a working example for you at jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + a diagram:
NB: Do not forget to set height: 100% for html, body and the top BorderContainer.
The drawback of this solution is you will have to replace plain divs with ContentPanes. If you do not want to or can't you can use dojo/aspect and connect to BorderContainer or ContentPane resize method and resize your divs manually whenever the size changes:
require([
"dojo/ready",
"dojo/aspect",
"dijit/registry",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function(
ready,
aspect,
registry
) {
ready(function() {
var bc = registry.byId("borderContainer1");
aspect.after(bc, "resize", function() {
// calculate and set <div> size here
console.log("resize divs");
});
});
});​

Flot pie charts - externally selecting slices

I found this solution.
If type of chart is pie, how specify parameters (x,y) of highlight(x, y)?
Thanks
Sorry for my bad English.
Unfortunately, flot doesn't expose the pie highlighting code to the user. So we are pretty much out of luck, but what may work for you is synthesizing a click event at the appropriate place on the page:
$("#highligher").click(function () {
var e = jQuery.Event('click');
e.pageX = 250; //add a made up x/y coordinate to the click event
e.pageY = 250;
$('#plot canvas:first').trigger(e); //trigger the click event on the canvas
});
Here it is in action: http://jsfiddle.net/ryleyb/mHJm5/
The problem is you have to know where the slice you want to highlight is already. This would be easy enough to set if the graph is static. If it's a dynamic graph, you'd have to dig into the source of the pie code to figure out how to calculate where the pie slice is. It might be easier in that case to just have a copy of all the pie functions and manually draw on the pie overlay.
Just got this working by altering a few things...
I changed highlight and unhighlight in jquery.flot.pie.js to pieHighlight and pieUnhighlight.
Then, after these two lines in jquery.flot.pie.js...
plot.hooks.processOptions.push(function(plot, options) {
if (options.series.pie.show) {
I added...
plot.highlight = pieHighlight;
plot.unhighlight = pieUnhighlight;
We're maintaining selection state outside of the chart (as a backbone model). When a selection event (click) occurs, we set the selected slice in the model. When selection changes, we refresh the chart using a selection color for the pie slices that are selected.
var data = [];
var color = slice.index == selected ? '#FF0000' : '#0000FF';
data.push({label:slice.Label,data:slice.Value,color:color});
The snippet above uses blue for all non-selected slices, red for the selected slice. Your color logic will be more sophisticated.
NOTE: You can also use rgba CSS for the colors, which gives a really nice effect. For example:
var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)';

Slide content with page up and down

A few small questions on this web page I am putting together.
http://dansiop.com/guyc/our-team/
I am looking to get the content that appears when you click on an image to slide with the mouse as you scroll down. Not sure if this is possible, if so can anyone help.
I have tried looking but as I am such a n00b to jquery I'm not sure what I am looking for. I found some code that used the tag slide and it was not what i wanted at all so not sure what the command would be.
You need to wrap your prof_1, prof_2, etc, in a wrapper I'm going to call this wrapper prof_wrapper
<div id="prof_wrapper"></div>
jQuery(document).ready( function(){
var orig_t = jQuery("#prof_wrapper").offset().top;
var mt = jQuery("#main").offset().top;
var mh = jQuery("#main").outerHeight();
jQuery(document).bind("scroll", function(event){
var ph = jQuery("#prof_wrapper").outerHeight();
var mo = (mt+mh) - jQuery(document).scrollTop();
var t = jQuery(document).scrollTop();
if(mo <= ph){ //Find out if the #main element's offset top plus it's height minus the scroll position is less than the prof_wrapper's height; if it is, leave the prof_wrapper at the bottom of the #main element
jQuery("#prof_wrapper").css({'position':'absolute', 'bottom':'0px', 'top':'auto'});
}else if(t >= orig_t){ //Otherwise, if we have scrolled past the prof_wrapper, make the prof_wrapper follow us down
jQuery("#prof_wrapper").css({'position':'fixed', 'top':'0px', 'bottom':'auto'});
}else{ //We are probably at the top of the page, so reset the original positioning
jQuery("#prof_wrapper").css({'position':'relative', 'top':'0px', 'bottom':'auto'});
}
});
});
You need to add - position:relative to your #main element, then I think this should be pretty close. Take a look at my comment about the padding and margin on the prof_wrapper.
The positioning of absolute, assumes that #main is the first parent element to have a position assigned to it; if so, then it will use this as the positioning for the bottom.
Something like that?

Choosing optimal layouts for resizeable windows in qooxdoo

I am trying to understand Qooxdoo.
So, window, using "VBox" layout is working, toolbar too, but the table component
working wrong.
qx.Class.define("tiny.MainWindow",
{
extend : qx.ui.window.Window,
construct : function()
{
this.base(arguments, "tiny")
this.setContentPadding(0);
this.setWidth(400);
this.setHeight(300);
var layout = new qx.ui.layout.VBox();
this.setLayout(layout);
this.setShowMinimize(false);
this.setAllowClose(false);
this.setContentPadding(0);
this.open();
// toolbar and buttons is hidden
// because only table works wrong
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(["ID"]);
tableModel.setData([[0],[1],[2],[3]]);
var table = new qx.ui.table.Table(tableModel);
this.add(table, {row: 1, column: 0, colSpan: 10});
this.add(table, {flex: 1});
}
});
var tiny_window = new tiny.MainWindow();
tiny_window.open();
tiny_window.moveTo(100, 100);
I've got this output:
"The property 'row' is not supported by the VBox layout!"
Table is shown correctly, but vertical resizing isn't changing
table vertical size.
So, what layout types I must use with table component, toolbar?
P.S.: I am already tried "Dock" layout. Here, error is similar: "The property 'row' is not supported by the Dock layout!: The value 'row' must have any of the values defined in the array 'flex,edge,height,width'". Maybe I need other way to define the table size?
just drop the line
this.add(table, {row: 1, column: 0, colSpan: 10});
it is only valid for a grid layout
The optimal layout in your case with only one item in the window would probably be
qx.ui.layout.Grow()

Monotouch - Change View Title Background Color

Hy guys,
I have this view and I wonder how to change its title background color. This code here just change view's body background color:
var invoices = new MainInvoicesView(this);
invoices.Title = "Invoices";
invoices.View.BackgroundColor = UIColor.Gray;
Any ideas?
Regards,
Claudio
What type of view is this? UIViews do not have a Title property, so you're obviously creating a different kind of view.
If you have a UILabel called TitleLabel in your view, and it's public, you should be able to just call:
invoices.TitleLabel.BackgroundColor = UIColor.Blue;

Resources