This is a migrated thread and some comments may be shown as answers.

Custom String Range on Y Axis

9 Answers 188 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Nemanja
Top achievements
Rank 1
Nemanja asked on 10 Oct 2011, 10:37 AM
hello,

i am trying to set up a custom range on my y axis as our 'date' values are custom generated and do not work in the same way as normal dates or numeric values.

we have a situation where the chart would run along variable time levels, ie sometimes weeks, sometimes months, quarters, etc. the chart needs to plot these time members across the Y axis of a horizontal 2D Bar chart and display the values as such:

M201010       M201011       M201012     M201101 etc..

what we did to overcome the fact that we need a numeric value for the axis was to use only the numeric section of the chart and then set a min and max value (since we know the start and end date for the chart) but this works only as long as the values are for the same year, in this example 2010.

if the periods span over 2 years, ie from 2010 to 2011, the series stretches from M201012 all the way to M201099 before getting on to 2011, because it increments by one of course.

the chart is set up in the xaml as follows:

<telerik:RadChart Grid.Row="0" Grid.Column="0" x:Name="TimeRangeChart" ItemsSource="{Binding PhasingOptionList}" UseDefaultLayout="False" DataBound="TimeRangeChart_Loaded">
            <telerik:RadChart.Resources>
                <Style x:Key="CustomAxisTitleStyle" TargetType="telerik:AxisTitle">
                    <Setter Property="FontWeight" Value="Normal" />
                    <Setter Property="Margin" Value="0,0,10,0" />
                </Style>
                <Style x:Key="SeriesItemLabelStyle" TargetType="telerik:SeriesItemLabel">
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style>
                <Style x:Key="ItemLabelStyle" TargetType="TextBlock">
                    <Setter Property="HorizontalAlignment" Value="Left"/>
                    <Setter Property="Visibility" Value="Collapsed"/>                   
                </Style>
            </telerik:RadChart.Resources>
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping ChartAreaName="ChartArea" >
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:HorizontalRangeBarSeriesDefinition ShowItemLabels="True" ItemLabelFormat="#OptionName - #ColourDescr"
                                                                    ShowItemToolTips="True" SeriesItemLabelStyle="{StaticResource SeriesItemLabelStyle}">                          
                            <telerik:HorizontalRangeBarSeriesDefinition.InteractivitySettings>
                                <telerik:InteractivitySettings SelectionMode="Single" SelectionScope="Item" HoverScope="Item"  />
                            </telerik:HorizontalRangeBarSeriesDefinition.InteractivitySettings>
                        </telerik:HorizontalRangeBarSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="ProposedSellTimeFromCodeNumeric" DataPointMember="Low" />
                    <telerik:ItemMapping FieldName="ProposedSellTimeToCodeNumeric" DataPointMember="High" />
                    <telerik:ItemMapping FieldName="OptionNo" DataPointMember="XCategory" />
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <telerik:ChartArea Grid.Row="0" x:Name="ChartArea" NoDataString="" LabelFormatBehavior="None"
                                   ItemClick="ChartArea_ItemClick" ItemToolTipOpening="ChartArea_ItemToolTipOpening"
                                    PaletteBrushesRepeat="False" EnableAnimations="False" >
                    <telerik:ChartArea.ZoomScrollSettingsX>
                        <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom" MinZoomRange="0.005"/>
                    </telerik:ChartArea.ZoomScrollSettingsX>
                    <telerik:ChartArea.PaletteBrushes>
                        <SolidColorBrush Color="#FF74A6E2"/>
                    </telerik:ChartArea.PaletteBrushes>
                    <telerik:ChartArea.AxisY>
                        <telerik:AxisY Title="{Binding BottomTimePeriodDescription}" ExtendDirection="Up" DefaultLabelFormat="{Binding TimeValueLabelFormat}"
                                        MinValue="{Binding FromWeekNumeric}" MaxValue="{Binding ToWeekNumeric}" AutoRange="False"
                                        LabelRotationAngle="-45" MinorTicksVisibility="Hidden">
                            <telerik:AxisY.AxisStyles>
                                <telerik:AxisStyles TitleStyle="{StaticResource CustomAxisTitleStyle}" ItemLabelStyle="{StaticResource ChartAxisTextStyle}" />
                            </telerik:AxisY.AxisStyles>
                        </telerik:AxisY>
                    </telerik:ChartArea.AxisY>
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX LayoutMode="Inside" MinorTicksVisibility="Collapsed" MajorTicksVisibility="Collapsed"  >
                            <telerik:AxisX.AxisStyles>
                                <telerik:AxisStyles ItemLabelStyle="{StaticResource ItemLabelStyle}" />
                            </telerik:AxisX.AxisStyles>
                        </telerik:AxisX>
                    </telerik:ChartArea.AxisX>
                </telerik:ChartArea>               
            </Grid>
        </telerik:RadChart>


is there a way to get around this?

thanks,
Nemanja

9 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 13 Oct 2011, 09:14 AM
Hello Nemanja,

Basically, the chart uses the same interval along the x axis, for all the points. Thus, if you have data like the one you mentioned, an ordinary may not be sufficient - you can assign X values for the items from 1 to n, where n is the last item to show, and use these numbers for the axis. Other than this, the axis cannot be customized to equally space the heterogeneous data.
I hope that this is a feasible solution for you.

