We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Mixed Chart

SyncFusion's forums have been helpful in the past and also I have been experimenting with WinRT controls. Before I dig deeper I wanted to know whether using SyncFusion's WinRT controls I can produce a chart like following:

sample
Few things to note which are out of the ordinary:
  • Line charts start from Y-Axis
  • Top column chart has its own axis
  • Column chart is aligned to bottom line chart's data points except the first one
Any suggestion to this will be helpful adopt us Syncfusion's Charting controls.

12 Replies

SS Sheik Syed Abthaheer M Syncfusion Team March 12, 2015 10:35 AM UTC

Hi Ibrahim,

Thanks for contacting Syncfusion support.

We have analyzed your query and you can achieve your requirement by using ChartRowDefinition. We have prepared the sample based on your requirement. Please find the sample in the below location.

Sample: Chart_WinRT.zip

Note: We are unable to get your attached image/sample. So, the provided sample if it’s not your requirement, please reattach the sample with more information.

Please let us know if you have any queries.

Regards,
M. Sheik




II Ibrahim Islam March 13, 2015 03:23 PM UTC

Thanks for the reply Mr. Syed.

I am quite impressed how easy it was with SyncFusion controls and it took me days with WinRTXAMLToolkit.
But I would like to point some inconsistencies that I found in the output.
Please refer to the image below:
sample

As you can notice from the image above:
  • Column chart's axes should not be shown
  • Columns should be aligned to line chart data points
  • Column chart should not contain background grids
These things are very specifically requested by my client and I could change all that with WinRTXAMLToolkit overriding its Style resources. 
But there are performance and flexibility issue due to which I want to change.
Hopefully, there will be some APIs exposed from SyncFusion control's to change it according to my requirement.
Thanks in advance.


SS Sheik Syed Abthaheer M Syncfusion Team replied to Ibrahim Islam March 16, 2015 10:49 AM UTC

Thanks for the reply Mr. Syed.

I am quite impressed how easy it was with SyncFusion controls and it took me days with WinRTXAMLToolkit.
But I would like to point some inconsistencies that I found in the output.
Please refer to the image below:
sample

As you can notice from the image above:
  • Column chart's axes should not be shown
  • Columns should be aligned to line chart data points
  • Column chart should not contain background grids
These things are very specifically requested by my client and I could change all that with WinRTXAMLToolkit overriding its Style resources. 
But there are performance and flexibility issue due to which I want to change.
Hopefully, there will be some APIs exposed from SyncFusion control's to change it according to my requirement.
Thanks in advance.

Hi Ibrahim,

 

Thanks for the update.

 

Query

Response

Column chart's axes should not be shown

In order to hide the axes in chart we need to collapse primary and secondary axis visibility as shown in the below code snippet.

 

Code Snippet[Xaml]:

<chart:NumericalAxis Visibility="Collapsed" Interval="1"/>

Columns should be aligned to line chart data points

We are able to align the top column chart to line chart data point by setting  PrimaryAxis’s RangePadding as “None” as shown in the below code snippet.

 

Code Snippet[Xaml]:

<chart:NumericalAxis RangePadding="None"  chart:ChartBase.Row="1" />

Column chart should not contain background grids

We are able to hide the chart background grids by setting primary and secondary axis property of  ShowGridLines as False as shown in the below code snippet.

 

Code Snippet[Xaml]:

<chart:NumericalAxis ShowGridLines="False"    chart:ChartBase.Row="1" />

 

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

 

 

Also please find the below UG documentation of SfChart for more information.

 

Link: http://help.syncfusion.com/UG/winrt/documents/features2.htm

 

Please let us know if you have any queries.

 

Regards,

M.Sheik



SS Sheik Syed Abthaheer M Syncfusion Team March 16, 2015 10:52 AM UTC

Hi Ibrahim,

Please find the sample in the below location.


Regards,
M. Sheik



II Ibrahim Islam replied to Sheik Syed Abthaheer M March 18, 2015 07:44 AM UTC

Hi Ibrahim,

Please find the sample in the below location.


Regards,
M. Sheik


Mr. Sheik,

Thank you very much.
This worked as expected.
I need to make further modifications.
Like decreasing widths of each column and make them respond to click.
You have already helped so much, I cannot ask anymore.
I will follow the documentation and try my best.

Thanks



SS Suresh S Syncfusion Team March 19, 2015 01:16 PM UTC

Hi Ibrahim,

 

Thanks for your response.

 

Query 1: decreasing widths of each column

 

We can adjust the width of segments by using SegmentSpacing property as shown in the below code snippet

Code Snippet[Xaml]:

<chart:ColumnSeries SegmentSpacing="0.5" />

 

Query 2: make them respond to click.

 

We can achieve interactivity with  column segments by using ChartSelectionBehavior. For more information regarding ChartSelectionBehavior, please refer our help documentation link

 

Ug link: http://help.syncfusion.com/UG/winrt/default.htm#!documents/selection1.htm

 

