Walkthrough: Updating a Chart in a Document Using Radio Buttons

This walkthrough demonstrates how to use radio buttons in a document-level customization for Microsoft Office Word to give users the option to select chart styles on the document.

Applies to: The information in this topic applies to document-level projects for Word 2013 and Word 2010. For more information, see Features Available by Office Application and Project Type.

This walkthrough illustrates the following tasks:

• Adding a chart to the document in a document-level project at design time.

• Grouping radio buttons by adding them to a user control.

• Changing the chart style when an option is selected.

To see the result as a completed sample, see the Word Controls Sample at Office Development Samples and Walkthroughs.

Note

Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements. For more information, see Customizing Development Settings in Visual Studio.

Prerequisites

You need the following components to complete this walkthrough:

• An edition of Visual Studio 2013 that includes the Microsoft Office developer tools. For more information, see Configuring a Computer to Develop Office Solutions.

• Word 2013 or Word 2010.

Creating the Project

The first step is to create a Word Document project.

To create a new project

• Create a Word Document project with the name My Chart Options. In the wizard, select Create a new document. For more information, see How to: Create Office Projects in Visual Studio.

  Visual Studio opens the new Word document in the designer and adds the My Chart Options project to Solution Explorer.

Adding a Chart to the Document

To add a chart

1. In the Word document that is hosted in the Visual Studio designer, on the Ribbon, click the Insert tab.

2. In the Text group, click the Insert Object drop-down button, and click Object.

   The Object dialog box opens.

3. In the Object type list on the Create New tab, select Microsoft Graph Chart and then click OK.

   A chart is added to the document at the insertion point, and the Datasheet window appears with some default data.

4. Close the Datasheet window to accept the default values in the chart and click inside the document to move focus away from the chart.

5. Right-click the chart, and then click Format Object.

6. On the Layout tab of the Format Object dialog box, select Square and click OK.

Adding a User Control to the Project

Radio buttons on a document are not mutually exclusive by default. You can make them function correctly by adding them to a user control, and then writing code to control the selection.

To add a user control

1. Select the My Chart Options project in Solution Explorer.

2. On the Project menu, click Add New Item.

3. In the Add New Item dialog box, click User Control, name the control ChartOptions, and click Add.

To add Windows Form controls to the user control

1. If the user control is not visible in the designer, double-click ChartOptions in Solution Explorer.

2. From the Common Controls tab of the Toolbox, drag the first Radio Button control to the user control, and change the following properties.

   Property	Value
   Name	columnChart
   Text	Column Chart

3. Add a second Radio Button to the user control, and change the following properties.

   Property	Value
   Name	barChart
   Text	Bar Chart

4. Add a third Radio Button to the user control, and change the following properties.

   Property	Value
   Name	lineChart
   Text	Line Chart

5. Add a fourth Radio Button to the user control, and change the following properties.

   Property	Value
   Name	areaBlockChart
   Text	Area Block Chart

Adding References

To access the chart from the user control on a document, you must have a reference to the Microsoft.Office.Interop.Graph assembly in your project.

To add a reference to the Microsoft.Office.Interop.Graph assembly

1. On the Project menu, click Add Reference.

   The Add Reference dialog box appears.

2. On the .NET tab, select Microsoft.Office.Interop.Graph and click OK. Select the 14.0.0.0 version of the assembly.

Changing the Chart Style when a Radio Button is Selected

To make the buttons work correctly, create a public event on the user control, add a property to set the selection type, and create a procedure for the CheckedChanged event of each of the radio buttons.

To create an event and property on a user control

1. In Solution Explorer, right-click the user control, and then click View Code.

2. Add code to create a SelectionChanged event and the Selection property to the ChartOptions class.

   Public Event SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)
   
   Private selectedType As Microsoft.Office.Interop.Graph.XlChartType = _
       Microsoft.Office.Interop.Graph.XlChartType.xlColumnClustered
   
   Public Property Selection() As Microsoft.Office.Interop.Graph.XlChartType
       Get 
           Return Me.selectedType
       End Get 
       Set(ByVal value As Microsoft.Office.Interop.Graph.XlChartType)
           Me.selectedType = value
       End Set 
   End Property
   

   public event EventHandler SelectionChanged;
   
   private Microsoft.Office.Interop.Graph.XlChartType selectedType =
       Microsoft.Office.Interop.Graph.XlChartType.xlColumnClustered;
   
   public Microsoft.Office.Interop.Graph.XlChartType Selection
   {
       get
       {
           return this.selectedType;
       }
       set
       {
           this.selectedType = value;
       }
   }
   

To handle the CheckedChange event of the radio buttons

1. Set the chart type in the CheckedChanged event handler of the areaBlockChart radio button and then raise the event.

   Private Sub areaBlockChart_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
       Handles areaBlockChart.CheckedChanged
   
       If (CType(sender, RadioButton).Checked) Then 
   
           Me.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlAreaStacked
           RaiseEvent SelectionChanged(Me, EventArgs.Empty)
       End If 
   End Sub
   

   private void areaBlockChart_CheckedChanged(object sender, EventArgs e)
   {
       if (((RadioButton)sender).Checked)
       {
           this.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlAreaStacked;
           if (this.SelectionChanged != null)
           {
               this.SelectionChanged(this, EventArgs.Empty);
           }
       }
   }
   

