Chart showing status in time

[Libor]

Hello,

It is possible to make combination of charts as shown in attached image? The X axis is „ValueType.DateTime“

Chart area is splited to two rows:

     Top chart is transposed „ChartSeriesType.RangeColumn“

     Bottom is classic line chart.

Example of my data classes:

    Public Class LineChartData

        Public xValue As DateTime

        Public yValue As Double

        Public yValue1 As Double

    End Class

    Public Class InversedRangeColumnData

        Public x As String

        Public low As DateTime

        Public high As DateTime

    End Class

  

Attachment: chart_sample_image_5130ab7.zip

[Kalaimathi Chellaiah]

Hi Libor, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. From that we would like to let you know that your requirement is not possible in single chart. Because, when we use isTransposed it will apply for whole chart and it is not applicable for specific rows in the chart. So we suggest to use two charts to achieve your requirement. This is only possible way to achieve your requirement. We have prepared a sample based on attached image using two charts for your reference. Please find below sample and screenshots, 

 

Screenshot: 

 

 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/StatusTime640311367.zip 

 

Also, here we have attached MVC demo links for your reference, 

 

https://ej2.syncfusion.com/aspnetmvc/Chart/InversedRangeColumn#/material 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Kalai. 

 

[Libor]

Thank you,

I have an idea that the required charts in one object could be possible if the top part is made as area chart with empty points. Specificaly two series, one series with value 10, the second series value -10.  Well the data must be modified to get empty points in the right place.

I would like to ask you if this is the good way. You do not need to make a demo.

Regards,

Libor

[Kalaimathi Chellaiah]

Hi Libor, 

 

Thanks for the update. Yes, using area series instead of rangeColumn is a good way to achieve your requirement. We have tested this case with a simple sample. In that, the status time bar is working properly as you expect. Please check the below sample, 

Sample: https://stackblitz.com/edit/xrph9b-djctpv?file=index.ts 

Screenshot: 

 

Let me know, if you need further assistance. 

Regards, 

Kalai. 

[Sarasilmiya Shahul Hameed]

From: Libor Dopita  

Subject: RE: Syncfusion support community forum 147805, Chart showing status in time, has been updated. 

Hello, 

 

The chart itself is good but the problem is that tooltip is shown only for points of the area, so in very top left corner. It means tooltip is not showing for 99% of surface of the object. 

 

Best regards, 

Libor Dopita 

[Srihari Muthukaruppan]

Hi Libor, 

We have analyzed your query. From that, we suggest you to set “shared” property in tooltip to be true to achieve your requirement. By default, tooltip only showed when hovering the point but on the area. Based on that we have a sample for reference. Please find the sample and code snippet below. 

Sample: https://stackblitz.com/edit/xrph9b-aj6ojd?file=index.ts 

 

Code Snippet: 

 

tooltip: {enable: true, shared: true} 

 

 

Screenshot: 

 

 

If this doesn’t meet your requirement, please revert us on further information about your requirement. 

Regards, 

Srihari M