Curve Fitting

I have to admit I did not work out all the Math myself for the curve fitting I found a great article on CodeProject “Draw a Smooth Curve through a Set of 2D Points with Bezier Primitives”. Then ported the code to Java from C# and wired it up to our AreaChart. My version is not the most efficient as we do not yet have the correct API hooks to make it easy but we are thinking about how to add them. The current implementation extends AreaChart and overrides the layoutPlotChildren() method. That method creates all the nodes need for the chart and populates the node properties of the Series and Data items. So I can call super to let the standard code do its job then look at the Path elements for the stroked Path and filled Path that make up the AreaChart. I can then replace the LineTo elements with CubicCurveTo with the new control points calculated with the maths from the article. This way everything like auto ranging and animation still works as expected. The only waste is we are creating all the LineTo object and then throwing them away to replace them with CubicCurveTo objects. So here is the code that does this:

    /** @inheritDoc */
    @Override protected void layoutPlotChildren() {
        super.layoutPlotChildren();
        for (int seriesIndex=0; seriesIndex < getDataSize(); seriesIndex++) {
            final XYChart.Series<Number, Number> series = getData().get(seriesIndex);
            final Path seriesLine = (Path)((Group)series.getNode()).getChildren().get(1);
            final Path fillPath = (Path)((Group)series.getNode()).getChildren().get(0);
            smooth(seriesLine.getElements(), fillPath.getElements());
        }
    }

    private int getDataSize() {
        final ObservableList<XYChart.Series<Number, Number>> data = getData();
        return (data!=null) ? data.size() : 0;
    }

    private static void smooth(ObservableList<PathElement> strokeElements, ObservableList<PathElement> fillElements) {
        // as we do not have direct access to the data, first recreate the list of all the data points we have
        final Point2D[] dataPoints = new Point2D[strokeElements.size()];
        for (int i = 0; i < strokeElements.size(); i++) {
            final PathElement element = strokeElements.get(i);
            if (element instanceof MoveTo) {
                final MoveTo move = (MoveTo)element;
                dataPoints[i] = new Point2D(move.getX(), move.getY());
            } else if (element instanceof LineTo) {
                final LineTo line = (LineTo)element;
                final double x = line.getX(), y = line.getY();
                dataPoints[i] = new Point2D(x, y);
            }
        }
        // next we need to know the zero Y value
        final double zeroY = ((MoveTo) fillElements.get(0)).getY();

        // now clear and rebuild elements
        strokeElements.clear();
        fillElements.clear();
        Pair<Point2D[], Point2D[]> result = calcCurveControlPoints(dataPoints);
        Point2D[] firstControlPoints = result.getKey();
        Point2D[] secondControlPoints = result.getValue();
        // start both paths
        strokeElements.add(new MoveTo(dataPoints[0].getX(),dataPoints[0].getY()));
        fillElements.add(new MoveTo(dataPoints[0].getX(),zeroY));
        fillElements.add(new LineTo(dataPoints[0].getX(),dataPoints[0].getY()));
        // add curves
        for (int i = 1; i < dataPoints.length; i++) {
            final int ci = i-1;
            strokeElements.add(new CubicCurveTo(
                    firstControlPoints[ci].getX(),firstControlPoints[ci].getY(),
                    secondControlPoints[ci].getX(),secondControlPoints[ci].getY(),
                    dataPoints[i].getX(),dataPoints[i].getY()));
            fillElements.add(new CubicCurveTo(
                    firstControlPoints[ci].getX(),firstControlPoints[ci].getY(),
                    secondControlPoints[ci].getX(),secondControlPoints[ci].getY(),
                    dataPoints[i].getX(),dataPoints[i].getY()));
        }
        // end the paths
        fillElements.add(new LineTo(dataPoints[dataPoints.length-1].getX(),zeroY));
        fillElements.add(new ClosePath());
    }

CSS Styling

This is just the standard AreaChart in terms of the nodes its drawing with. The first part of the CSS is styling the main chart node and its background. We are using a dark gray texture as the background, adding a 1px black border and a drop shadow. Also adjusting the padding a little.

.chart {
    -fx-background-image: url("background.png");
    -fx-padding: 15 25 15 15;
    -fx-border-color: black;
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.8) , 10, 0.0 , 0 , 2 );
}

