Want to plot a chart and display time in X-axis.

1 Answer 85 Views
Forum suggestions
Nithya
Top achievements
Rank 1
Iron
Nithya asked on 21 Sep 2022, 06:51 AM



Want to plot something like this. the graph is plotted based on the the range of time.
Eg. from 9 AM to 9:10 AM some value and based on the status, the color is decided.

I have tried restructuring bullet chart with number range as below

but I want to pass time and date as input instead. May I get some suggestion on this?

like which chart would match this requirement

Dess | Tech Support Engineer, Principal
Telerik team
commented on 23 Sep 2022, 05:01 AM

Hi, Nithya,

It seems that the product in this forum thread is not specified. Could you please specify what is the exact Telerik product that you are currently using? Thus, the appropriate community would gladly assist you.

Nithya
Top achievements
Rank 1
Iron
commented on 23 Sep 2022, 05:04 AM

Sure. It's Kendo react

1 Answer, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 27 Sep 2022, 08:44 PM

Hi, Nithya,

The chart from the provided image looks like a TimeLine chart which, unfortunately, is still not available in the KendoReact suit. Another possible option coming to mind (except for the one already found by you) is to use plotbands instead of series items, which allows defining from-to values:

https://stackblitz.com/edit/react-ykkxnj?file=app%2Fmain.jsx

I can also recommend submitting a feature request about such chart type in our feedback portal, where new ideas are constantly being evaluated and the most popular ones are implemented in future releases:

https://feedback.telerik.com/kendo-react-ui 

I hope this helps.

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Nithya
Top achievements
Rank 1
Iron
commented on 30 Oct 2022, 06:45 PM | edited

Thanks Vessy. So I have utilized plotbands and arrived at the required graph almost. I'm converting time to number. It looks as below. 
I need some additional functionality to this

1.  I should be able to edit the label (shown as Down Time) on clicking the graph. My plotband object is something like below

{
                from: 17,
                to: 17.5,
                color: #68D560,
                opacity: 1,
                label: {
                    text: "Down Time",
                    font: "12px sans-serif",
                    color: "#FFFFFF",
                    rotation:-90,
                    background: 'black'
                  }
            }

I see there is a property called "visual" for label. I'm not able to understand and use that option. Can u help me how to use that function?  

 

2. My second requirement is I want to highlight the particular area of graph when clicked. Suppose I click on color 'red' area, that particular plotband should be highlighted with some dark border or something similar. Could u refer some option for this?

3.  the chart gives label in bottom of the chart.( eg from my chart is :17, 17.5 18, 18.5 etc) . I want to pass custom labels. Any help here?

Many thanks in advance :)

Vessy
Telerik team
commented on 03 Nov 2022, 06:44 AM

Hi, Nithya,

Please, find my answers below:

1. Editing the "Down Time" label (and any label in the chart as a whole) is not supported. All elements o the chart are rendered inside an SVG object and you can edit their values only before the rendering of the chart. The `visual` prop can be used to override the default rendering of the labels by creating your custom Kendo Drawing objects. You can use it for passing custom text content (e.g. make the label red if the value is too big), insert a drawing object like icons, change the position of a label, skip a label on predefined condition, etc:

2. Unfortunately, the plotbands are also not designed as clickable elements - they can only highlighting a part of the chart.

3. You can bound the labels to a data holding the desired values though the `categories` and `categoriesField` props of the chart: 

Just have in mind that the `from` and `to` props of the plotbands expect the indexes of the target category items, but not the values themselves: https://stackblitz.com/edit/react-ykkxnj-vyyr6v?file=app%2Fmain.jsx

 

I hope the provided information will be helpful for you.

Kind regards, 
Vessy

 

Tags
Forum suggestions
Asked by
Nithya
Top achievements
Rank 1
Iron
Answers by
Vessy
Telerik team
Share this question
or