How to create a 2D Pie Chart in ActiveReportsJS

Background

This article shows you how to make a basic 2D Pie Chart.

(Download the report template before reading through steps)

Web-Designer solution

  1. Add Chart

  2. Set Chart to Pie Chart

  3. Optional: Change the Chart Title to Units in Stock for each Product Category

  4. Add “UnitsInStock” To DataFields and “CategoryName” to Encodings
    a. Make sure the expression is =Fields!UnitsInStock.Value and not =Sum(Fields!UnitsInStock.Value)

  5. Set the Aggregate for the encoding to Count

  6. Select Plot 1 in the Report Explorer and view the properties for the chart

  7. Under Common Properties, set ToolTip template to Value Field Value

  8. Under Encodings, expand the color property and click the add item button.
    a. Enter the following expression for the new item
    b. =Fields!CategoryName.Value

  9. Under Label Text, set the template property to Value Field Value and set the position property to Center

  10. Select the preview button to view the finished Pie Chart

Visual Studio Add-in/ Desktop Designer solution

  1. Add Chart

  2. Select Pie as the Chart Template

  3. Click inside the chart until you see the Data Fields and Encodings sections popup above and to the side of the chart

  4. Goto the Report Explorer and under the Products dataset, drag the UnitsInStock field to the Data Fields section and drag the CategoryName field to the encodings section

  5. In the Report Explorer, select Chart 1 and goto the properties.

  6. In the Chart 1 properties, do the following
    a. Goto the Plots perperty and open up the plot collection
    b. In the PlotDesigner Collection Editor, select Plot 1 and open the values collection in editor properties
    c. In the DataFields Collection Editor, make sure that the first member is "Units in Stock" and set the Aggregate property to Count

  7. In the Report Explorer, select Plot 1 for the new chart that you added.

  8. After selecting Plot 1, open the properties for Plot 1 and do the following:
    a. set the ToolTip Template properrty to {valueField.value}
    b. Expand the Color property and add a value to the collection with this expression =Fields!CategoryName.Value
    c. Expand the Labels property and set TextPosition to Center, and Template to {valueField.value}

  9. To remove the numbers on the outside of the chart, click in the white space of the chart until you see the Axes properties appear

  10. Open the Axes Collection and do the following
    a. In the AxisDesigner Collectin Editor, select Axis 2 and set the Position Property to None

  11. Click the preview button to review the Pie Chart

Resources

Gif - https://global-cdn.grapecity.com/kb/activereports/ard/HowToCreatePieChart.gif
Sample Template with data - https://global-cdn.grapecity.com/kb/activereports/ard/PieChartExample - template.rdlx
PieChartSample - https://global-cdn.grapecity.com/kb/activereports/ard/PieChartExample.rdlx

Tags:

Evan Warren