I have two similar javascripting challenges I am looking to solve in Cognos with the help of conditional formatting.
I would like to be able to show a data item, for only the item that I am comparing other items to in Cognos. For example, If my chart shows a comparison of Florida to the rest of the US States -- Florida is what I am doing am doing the comparison to within my charts.
So I would like to show the data label for Florida only. Conditional formatting in Cognos will let you either turn all item labels on, or off. I am looking to find a way to turn them all on with conditional formatting, but hide all the values, except the Florida value which is the focus of my report with javascript.
Here is an example of my chart and how it looks with all the data labels showing:
http://i.imgur.com/aM4gEYu.jpg
I only need to show the number for Florida. The rest of the numbers make the chart look way too cluttered.
Also - My second challenge is when my mouse hovers over the other labels - I would like to show the values for them (but only on hover). So basically the label will default to showing the Florida label only, but if the user hovers over the United States, or the World values - then the user will be able to see that item.
Yeah conditional rendering unfortunately is not available everywhere, so it's not a viable solution.
Writing JS against a chart is tough, but I suppose not impossible. First, I'd highly recommend the FireBug plugin for Firefox. It will allow you to more easily see the generated HTML for a graph in Cognos. I just looked at a sample bar chart. Unfortunately, none of the elements have individual IDs. You will have to pull the "area" elements by attribute. The hover text for the bars and the label text are both in the TITLE attribute.
I have to put the obligatory "no JS" statement in here as I guarantee such a solution will break between versions of Cognos and potentially browsers.
An alternative may be to hide the standard chart labels and put Singletons below the chart to control the shown information.
If you still need help - can you take a screenshot of this chart? If not - can you elaborate on what type of chart it is and what other data values exist (other than FL, US, World). I think I may not be visualizing this properly.
Related
I want to display a graph which depicts a timed process. Therefore, it would be desireable to have nodes aligned according to a given timeline.
The time stamps are totally accurate, which is why I chose them to be the keys of my groups. If two nodes have the same time stamp, they get added to the same group.
These groups are aligned by the TreeLayout. Per default they are aligned in the following way:
(Please note that the black boxes depict the groups and their alignment. The red boxes were added for better understanding on which level which group is.
What I would like to have, is a more timelined view of the diagram like so:
I tried setting layerStyle: go.TreeLayout.LayerUniform, and afterwards setting the TreeVertex.level accordingly, but GoJS didn't change its positioning.
Are there any other possibilities to achieve what I want?
Did you assign TreeVertex.level in an override of TreeLayout.assignTreeVertexValues?
You might be interested in the LayeredTreeLayout example classes that are in two different samples: http://gojs.net/temp/swimBands2.html (no Groups) and http://gojs.net/temp/swimBands3.html (with Groups).
I hope the LayeredTreeLayout code in those files isn't too confusing. They are slightly different from each other, due to the absence or presence of Groups, and the corresponding changes in the node data.
I've posted a couple of Google Charts accessibility questions already; here's one more. Thank you in advance for your help.
Google Charts tables are surprisingly easy to make accessible to blind users, but I'm running into a perplexing problem. I'm making a website that uses standard Google category filters to produce a data table. I've added ARIA-live=polite and ARIA-atomic=true attributes to the table to signal screen readers to read out the entire table when it changes. This works perfectly most of the time; when a control is changed, after reading out the control behavior the screen readers will immediately start reading the new table.
Unfortunately, changes in class attributes trigger ARIA-live. For Google Charts tables also tagged with ARIA-atomic, this means that row hover behavior will trigger a reading of the entire table, because hovering over a row changes the row class. And if you move the mouse pointer over more than one row, it'll read out the entire table once for every row over which you pass.
EDIT: see NOTE below to clarify this paragraph. I've tried addressing this by tweaking the table's cssClassNames options, but the results are frankly maddening. Even when changing the tableRow and hoverTableRow options to the same class, the table will only apply that class when hovering, changing the class to " " when not hovering.
I've tried convincing my co-workers that users of screen readers won't be using mice, but I've been asked to find a solution anyway. Guh.
Does anyone understand how this row hover behavior works, exactly? Is the problem as inscrutable as I'm making it out to be, or am I missing something? Does anyone have any ideas for a workaround?
NOTE: Ryan B has a good workaround idea (see comment below), and that's exactly the kind of solution I'll propose if my co-workers insist that the current setup doesn't meet their standards. Thank you Ryan.
Still, in the hope that the problem is with my explanation, I'll clarify: when you hover over a row in a Google charts table, the background color changes. The Google Viz script manages this by listening for hover events over table rows. On hover, the script changes the row class name from something like "tr-goo-viz-table-row" to "tr-goo-viz-table-row-over", both of which are in the Google Viz CSS and only include styles of background colors (white and light grey, respectively).
In the HTML table call one can set the cssClassName option for hoverTableRow to "tr-goo-viz-table-row" (or set both tableRow and hoverTableRow to any class that only sets the background color) and visually, the hover behavior stops. But in an odd quirk, the script insists on differentiating the class names on hover even if you're telling it to keep the class names the same. Depending on the implementation the script will produce a doubled class name ("tr-goo-viz-table-row tr-goo-viz-table-row") for hover rows, or an empty class name ("") for non-hover rows, and either way that'll still trigger ARIA-live even though no style change is implemented and hovering has no visual effect.
Since I don't understand the implementation of this behavior, I'm hoping someone who understands it better than I do might know of a way to stop the hover-triggered class name changes altogether - killing the listener, etc. Something like adding "pointer-events:none" in the row CSS for example...except pointer-events wasn't supported in IE before IE11 and the people using this website will mostly be using IE9.
I have an unusual situation. I have a drop down list that allows my users to select one of a number of different scenarios. My problem is that each scenario is about 100 words long. I want to show the user everything and a radio selection box would not be appropriate. What happens is that because of the very long rows my dropdown list appears so wide that it goes off the edge of the page.
Is there a way that I can split up text (I'm using C#) and add new lines so that dropdown list box contains "multi line" selections?
Hope this makes sense to you.
I don't think it's possible without some scripting. You can add width and white-space:pre-wrap to your select tag, but that only wraps the visible part. You can't, as Madmargigan suggested, use a title to show the complete string (the title won't show).
I have prepared a very basic script to demonstrate how you could do this with javascript. See this fiddle. It may give you ideas?
You cannot do this with the standard html dropdownlist. Some frameworks have workarounds for it (for instance, see ASP.NET's dropdownlist). There are also javascript libraries that offer solutions to this problem as well.
I've got some homework tasks in topic surveys and diagrams. The first task is to normalize the input of a survey, because the structure of the data is changing from time-to-time.
So there are three types of surveys:
static fields, where text is stored
dynamic ones, where the user can select one option
and multiselect fields, where the user can select multiple options
So I'm not really a statistics guy, so I have really no idea what I can do with that incomming data.
So the data I have is stored in an huge XML file from there I can easily get how man times a survey was filled, and how many times a field was filled, so I can (for eg on a pie chart show the relation of filled or not filled).
The second idea is to show the relation between the content of a multi option element using a bar chart or so.
In case of the multi option elements I've got the idea to show data in implication of one option.
But the question is, what could be shown?
The other problem are the static elements (text fields and so). What data could be represented from a single field?
The data in the XML field is collected from 2001 to 2005 So maybe I can work with the dates of the surveys, but as I said, I don't really know how to process the data, to collect as much as possible, to create a really great amount of diagrams.
After normalizing your data (which could be more difficult than the visualizing part of your job), you might do the followings:
To show your static fields, which contains texts, you could recode theese text to new variables containing fewer categories, which could fit on a graph/plot. Another way is to make word clouds of the texts - like on wordle.net.
The dynamic fields, each containing only one answere, could be the easiest to display. You could make a pie chart to show the percentages of the attributes, or rather a bar chart which could also display percentages/densities or frequencies (e.g. see the ggplot2 package in R).
To display the multiselect fields, you should restructure the date to the appropriate format (I do not know how it looks like now). This could be done by different tables, that show the counts (frequencies) for every categories in all variables. E.g.: 187 people ate choclate, 160 ate bread and 50 people ate pizza yesterday. You could then show the values by a barchart easily. Look out for: the sum of theese vaules will not equal to the sample size, as anyone could select multiple values, so a pie chart would be a really bad choice.
I hope I could help.
I would not recommend pie charts. Use bar charts or dot plots instead. It is much easier to distinguish similar frequencies for different categories in them. Ordering the categories by frequencies in them is almost always a good idea, too. Here you can find a short article about why Pie Charts Are Bad.
3D diagrams might look nice and are a neat way of impressing people with little knowledge about data visialization (which might be what you need ;-) ). But they are considered bad practice by most experts, because using extra dimensions, which are not absolutely needed, distracts the reader from the actual data.
Personally I think that crosstables and scatter plots are pretty self-explanatory ways of displaying relationships between two dimensions of data.
It is often a good idea to report some basic statistics along with diagrams, but make sure you only do this when it's appropriate. See this Wikipedia article if you want to learn, which univariate statistics (like a mean for example) are appropriate for which data.
If you seriously want to learn about data visualization, I can highly recommend the books by Edward Tufte about the topic. They are really a pleasure to read. While they stand on a solid scientific base, they are easy to understand, even with little or no background in the field.
Good luck,
Alex
What kinds of options do I have when a dropdown menu is faced with text that is so wide that extending the menu's width to accommodate is not feasible? i.e. It breaks the page layout, or just looks too ugly if the dropdown is adjusted to fit the long item.
Truncation?
Truncation plus full hover text?
Don't allow items that long?
Anyone encountered any elegant solutions to this?
Thanks.
I realise I'm fairly late to this question, but I've been hunting for an answer and I may have found a fairly elegant solution.
Have a look here:
http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/
http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm
The first link talks about a couple of solutions before recommending a solution based on the second link.
The idea is that on click, you change the width of the <select> tag such that it is big enough to show the full text of the options. By keeping the <select> tag inside a div with overflow set to 'hidden', it doesn't screw with the rest of the page.
Try it out - it's a pretty good solution.
Truncation with tooltip would be my choice....
The last time i had to do that i used a telerik control, which was quite UI rich.
I agree with GordonB regarding truncating the options. Excessively long options can be hard to read, and as you mentioned it looks horrible.
If your dropdown is populated from user input, however, I'd restrict the length. What can be said with 15 words should be said with 5 ... if it can't, then perhaps a dropdown isn't your best option.
For example, if your options are the titles of research papers and their authors, you can probably abbreviate them down to a few key words ("String Theory and You [Brown 2008]"). On the other hand, if the options themselves differ by only a few words and lose meaning if they are truncated (e.g. a list of options like "Peanut butter and grape jelly sandwich with carrot sticks and soy milk" and "Peanut butter and boysenberry jelly sandwith with carrot sticks and 2% milk") maybe you would be better served by displaying all the options sequentially, accompanied by a checkbox or radio button as appropriate.
(If you're using ASP.NET, basically I'm saying using a repeater instead of a DropDownList)
This second approach might also allow you to incorporate other elements that you wouldn't be able to in a dropdown. Take a look at this Amazon search result page for ideas.
Give the element a maximum width with the CSS property max-width.
Most browsers show the options at full width regardless of the dropdown's actual width whereas IE crops them to the width of the select box. So the problem is really browser specific.
I've made a solution using absolute positioning on the dropdown so that I could extend it's width on hover in IE without breaking my layout. A bit hacky but it's one option.
I've been using commercial ASP.NET control that is implemented using <div> rather than <select>. This way we could put multiline elements on it, style it as we wanted and do some other stuff.
Depends how wide you are talking, what the context is. Often this comes down to a design problem rather than a coding problem. If the text is really long you will have usability problems regardless because reading long text in a dropdown is difficult. My options would be:
If the dropdown is really narrow and the longest items aren't very long (eg 3-4 words) change the design to accommodate it.
If the text is really long (eg sentences) then truncate it if you can. Sometimes text isn't amenable to this (eg. you may end up with multiple items with the same text). You can't really put tooltips on select list items.
If the text is really long and can't be truncated, you may want to consider a different UI option.
Why not create a calculated field which is based on the lengthy field.
Only create it to only be the first 50 (say) characters.
=LEFT([Title],50)
Then reference that field in the drop down.