Rendering Column Charts on the Map as opposed to Pie charts

[DavidGeorge4]

Hi.

I was wondering if anyone could help me?!

I have managed to customise the following code to suit our own layers to render pie charts for a polygon layer with:

http://broux.dominique.free.fr/Silverlight/InteractiveSDK/Default.htm#PieChartRendering

However does anyone know how this code could be customised to display Column Charts as opposed to Pie Charts.

I see that the Silverlight Toolkit has a ColumnSeries class as opposed to PipeSeries. But I am struggling to change all of this code!

Alternatively does anyone have any sample code which would do this that I could look at? As I have not been able to find anything online!

Any advice would be extremely welcome!

Thanks

[AbdulrahmanTaher]

Hi

unfortunately i can't see the project because it need slv 5 , but i recommend you to see this topic

http://forums.arcgis.com/threads/27261-Graphs-and-Charts

i think it's near to your link .

and you can customize it to your project.

[DavidGeorge4]

Hi,

Thanks for this. However it might be an idea if i gave you the code that I am looking to customise (see attached).

In the code you have the following:

  <Grid Name="thePieChart" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top">
                                                    <toolkit:Chart UseLayoutRounding="True" 
                                                   
                                                                 
                                      
                                                       Style="{StaticResource Common}"
                                                       local:SurrogateBind.FieldsCollection="{Binding Path=Symbol.Fields}">
                                                        <toolkit:Chart.Series>
                                                            <toolkit:PieSeries Margin="0" 
                                                                               
                                                                   IndependentValueBinding="{Binding Path=Key}"
                                                                   DependentValueBinding="{Binding Path=Value}" >
                                                            </toolkit:PieSeries>
                                                        </toolkit:Chart.Series>

When you change PieSeries to ColumnSeries, no charts are displayed on the map. The same also applies when you change PieSeries to ColumnSeries in the C# code

[DominiqueBroux]

I tweaked the PieChart sample in order to get column charts.

Result here.

[DavidGeorge4]

That is brilliant! That worked a treat!

Thanks very much! 🙂

[DavidGeorge4]

Dominique.

Just one other question regarding the samples on your website:

I am trying to include the Chart Legend as Canvas as shown in your Pie Charts sample into the Column Charts sample.

My Code is as follows:

     <!-- Second chart just for the legend-->
                                        <Canvas Name="theLegend" Background="Transparent" Visibility="Collapsed">
                                            <toolkit:Chart Name="Chart2" UseLayoutRounding="True" 
                                                       Style="{StaticResource Common}"
                                                       LegendTitle="{Binding Attributes[stward_name]}"
                                                       chartSymbologyColumn:SurrogateBind.FieldsCollection="{Binding Path=Symbol.Fields}">
                                                <toolkit:Chart.Series>
                                                    <toolkit:ColumnSeries Margin="0" 
                                                                   IndependentValueBinding="{Binding Path=Key}"
                                                                   DependentValueBinding="{Binding Path=Value}" />
                                                </toolkit:Chart.Series>

                                                <toolkit:Chart.Template>
                                                    <ControlTemplate TargetType="toolkit:Chart">
                                                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                                            <Grid>
                                                                <Grid.ColumnDefinitions>
                                                                    <ColumnDefinition Width="0" />
                                                                    <ColumnDefinition Width="Auto" />
                                                                </Grid.ColumnDefinitions>
                                                                <chartingPrimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" />
                                                                <toolkit:Legend x:Name="Legend" Grid.Column="1"
                                                                            Header="{TemplateBinding LegendTitle}">
                                                                    <toolkit:Legend.Background>
                                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                                            <GradientStop Color="#CC333333"/>
                                                                            <GradientStop Color="#CCEEEEEE" Offset="1"/>
                                                                        </LinearGradientBrush>
                                                                    </toolkit:Legend.Background>
                                                                </toolkit:Legend>
                                                            </Grid>
                                                        </Border>
                                                    </ControlTemplate>
                                                </toolkit:Chart.Template>
                                            </toolkit:Chart>
                                            <Canvas.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform ScaleX="0" ScaleY="0"/>
                                                    <TranslateTransform X="50" Y="35"/>
                                                </TransformGroup>
                                            </Canvas.RenderTransform>
                                        </Canvas>

