Kend0, legend of chart, title and scroll - javascript

Exist any possibility to add title to kendo legend (of chart) ?
My current legend looks:
item 1
item 2
I want to have:
LEGEND
- item 1
- item 2
Exist possibility to add scroll bar to kendo legend ?
(for example, height fixed to 200 px and when exist a lot of legend item - scroll bar)

Scrollbar in a legend :
It is possible but it is a lot of work. The legend is inside the SVG or Canvas, depending on your drawing mode. Scrollbars aren't really a thing in those environments. The easier approach is to write a custom widget of your own that is a legend in plain HTML. From the data in the Chart widget, you can get the list of legend items and their colors.
I had to implement this in Telerik Analytics, and it took a day or 2 to get right, but worked out in the end. Unfortunately, the code is proprietary so I can't share it here.

Related

How to apply horizontal alignment in amchrts legend?

I'm using amcharts to create my chart, legend is in separate container.
Applying option
chart.legend.align = 'right'
has no effect
Codepen
If you're looking to align the contents of the legend, i.e. the legend items to the right, and not the entire legend itself (I am presuming this, because the legend is in an external, custom <div>, and this is taken straight out of our guides on the subject. If you meant something else please do let us know.), then you'll have to change its layout, then align its contents to the right via contentAlign. E.g.
// Align legend items to the right
chart.legend.layout = "vertical";
chart.legend.contentAlign = "right";
Here's a demo:
https://codepen.io/team/amcharts/pen/0aa8b7741a25a86fafa48b747077b8e3
I highly recommend checking out our guide, "Working with Containers", it contains various details regarding laying things out in amCharts v4. Also, once you align everything to the right, the legend is still going to be locked into the height of its html wrapper, i.e. 150px in your case, with no way to access the rest of the content. The demo above is a fork of what's found in our "Making the external legend scrollable" guide.
legend.align has no effect, because the width of the legend is 100%.
This is used by parent Container when layouting its children.
You should align the content with legend.contentAlign:
chart.legend.contentAlign = 'right';
Here I forked your code pen to show the result.
Another error in you code pen is the value of legend.valign
Valid values are:
"top" | "middle" | "bottom" | "none"
See VerticalAlign.
So you should set it this way:
chart.legend.valign = 'middle';

Show hint data inside bar in DevExpress chart controls

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.

Highcharts bar chart rendering issue - bars getting rendered under each other

I'm seeing a strange issue with a Highcharts bar chart. I am trying to render just under 10k items, and I have my plot options series turboThreshold set to 50k.
The issue is happening whether I structure my series as an array of objects
series: [
{
name: "string",
y: number
}
]
or as an array of arrays
series: [
[
"string",
number
]
]
What's happening is that, up to 4004 items, the chart renders fine. With 4005 items, the top bar is moved down one and is rendered under the second bar. With 4006, the top two are rendered under the third, etc. The x-axis labels remain fine, it's just the bars themselves that move.
Here is a screen shot with 4007 (4004 + 3) items. As you can see, the top three bars are under the fourth.
With the full 10k items, you have to scroll most of the way down (~6000 bars) to see the "first" bar.
I have a calculation to determine the height of the chart based on the number of items, to keep the bar size roughly the same, and that seems to be working fine. Inspecting the containing div shows that it is indeed the height set by the calculation, and the chart renders all of the x-axis labels correctly (even if I let through the full 10k items, the last one is right there at the bottom of the chart).
Any ideas as to why this might be happening? At 4004 items the chart height is 100100 px, is there some kind of limit or threshold within SVG that might be causing the issue?
(Highcharts 4.1.9, jQuery 1.11.3 for backwards compatability.)
Here is a fiddle showing the behavior. Apparently it is related to the fact that I have my y-axis opposite (so the scale is on top) and the y-axis and chart titles set to display: none.
Still would appreciate any ideas on how to deal with this. I would rather not have to show a y-axis title or chart title, but even if I do show them, the behavior still happens.
I agree with what #Mark said in the comments, it seems to be a bug in Highcharts, but it does not have to do with the visibility of the chart title or y-axis title. I did a little more playing around in an updated fiddle, and found that the problem is related to the chart height. A chart height of 100050px renders fine, no matter how many items are in it. At 100075px the top bar looks slightly off, and at 100100px it is definitely wrong.
The reason the problem was occurring for me at around 4000 items is that I was setting the chart height like this:
$('#container').height(function(){
return Math.max(400, (25 * numItems));
});
4002 * 25 = 100050 and 4003 * 25 = 100075, which is why it seemed to start right around that threshold.

Parameters of focus graph space (d3.js)

I try to understand how to make a bar chart with focus option on basis of the example (the link is below) using d3.js.
The problem is: when it`s need to zoom some bars, for instance, 38, there is the interval between them, but when I select some more bars this interval disappears and bars stick together, there is no space between them.
So, how can I parametrize focus graph scope focusGraph.attr("?", ) example , specify its max size. For example, if in the focus scope the interval between bars is less than 4-5px, further expansion of this scope will be impossible - its max size will be achieved.

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

Categories