V1
V1

Charts

In ActiveReportsJS Designer, you can use the Chart data region to present data graphically in a report. The chart offers you different chart types, plus access to properties that control every aspect of the chart's appearance.

The Chart data region presents a series of points in different ways depending upon the chart type you choose. For more information on chart types, refer to Chart Types.

Let us see how to create chart with two plots. We already have a data source with Unit price, Units in stock, and category name fields.

Create report layout and define plots

  1. Drag and drop a Chart data region onto the design area of the report.
  2. Go to the Properties tab and click Show Items next to Plots property. You see that default Plot1 is already added.
  3. From Explorer, select Plot - Plot1 and set properties for Plot1 as follows:
    a. In the Values property, click Show Items, and then select Add Item.
    b. Click to display the Value properties. Again in the Values property, click Show Items, and then select Add Item.
    c. Click the radio button to display the fields and select UnitsInStock.
    Note that UnitsInStock field is added to the Data Fields adorner.
  4. With Plot - Plot 1 selected, go to Encodings > Category and click Show Items, and then select Add Item.
  5. Click the radio button to display the fields and select CategoryName.
  6. Set Show Values Names in Legend to True.
  7. Go to Chart tab and from Set Plot Template, select Line.
  8. To add another plot, select Chart data region and go to Properties tab.
  9. Click Show Items next to Plots property, and add another plot, Plot2.
  10. Similar to previous plot, set Values property for Plot2 to UnitPrice.
  11. Go to Encodings > Category and click Show Items, and then select Add Item.
  12. Click the radio button to display the fields and select CategoryName.
  13. Set Show Values Names in Legend to True.
  14. Go to Chart tab and from Set Plot Template, select Column.

Define Axes, Labels and Legends

  1. From the Explorer, select Y Axis - [Plot 1].
  2. Set Title > Value property to Units In Stock.
  3. Similarly, select Y Axis - [Plot 2] and set Title > Value property to Unit Price.
  4. Set Labels > Format property to Currency.
  5. From the Explorer, select X Axis - Plot 1.
  6. Set the Title of the X axis to Category Name.
  7. From the Properties pane, set Plots property to both the plots - Plot 1 and Plot 2.

Add Chart Title

  1. From the Explorer , select Header under Chart1 (or the name of your chart).
  2. From the Properties pane, set Caption to Products. Now your chart should look like following in the design area:
  3. Preview your report.