Show hint data inside bar in DevExpress chart controls - javascript

I have an ASP.NET web forms application which uses DevExpress's bar chart controls. In the below side-by-side bar chart:
I needed to show some extra information apart from traditional x and y argument-values using series point's {HINT} pattern (Hospital Admissions: 130, (65%)) - as per the image.
Now, I need to show it in the bar itself. Like the control shows by-default for Stacked bar charts:
How do I push the Tool tip hint data to be shown inside the data bars?
Any suggestions, kind folks?

It is possible to access the current data row directly when handling the CustomDrawSeriesPoint event. Cast the e.SeriesPoint.
Tag property to the corresponding type (e.g., DataRowView). This should make it possible to update the SeriesPoint label text.
You can find a small sample project that illustrates this approach in the Chart Series Label from a dataset column that is not part of the series ticket.

Related

Assigning colors to a d3.js bar chart?

I'm trying to create a color-coded bar chart using d3. I am SO CLOSE. Here's my bl.ocks chart:
http://bl.ocks.org/sconnors37/b99070b055f125c9dff1/1cb53954be3f20e3c4492066eccd749b5cf04bbe
What I'm trying to do is assign color values based on the "teams" field in my .tsv file. So grey for Mercedes, red for Ferrari, etc. I have the teams in the var color domain and the colors in the var color range, and I'm pulling var color into the bar attrib.
For some reason though, the entire chart is just taking on the first item in the range - I changed it from grey to red just to see if that was what was going on, and it is.
So! How do I get the rest of my colors to pull through onto the bar chart? Help me, stackoverflow, you're my only hope.
In your .tsv file the last column team is not separated from the previous column by a tab, but rather through two spaces. If you look at the data passed to the d3.tsv callback I think you will find that you have one date team column instead of a date and team column.
This means that the field d.team is undefined and ordinal(undefined) will just return the first value from the range.

Google Charts API: Highlighting closest Datapoints between 2 series. How?

I have a Google line chart that contains a few years of data. Each year is a separate series. The chart legends displaying each year/series are clickable and clicking on any given 2 or more of these legends/series, displays them and their corresponding Datapoints and their annotations. In the hAxis, these Datapoints are integers ranging from 1 to aprox. 6,000,000. I also have their values displayed under annotations for each Datapoint.
Notice that when you click on a datapoint, it increases in size and gains a white border. If you unclick it, it returns to it's original form.
My question is:
Is it possible to change my code to look for the top 10 closest-to-each-other integers between 2 series based on a predefined threshhold? I know styling may not be an option but perhaps there may be a way to force a Datapoint to appear clicked.
Please allow me to illustrate it for better understanding.
You can do that using option selectionMode: 'multiple' and selecting appropriate points using setSelection() method. For example:
chart.setSelection([
{row:0, column:1},
{row:0, column:2},
{row:2, column:1},
{row:2, column:2}
]);
Of course, you will have to find out points which correspond to defined threshold. See example at jsbin.
Update: example with DataView.

Labels for bar charts in Cognos

I have a Cognos chart and I want to be able to turn on one label that shows the amount for just the bar that is showing with conditional formatting (the selected center from a drop down list).
I have found a way to turn all of the labels on, and all of the labels off with Cognos chart - show values - but there has to be a way to only turn on just one specified value.
I am trying to create some JavaScript that will assist me in manipulating the specific element that is the selected value for my chart. Does anyone know how to find the ElementID for each individual bar in a Cognos bar chart?
Here is an example rendering of what Cognos creates will all the labels turned on: http://i.imgur.com/aM4gEYu.jpg
I am trying to create a rendering with only the label for the blue bar showing.
just click on 'series' on chart
set from properties pane
value to 'yes'
Grouping type ---> stacked
value location ----> outside top
value type ----> absolute

Error bars (confidence intervals) in Highcharts

Error bars (or confidence intervals)are not currently supported in Highcharts but someone edited an existing module as a workaraound. The results are shown in this jsFiddle:
http://jsfiddle.net/b74Tt/
However, what if I have more than one series that needs to have error bars? How can one ErrorBar series be tied to a specific column series (and therefore be displayed exactly on top of it)? My problem is shown here in this other jsFiddle:
http://jsfiddle.net/FaYdK/1/
I added a new type of chart based on the column one. What I get is thin columns that act as error bars. I also used the events > legendItemClick to create a small function that hides the next series (the Error bar) when a column is clicked, so that its corresponding error bar also hides or displays.
See the following example:
http://jsfiddle.net/FaYdK/3/
I'm pretty satisfied with the solution, the only thing is that I would like the error bars to be displayed in the usual form (an inverted H) instead of a single line (thin rectangle). If anyone knows how to do this, please comment!

Highcharts Columns with empty columns

I want to show a column chart that will show empty columns on days without data. I have previously done this in amCharts, but trying to switch everything over to js charting.
Here is an example:
https://skitch.com/jhanifen/gy324/jhanifen-skitch.com
Basically if I could change the color of individual columns that would also work.
Answer provided on Highcharts forum.
http://highslide.com/forum/viewtopic.php?f=9&t=12873
You can set the y value to 100, and set a secondary value to the actual value, which you can then grab in the tooltip formatter.
see this example: http://jsfiddle.net/jlbriggs/BLxUL/
Depending on which you have more of, you can either set the bar color in the plotOptions, and call the 'blank' color in the data array when needed, or the other way around (as in the example)
Thanks jlbriggs!

Categories