Live DemoGetting StartedFeaturesTutorial
Global options
Series 1 Options
Series 2 Options
Series 3 Options
Chart Type Options
ChartType
Choose the chart type used to render the JSFlot Chart

Attribute: chartType
Possible values:
  • line
  • pie
  • bar
  • stackedBar
  • bubbles
  • candles
Default value: line
Example: <jsflot:flotChart chartType="line" />
Mode
In an XY Plot the options are Series (normal) and Time which displays dates on the X axis and in the tooltip

attribute: mode
Possible values:
  • Series
  • Time
Default value: Series
Example: <jsflot:flotChart mode="Time" />
Time Format
Sets the Time Format of the X-Axis if in Time mode.

attribute: timeFormat
Possible values: (in combination)
  • %h: hour
  • %H: hour
  • %M: minute
  • %S: second
  • %s: millisecond
  • %d: date
  • %m: month
  • %y: year
  • %b: month name
Default value: Determined at render-time based on input data.
Example: <jsflot:flotChart timeFormat=" %d/%m/%y %h:%M:%S" />
Drag and Drop Support
Determines if the chart is draggable. The ActionListener is invoked when the chart is dragged upon.

attribute: chartDraggable
Possible values:
  • true
  • false
Default value: false
Example: <jsflot:flotChart chartDraggable="true" />
Click Support
Determines if the chart is clickable The ActionListener is invoked when a chart data point is clicked.

attribute: chartClickable
Possible values:
  • true
  • false
Default value: false
Example: <jsflot:flotChart chartClickable="true" />
Zoom Support
Determines if the chart is zoomable.

attribute: chartZoomable
Possible values:
  • true
  • false
Default value: false
Example: <jsflot:flotChart chartZoomable="true" />
Markers
Determines if the data point markers are shown or not.

attribute: markers
Possible values:
  • true
  • false
Default value: false
Example: <jsflot:flotChart markers="true" />
Marker Position
Determines where, relative to the datapoint, the marker are shown.

attribute: markerPosition
Possible values:
  • "lt" (Left Top)
  • "ct" (Center Top)
  • "rt" (Right Top)
  • "lm" (Left Middle)
  • "cm" (Center Middle)
  • "rm" (Right Middle)
  • "lb" (Left Bottom)
  • "cb" (Center Bottom)
  • "rb" (Right Bottom)
Default value: lt
Example: <jsflot:flotChart markers="cb" />
Crosshair
Specifies if a crosshair is shown or not as well as which axes the crosshair is shown for.

attribute: crosshair
Possible values:
  • "none"
  • "x"
  • "y"
  • "xy"
Default value: none
Example: <jsflot:flotChart markers="xy" />
Chart Axis Options
Show X Axis Labels
Determines if the X axis displays labels or not

attribute: showXaxisLabels
Possible values:
  • true
  • false
Default value: true
Example: <jsflot:flotChart showXaxisLabels="false" />
X Axis Title
Choose the X Axis Title

attribute: xaxisTitle
Possible values: Any String value or null
Default value: null
Example: <jsflot:flotChart xaxisTitle="Unit sales" />
X Axis Title Rotation
Choose the X Axis Title Rotation

attribute: xaxisTitleRotation
Possible values: Any Integer value
Default value: 0
Example: <jsflot:flotChart xaxisTitleRotation="25" />
X Axis Number og Ticks
Choose the number of labels that are shown along the X Axis

attribute: numberOfXAxisTicks
Possible values: Any Integer value
Default value: Determined at Render-time based on actual data input
Example: <jsflot:flotChart numberOfXAxisTicks="10" />
X Axis Label Rotation
Choose the X Axis Title Rotation

attribute: xaxisLabelRotation
Possible values: Any Integer value
Default value: 0
Example: <jsflot:flotChart xaxisLabelRotation="45" />
X Axis Minium Value
Override JSFlots dynamic minimum value for the X Axis

attribute: xaxisMinValue
Possible values: Any Integer value
Default value: Determined at render time based on actual input data
Example: <jsflot:flotChart xaxisMinValue="-2" />
X Axis Maximum Value
Override JSFlots dynamic maximum value for the X Axis

attribute: xaxisMaxValue
Possible values: Any Integer value
Default value: Determined at render time based on actual input data
Example: <jsflot:flotChart xaxisMaxValue="100" />
Show Y Axis Labels
Determines if the Y axis displays labels or not

attribute: showYaxisLabels
Possible values:
  • true
  • false
Default value: true
Example: <jsflot:flotChart showYaxisLabels="false" />
Y Axis Title
Choose the Y Axis Title

attribute: yaxisTitle
Possible values: Any String value or null
Default value: null
Example: <jsflot:flotChart yaxisTitle="Unit sales" />
Y Axis Title Rotation
Choose the Y Axis Title Rotation

attribute: yaxisTitleRotation
Possible values: Any Integer value
Default value: 0
Example: <jsflot:flotChart yaxisTitleRotation="25" />
Y Axis Number og Ticks
Choose the number of labels that are shown along the Y Axis