Next we are looking at the background of the plot area, this is the rectangular area bordered by the two axis. We are using two background images here one a colored glow and the second is transparent white gridlines. The first image is sized to “cover” the whole area of the plot background and the second is tiled to fill. We also add black borders to the top and right to complete a box around the plot area including the two axis lines.

.chart-plot-background {
    -fx-background-image: url("chart-background.png"), url("graph-gridlines.png");
    -fx-background-size: cover, auto;
    -fx-background-repeat: no-repeat, repeat;
    -fx-background-position: 0% 0%, 0% 100%;
    -fx-border-color: black black transparent transparent;
}

The line that connects the data points we are styling to be 2px wide and white.

.chart-series-area-line {
    -fx-stroke: white;
    -fx-stroke-width: 2px;
}

The filled area under the line we are styling with a linear gradient from white on the left to 100% transparent white on the right. We also use a blend mode to get the desired effect when blending with the colored background of the plot area.

.chart-series-area-fill {
    -fx-fill: linear-gradient(to right, white, rgba(255,255,255,0));
    -fx-blend-mode: OVERLAY;
}

Making the plot symbols for each data point white.

.chart-area-symbol {
    -fx-background-color: white;
}

Hiding the tick marks and changing the color of the axis lines to black

.axis {
    -fx-tick-mark-visible: false;
    -fx-minor-tick-visible: false;
    -fx-tick-length: 3;
    -fx-minor-tick-length: 0;
    -fx-border-color: transparent;
}
.axis:bottom {
    -fx-border-color: black transparent transparent transparent;
}
.axis:left {
    -fx-border-color: transparent black transparent transparent;
}

Styling the text labels on the axis so they are white with black shadow and a little larger than default.

.axis Text{
    -fx-fill: white;
}
.tick-mark {
    -fx-font-size: 10px;
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1 );
}

There you go that is all you need to take one of our standard charts and make it look completely different. Hopefully this will inspire some of you to try some exciting designs with JavaFX charts.

Source Code

The full Netbeans project and code including the maths is available here (CurveFittedChart.zip).

• Dynamic Data Support
• Animation
• Auto Ranging
• CSS Styling

There is a sample application called “Chart Sampler” that ships with JavaFX 2.0 Beta that shows some of what can be done with the new charts. Here are a few screen shots to tempt you to go and check it out

The remaining five types of charts are all meant to work with XY data. These charts are all subtypes of the XYChart base class…

The chart components included in JavaFX give developers an easy way to let the users of their applications visualize a wide variety of data. There are six kinds of charts supported in JavaFX 1.2:

Creating Charts in JavaFX

He then followed up with a blog populating a chart from a web service call. The important pieces are the following code blocks. The first here is what generates the Pie Chart data slices after the web service call succeeded:

function generateChartData(tg:TagInformation, done:Boolean):PieChart.Data[] {
    for (i in [0..<sizeof tg.tag]) {
        PieChart.Data {
            action: function() {
                showShopping = true;
            }
            label: tg.tag[i]
            value: tg.tagCount[i]
        }
    }
}

This function generateChartData simply returns a sequence of PieChart.Data instances. “for loop” expressions in JavaFX yield a sequence, one item for each iteration of the loop. So the generated sequence will be one PieChart.Data for each result in the tg.tag sequence.

This next block of code uses the HttpRequest class to fetch and parse the RSS feed from Del.icio.us. The only thing here that I might have done differently, is to have used the RSS APIs introduced in JavaFX 1.2 rather than hand rolling my own parsing code and using HttpRequest. First the code from the blog doing it the “long” way:

public class TagInformation {
    public var tag: String[]=[];
    public var tagCount: Integer[]=[];
    public var username: String = "javafx";  // for this sample it's javafx
    public-read var done = false;
    var url = bind "http://feeds.delicious.com/v2/rss/tags/{username}?count=4";
    var p: PullParser;
    var h: HttpRequest;
    init {
            h = HttpRequest {
                location: url
                onException: function(exception: Exception) {
                    exception.printStackTrace();
                }
                onInput: function(input) {
                    p = PullParser {
                        input: input
                        onEvent: function(event) {
                            if ((event.type == PullParser.END_ELEMENT)) {
                                if (event.qname.name == "title" and
                                    event.level == 3) {
                                   insert event.text into tag;
                                }
                                if(event.qname.name == "description" and
                                    event.level == 3){
                                   insert Integer.parseInt(event.text)
                                   into tagCount;
                                }
                            }
                        }
                    };
                    p.parse();
                    p.input.close();
                }
                onDone: function() {
                    Main.showtag = false;
                    done = true;
                }
            };
            h.start();
        }
    }

And now here is how I would have done it using the JavaFX 1.2 APIs. In JavaFX 1.2 we released some ATOM and RSS support. These classes are in the javafx.data.feed package.

public class TagInformation {
    public var tag: String[]=[];
    public var tagCount: Integer[]=[];
    public var username: String = "javafx";  // for this sample it's javafx
    public-read var done = false;
    var url = bind "http://feeds.delicious.com/v2/rss/tags/{username}?count=4";
    init {
		RssTask {
	        location: "http://feeds.delicious.com/v2/rss/tags/javafx?count=4"
	        interval: 1h
	        onItem: function(item) {
	            insert item.title into tag;
	            insert Integer.parseInt(item.description) into tagCount;
	        }
	        onDone: function() { done = true }
	    }.start();
    }
}

The only thing here that I found somewhat irritating and will get put on the bug list for the next release is that you must specify an interval for the RssTask, even if you won’t be polling. Expect this to change to some reasonable polling value as the default. Maybe 1 hour (as in this example) isn’t a bad default. 1 minute is a bit more extreme, but for the feed-junkies out there maybe that’s a better default.

As you can see, the code is much simpler using the feed APIs. I guess that’s a good thing . The RSS/ATOM feed APIs use the same basic programming model as HttpRequest — both extend from Task. Task’s have API for monitoring progress, canceling, starting, handling error condition, etc in a unified model. All asynchronous operations in JavaFX should extend from Task either directly or indirectly.

import javafx.stage.Stage;
import javafx.stage.Alert;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.chart.PieChart3D;

Stage {
    scene: Scene {
        height: 400
        width: 500
        content: PieChart3D {
            title: "Sample Pie"
            startAngle: 0
            data: [
                PieChart.Data { label: "Apples" value: 34 },
                PieChart.Data { label: "Oranges" value: 27 },
                PieChart.Data { label: "Bananas" value: 16 },
                PieChart.Data { label: "Grapes" value: 50 },
                PieChart.Data { label: "Cherries" value: 6 },
                PieChart.Data { label: "Strawberries" value: 5 },
                PieChart.Data { label: "Raspberries" value: 7 }
            ]
        }
    }
}

The JavaFX charts API is based on the idea of a “Visual Model” so each PieChart.Data represents a single slice of the pie so if you would like to add an action to one of the pie slices this can be done like this:

PieChart.Data {
    label: "Apples"
    value: 34 action:function(){Alert.inform("Clicked on Apples")}
}

Here is a web start link to try it out for your self

I think we delivered more in JavaFX 1.2 on the vision, but we still haven’t released the complete vision. JavaFX 1.2 was a lot of work, and we got a tremendous amount done, much of which was the hard work of engineering the lower levels of the scene graph and rendering pipelines, paving the way for some hopefully radical improvements in startup, footprint, and rendering speed over the next couple releases.

We also have released our first set of user interface controls and charts libraries which was really exciting. I think we’ve got a strong foundation upon which to build, and hopefully see a community start to grow around this work and build upon it as well.

Amy Fowler has done some amazing work on the layout engine for FX. When used correctly, the complexity of the code goes down and the performance goes up. We’re still learning a bit with these APIs as to how to best build apps, and learning some best practices around them. One of my favorites is using Panels.

We’re going to be blogging about all these things and more.

JavaOne, as usual, has been great for networking and meeting friends from throughout the industry. We had a nice meetup with Hans and Chet (who are at Adobe working on Flex) and my good friend Romain Guy (working on Android) and Ben Galbraith and Dion Almaer (Mozilla) and Joe Nuxoll, Carl Quinn, Dick Wall, and Tor Norbye (the JavaPosse).

It has also been great to get to see members of our team who are not local. I wanted to give a special shout-out to some of the people on our team that don’t usually “make the papers” — David Grieve who has stepped up and become our CSS guru; Paru Somashekar who has been helping fix all the bugs I put into the platform; and Stuart Marks who’s feedback on the scenegraph and control APIs has been invaluable.

Now its time for a little rest and relaxation to get ready for the next major push for JavaFX 1.3!