Dont understand some chart details

[Jim Lyons]

We have several questions regarding the use of your SfChart.

1.    When we set the Primary Axis to DateTimeCategoryAxis the CandleSticks renders correctly but the PrimaryAxis does not.  There is only a single value in the lower left corner. (See Picture 1).  When we set the Primary Axis to DateTimeAxis the CandleSticks do not render correctly but the PrimaryAxis does.  None of the CandleSticks have bodies and many seem to be missing. (See Picture 2).  The only change between the two was the XAML value for the Primary Axis.  Do you have any ideas about this?

2.    With the Primary Axis set to DateTimeCategoryAxis so that the CandleSticks renders correctly we have trouble understanding the colors of the candle.  We are not using the candle in the standard way as we do not care about the bull or bear colors.  In Picture 3 we have set both bull and bear colors to white and Stroke and Border are not changed.  We would like to be able to change the border color around the body of the candlestick to match its interior. It seems that the BorderBrush does nothing and that the Stroke controls both the upper and lower candle wicks as well as the body border color.  Do you have any ideas about this?

Attachment: Syncfusion_48a1120e.rar

[Manivannan Elangovan]

Hi Jim,

 

1: By default, in DateTimeCategoryAxis IntervalType consider as Day, so that range with in a day axis label displayed in one label. In order to displayed label based on hours, we need to use IntervalType as Hours and Interval as 1 as shown in the below code snippet.

 

Code snippet [XAML]:

 

<chart:SfChart.PrimaryAxis>

<chart:DateTimeCategoryAxis Interval="1" IntervalType="Hours" Header="Primary"

EnableScrollBar="True"  LabelFormat="hh:mm:ss" />

</chart:SfChart.PrimaryAxis>

 

2: In DateTimeAxis, Candle segment render based on range of values, if we use wide range for primary axis then candle segment will be place on that range position. So that segment displayed in small width. If we zoom the chart the series will be shown correctly.

 

3: When we set stroke for Candle Series it will be apply candle, upper and lower wicks. We have consider this as feature enhancement in our chart. However we have achieved your requirement in a workaround. We have prepared the sample based on your requirement and please download the sample under the location.

Thanks,

Manivannan.E

Attachment: CandleSeries_da2f46ec.zip

[Jim Lyons]

Thank you for your fast response (and workaround). 

We have two follow up questions.

1.     What controls the size and color of the horizontal and vertical lines that board the actual plot area?  (See red arrows in Picture 1).

2.    Also in Picture 1 you can that we have set the axis increment to 0.25 using Interval="0.25".  This works fine until we zoom in and then it changes to values that are not on the required 0.25 step (See Picture 2).  How can we force the grid interval to ALWAYS be 0.25?

Thanks in advance for your help.

Jim

Attachment: Question_2_4e5431b7.rar

[Jim Lyons]

An additional question

We have tried everything we can think of to get the chart to update when we change the value of a data point that is already in the ObservableCollection and on the chart.  We will be plotting 11 line series at one time and at any point will need to go back in time and update the values of any one of them within the last 1 to 50 points that are plotted.  In our application once we have hit approximately 100 data points we could easily need to update the last 1 to 50 data points hundreds of times before adding a new data point to the ObservableCollection, which does update the chart.

What is the easiest way to force the chart to reread its old data and update the chart accordingly?

Thanks again for your help!

[Magesh Kumar Krishnan]

Hi Jim,

Please find the responses for your queries.

Query 1: What controls the size and color of the horizontal and vertical lines that board the actual plot area?

We would like to let you know that we have a property called AxisLineStyle  that controls the size and color of axis lines.We have to define the AxisLineStyle property as shown in the below code snippet.

Code Snippet [XAML]:

<chart:CategoryAxis. AxisLineStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="Red"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>
</chart:CategoryAxis.AxisLineStyle>

Query 2: we have set the axis increment to 0.25 using Interval="0.25".  This works fine until we zoom in and then it changes to values that are not on the required 0.25 step (See Picture 2).  How can we force the grid interval to AWAYS be 0.25?

