Visualforce Bar Chart: Apex and Visualforce Controllers

Render Data Series as Bars in Salesforce | Exam DEV-501

Prev Question Next Question

Question

A data series to be rendered as bars in a Visualforce chart.

At a minimum you must specify the fields in the data collection to use as X and Y values for each bar, as well as the X and Y axes to scale against.

Note: This component must be enclosed within an <apex:chart> component.

You can have multiple <apex:barSeries> and <apex:lineSeries> components in a single chart.

Answers

Explanations

Click on the arrows to vote for the correct answer

A. B. C. D.

A.

The correct answer for this question is A. apex:barSeries.

In Visualforce, the apex:barSeries component is used to render data as a series of bars in a chart. This component must be enclosed within an apex:chart component.

To render the data as bars, you must specify the fields in the data collection to use as X and Y values for each bar, as well as the X and Y axes to scale against. You can have multiple apex:barSeries and apex:lineSeries components in a single chart.

The apex:barSeries component has several attributes that you can use to customize the appearance of the bars, such as:

  • axis: The axis to which the data series should be scaled. This can be set to "left", "right", "top", or "bottom".
  • xField: The name of the field in the data collection to use as the X value for each bar.
  • yField: The name of the field in the data collection to use as the Y value for each bar.
  • displayName: The label to display for the data series in the chart legend.
  • fill: The color to fill the bars with.
  • stroke: The color to outline the bars with.
  • strokeWidth: The width of the bar outlines.

Here's an example of using the apex:barSeries component to render a simple bar chart:

php
<apex:chart width="400" height="300" data="{!barChartData}">     <apex:axis type="Numeric" position="left" fields="yValue"                title="Y Value" minimum="0"/>     <apex:axis type="Category" position="bottom" fields="xValue"                title="X Value"/>     <apex:barSeries xField="xValue" yField="yValue"                     fill="#008080" displayName="Data"/> </apex:chart>

In this example, the chart data is provided by the "barChartData" controller variable. The chart has two axes: a numeric axis on the left and a category axis on the bottom. The apex:barSeries component is used to render the data as bars, with the "xValue" and "yValue" fields from the data collection specified as the X and Y values for each bar. The bars are filled with a teal color (#008080) and labeled "Data" in the legend.

Note that this is just a basic example, and there are many more options and configurations available for apex:barSeries and other charting components in Visualforce.

Prev Question Next Question