Annotations for a Bar Chart

[Sripriya]

HI, 

We are trying to display a dashboard with few stacked bar charts for well monitoring in "Gas and petrol insustries".
As part for this we are trying to show few more information in the form of images.

Mostly these images will be up/down arrows on top of the bar, a small rectlange inside the bar etc. 

What we would like to know is, is there a facilty in chart itself to achieve this are should we manually add div elements to 
chart area as shown here:http://jsbin.com/azeRAY/2/edit.
I have attached a image to show what we want to achieve

Right now we are the evaluation phase of Kendo UI for our applications and any help would be appreciated.

Regards
Sripriya
Senior engineer, Honeywell Technologies.

[Iliana Nikolova]

Hi Sripriya,

At this point Kendo UI Chart does not support image annotations. As a possible workaround I can suggest adding additional line series with different markers.type and hide the lines. For your convenience here is a simple example which demonstrates the suggested approach in action.  

Regards,
Iliana Nikolova
Telerik

 

 

[Sripriya]

Thanks Iliana, but the link for the sample which you have provided doesn not contain any code. Can you repost it pls.

Regards
Sripriya

[Sripriya]

Hi, 
In continuation, if you see the above attached image, the category axis labels have different background colors. Is it possible to do so in kendo bar charts? If so how? 

[Iliana Nikolova]

Hi Sripriya,

It appears there was a temporary issue with the example - please test it again (link). As for the categoryAxis.labels.background - this requirement is not supported by Kendo UI Chart and there is no a suitable workaround I can suggest. Please accept my apologies for any inconvenience this may cause.

Regards,
Iliana Nikolova
Telerik

 

 

[Sripriya]

Iliana, 
Thanks for the information. But i am still not able to open the link. Can you provide me correct one pls?

Regards
Sripriya

[Iliana Nikolova]

Hi Sripriya,

Please find the source code for the example attached.

Regards,
Iliana Nikolova
Telerik

 

 

[Sripriya]

Iliana, 

In continuation with the earlier results i am able to achieve many of our functionalities. Thank you very much. 
However, few of the images are still not possible with line charts. For that we are planning to place images on top of bars in tha chart. Is there a way to find out the height and position of a bar in the chart so that we can place the icons excatly on top of it?

Regards
Sripriya

[Sripriya]

Iliana, 
In addition to the above query i would like to add few more questions for clarifications.
1.What we would like to do is show two bar charts side by side in panels. Can you pls provide me a sample for this. Attached is the image for the same. 
2. When we have two stacks side by side, the line chart marker appears in the middle of these two stacks. But i would want to see the marker in the middle of the first stack. Any idea on how this will be possible?

[Iliana Nikolova]

Hi Sripriya,

Up to the questions: 
- ...Is there a way to find out the height and position of a bar in the chart so that we can place the icons excatly on top of it?
This requirement is not supported. As a possible workaround I would suggest to calculate the sum of column series data points and set them as values of the line series (example);  
- What we would like to do is show two bar charts side by side in panels. 
For this requirement you can wrap the charts in additional <div> containers and display them as inline-block elements (example);
- ...But i would want to see the marker in the middle of the first stack. Any idea on how this will be possible?
This requirement is also not supported and there is no a suitable workaround I can suggest. Please accept my apologies for any inconvenience this may cause.

Regards,
Iliana Nikolova
Telerik

 

 

[Sripriya]

Hi Iliana, 

Thank you very much for the reply. Since we need to see the marker inside the first bar, the existing functionality is not useful for us. 

So as a work around, we have decided to use images to represent the data. So to show the images on top of the bar, we have used the chart.SeriesPoint and got the last series point position on the Stack. Using the position of this point we have placed the icons on top of the bar. This is working fine.

Now, what we are finding difficult is, we want to show a icon  right with in the range of first bar, what i mean to say is, this icon can be positioned anywhere along the length of the first bar. Please see the image attached on the first post. This image is actually a data point coming from service. Now, with line chart this is fine if we have only one bar. But in most of times we will be have two bar. So to represent this we need a image. Now, the question is how can we find out the position of this datapoint so that i can place the icon excatly in the middle of the first bar? Also, is there a way i can find out the x and y coordinates of the excat middle position of the bar?                                

 Please see the first image file i have attached in the post. You might be able to understand it better with the explanation above. All i need to do it find the x coordinate of the center of the bar and Y coordiante of the top of the bar and also a y coordinate of the data point corresponding to Value axis.

[Iliana Nikolova]

Hi Sripriya,

Apologies for the delayed reply.

You can get the points coordinates via the chart _plotArea internal method. As an example: 

var chart = $("#chart").data("kendoChart");
chart._plotArea.axisX.children[0].box.x1

On a side note, I was thinking on this scenario and can suggest a bit different approach for displaying icons on top of a particular bar: 
- Use series.notes;
- Change the default series.notes.icon.type.
For your convenience here is a simple DOJO example.

Regards,
Iliana Nikolova
Telerik