Sample: Chart_WinRT.zip

 

Note: SegmentSpacing value should be fall between 0 and 1

 

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

 

Regards,

Suresh S



II Ibrahim Islam March 19, 2015 03:39 PM UTC

Thank your for the help Mr. Suresh S.
I was able to decrease their width.
But you will notice in my opening post that the column chart/series had its own X-Axis as Category Axis.
I need to be able to do the same in SfChart as shown below:
problem

This is the XAML:
        <Grid.DataContext>
            <local:ViewModel />
        </Grid.DataContext>
        <chart:SfChart AreaBorderThickness="0" 
                       Width="1366" 
                       x:Name="Chart"
                       HorizontalAlignment="Left">
            <chart:SfChart.RowDefinitions>
                <chart:ChartRowDefinition />
                <chart:ChartRowDefinition />
            </chart:SfChart.RowDefinitions>
            <chart:SfChart.PrimaryAxis>
                <chart:NumericalAxis  Interval="1"
                                      Header="LineSeries Axis"/>
            </chart:SfChart.PrimaryAxis>
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis EdgeLabelsDrawingMode="Shift" />
            </chart:SfChart.SecondaryAxis>
            <chart:LineSeries XBindingPath="X" 
                              YBindingPath="Y" 
                              ItemsSource="{Binding DataModel}">
                <chart:LineSeries.AdornmentsInfo>
                    <chart:ChartAdornmentInfo ShowLabel="False" 
                                              Symbol="Ellipse" 
                                              ShowMarker="True">
                    </chart:ChartAdornmentInfo>
                </chart:LineSeries.AdornmentsInfo>
            </chart:LineSeries>
            <chart:ColumnSeries  XBindingPath="X" 
                                 YBindingPath="Z"
                                 SegmentSpacing="0.8"
                                 ItemsSource="{Binding DataModel}">
                <chart:ColumnSeries.XAxis>
                    <chart:NumericalAxis RangePadding="None" 
                                         Visibility="Collapsed" 
                                         ShowGridLines="False" 
                                         Interval="1" 
                                         OpposedPosition="True"   
                                         chart:ChartBase.Row="1" />
                </chart:ColumnSeries.XAxis>
                <chart:ColumnSeries.YAxis>
                    <chart:NumericalAxis  
                        EdgeLabelsDrawingMode="Shift"  
                        Visibility="Collapsed" 
                        ShowGridLines="False"  
                        chart:ChartBase.Row="1" />
                </chart:ColumnSeries.YAxis>
            </chart:ColumnSeries>
        </chart:SfChart>

Is it possible inside the ColumnSeries or do I have to have another separate Column Chart for this? 
Please let me know.


SS Suresh S Syncfusion Team March 20, 2015 10:55 AM UTC

Hi Ibrahim,

 

Thanks for your response.

 

By default in ChartRowDefinition the axis is placed in Row 0 and if you want to show axis for Row 1 then we can use OpposedPosition as true for Row1 primary axis  to display in top. But we are unable to place the axis in bottom for Row 1.

 

However you can achieve your requirement by using two chart in grid row definition as shown in the below code snippet.

 

Code Snippet [Xaml]:

<chart:SfChart Grid.Row=”0”>

<!—Series 1-->

<chart:SfChart/>    

<chart:SfChart Grid.Row=”1”/>

<!—Series 2-->

<chart:SfChart/>    

 

We have prepared a sample demonstrating this, please download it from below location.

 

Sample: Chart_WinRT.zip

 

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

Regards,

Suresh S



II Ibrahim Islam replied to Suresh S March 23, 2015 03:59 PM UTC

Hi Ibrahim,

 

Thanks for your response.

 

By default in ChartRowDefinition the axis is placed in Row 0 and if you want to show axis for Row 1 then we can use OpposedPosition as true for Row1 primary axis  to display in top. But we are unable to place the axis in bottom for Row 1.

 

However you can achieve your requirement by using two chart in grid row definition as shown in the below code snippet.

 

Code Snippet [Xaml]:

<chart:SfChart Grid.Row=”0”>

<!—Series 1-->

<chart:SfChart/>    

<chart:SfChart Grid.Row=”1”/>

<!—Series 2-->

<chart:SfChart/>    

 

We have prepared a sample demonstrating this, please download it from below location.

 

Sample: Chart_WinRT.zip

 

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

Regards,

Suresh S


Mr. Suresh S,

Thank you for your reply.
I went through your project and it is fine.
Except when I change the column chart's X-Axis to CategoryAxis the alignment with Line chart goes away.
I cannot have it as NumericAxis because as you can see in the screenshot it needs to be a formatted date string.
So what can I do to have a CategoryAxis and also have data points aligned to line chart data points please?


Above result is from modified code of yours:

<Grid x:Name="Grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.DataContext>

            <local:ViewModel />

        </Grid.DataContext>

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

        </Grid.RowDefinitions>


        <chart:SfChart Grid.Row="0" 

                       Margin="10,0,0,0" 

                       AreaBorderThickness="0" 

                       Width="1366">

            <chart:ColumnSeries Interior="SaddleBrown"  

                                XBindingPath="X" 

                                YBindingPath="Z"

                                SegmentSpacing="0.8"

                                ItemsSource="{Binding DataModel}">

                <chart:ColumnSeries.XAxis>

                    <chart:CategoryAxis  ShowGridLines="False" 

                                         Interval="1" />

                </chart:ColumnSeries.XAxis>

                <chart:ColumnSeries.YAxis>

                    <chart:NumericalAxis  Visibility="Collapsed"

                                          EdgeLabelsDrawingMode="Shift" 

                                          ShowGridLines="False"  

                                          chart:ChartBase.Row="1" />

                </chart:ColumnSeries.YAxis>

            </chart:ColumnSeries>

        </chart:SfChart>

        

        <chart:SfChart Grid.Row="1" 

                       AreaBorderThickness="0" 

                       Width="1366" 

                       x:Name="Chart">

            <chart:SfChart.PrimaryAxis>

                <chart:NumericalAxis  Interval="1"

                                      Header="LineSeries Axis"/>

            </chart:SfChart.PrimaryAxis>

            <chart:SfChart.SecondaryAxis>

                <chart:NumericalAxis EdgeLabelsDrawingMode="Shift" />

            </chart:SfChart.SecondaryAxis>

            <chart:LineSeries XBindingPath="X" 

                              YBindingPath="Y" 

                              ItemsSource="{Binding DataModel}">

                <chart:LineSeries.AdornmentsInfo>

                    <chart:ChartAdornmentInfo ShowLabel="False" 

                                              Symbol="Ellipse" 

                                              ShowMarker="True">

                    </chart:ChartAdornmentInfo>

                </chart:LineSeries.AdornmentsInfo>

            </chart:LineSeries>            

        </chart:SfChart>

    </Grid>



SS Suresh S Syncfusion Team March 24, 2015 01:15 PM UTC

Hi Ibrahim,

 

Thanks for your response.

 

We have analyzed your requirement and it can be achieved by using axis PlotOffset to position and align line series points to that of column series as shown in below code snippet.

 

Code Snippet [Xaml]:

<chart:SfChart.PrimaryAxis>

           <chart:NumericalAxis PlotOffset="133"/>

</chart:SfChart.PrimaryAxis>

 

Also, we have modified the sample based on it, please download from below location.

 

Sample: Chart_WinRT.zip

 

Please let us know if you require further assistance.

 

Regards,

Suresh S



II Ibrahim Islam replied to Suresh S March 25, 2015 03:43 PM UTC

Hi Ibrahim,

 

Thanks for your response.

 

We have analyzed your requirement and it can be achieved by using axis PlotOffset to position and align line series points to that of column series as shown in below code snippet.

 

Code Snippet [Xaml]:

<chart:SfChart.PrimaryAxis>

           <chart:NumericalAxis PlotOffset="133"/>

</chart:SfChart.PrimaryAxis>

 

Also, we have modified the sample based on it, please download from below location.

 

Sample: Chart_WinRT.zip

 

Please let us know if you require further assistance.

 

Regards,

Suresh S


Thanks Mr. Suresh S,

I got it working but I am in another issue now.
So, for changing each column color I used CustomTemplate
But when using CustomTemplate SegmentSpacing property is not being respected.
I guess that is to be expected so I used Converter on Width property inside my custom template to reduce the width of each column which works.
But in that case, the column is not aligned to center to the tick mark as shown below:


Any suggestion to as how to solve this?


SS Suresh S Syncfusion Team March 26, 2015 12:06 PM UTC

Hi Ibrahim,

 

Thanks for your response.

 

We have analyzed your requirement and  in order to apply different color for each segment then you can use Palette for ChartSeries. You can apply a set of predefined brushes to the segments by using Palette as “Metro” and if you need to set custom colors to segment then you can use Palette as “Custom” with custom brushes as shown in the below code snippet.

Code Snippet [Xaml]:

<chart:ColumnSeries Palette="Custom">

   <chart:ColumnSeries.ColorModel >

                <chart:ChartColorModel>

                    <chart:ChartColorModel.CustomBrushes>

                       <!--Initialize custombrushes here-->

                   </chart:ChartColorModel.CustomBrushes>

                </chart:ChartColorModel>

  </chart:ColumnSeries.ColorModel>

 

Also, we have modified the sample based on requirement please download it from below location.

 

Sample: Chart_WinRT.zip

 

Note: In custom template with segment spacing we can calculate the proper column position to arrange the column in center or use the predefined width for reduce the column width.

 

Please let us know if you require further assistance

 

Regards,

Suresh S


Loader.
Live Chat Icon For mobile
Up arrow icon