We are having an property called EnableAutoIntervalOnZooming, which will be suitable for your requirement. This property will maintain specified axis interval even after we zoom the Chart. We have to define the EnableAutoIntervalOnZooming property as shown in the below code snippet.

Code snippet:

<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis Name="numeric" EnableAutoIntervalOnZooming="False" Interval="0.25" />
</chart:SfChart.SecondaryAxis>


Query 3: What is the easiest way to force the chart to reread its old data and update the chart accordingly?

We suspect that that your requirement is to show the old data while updating the chart data point dynamically .We have prepared sample based on this . please find the sample in location given below.

Sample :  http://www.syncfusion.com/downloads/support/directtrac/132370/Sample1361762382.zip
 
If this is not your requirement means could you please give brief explanation about your requirement that would be helpful for us to serve you better .

Thanks,
Magesh Kumar K  

[Jim Lyons]

From: Jim Lyons [mailto:[e-mail]]
Sent: Monday, December 08, 2014 9:41 AM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 117736, Dont understand some chart details, has been updated.

 

Thanks for your fast response.

 

Question 1:  We tried that.  We have implemented your solution and set the StrokeThickness to 5 to help it show up better.  This is what we got.

 

 

See the 2 red lines by each thumb bar.

 

What we are trying to control are the 4 lines outlining the actual plot area (See red arrows). 

So far we have not found any property that controls these 4 lines.  Any further ideas???

 

Question 2: Your input worked like a charm. Thank You.

 

Question 3: We will not be able to test your chart update solution until tomorrow or the day after.  We will keep you informed.

 

Thanks again for your help.

Jim

[Magesh Kumar Krishnan]

Hi Jim,

Thanks for the update.

We would let you know that SfChart has a property called AreaBorderThickness and AreaBorderBrush which suits your requirement. The property AreaBorderThickness controls the thickness (Size) of chart area border and AreaBorderBrush controls the color of chart area border color. We have to define the AreaBorderThickness and AreaBorderBrush properties as shown in the below code snippet.
 
