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.

NoteNote

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.

You need the following components to complete this walkthrough:

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.

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.

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

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.

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 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 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 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 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 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);
    }
    

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.

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 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);
    

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.

Here are some tasks that might come next:

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft