[Solved] Custom Styling of Charts - Am I Missing Something?

[Roy]

Not sure if it's just me, but I am finding the formatting of charts extremely difficult where it should be straightforward.

I have studies the sample apps and the demo, but with completely undocumented and irrelevant samples I'm at a loss.

I am simply looking for some easy to follow tutorial/walkthroughs of how to do some really basic standard stuff.

If someone can point me in the right direction. Not to code, but to decent blogs, articles, documentation that explain things properly it would be greatly appreciated.

Here's what I am looking to do:



* Rotate the X-Axis labels on a bar chart either by 90 or 45 degrees

* Add labels to the X and Y Axis

* Apply my own colours to bars in a chart

* Apply my own colour and line styles (eg dashes) to the lines on a clustered line chart

* Add category names to a clustered bar chart

* Add category names to a pie chart segment

* Use values and not percentages on a pie chart

* What the hell is a strategy?



This stuff should be really easy to find with really easy to understand examples.

There is an assumption all the way through the documentation that we, the developers, understand your terminology.

Each method and attribute should have a code and XAML sample so that we can at least visualise what you attempt to discuss in the documentation.



It's worth noting I have written documentation in the past for programming languages and 3rd party libraries so this is not just some random spouting from a novice developer.

We have spend several thousand pounds on licencing your products and I've wasted a couple more in my time trying to understand how to configure them!

Yes, they are easy to fire up and get working, but I cannot rely on that alone!

Cheers,

Roy

[Ivaylo Gergov]

Hello Roy,

Straight to your questions:

1. You can change the appearance of the axis' labels through the LabelTemplate property that each axis exposes. Also, it is possible that after the modifications, the labels to position out of the chart's bounds. To avoid this, you can set the RadChart.ClipToBounds property to false. Here's an example:
   

   <telerikChart:CategoricalAxis.LabelTemplate>
       <DataTemplate>
           <TextBlock Text="{Binding}">
               <TextBlock.RenderTransform>
                   <RotateTransform Angle="90"/>
               </TextBlock.RenderTransform>
           </TextBlock>
       </DataTemplate>
   </telerikChart:CategoricalAxis.LabelTemplate>

2. If I understand you correctly, you need to apply a title to the axes. This can be achieved through the Title property exposed by each axis.
   More information about the axes(including some code snippets) can be found in our online documentation - http://www.telerik.com/help/windows-8-xaml/radchart-axes-axis.html.
   
   
3. To change the colors of a BarSeries, you can use the BarSeries.DefaultVisualStyle property and apply a style that targets a Border. If you wish to apply different style to each point, you can use the BarSeries.PointTemplates property to define a collection of DataTemplate objects that will be iterated by the DataPoint collection. If the scenario requires different DataTemplate depending on a custom logic, you can use the BarSeries.PointTemplateSelector property. More information can be found in our online documenation - http://www.telerik.com/help/windows-8-xaml/radchart-cartesianchart-series-categorical-barseries.html. As you will see, you can track the inherited properties from the derived classes.
4. You can change the appearance of the LineSeries through the properties that the LineSeries exposes(for example Stroke, StrokeDashArray) or you can apply a style through the LineSeries.Style property. The Style should target a LineSeries. For example:
   

   <telerikChart:LineSeries.Style>
       <Style TargetType="telerikChart:LineSeries">
           <Setter Property="Stroke" Value="Red"/>
           <Setter Property="StrokeDashArray" Value="2,1"/>
       </Style>
   </telerikChart:LineSeries.Style>

5. Here you can find how to configure a BarSeries. Basically, the BarSeries.CategoryBinding property maps the category of each point to the corresponding value from the data object.
6. The PieDataPoint does not support a Category. To express the meaning of each point, you can use the RadLegendControl to show a legend - http://www.telerik.com/help/windows-8-xaml/radchart-legendcontrol-legendcontrolforpiechart.html.
7. To modify the labels of the PieSeries, you can use the LabelDefinitions property. In this case, to show the actual values, you can define it like this:
   

   <telerikChart:PieSeries.LabelDefinitions>
       <telerikChart:ChartSeriesLabelDefinition>
           <telerikChart:ChartSeriesLabelDefinition.Template>
               <DataTemplate>
                   <TextBlock Text="{Binding Value}"/>
               </DataTemplate>
           </telerikChart:ChartSeriesLabelDefinition.Template>
       </telerikChart:ChartSeriesLabelDefinition>