Best wishes,
Yavor
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Nemanja
Top achievements
Rank 1
answered on 18 Oct 2011, 03:05 PM
so your suggestion is to assign a number from 1 to n to each of the items along the x axis and plot using that value, and then change the label so that it displays the string instead?

so we'd have:

M201010       M201011       M201012     M201101
1                      2                      3                 4                              etc?

this could work for us, it would just need a minor stored proc change to provide this data, but how would the defaultitemlabel be specified? this is what we currrently have, and it just formats the #VAL attribute, but now we'd need to point to the string itself, call it "TimeLabel" perhaps. would it just be a case of setting the value to #TimeLabel? that doesn't seem to work.

this is what we have at the moment:
<telerik:ChartArea.AxisY>
<telerik:AxisY Title="{Binding BottomTimePeriodDescription}" ExtendDirection="Up" DefaultLabelFormat="{Binding TimeValueLabelFormat}"
                                        MinValue="{Binding FromWeekNumeric}" MaxValue="{Binding ToWeekNumeric}" AutoRange="False"
                                        LabelRotationAngle="-45" MinorTicksVisibility="Hidden">
<telerik:AxisY.AxisStyles>
<telerik:AxisStyles TitleStyle="{StaticResource CustomAxisTitleStyle}" ItemLabelStyle="{StaticResource ChartAxisTextStyle}" />
            </telerik:AxisY.AxisStyles>
  </telerik:AxisY>
</
telerik:ChartArea.AxisY>


The 'TimeValueLabelFormat' property just takes the #VAL property that contains the numeric value that we currently plot and adds string values to make it look the way it needs to. in the item mappings section we do the following:

<telerik:ItemMapping FieldName="ProposedSellTimeFromCodeNumeric" DataPointMember="Low" />
<telerik:ItemMapping FieldName="ProposedSellTimeToCodeNumeric" DataPointMember="High" />
<telerik:ItemMapping FieldName="OptionNo" DataPointMember="XCategory" />


Am I doing somethign wrong?
0
Yavor
Telerik team
answered on 20 Oct 2011, 09:28 AM
Hello Nemanja,

There are two possible options to handle this.
The first would be to retemplate the x axis, and bind the label text to a field in the data context.
Another option is to set the text directly:

void RadChart1_DataBound(object sender, ChartDataBoundEventArgs e)
      {
          if (shouldApplySettings)
          {
              shouldApplySettings = false;
              RadChart1.DefaultView.ChartArea.AxisX.TickPoints[0].Label = "custom string";
          }
      }

Let me know how these meet your requirements.

All the best,
Yavor
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Mayra
Top achievements
Rank 1
answered on 15 Nov 2011, 09:15 PM
Would you please tell me if the ExtendDirection property works when the autoRange property is set to false and I am calculating the max and minimum?

Thanks you in advance for the help and I look forward to hear from you

Regards
0
Peshito
Telerik team
answered on 18 Nov 2011, 10:31 AM
Hello Mayra,

Thank you for writing back.

The AxisY ExtendDirection property does not work when the AxisY AutoRange is set to false and the Min and Max values are manually set. You can use only one of both features in order to control the AxisY range.

Please, do let me know if you have any more questions.

Best wishes,
Peshito
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Nemanja
Top achievements
Rank 1
answered on 26 Nov 2012, 09:25 AM
Hi,

We resolved this issue with the custom strings on the label charts but we're finding that every time a label is changed on the chart - it seems to re-draw the chart for each label change.

We have a situation where there are usually about 40 points on the axis, so looping through and changing each one causes the chart to be re-drawn around 40 times which is very slow given what we're doing.

is there a way to tell the chart not to re-fire until all the labels have been changed?

thanks,
Nemanja
0
Yavor
Telerik team
answered on 28 Nov 2012, 07:53 AM
Hello,

 Altering the labels on the axis should not redraw the control, only the labels. Attached to this message, is a small application, which handles a similar funtionality.
Take a look at it and let me know whether this is the expected functionality or perhaps I am leaving something out.

Kind regards, Yavor
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Nemanja
Top achievements
Rank 1
answered on 28 Nov 2012, 08:03 AM
Hi Yavor,

Thanks for the application. We're currently doing something very similar to that, but the response seemed to be very slugging. Maybe even re-drawing the axis labels only may have caused the performance hit, I'm not sure.

We did manage to get around it though, by copying all the tickpoints into a list, removing the entire range from the axis, editing the tickpoints and then adding them at the end again. This way it only gets fired once all the labels have been updated and the performance is much, much better.

Hopefully that'll help anyone else running into the same scenario.

Nemanja
0
Nemanja
Top achievements
Rank 1
answered on 28 Nov 2012, 08:05 AM
Hi Yavor,

Thanks for the application. We're currently doing something very similar to that, but the response seemed to be very sluggish. Maybe even re-drawing the axis labels only may have caused the performance hit, I'm not sure.

We did manage to get around it though, by copying all the tickpoints into a list, removing the entire range from the axis, editing the tickpoints and then adding them at the end again. This way it only gets fired once all the labels have been updated and the performance is much, much better.

Hopefully that'll help anyone else running into the same scenario.

Nemanja
Tags
Chart
Asked by
Nemanja
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Nemanja
Top achievements
Rank 1
Mayra
Top achievements
Rank 1
Peshito
Telerik team
Share this question
or