However this just displays "Series 1" in the Canvas Legend along with the attribute value binded with the Title.

The same code works perfectly fine with your pie chart code sample. But I am really struggling with the column charts!

Any Ideas would be much appreciated!

Thanks.

[DominiqueBroux]

Legend of a column charts doesn't behave the same as a pie chart legend:
A pie chart legend displays all values in the serie (what you need).
A column chart legend shows an item by serie and in our case there is only one column serie, so only one value in the legend.

That being said as the legend chart and the symbol chart are differents you might keep the pie chart for the legend and a column chart for the symbol.
That could be a workaround (not tested though, so no warranty :confused:)

[DavidGeorge4]

Hi Domonique,

Thanks for this, what your saying could well work ill give it a try.

Just one final thing:

I am trying to apply a StringFormat to the values that appear in tooltips when you hover over the charts:

The code which returns the tooltips is as follows:

     <ToolTipService.ToolTip>
                                                                                                <StackPanel>
                                                                                                    <StackPanel Orientation="Horizontal">
                                                                                                        <ContentControl Content="{TemplateBinding IndependentValue }" />
                                                                                                        <TextBlock Text=" �?? "></TextBlock>
                                                                                                        <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                                                                                                    </StackPanel>
                                                                                                </StackPanel>
                                                                                            </ToolTipService.ToolTip>

I have tried to set the StringFormat for the DependentValueBinding within the ColumnSeries:

                      <toolkit:ColumnSeries Margin="0" 
                                                                   IndependentValueBinding="{Binding Path=Key}"
                                                                   DependentValueBinding="{Binding Path=Value, StringFormat=c0, ConverterCulture=en-GB}" >
                                                            </toolkit:ColumnSeries>
                                                        </toolkit:Chart.Series>

However this returns the following error on Runtime:

Microsoft JScript runtime error: Unhandled Error in Silverlight Application
Code: 4004   
Category: ManagedRuntimeError      
Message: System.NullReferenceException: Object reference not set to an instance of an object.

A workaround I have found has been to set the DependentValueStringFormat within a Setter Property:

                    <toolkit:Chart.Series>

                                                            <toolkit:ColumnSeries Margin="0" 
                                                                   IndependentValueBinding="{Binding Path=Key}"
                                                                   DependentValueBinding="{Binding Path=Value}" >
                                                                
                                                                <toolkit:ColumnSeries.DataPointStyle>
                                                                    
                                                                    <Style TargetType="charting:ColumnDataPoint">                                                                                       
                                                                    <Setter Property="DependentValueStringFormat" Value="{}{0:c}" />
                                                                    </Style>

                                                                </toolkit:ColumnSeries.DataPointStyle>

                                                                
                                                            </toolkit:ColumnSeries>
                                                        </toolkit:Chart.Series>

This works, however all of the columns are displayed in yellow and do not use the stying template that I have setup in my xaml.  The formatting style of the tooltip is also no longer used.

Do you have any idea how I can achieve this simple re-formatting for the DependentValue whilst preserving the formatted as defined for the tooltip?


Thanks

Dave

[DominiqueBroux]

We can try to reformat directly in the tooltip.

Instead of :

<ContentControl Content="{TemplateBinding FormattedDependentValue}" />

Try:

<ContentControl Content="{Binding DependentValue, RelativeSource={RelativeSource TemplatedParent}, StringFormat='{}{0:C}'}" />

Note : As 'RelativeBinding' doesn't support the StringFormat option, we have to use the (almost) equivalent Binding form with a templatedparent relativesource.

[DavidGeorge4]

Super,

That worked a treat, thanks very much!

Dave