8. The Label Strategy is a design pattern that the RadChart uses to define the labels for each series. Basically, most of the scenarios could be achieved using the LabelDefinitions. However, the Label Strategy offers an internal context, that could be used for more advanced scenarios. Please, elaborate on your scenario to see what is the best option.

For more information, you can also check our SDK Examples in GitHub that cover the most common scenarios - https://github.com/telerik/win8-xaml-sdk.

Please, feel free to contact us should you have any other questions. Also, since we regularly update our online resources, any suggestions would be appreciated and will be taken into account. 

Regards,
Ivaylo Gergov
Telerik

[Roy]

Before I get in to the detail, what is with all the <telerikChart: prefixing? I'm using VS2013 and Windows 8.1. With a fresh install your product gives me the <Chart: prefix. Either update the documentation on the site, or do not make changes to the product!

Anyway:

1. Where does <Chart:CategoricalAxis.LabelTemplate> block sit in the chart definition? I have tried several places but it's not recognised. Complete examples please... Not snippets!

2. I refer to my previous statement of "poor documentation" and "uncommented samples"

3. Please explain to me where on this page is there a real example of setting a custom bar colour?

4. Got this working - kind of. I had all lines the same colour. How can you style each line? Adding more than 1 style block gave me an error.

5. See my answer to 2!

6. Sorry, but your Demo App on Windows 8 clearly shows a pie chart with textual labels. But the method of creating them using a ResourceDictionary is completely undocumented!

7. The only one I managed to get working. Thank You!

8. I have line charts with 4 data sets, clustered bar charts with 2 or more data sets. These need to be in different colours and with legends to explain what each coloured bar/line represents.



Cheers,



Roy

[Ivaylo Gergov]

Hello Roy,

We have attached a runnable sample application for your convenience.

Onto your questions:

1. In the attached application you can see the CategoricalAxis.LabelTemplate block within the CategoricalAxis definition.
2. The sample application demonstrates the desired effect.
3. The sample application demonstrates the desired appearance customization. As for the documentation -- from BarSeries you can navigate through the inherited properties of CategoricalSeries -> CartesianSeries to PointTemplateSeries where the styling customizations are explained in detail.
4. The sample application demonstrates customization of two LineSeries each with a different color. If you are trying to colorize each segment within the same LineSeries, this is not supported by the control.
5. The sample application demonstrates the desired behavior.
6. The sample application demonstrates how you can visualize textual pie slice labels, or numeric pie slice labels with custom format.
7. The sample application demonstrates the desired behavior.
8. The sample application demonstrates similar scenario to get you started. Note, however, that there are two scenarios with the usage of RadLegendControl. In the first scenario, I have created legend items for each series, while in the second scenario the RadLegendControl is bound to the RadChart and generates its LegendItems automatically (the LegendControl extracts the Titles for its LegendItems from the LineSeries/BarSeries.LegendTitle property). The second scenario works only if the RadChart has a Palette applied. If you wish to create a Palette with custom colors, you can check the following how-to article - http://www.telerik.com/help/windows-8-xaml/radchart-custompalette.html.

Please, feel free to contact us if you experience any further difficulties.

Regards,
Ivaylo Gergov
Telerik

[Roy]

Thanks for the project. It contains a reference to RadControls for Windows 8.1

I only appear to have RadControls for Windows 8 version 2013.3.1105

I've checked in the Control Panel and there are no pending product updates.

Am I missing an update or is my install corrupted?

Cheers,

Roy

[Ivaylo Gergov]

Hi Roy,

You can find the RadControls for Windows 8.1 in your account -> Products and Subscriptions -> RadControls for XAML and HTML -> Download Installer and other resources -> find RadControls for Windows 8 XAML and click Browse all product files -> choose the option that suits you best(for 8.1).