2. Set the chart type in the CheckedChanged event handler of the barChart radio button.

   Private Sub barChart_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
       Handles barChart.CheckedChanged
   
       If (CType(sender, RadioButton).Checked) Then 
   
           Me.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlBarClustered
           RaiseEvent SelectionChanged(Me, EventArgs.Empty)
       End If 
   End Sub
   

   private void barChart_CheckedChanged(object sender, EventArgs e)
   {
       if (((RadioButton)sender).Checked)
       {
           this.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlBarClustered;
           if (this.SelectionChanged != null)
           {
               this.SelectionChanged(this, EventArgs.Empty);
           }
       }
   }
   

3. Set the chart type in the CheckedChanged event handler of the columnChart radio button.

   Private Sub columnChart_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
       Handles columnChart.CheckedChanged
   
       If (CType(sender, RadioButton).Checked) Then 
   
           Me.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlColumnClustered
           RaiseEvent SelectionChanged(Me, EventArgs.Empty)
       End If 
   End Sub
   

   private void columnChart_CheckedChanged(object sender, EventArgs e)
   {
       if (((RadioButton)sender).Checked)
       {
           this.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlColumnClustered;
           if (this.SelectionChanged != null)
           {
               this.SelectionChanged(this, EventArgs.Empty);
           }
       }
   }
   

4. Set the chart type in the CheckedChanged event handler of the lineChart radio button.

   Private Sub lineChart_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
       Handles lineChart.CheckedChanged
   
       If (CType(sender, RadioButton).Checked) Then 
           Me.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlLineMarkers
           RaiseEvent SelectionChanged(Me, EventArgs.Empty)
       End If 
   End Sub
   

   private void lineChart_CheckedChanged(object sender, EventArgs e)
   {
       if (((RadioButton)sender).Checked)
       {
           this.selectedType = Microsoft.Office.Interop.Graph.XlChartType.xlLineMarkers;
           if (this.SelectionChanged != null)
           {
               this.SelectionChanged(this, EventArgs.Empty);
           }
       }
   }
   

5. In C#, you must add event handlers for the radio buttons. You can add the code to the ChartOptions constructor, beneath the call to InitializeComponent. For information about creating event handlers, see How to: Create Event Handlers in Office Projects.

   public ChartOptions()
   {
       InitializeComponent();
   
       areaBlockChart.CheckedChanged += new EventHandler(areaBlockChart_CheckedChanged);
       barChart.CheckedChanged += new EventHandler(barChart_CheckedChanged);
       columnChart.CheckedChanged += new EventHandler(columnChart_CheckedChanged);
       lineChart.CheckedChanged += new EventHandler(lineChart_CheckedChanged);
   }
   

Adding the User Control to the Document

When you build the solution, the new user control is automatically added to the Toolbox. You can then drag the control from the Toolbox to your document.

To add the user control your document

1. On the Build menu, click Build Solution.

   The ChartOptions user control is added to the Toolbox.

2. In Solution Explorer, right-click ThisDocument.vb or ThisDocument.cs, and then click View Designer.

3. Drag the ChartOptions control from the Toolbox to the document.

   In the Properties window, name the control that you just added to the document ChartOptions1.

Changing the Chart Type

Create an event handler to change the chart type according to the option that is selected in the user control.

To change the type of chart that is displayed in the document

1. Add the following event handler to the ThisDocument class.

   Private Sub ChartOptions1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) _
       Handles ChartOptions1.SelectionChanged
   
       Try 
           Dim shape As Word.Shape = Me.Shapes.Item(1)
   
           ' Activate the shape.
           shape.OLEFormat.Activate()
   
           Dim dataChart As Graph.Chart = CType(shape.OLEFormat.Object, Graph.Chart)
           dataChart.ChartType = Me.ChartOptions1.Selection
   
           ' Deactivate the shape. 
           Me.ChartOptions1.Select()
   
       Catch ex As Exception
           MessageBox.Show(ex.Message)
       End Try 
   End Sub
   

   private void ChartOptions1_SelectionChanged(object sender, EventArgs e)
   {
       try
       {
           object index = 1;
           Word.Shape shape = this.Shapes.get_Item(ref index);
   
           // Activate the shape.
           shape.OLEFormat.Activate();
   
           Microsoft.Office.Interop.Graph.Chart dataChart = 
               (Microsoft.Office.Interop.Graph.Chart)shape.OLEFormat.Object;
           dataChart.ChartType = this.ChartOptions1.Selection;
   
           // Deactivate the shape. 
           this.ChartOptions1.Select();
       }
       catch (Exception ex)
       {
           MessageBox.Show(ex.Message);
       }
   }
   

2. In C#, you must add an event handler for the user control to the Startup event.

   this.ChartOptions1.SelectionChanged += new EventHandler(ChartOptions1_SelectionChanged);
   

Testing the Application

You can now test your document to make sure that the chart style is updated correctly when you select a radio button.

To test your document

1. Press F5 to run your project.

2. Select various radio buttons.

3. Confirm that the chart style changes to match the selection.

Next Steps

Here are some tasks that might come next:

• Using a button to populate a text box. For more information, see Walkthrough: Displaying Text in a Text Box in a Document Using a Button.

• Change formatting by selecting a style from a combo box. For more information, see Walkthrough: Changing Document Formatting Using CheckBox Controls.

See Also

Concepts

Walkthroughs Using Word

Limitations of Windows Forms Controls on Office Documents

Other Resources

Office Development Samples and Walkthroughs