Code Snippet [C#]:

<chart:SfChart  x:Name = "SfChart"   AreaBorderThickness = "3"   AreaBorderBrush = "Blue"  >

Please let us know if you require further assistance on this.

Thanks,
Magesh Kumar K

[Jim Lyons]

Thanks for the info on the Boarder properties, they worked great.  We still have not been able to test the chart updating.  We integrated the test chart into our app and spent the entire day trying to get our data to bind to it. No joy.  We have a very minimal test application that I have included with this update. I’m not sure what condition the binding were left in as we have tested literally dozens of configurations.  We are using the MVVMLight toolkit and our other views are working fine.  We hope you can look at the project and tell us where we have wrong.  You have an awesome chart component and it will be much better once we can get data to bind with it.

Thanks again for your help.

Attachment: ChartTest_4e5d5aec.rar

[Magesh Kumar Krishnan]

HI Jim,

Thanks for the update.

We have prepared sample based on your requirement using MVVM light toolkit. Please find sample in location given below

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/MvvmLightSample2046051134.zip

Please let us know if you have any queries.

Thanks,
Magesh Kumar K

[Jim Lyons]

Thanks, that will get us going again.  Is there any way to get the chart to display the data during design time? 

[Magesh Kumar Krishnan]

Hi Jim,

Thanks for the update.

We would like to let you know that binding data context in XAML will display the data in chart during design time .We have prepared sample based on your requirement. Please find sample in location given below

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/MvvmLightSample-1246767004.zip

Please let us know if you have any queries.

Thanks,
Magesh Kumar K

[Revathi K]

From: Jim Lyons [mailto:[e-mail]]
Sent: Saturday, December 13, 2014 8:54 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 117736, Dont understand some chart details, has been updated.

 

Thank you for all of your help.

 

We have a couple of additional questions and we have included the XAML file so you will see how we have configured the chart for our needs.

 

 

1. What property can be used to adjust the gap between the chart and the thumb bar? (See image above with red arrow) 

We have tried everything we can think of, but with the FlowDirection set to RightToLeft the Border and Margin properties do not seem to work as expected.

 

2. Is there a complete list of annotation types?  More specifically is there a DotAnnotation? 

What we need is to be able to place several markers on the chart.

We need to be able to control their location with a single X and single Y value.  So we can place it exactly centered where we want to draw attention. 

It turns out that if the FlowDirection is set to RightToLeft our data works perfectly for the X value because the data value is already referenced from the last bar on the chart.

We need to be able to control its color and size via data bindings and have its size remain fixed and proportional as the chart is zoomed.

 

A dot seems ideal for this.  We were trying to use annotations but have not been successful.

 

Is this the right way to approach this?  Is there a better way?

 

We have included the MainView.xaml file so you can see how we have the chart configured.

 

 

 

 

Also we think we may have found a problem in your chart component.  Please see the following two images.

 

Everything is exactly the same between the two except for the line series type.

The first is set to LineSeries which correctly renders the data the second is set to FastLineSeries and has errors.

 

In the end we set it to FastLineBitmapSeries which renders the data correctly and everything seem so be working.

 

 

 

Attachment: MainView_8f8247ea.zip

[Revathi K]

From: Jim Lyons [mailto:[e-mail]]
Sent: Sunday, December 14, 2014 10:44 PM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 117736, Dont understand some chart details, has been updated.

 

An additional question.

 

We know that we can set the color of a plotted line by using the lines “Interior” property.

 

What property do we query if we want to get the default color of the plotted line??

We have tried binding to every property that has a type of Brush and nothing seems to work.

 

Thanks again for your help.

 

Jim

[Magesh Kumar Krishnan]

Hi Jim,

Please find the response for queries.

Query 1: What property can be used to adjust the gap between the chart and the thumb bar?
You can adjust the gap between chart and scroll bar by setting the Margin for Chart Axis as shown in the below code snippet.
 
Code snippet:

<chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis  Margin="15" x:Name="YAxis"  EnableScrollBar="True" OpposedPosition="True" Interval="10" FontSize="12"  EnableAutoIntervalOnZooming="False" />
</chart:SfChart.SecondaryAxis>

Query 2: Is there a complete list of annotation types?  More specifically is there a DotAnnotation?

In SfChart we have 7 types of Annotations (Text, Image, Line, Rectangle, Ellipse, HorizontalLine, VerticalLine). Please find the more information about the annotation in the below documents.

Link : http://help.syncfusion.com/ug/wpf/default.htm#!documents/annotations.htm

Query 3: We were trying to use annotations but have not been successful. Is this the right way to approach this?  Is there a better way?

In order to place the shapes annotation ( like dot annotation ), we need four values (X1,X2,Y1,Y2).So we are unable to place the shape annotation(ellipse annotion) with single X and Y values.  You can achieve your requirement by using scatter series. Also you can control the color and size for scatter by ScatterHeight, ScatterWidth and Interior property  as shown in the below code snippet.

Code snippet:

<chart:ScatterSeries Interior="{Binding ElementName=colorPicker, Path=Color , Converter={StaticResource colorConv}}" ScatterHeight="{Binding ElementName=SliderX, Path=Value,Mode = TwoWay }" ScatterWidth="{Binding ElementName=SliderY, Path=Value ,Mode = TwoWay}" ItemsSource="{Binding chartData1}" XBindingPath="Date1" YBindingPath="Amount1"></chart:ScatterSeries>

Query 4: Everything is exactly the same between the two except for the line series type.The first is set to LineSeries which correctly renders the data the second is set to FastLineSeries and has errors?
We are unable to get to your exact reported issue. In reported both images are seems to be same. So please provide us more information about the issue.

Query 5: What property do we query if we want to get the default color of the plotted line?

The interior property is used to explicitly define the color for Chart Series. If we define the color for interior we are able to get the series color though Interior property. Also by default the chart series color will be apply based on Color model. So you can get the default series color from the chart area color model as shown in the below code snippet.

Code snippet:

ellipse.Fill = this.EminiChart.ColorModel.GetBrush(0);

Note: ‘0’ represent the index of series collection.


We have prepared sample based on your requirement . please find the sample in location given below.

Sample :  http://www.syncfusion.com/downloads/support/directtrac/129944/Annotation-1915277144.zip

Please let us know if you have any queries.

Thanks,
Magesh Kumar K