Let me know if you need further assistance.

Regards,
Ivaylo Gergov
Telerik

[Roy]

So, as quoted in my last post, I have version 2013.3.1105. Funnily enough that is the latest version! A question which I also asked in my last post.

I will however download again to see if it fixes this issue.

Cheers,

Roy

[Roy]

Nope... Still no sign of an 8.1 library after a re-install.

I will raise a support ticket.

Cheers,

Roy

[Roy]

FYI...

I created a new project using Add New Project->Telerik->Windows Store->C# RadControls Windows 8 XAML Application

I chose to add the binaries and selected the components I needed from the Telerik options dialog.

After the creation process finished the following references were added by default:

* .NET for Windows Store apps

* Telerik.Core

* Telerik.UI.Xaml.Chart

* Telerik.UI.Xaml.Primatives

* Windows

No sign of a RadControls for Windows 8.1 reference.

I have raised a support ticket so hopefully we'll get this sorted.

Cheers,

Roy

[Ivaylo Gergov]

Hello Roy,

From your download history, I can see that you have installed the Service Pack through the Telerik Control Panel. As this version is distributed for both Windows 8.0 and Windows 8.1, the default version that the Telerik Control Panel installs is for Windows 8.0. Telerik Visual Studio Extensions also target the version for Windows 8.0, so I recommend you to create a project using the default Visual Studio options and add a reference to the RadControls for Windows 8.1 extension manually.
I suggest that you follow the steps that I have described in my previous post and download the Windows 8.1 Automatic Installation .msi file. I have also attached a screenshot to avoid misunderstanding.

Regards,
Ivaylo Gergov
Telerik

[Roy]

I downloaded the 8,1 MSI. When I ran it I received the message it was already installed.

So I created a blank C# Store App targeted for 8.1

I went to add a reference and the attached image shows the options I have available and their version number.

No option to for your Xaml 8.1 library.

Cheers,

Roy

[Ivaylo Gergov]

Hi Roy,

Sorry for not clarifying this - it is not possible to install both Windows 8.0 and Windows 8.1 versions of Telerik Controls at the same time. Please uninstall the Windows 8.0 version before you install the Windows 8.1 msi.

However, if you wish to use both versions, I can suggest that you check the following how-to article - http://www.telerik.com/help/windows-8-xaml/howtouseradcontrolsforwindows8and8.1together.html.

Let me know how it goes.

Regards,
Ivaylo Gergov
Telerik

[Jodie]

Hi Roy,

I spent all day beating my head against a wall yesterday over this very issue. I have found Telerik documentation to be sub-par and out-dated. I spent hours pouring over http://www.telerik.com/help/windows-8-xaml/radchart-styling-teleriknamedbrushes.html, http://www.telerik.com/help/windows-8-xaml/common-teleriknamedbrushes.html and http://www.telerik.com/help/windows-8-xaml/common-resolvingteleriknamedresources.html trying to make it all work. I could not. I also downloaded as many samples as I could get my hands on to see how they implemented styling, but of course, none of the samples show this. I also downloaded and installed the latest package, only to be told I had already installed it.

I kept running into issues with "RadControls for Windows 8.1". But lo-and-behold, they changed the reference name! It's now "Telerik UI for Windows 8.1"! So by removing all the old instances of RadControls and replacing them with the new reference, I was able to get Ivaylo's demo working. However, it still does not show how to implement styling in the style resources, which I think was your original question. If you found any information (as I've Googled this nine-ways-to-Sunday and can't find anything), please share. I'll be following this post to see if you resolved anything.

Cheers, Jodie.

[Ivaylo Gergov]

Hi Jodie,

Following the instructions from the mentioned help articles(Resolving Telerik Named resources, Telerik Named Brushes and Named Brushes for RadChart) I was able to style the RadChart. For your convenience I have prepared a project which shows how to use the Telerik Named Brushes(I have changed the color of the grid lines and the labels of the axes). Please find the attached file and check if this is what you want to achieve. Also, could you please clarify what exactly do you think is out-dated in the articles above?

