Ideas for visualisation

[Andrew]

Hi, I’m wondering if you guys would have any ideas on what would be a good approach to representing data that highlights the condition of items over time but where the ‘health’ of each item in the series dictates it’s position in the visualisation.

It’s quite hard to explain but I’ll try…

If we were alanysing the radiation exposure of planets over time we could give them a score 1=OK (green), 2=Warning (amber), 3=Critical(red).

If for January Mars was critical it would appear first in the visualisation and red in colour. If in February it’s exposure changed to OK and Venus was critical, Venus would appear first and red with Mars later in the series and green.  So, each planet has a Red-Amber-Green (RAG) score for the condition it's being measured against.

We’ve been attempting to model this using a stacked bar but have got to a point where we think using another approach rather than trying to make a chart do something it’s not designed for might be a better appoach. Specifically we are having an issue making each series render in order of it's RAG. There would be multiple ‘charts’ on the page for different conditions, say, radiation, solar wind speed, spin velocity (making things up here!)…

Do you have any ideas / suggestions on an approach - such as which chart might be good starting point - more than happy to receive any ideas on alternate visualisations. Here’s an example of one chart we’ve been working towards where I've edited the HTML to make it look like it works (in reality we can't get the order of planets to present in a different order (for each date range) whilst maintaining the red at the left, green at the right visualisation.

 

[Anton Mironov]

Hi Andrew,

Thank you for sharing the details of this interesting case.

I tried to achieve the described requirements and would recommend trying the following column chart implementation:

1. Set the series name, data , and color which will be set conditionally. Here is an example of the color setting:
   

                 color: function(point) {
                   if (point.value < 4) {
                     return "green";
                   }
                   else if(point.value >= 4 && point.value <= 7){
                     return "yellow";
                   }
                   else{
                     return "red"
                   }
                 }

2. The legend that is represented in the example that I will provide below, could be used as a filter for different planets, or as per the needs of your application.

Here is the dojo example that I prepared for the case:

• https://dojo.telerik.com/@anton.mironov/EkowoVOR

Let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Andrew]

Hi,

So thanks for your previous response but my description probably left a lot to be desired.  The image attached shows that we've got the chart to now display each element in the colour we want and how we want. So we have all the red together, all the amber together and all the green together so that it gives a really good visualisation of how good or bad each date range is.

The last bit that we are now struggling with is that the labels are in the wrong order (note how LON is always bottom, followed by MSR etc).  We think this is simply down to how the series is defined and cannot be 'out of order'.  Is there a way we can get to the labels and modify them during or after rendering?  If so I could reference back to the data source and set the labels correctly myself?

[Anton Mironov]

Hello Andrew,

As the required implementation is not available out-of-the-box, I prepared a custom one for the case. It was presented in my previous response.

If you like, I could try to prepare a demo, using another widget of the Kendo UI Components. Is this proposal acceptable for the needs of your application?

Choose a type of our Kendo UI Charts, observe the built-in implementation and I will try my best to set it for you:

• https://demos.telerik.com/kendo-ui/bar-charts/index

Looking forward to hearing back from you.

 

Best Regards,
Anton Mironov
Progress Telerik

[Andrew]

That would be awesome Anton.  I'd probably say the 100% stacked bar (or column) would be the best to start with :-)

[Anton Mironov]

Hi Andrew,

As I tried to implement the desired behavior in a column chart(in my response from 30 Mar), now I created one for the stacked bar.

Here is the dojo example:

• https://dojo.telerik.com/@anton.mironov/uPujUwIy

Observe the result and let me know if this approach is acceptable for the needs of your application.

Greetings,
Anton Mironov
Progress Telerik

[Andrew]

Hi Anton,

 

No, this is not what we need.  To put it in terms from the demo you produced we'd be altering the order of the items according to their value. 

So, to keep it really simple for 2020/08 we would organise the order of the bars so Earth came first (35%), then Mars (30%), then Jupiter (19%), then Venus (16%).  For 2020/09 the order would change to Mars first (32%), then Jupiter (25%), then Earth (22%), then Venus (21%). 

You'll see from the previous screenshot that we're so, so close to having this done.  We are already rendering the order differently but the labels that get applied when the chart renders are 'wrong' i.e. each category has the same label order (Mars, Earth, Jupiter, Venus) even if the bars them selves are in the right order (Earth, Mars, Jupiter, Venus).

So really all we need is the ability to change the label on a bar after the chart renders and we can correct that order and then Telerik will be the winner!  At the moment we're having to consider a competitors product becauseit look slike this is not possible with Telerik.

[Anton Mironov]

Hi Andrew,

Thank you for the additional details provided. It will be great if you decide to choose Telerik.

I tried to implement all the requirements. In order to achieve it, I used a SubCategory for the colors. It seems that they are always in one order.

For the labels with the names of the planets, I added another property in the model("Planet"). This approach provides the opportunity to set different planet names for a SubCategory from the dataItem.

Here is a dojo example that I prepared for the case:

• https://dojo.telerik.com/@anton.mironov/OyawujIF

Furthermore, the data for the Kendo UI Chart could be seen in the Developer Tools Console in a table and array variants.

Make the needed tests locally and let me know if I could assist with anything else.

Kind Regards,
Anton Mironov
Progress Telerik

[Andrew]

Anton - this is AWESOME - we have a way forward. Thank you so much for your help mate and if I can do anything in return, positive customer feedback etc then please let me know!