Change Chart Type

[Gary Robson]

Is it possible to allow a user to choose the chart type at run time, say from a drop down box.

I can obviously see the choices in the chart wizard in design but can't see how to code it.

*Using VB2005*

Cheers,

Gary

[Robert]

Gary,

It is possible to change the chart type being diplayed at run time. This is actually done by setting the ChartSeriesType on the ChartSeries being displayed in the chart.

    Private Sub RadButton1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles RadButton1.Click
        RadChart1.Series(0).Type = Telerik.Charting.ChartSeriesType.Line
        RadChart1.UpdateGraphics()
    End Sub

I hope this helps.

- Robert

[dgrandfield]

Any idea how to do this with a Silverlight control?  this.radChartDepotInventory.UpdateLayout(); does not work and there is no UpdateGraphics() method...

[Dwight]

Hello dgrandfield,

In the code-behind you can use something like:

// Change the default series type for the RadChart
this.radChart1.DefaultType = ChartSeriesType.Line;

// Change the type of the first series in the RadChart
this.radChart1.Series[0].Type = ChartSeriesType.Spline;

// Force the RadChart to update.
this.radChart1.UpdateGraphics();

Let me know if you need further assistance.

Kind regards,
Evtim
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[dgrandfield]

Sorry for any confusion Evtim,
    I am working with the Silverlight 3 controls and none of these options are available.  I have the following code that I am using to work with the chart. 
From the code behind :

        

        // Executes when the user navigates to this page.
        protected void OnNavigatedTo(NavigationEventArgs e)
        {
            SetSeriesMappings(this.radChartDepotInventory, new BarSeriesDefinition());
        }

        /// <summary>
        /// Sets the series mappings.
        /// </summary>
        /// <param name="chart">The chart.</param>
        /// <param name="definition">The definition.</param>
        private void SetSeriesMappings(RadChart chart, SeriesDefinition definition)
        {
            SeriesMapping seriesMapping = new SeriesMapping();
            seriesMapping.SeriesDefinition = definition;
            seriesMapping.LegendLabel = "Total Inventory";
            ItemMapping itemMappingY = new ItemMapping();
            ItemMapping itemMappingX = new ItemMapping();
            itemMappingY.DataPointMember = DataPointMember.YValue;
            itemMappingX.DataPointMember = DataPointMember.XCategory;
            itemMappingY.FieldName = "Depot_Inventory_Total";
            itemMappingX.FieldName = "Name";
            seriesMapping.ItemMappings.Add(itemMappingY);
            seriesMapping.ItemMappings.Add(itemMappingX);
            chart.SeriesMappings.Add(seriesMapping);
        }

        /// <summary>
        /// Handles the Click event of the toggleChart1 control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>
        private void toggleChart1_Click(object sender, RoutedEventArgs e)
        {
            SetSeriesMappings(this.radChartDepotInventory, new BarSeriesDefinition());
        }

        /// <summary>
        /// Handles the Click event of the toggleChart2 control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>
        private void toggleChart2_Click(object sender, RoutedEventArgs e)
        {
            SetSeriesMappings(this.radChartDepotInventory, new LineSeriesDefinition());
        }

In the XAML:

<Telerik_Windows_Controls:RadChart x:Name="radChartDepotInventory"
     Content="{Binding DepotInventoryReports, Mode=OneWay}"
     ItemsSource="{Binding Data, ElementName=dsAddress}">
  <Telerik_Windows_Controls:RadChart.DefaultSeriesDefinition>
    <Telerik_Windows_Controls_Charting:BarSeriesDefinition />
  </Telerik_Windows_Controls:RadChart.DefaultSeriesDefinition>
</Telerik_Windows_Controls:RadChart>

[dgrandfield]

OK I found a solution.  May not be the best but it does work.  I have to Clear the SeriesMappings for the chart then reapply them and call the DataView.Refresh() method of dsAddress which is my domain data source.  Here's the adjustments to the code.

In the XAML I removed the defaultseries definition element leaving the chart as a single element:

<Telerik_Windows_Controls:RadChart x:Name="radChartDepotInventory"
Content="{Binding DepotInventoryReports, Mode=OneWay}"
ItemsSource="{Binding Data, ElementName=dsAddress}" />

and in the code behind note the difference from above in the SetSeriesMappings() method.

        /// <summary>
        /// Sets the series mappings.
        /// </summary>
        /// <param name="chart">The chart.</param>
        /// <param name="definition">The definition.</param>
        private void SetSeriesMappings(RadChart chart, SeriesDefinition definition)
        {
            chart.SeriesMappings.Clear();
            SeriesMapping seriesMapping = new SeriesMapping();
            seriesMapping.SeriesDefinition = definition;
            seriesMapping.LegendLabel = "Total Inventory";
            ItemMapping itemMappingY = new ItemMapping();
            ItemMapping itemMappingX = new ItemMapping();
            itemMappingY.DataPointMember = DataPointMember.YValue;
            itemMappingX.DataPointMember = DataPointMember.XCategory;
            itemMappingY.FieldName = "Depot_Inventory_Total";
            itemMappingX.FieldName = "Name";
            seriesMapping.ItemMappings.Add(itemMappingY);
            seriesMapping.ItemMappings.Add(itemMappingX);
            chart.SeriesMappings.Add(seriesMapping);
            dsAddress.DataView.Refresh();
        }

        /// <summary>
        /// Handles the Click event of the toggleChart1 control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>
        private void toggleChart1_Click(object sender, RoutedEventArgs e)
        {
            SetSeriesMappings(this.radChartDepotInventory, new BarSeriesDefinition());
        }

        /// <summary>
        /// Handles the Click event of the toggleChart2 control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>
        private void toggleChart2_Click(object sender, RoutedEventArgs e)
        {
            SetSeriesMappings(this.radChartDepotInventory, new LineSeriesDefinition());
        }

[Limo Kipchumba]

Hi Robert,

This does not seem to work on RadHtmlChart, any idea?

Tried this but it does not contain a setter :(

RadHtmlChart1.Series(0).Type = Telerik.Charting.ChartSeriesType.Line

[Stefan]

Hello Limo,

I assume your question concerns RadHtmlChart for ASP.NET AJAX. Since this is the WinForms forum, it will be better to address your question in the ASP.NET AJAX forum in order to get adequate support: http://www.telerik.com/forums/aspnet-ajax/htmlchart.

I hope this helps.

Regards,
Stefan
Telerik