attribute: numberOfYAxisTicks
Possible values: Any Integer value
Default value: Determined at Render-time based on actual data input
Example: <jsflot:flotChart numberOfYAxisTicks="10" />
Y Axis Label Rotation
Choose the Y Axis Title Rotation

attribute: yaxisLabelRotation
Possible values: Any Integer value
Default value: 0
Example: <jsflot:flotChart yaxisLabelRotation="45" />
Y Axis Minimum
Override JSFlots dynamic minimum value for the Y Axis

attribute: yaxisMinValue
Possible values: Any Integer value
Default value: Determined at render time based on actual input data
Example: <jsflot:flotChart yaxisMinValue="-2" />
Y Axis Maximum Value
Override JSFlots dynamic maximum value for the Y Axis

attribute: yaxisMaxValue
Possible values: Any Integer value
Default value: Determined at render time based on actual input data
Example: <jsflot:flotChart yaxisMaxValue="100" />
Chart Title Options
Title
Choose the chart Title

Attribute: title
Possible values: Any String
Default value: null
Example: <jsflot:flotChart title="Automotive Sales" />
Subtitle
Choose the chart Subtitle

Attribute: subtitle
Possible values: Any String
Default value: null
Example: <jsflot:flotChart subtitle="Engine Parts Division" />
Chart Legend Options
Legend Columns
Choose the number of columns shown for the legend

Attribute: legendColumns
Possible values: Any Integer Number
Default value: 1
Example: <jsflot:flotChart legendColumns="2" />
Legend Opacity
Choose the opacity of the legend background

Attribute: legendOpacity
Possible values: Any Double Number from 0 to 1
Default value: 0.85
Example: <jsflot:flotChart legendOpacity="0.45" />
Legend Position
Choose position of the legend. Possible values are nw, sw, ne and se

Attribute: legendPosition
Possible values:
  • "nw" (North West)
  • "sw" (South West)
  • "ne" (North East)
  • "se" (South East)
Default value: "ne"
Example: <jsflot:flotChart legendPosition="sw" />
Legend Color
Choose the color of the legend background

Attribute: legendColor
Possible values: Any valid HTML Color value
Default value: Determined at Render Time.
Example: <jsflot:flotChart legendColor="#FE57AB" />
Chart Line Options
Fill Lines
Determines if the lines should be filled (Area Chart)

Attribute: fillLines
Possible values:
  • true
  • false
Default value: false
Example: <jsflot:flotChart fillLines="true" />
Show Lines
Choose if the lines are shown

Attribute: showLines
Possible values:
  • true
  • false
Default value: true
Example: <jsflot:flotChart showLines="false" />
Show Data points
Determines if the data points is displayed

Attribute: showDataPoints
Possible values:
  • true
  • false
Default value: false
Example: <jsflot:flotChart showDataPoints="true" />
Chart Dimension
Height
Determine the height (pixels) of the graph.

Attribute: height
Possible values: Any Integer Number
Default value: 300
Example: <jsflot:flotChart height="450" />
Width
Determine the width of the graph.

Attribute: width
Possible values: Any Integer Number
Default value: 600
Example: <jsflot:flotChart width="750" />
Chart Tooltip Options
Show Tooltip
Determines if the chart has a tooltip for the data points

Attribute: showTooltip
Possible values:
  • true
  • false
Default value: false
Example: <jsflot:flotChart showTooltip="true" />
Tooltip Position
Determines the position of the tooltip

Attribute: tooltipPosition
Possible values:
  • "nw" (North West)
  • "sw" (South West)
  • "ne" (North East)
  • "se" (South East)
Default value: "ne"
Example: <jsflot:flotChart tooltipPosition="sw" />
Values are se, ne, sw or nw
Follow Mouse
Determines if the tooltip follows the mouse pointer

Attribute: tooltipFollowMouse
Possible values:
  • true
  • false
Default value: false
Example: <jsflot:flotChart tooltipFollowMouse="true" />
JSFlot Live Demonstration
JSFlot is a JavaServer Faces (JSF) component library that uses the JavaScript framework Flotr to draw charts. The charts are drawn in the browser using JavaScript and JSON notation, and as such no bitmap or vector graphics are passed from the server to the client, meaning that the browser reads, renders and displays the charts using only the JSON data points passed into the draw JavaScript function.

The main advantages of this approach is less overhead on the server side (parsing and rendering of data, as well as less time spent with drawing and passing a bitmap file (JPEG, GIF, PNG, etc) from the server to the browser.

The JSFlot charting library is simple to install, easy to configure and easy to use in your custom applications.

Help support the development of JSFlot and the hosting of the Live Demo.
Generated Chart
Manual Line Chart
Manual Pie Chart
Manual Bar Chart
Manual Bubble Chart
Manual Candlestick Chart
»
View Tag Useage
»
View Backing Bean code Useage
»
View Chart Data Code (From the JSFlot project)
JSFlot is Copyright 2009 to Joachim Haagen Skeie. Current version demoed: 0.5.0 (Mercurial Revision 3).