Scrollable chart with large datacontext, virtualized, with fixed width of bar

[John Smith]

Hello.

How to set SfChart for WPF for standard Candlestick Chart?

Should have these properties:

- DataContext has thousands of bars, so Chart control should be virtualized (not slow)

- Bar Width have to be fixed and has reasonable (customizable) width, not as in samples with 5 bars and with bar width of 300 pixels - this is not usable in real application

- Chart have to have horizontal scroll bar for viewing various parts of chart

- Chart should change vertical position after horizontal scroll - so it show bars, not empty space

I think that this are basic properties of usable Candlestick chart.

For example - image: 

I studied sample project here and not found real sample.

Please for real sample project. 

Thank you very match.

[Durgadevi Selvaraj]

Hi John, 

 

Thanks for contacting Syncfusion Support. 

 

Query 1:  DataContext has thousands of bars, so Chart control should be virtualized (not slow) 

 

We can use more number of points with high performance using FastCandleBitmap series. By default it support UI virtualization. We have prepared a sample based on this and please find it from below link, 

Sample:CandleChart_Sample
 

Query 2: Bar Width have to be fixed and has reasonable (customizable) width 

We would like to inform you that, our default candlestick chart having fixed width and reasonable space between bars.  

Please find the screenshot below, 

 

If your requirement is different from the above then please revert us with more information about your requirement and it would be helpful for us to provide a solution sooner. 

 

Query 3 &4: Chart  have horizontal scroll bar for viewing various parts of chart 

We can view the various parts of the chart area(zooming and panning across chart area) by enabling resizable scrollbar to the axis as like in the below code, 

MainWindow.xaml: 

    <chart:SfChart.PrimaryAxis> 

                <chart:CategoryAxis LabelFormat="dd MMM yyyy" EnableScrollBar="True"/> 

       </chart:SfChart.PrimaryAxis> 

 

Please find the output screenshot, 

 

You can refer our UG Documentation link to know more about scroll bar in SfChart, 

 

Link: https://help.syncfusion.com/wpf/sfchart/interactive-features#resizable-scrollbar 

 

 

Please let us know if you have any concerns on the above . 

 

Regards,  

Durgadevi S 

 

[John Smith]

Thank for your answer.

Query1: Ok - FastCandleBitmap looks very good - virtualized and enough speed.

Query2: Fixed bar width - I think it is not true. Fixed width is for example width 10 pixels. That is true with 1000 bars and ZoomFactor 0.1. When I use 10000 bars, this is result and it is not fixed width (and is not good): 

Width of  bar (for example 10 pixels) should be 10 pixels if bars count is 1000 and 10000 too.

Query3: Thanks - i know about  EnableScrollBar property, but I think functionality, how to ensure visible non empty part of chart, but after move primary axis, how to automaticaly slide secondary axis and ensure visible chart bars, not empty area of chart:

1: see data:

2. Move primary axis - and chart do not show bars, they are at another position of secondary axis:

I update your sample project, add real (two) data in (json files).

I added slider for change ZoomFactor for primary and secondary axis. 

If I bind ZoomFactor for primary axis, bind for secondary axis not work. 

But the core is, that bar width should be fixed width if there are 1000 bars or 10000 bars, and chart should show data, not empty space if chart position is changed.

Than you very much.

Attachment: CandleChart_Sample_b646b64f.7z

[Durgadevi Selvaraj]

Hi John, 

 

Thanks for the update. 

 

Query 1:  that bar width should be fixed width if there are 1000 bars or 10000 bars 

 

We have analyzed your query and we are unable to display fixed width for candlestick if the data count is 1000 and 10000. Since candlestick width must be vary based on available size and zooming range data count. This default behavior of chart zooming.  

For example, if chart area having 500 pixel width and we can’t place same size(10 px width) of 1000 and 10000 number of bars in that area without empty spacing.   

We have tried to display 20 candlestick out of 100 candlestick with same bar width and we can’t avoid the spacing at the end. 

 

Please find the output screenshots, 

 

1.Displaying 100 candle stick in a chart area. 

 

2.Displaying 20 candle stick(e.g. zoomed range data count) out of 100 with same width in a chart area. 

 

 

So that, we have increased bar size to occupy full size in zooming.  

Query 2: chart should show data, not empty space if chart position is changed. 

We have analyzed the query and we are unable to avoid the empty space while scrolling/zooming the empty area in chart. Because, we have displayed the zoomed area in chart based on zoom factor and position value.  

 

Please let us know if you have any concerns. 

 

Regards,  

Durgadevi S 

[John Smith]

Thank you for reply.

I worked with some application which show candlestick chart and none of them show chart something like this:

Meaning of candlestick chart is not just show data by any way, but show data with sense. Showing chart as can see above doesn't have sense.

Candlesticks in chart have to have meaningful width and height - independently of bars count. Chart control should calculate ZoomFactor automatically.

In your answer is not mention about bug - ZoomFactor for secondary axis not work, if change ZoomFactor for primary axis.

Do I understand your answer correctly - your Candlestick chart is unable to show real data by meaningful way?

In my previous answer I sent you application with real data, not random data. Please try change yout Candlestick chart control for real usage.

Thank you very much.

[Durgadevi Selvaraj]

Hi John, 

 

Query 1: Meaning of candlestick chart is not just show data by any way, but show data with sense. Showing chart as can see above doesn't have sense. your Candlestick chart is unable to show real data by meaningful way? 

 

Sorry for the inconvenience. 

 

We have provided a sample with random data just for your reference to explain your requirement( performance of FastCandleBitmap) .  

 

Query 2: Candlesticks in chart have to have meaningful width and height - independently of bars count.  

 

We don’t have support to set fixed height and width for FastCanleBitmapSeries in zooming scenario. Since candle size will be differed based on axis  visible range and data count within the range.  

 

Please find the below reference screenshots , 

1.Candlestick width for 100 data in a chart area: 

 

 

Here secondary axis ‘s visible range from 11660 to 11848.  

 

2.Candlestick width for 1000 data in a chart area. 

 

 

 

Here secondary axis’s range from 11700 to 12350.  

 

Query 3:  ZoomFactor for secondary axis not work, if change ZoomFactor for primary axis. 

 

We would like to inform you that,  ZoomFactor for chart axis has separated in every axis. If you set zoom factor for primary axis, then primary axis visible range alone will be changed based on that factor value. It will not affect the secondary axis range. So we couldn’t  change secondary axis zoom factor with respect to primary axis zoom factor. 

 

Regards, 

Durgadevi S 

[Ayush Tripathi]

Hi Team, I want to do the same using flutter. I want to build a candle stick chart that show full chart but in screen only show 30 points and havee scrolling feature. 
Thanks
Ayush

[Preethi Rajakandham]

Hi Ayush,

Please follow up in the below forum for the query stated above: https://www.syncfusion.com/forums/181045/candle-stick-chart-with-scrolling-data.

We are closing this thread. Please let us know if you have any further queries on this. As always, we are happy to help.

Regards,

Preethi R

[Ayush Tripathi]

That thread is also create by me only. Please help me solve it. 
Thanks