Moving from JFreeChart to JavaFX with JavaFX Chart Extensions
Download as PPTX, PDF4 likes4,543 views
The document discusses transitioning from JFreeChart to JavaFX Charts, highlighting their differences and advantages. It presents a case study on porting the Wildfire Management Tool to JavaFX, emphasizing the use of specific features and implementations provided by the JavaFX Chart Extensions library. The document includes technical details, code snippets, and links to associated projects for further exploration.
![XYPolygonAnnotation
Draws a polygon on an XYChart
• XYAnnotations
• Add to XYChart subclass
• Call layoutAnnotations()
• XYPolygonAnnotation(…)
• Layer foreground/background
• Optional line width and fill colors
• add(XYPolygonAnnotation)
• CSS: chart-polygon-annotation
// XYChart subclass snippet...
private XYAnnotations annotations;
public void addPolygonAnnotation(double[] xyPoints) {
annotations.add(new XYPolygonAnnotation(
xyPoints, 2.0, Color.BLACK, Color.DARKORANGE), Layer.BACKGROUND);
}](https://image.slidesharecdn.com/tthf4jqwusjnsyta1qtf-signature-1e82db7c169b6e8bbbd1aeee6b958937c12a28a5e07be8f69d865ed967257868-poli-151027052117-lva1-app6892/85/Moving-from-JFreeChart-to-JavaFX-with-JavaFX-Chart-Extensions-16-320.jpg)
Moving from JFreeChart to JavaFX with JavaFX Chart Extensions
- 1. Moving From JFreeChart To JavaFX Charts with JavaFX Chart Extensions JavaOne 2015 Session: Moving Enterprise Data From JFreeChart To JavaFX Charts Bruce Schubert, Independent Software Architect and Developer Emxsys - Emergency Management Expert Systems (emxsys.com) Projects: https://bitbucket.org/emxsys
- 2. Enterprise Data Shared by the users of an organization; often plotted or graphed with JFreeChart JFreeChart • De facto standard, rich, mature library • Free, open source; pay for the Developer Guide • Forum support by author • Comprehensive collection of chart types • Swing-based JavaFX Charts • Cool, new, native • JavaFX-based • Missing many key features that are found in JFreeChart
- 3. Case Study: WildfireFX Application Port the Wildfire Management Tool (WMT) to JavaFX https://bitbucket.org/emxsys/wildfire-management-tool https://bitbucket.org/emxsys/wildfirefx
- 4. Objective: Use JFree’s ChartViewer for Unique Chart Types ChartViewer included in the JFreeChart source distribution // Example: FXMLController snippet import org.jfree.chart.fx.ChartViewer; public class FXMLController implements Initializable { @FXML private AnchorPane pane; // A JFreeChart! private final SolarChart chart = new SolarChart("Solar"); @Override public void initialize(URL location, ResourceBundle resources) { pane.getChildren().add( new ChartViewer(chart)); } }
- 5. Objective: Port the “Haul Chart” to JavaFX Logarithmic scatter chart depicting wildland fire behavior • Logarithmic Axis • Major Gridlines • Subtitles • Value Markers • Annotations • Text • Lines • Polygons • Images
- 6. JavaFX Chart Extensions Library (Free!) Easier porting of JFreeChart charts to JavaFX Charts https://bitbucket.org/emxsys/javafx-chart-extensions
- 7. LogarithmicAxis Creates a Logarithmic XYChart • LogarithmicAxis • Pass to XYChart axis arguments • MajorLogGridlines • Add to XYChart subclass • Call layoutGridlines() • CSS: • chart-major-vertical-grid-lines • chart-major-horizontal-grid-lines final double MIN_X = 10d; final double MAX_X = 1000d; final double MIN_Y = 1d; final double MAX_Y = 100d; LogarithmicAxis xAxis = new LogarithmicAxis("Domain", MIN_X, MAX_X); LogarithmicAxis yAxis = new LogarithmicAxis("Range", MIN_Y, MAX_Y); LineChart chart = new LineChart(xAxis, yAxis, dataset);
- 9. Subtitle Extension Adds subtitle text to a chart • Subtitle • Add to Chart subclass • Call layoutSubtitle() • setSubtitle(“…”) • CSS Style: • chart-subtitle // Chart subclass snippet private Subtitle subtitle; public void setSubtitle(String text) { this.subtitle.setSubtitle(text); this.requestLayout(); }
- 10. Subtitle Implementation subtitleLabel is added to chart.getChildren() collection • getChildren() returns {titleLabel,chartContent,legend} • subtitleLabel added to children after titleLabel • layoutSubtitle() modifies chartContent’s size • FYI: getChartChildren() returns chartContent plotBackground subtitleLabel legend plotArea titleLabel yAxis xAxis chartContent
- 11. XYMarker Extension ValueMarkers highlight values with a line and label • XYMarkers • Add to XYChart subclass • Call layoutMarkers() • ValueMarker • Pos controls label layout • addDomainMarker() • addRangeMarker() • CSS Style: • chart-marker-line • chart-maker-label // XYChart subclass snippet private XYMarkers markers; public void addMinMaxMarkers(double maxX, double maxY) { markers.addDomainMarker(new ValueMarker( maxX, String.format("Max: %1$.1f", maxX), Pos.BOTTOM_RIGHT)); markers.addRangeMarker(new ValueMarker( maxY, String.format("Max: %1$.1f"", maxY), Pos.TOP_LEFT)); }
- 12. XMarkers Implementation Label placement controlled by Pos enum • Horizontal (range) marker labels • Anchored to left/right of graph • Placed above or below line • Vertical (domain) marker labels • Anchored to top/bottom of graph • Placed left or right of line • Tip: Create listeners on label’s width and height properties to trigger text layout • Label width and height are initially zero! BOTTOM_LEFT TOP_LEFT BOTTOM_LEFT TOP_LEFT TOP_RIGHT TOP_RIGHT BOTTOM_RIGHT BOTTOM_RIGHT
- 13. XYTextAnnotation Draws a label on an XYChart • XYAnnotations • Add to XYChart subclass • Call layoutAnnotations() • XYTextAnnotation(…) • Layer controls foreground/background • Pos controls label layout • add(XYTextAnnotation) • CSS: chart-text-annotation // XYChart subclass snippet... private XYAnnotations annotations; public void addTextAnnotation(double x, double y, String text) { annotations.add(new XYTextAnnotation( text, x, y, Pos.TOP_LEFT), Layer.FOREGROUND); }
- 14. XYImageAnnotation Draws an image on an XYChart • XYAnnotations • Add to XYChart subclass • Call layoutAnnotations() • XYImageAnnotation(…) • Layer controls foreground/background • Pos controls image placement • add(XYImageAnnotation) // XYChart subclass snippet... private XYAnnotations annotations; public void addImageAnnotation(double x, double y, String path) { Image image = new Image(getClass().getResourceAsStream(path)); annotations.add(new XYImageAnnotation( image, x, y, Pos.CENTER), Layer.FOREGROUND); }
- 15. XYLineAnnotation Draws a line on an XYChart • XYAnnotations • Add to XYChart subclass • Call layoutAnnotations() • XYLineAnnotation(…) • Layer foreground/background • Optional width and color • add(XYLineAnnotation) • CSS: chart-line-annotation // XYChart subclass snippet... private XYAnnotations annotations; public void addLineAnnotation(double x, double y, double x2, double y2) { annotations.add(new XYLineAnnotation( x1, y1, x2, y2, 2.0, Color.RED), Layer.FOREGROUND); }
- 16. XYPolygonAnnotation Draws a polygon on an XYChart • XYAnnotations • Add to XYChart subclass • Call layoutAnnotations() • XYPolygonAnnotation(…) • Layer foreground/background • Optional line width and fill colors • add(XYPolygonAnnotation) • CSS: chart-polygon-annotation // XYChart subclass snippet... private XYAnnotations annotations; public void addPolygonAnnotation(double[] xyPoints) { annotations.add(new XYPolygonAnnotation( xyPoints, 2.0, Color.BLACK, Color.DARKORANGE), Layer.BACKGROUND); }
- 17. background XYAnnotations Implementation chart.getPlotChildren() returns plotArea zero lines, gridlines, row fills • Annotation layers are Group objects added to plotArea children • Foreground: last entry in plot area • Background: first entry in plot area zero lines, gridlines, row fills zero lines, gridlines, row fills zero lines, gridlines, row fills plotContent foregroundplotArea
- 18. In Closing • JavaFX Chart Extensions project: • https://bitbucket.org/emxsys/javafx-chart-extensions • WildfireFX project: • https://bitbucket.org/emxsys/wildfirefx • Wildfire Management Tool project: • https://bitbucket.org/emxsys/wildfire-management-tool • Twitter: @Emxsys • Email: bruce@emxsys.com
Editor's Notes
- #2: Name Open source software developer. My company, Emxsys, make tools for firefighters to help predict the behavior of wildfires All my open source projects are hosted on Bitbucket - Emxsys
- #3: JFreeChart is a great tool for charting complex data Plethora of chart types David Gilbert, the author, has provided a comprehensive treatment for data presenation JavaFX is Cool! Perhaps the siren song of JavaFX has lured you into a “port” Sirens were mythical creatures—mermaids—that lured sailors to their deaths with their beauty. Whatever the reason, I’m here to share my experience porting a complex chart to JavaFX
- #4: I want to share my experience porting the WMT to JavaFX WMT is a modular NetBeans Platform application It computes the potential fire behavior of wildland fires from fuel models, terrain, and environmental data Data is presented in dials and charts for easy consumption by firefighters (not scientists!) My goal is to create a lightweight JavaFX application with a fire behavior simulation (a particle system) -- WildfireFX WildfireFX is a NetBeans, Maven-based project
- #5: My first objective is to use the Jfree ChartViewer for unique JFreeChart types, e.g.: Compass Plots Dial Plots Warning! The ChartViewer class is not included in the jfreechart-1.0.19.jar file! Thus it is not included in a maven dependency. You must add the source to your project. Example: Here’s typical FXMLController code snippet adding a ChartViewer Control (Node) to an AnchorPane
- #6: WMT has a “Haul Chart” used to display fire behavior data. Y-Axis: ROS, X-Axis: Heat Output Intersection: Flame Length and Fireline intensity As flame lengths increase from lower right: Haul men, haul equipment, haul retardant, haul everyone to safety My 2nd Objective in WildfireFX is to port the Haul Chart to JavaFX. Seems simple enough: it’s XY Scatter Chart - JavaFX has one of those… REVIEW SLIDE BULLETS Discovery: None of the listed features were supported by the ScatterChart! So I implemented them!
- #7: I created the Chart Extensions library to make porting of JFreeChart charts to JavaFX Charts easier. It adds subset of common JFreeChart functionality to JavaFX Charts It uses concepts and syntax similar (not identical) to JFreeChart The Bitbucket project Includes: Source JavaDoc and Wiki Demo application Issue tracker And this PowerPoint!
- #8: To create a logarithmic chart, simply create a logarithmic axis object and add it to an XYChart. To show major gridlines, you must subclass an XYChart and add a MajorLogGridlines object. You override the Chart’s layoutChildren() and call layoutGridlines() REVIEW SNIPPET
- #9: Here’s a class diagram depicting LogarithmicAxis implementation. Note the JavaFX NumberAxis class is final… I had to duplicate it as NumericAccess to implement
- #10: To add subtitles you must subclass a Chart and add a Subtitle object. You must override the Chart’s layoutChildren() and call layoutSubtitles()
- #12: To add value markers, you must subclass an XYChart and add a XYMarkers object You must override layoutPlotChildren() and call layoutMarkers() ValueMarkers are added to the X and Y axes with addDomainMarker() and addRangeMarker() Label placement controlled by Pos enum
- #13: Pos enum passed to addRangeMarker() and addDomainMarker() controls placement
- #14: To add annotations you must subclass an XYChart and add a XYAnnotations object You must override layoutPlotChildren () and call layoutAnnotations() All XY annotations are added with a call to add() Pos enum controls label placement relative to X,Y Layer enum controls foreground/background REVIEW EXAMPLE SNIPPET
- #15: To add annotations you must subclass an XYChart and add a XYAnnotations object You must override layoutPlotChildren () and call layoutAnnotations() All XY annotations are added with a call to add() Pos enum controls image placement relative to X,Y Layer enum controls foreground/background REVIEW EXAMPLE SNIPPET
- #16: To add annotations you must subclass an XYChart and add a XYAnnotations object You must override layoutPlotChildren () and call layoutAnnotations() All XY annotations are added with a call to add() Layer enum controls foreground/background REVIEW EXAMPLE SNIPPET
- #17: To add annotations you must subclass an XYChart and add a XYAnnotations object You must override layoutPlotChildren () and call layoutAnnotations() All XY annotations are added with a call to add() Layer enum controls foreground/background REVIEW EXAMPLE SNIPPET