I hope this is useful.

Regards,
Ivaylo Gergov
Telerik

[Jodie]

@Avaylo - any and all references to RadControls for Windows 8.1 should be updated to Telerik UI for Windows 8.1. This is the very problem the OP is complaining about. Unless DevCraft Ultimate license doesn't give me access to RadControls for Windows 8.1 (as shown in the installation steps of Telerik UI for Windows 8 XAML Documentation Installation Steps), people who are not familiar with your XAML libraries are having problems making these connections to RadControls for Windows 8.1 and Telerik UI for Windows 8.1. People see a reference missing, the can't find the reference, and get frustrated. This is not clear in the documentation installation.

I do appreciate taking the time to build the example. However, your solution does not work in mine, as I already have a ResourceDictionary set which provides styling for my UI. I was hoping that by simply referencing Telerik.UI.Xaml.Controls from the App.xaml and AppStyles.xaml pages I would be able to control the Telerik named brushes from there but it is not working. Our UI does not have a light template or a dark template (see below). This needs to be specifically branded one way without variation and is also why we need to re-style the Telerik controls - they do not match our branding requirements.

In terms of the documentation that pieces this together, it would have been more helpful to have your code sample embedded instead of lines here and there (specifically in Telerik Named Brushes as it only explains referencing the namespace but doesn't show how the namespace is being referenced in the Application tag).

<Application.Resources>
     <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
               <ResourceDictionary Source="ms-appx:///Styles/AppStyles.xaml"/>                          </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
</Application.Resources>

I will continue tinkering with your sample and try to figure out how to make it work within our solution.

I appreciate your time.

Cheers, Jodie.

[Jodie]

After more research, I found the solution when implementing your own ResourceDictionary with customized styles that target Telerik brushes.

You add the namespace to the App.xaml file, along with the UserThemeResources. What was missing, however, from Iyalo's example is when setting a ResourceDictionary you also must reference the resource path in another child of the MergedDictionaries (see code below):

01.<Application
02.    x:Class="MyApp.App"
03.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05.    xmlns:Telerik="using:Telerik.UI.Xaml.Controls"
06.    xmlns:local="using:MyApp">
07.    <Application.Resources>
08.        <ResourceDictionary x:Name="DefaultAppStyles">
09.            <Telerik:UserThemeResources x:Key="MyResources" DarkResourcesPath="ms-appx:///Styles/MyAppStyles.xaml"/>
10.            <ResourceDictionary.MergedDictionaries>
11.                <ResourceDictionary Source="ms-appx:///Styles/MyAppStyles.xaml"/>
12.                <ResourceDictionary Source="{CustomResource DarkResourcesPath}"/>
13.            </ResourceDictionary.MergedDictionaries>
14.        </ResourceDictionary>
15.    </Application.Resources>
16.</Application>




Which then allowed me to reference the Telerik Named Brushes in MyAppStyles.xaml:

<!-- Telerik styles -->
<!-- Chart styles -->
<SolidColorBrush x:Key="TelerikChartAxisLabelsForegroundBrush" Color="#FF222222"/>
<SolidColorBrush x:Key="TelerikChartGridLineBorderBrush" Color="#CCCCCCCC"/>

Please note, I am getting an error in Visual Studio Express 2013 for Windows for line 12 above:

<ResourceDictionary Source="{CustomResource DarkResourcesPath}"/>

Object reference not set to an instance of an object.

[Rosy Topchiyska]

Hi Jodie,

Thank you for reaching back to us.

Could you please confirm that you have achieved the desired effect now or you have any outstanding issues? As to the design time error you are referring to, this is probably related to a quirk in the CustomResource markup extension support in Visual Studio and we believe it should not have any runtime impact.

We will update all references in our documentation to be relevant to the newest naming conventions for our products as soon as possible.

Thank you for your valuable feedback. Please, let us know if you have any other questions or concerns.


Regards,
Rositsa Topchiyska
Telerik