The <apex: lineSeries> is another important component that acts as a data series to be rendered as connected points in a linear Visualforce chart. We have to specify the data collection fields to use as X and Y values for each point and the X and Y axes to scale against.
We have to use this component within the <apex: chart> component, and inside <apex: chart> component, we can use more than one <apex: lineSeries> component.
The <apex: lineSeries> has the following attributes on Visualforce Page:
1. axis
The axis is a string-type attribute used for specifying the axis this chart series should bind. The value of this attribute can be one of the following:
top
bottom
left
right
Syntax:
<apex: lineSeries axis= "left"></apex: lineSeries>
2. fill
The fill is a Boolean-type attribute that specifies whether the underline area should be filled. The boolean value false is set as a default value for
this attribute.
Syntax:
<apex: lineSeries axis= "left"></apex: lineSeries>
3. fillColor
The fillColor is a string-type attribute used for specifying the color, i.e., used to fill the underline color area.
Syntax:
<apex: lineSeries fillColor= "#8E35EF"></apex: lineSeries>
4. highlight
The highlight is a Boolean-type attribute used for specifying whether each point of the line series should be highlighted or not when the onmouseover event occurs. The boolean value true is set as a default value for this attribute.
Syntax:
<apex: lineSeries highlight= "false"></apex: lineSeries>
5. highlightStrokeWidth
AD
The highlightStrokeWidth is a string-type attribute used for specifying the width of the line drawn over the series line when it's highlighted.
Syntax:
<apex: lineSeries highlightStrokeWidth= "2px"></apex: lineSeries>
6. id
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax:
AD
<apex: lineSeries id= "lineSeriesId"></apex: lineSeries>
7. markerFill
The markerFill is a string-type attribute that is used for specifying the color of the data point markers for this series. The value of this attribute is specified as an HTML-style color.
Syntax:
<apex: lineSeries markerFill= "#8E35EF "></apex: lineSeries>
8. markerSize
The markerSize is an Integer-type attribute used for specifying the size of each data point marker for this series. By default, its value is set to 3.
Syntax:
<apex: lineSeries markerSize= "3"></apex: lineSeries>
9. markerType
The markerType is a string-type attribute used for specifying the shape of each data point marker for this series. These are the possible values for this attribute:
circle
cross
By default, the marker shape is chosen from a sequence of shapes.
Syntax:
<apex: lineSeries markerType= "circle"></apex: lineSeries>
10. opacity
The opacity is a string-type attribute used for specifying a decimal number between 0 and 1, indicating the opacity of the filled area under the line for the series. By default, its value is set to 0.3 only when the fill attribute is set to true.
Syntax:
<apex: lineSeries opacity= "0.3"></apex: lineSeries>
11. rendered
The rendered is a Boolean-type attribute that specifies whether the chart series is rendered in the chart. Boolean-value true is set as a default value for this attribute.
Syntax:
<apex: lineSeries rendered= "false"></apex: lineSeries>
12. renderedFn
The renderedFn is a string-type attribute used for specifying the name of the JavaScript function that augments or overrides how each data point is rendered. The JavaScript method implements to provide additional styling or to augment data.
Syntax:
<apex: lineSeries renderedFn= "0.3"></apex: lineSeries>
13. showInLegend
The showInLegend is a Boolean-type attribute used to specify whether the chart series should be added to the chart legend or not. Boolean-value true is set as a default value for this attribute.
Syntax:
<apex: lineSeries showInLegend= "false"></apex: lineSeries>
14. smooth
The smooth is an integer-type attribute used for specifying the amount of smoothing for the line, with lower numbers applying more smoothing.
Syntax:
<apex: lineSeries smooth= "0"></apex: lineSeries>
15. strokeColor
The strokeColor is a string-type attribute used for specifying the color of the line for this series.
Syntax:
<apex: lineSeries strokeColor="#000000"></apex: lineSeries>
16. tips
The "tips" is a Boolean-type attribute used for specifying whether we need to display a tooltip for each data point or not when the mouse hovers over it. Boolean-value true is set as a default value for this attribute.
Syntax:
<apex: lineSeries tips= "false"></apex: lineSeries>
17. title
The title is a string-type attribute used for specifying the title of this chart series displayed in the chart legend.
Syntax:
<apex: lineSeries title= "JavaTpoint, SSSIT"></apex: lineSeries>
18. strokeWidth
The strokeWidth is an integer-type attribute used to specify the line width for the series.
Syntax:
<apex: lineSeries strokeWidth= "20"></apex: lineSeries>
19. xField
The field in each record is provided in the chart data from which to retrieve the x-axis value for each data point in the series. This field must exist in every record in the chart data.
Syntax:
<apex: lineSeries xField= "name"></apex: lineSeries>
20. yField
The field in each record is provided in the chart data from which to retrieve the y-axis value for each data point in the series. This field must exist in every record in the chart data.
Syntax:
<apex: lineSeries yField= "data1,data2,data3"></apex: lineSeries>
Let's take an example to understand how we can use the <apex: lineSeries> component on the Visualforce page.
ApexLineSeriesExample.vfp
<!-- apex page to demonstrate the working of apex lineSeries-->
<apex:page controller="LineSeriesController" showHeader="false" readOnly="true">
<!-- apex chart with three axis, barSeries, and lineSeries-->
<apex:chart width="600" height="300" data="{!data}">
<!-- axis for Closed Opportunities-->
<apex:axis type="Numeric" position="left" fields="closedWonOpp" title="Closed Won Opportunities" grid="true"/>
<apex:axis type="Numeric" position="right" fields="totalRevenue" title="Opportunity Revenue"/>
<apex:axis type="Category" position="bottom" fields="theMonth" title="2022"/>
<!-- use barSeries to show Monthly Sales -->
<apex:barSeries title="Monthly Sales" orientation="vertical" axis="right" colorsProgressWithinSeries="true"
xField="theMonth" yField="totalRevenue" colorSet="#F8B195,#F67280,#C06C84,#6C5B7B"/>
<!-- use apex lineSeries to show Closed Won Opportunities with revenue-->
<apex:lineSeries title="Closed-Won" axis="left" xField="theMonth" yField="closedWonOpp"
markerType="cross" markerSize="5" markerFill="#000000"/>
</apex: chart>
</apex: page>
LineSeriesController.apxc
// create class LineSeriesController to design data for lineSeries
public without sharing class LineSeriesController {
public List<AggregateResult> getData() {
List<AggregateResult> returnData = new List<AggregateResult>();
// get closed won opportunity data
returnData = [SELECT SUM(Amount) totalRevenue, COUNT(Name) closedWonOpp, CALENDAR_MONTH(CloseDate) theMonth
FROM Opportunity WHERE stageName = 'Closed Won' AND CALENDAR_YEAR(CloseDate) = 2022 GROUP BY
CALENDAR_MONTH(CloseDate) ORDER BY CALENDAR_MONTH(CloseDate)];
//return data to the VF page
return returnData;
}
}
