Home > javafx > JavaFX – LineChart

JavaFX – LineChart


JavaFX 1.2 introduces new Chart APIs. Here we discuss about how to plot line chart using LineChart API.

For creating a chart, we need to create following instance

Note: Pie chart is an exception. In this case we don’t need to create instance of Series. Series is required only for X-Y chart types.

Lets implement a Line-Chart which updates its data dynamically. In this case a CPU monitor is simulated by generating random data from java class. The data is generated in a java Thread. The data is sent to JavaFX using a listener interface so as to update the chart. The notification is done via Event Dispatch Thread.

Update: Sample using live CPU and Memory information is available here.

For Applet mode, click on above image

For standalone mode

Create an instance of Series to plot chart for CPU usage of user, system and idle:


    var cpuLineChartSeries : LineChart.Series[] [
        LineChart.Series name: "User" },
        LineChart.Series name: "System" },
        LineChart.Series name: "Idle" }
    ];

Create an instance of Chart and associate the Series with this chart:


    var cpuLineChart = LineChart {
        
        title: "CPU Monitor"
        legendSide: Side.TOP
        showSymbols: false
        
        data: cpuLineChartSeries
        
        xAxis: NumberAxis {
            lowerBound: 1
            upperBound: 10
            tickUnit: 1
            label: "Minitues"
            tickMarkLength: 10
        }

        yAxis: NumberAxis {
            lowerBound: 0
            upperBound: 100
            tickUnit: 20
            label: "CPU %"
            tickMarkVisible: false
        }
        
        height: height
        width: width
    }

A simple UpdateListener interface is created. Which will be used to update data from java to javafx. Dummy CPU data is generated by CPUData class. The update is performed via Event Dispatch Thread using SwingUtilities.invokeLater( <Runnable> ).


    /**
     * Update listeners via Event Dispatch Thread
     */
    SwingUtilities.invokeLater(new Runnable() {
        public void run() {
            updateListener.updateCPU(user, sys, idle);
        }
    });

This update notification is handled in the JavaFX class and we can insert the data in chart as shown below.


    public override function updateCPU(user : Integer, sys : Integer, idle : Integer) {
        
        insert LineChart.Data 
            xValue: cpuIndex
            yValue: user
        into cpuLineChartSeries[0].data;

        insert LineChart.Data {
            xValue: cpuIndex
            yValue: sys
        into cpuLineChartSeries[1].data;

        insert LineChart.Data {
            xValue: cpuIndex
            yValue: idle
        into cpuLineChartSeries[2].data;

        cpuIndex += 1;
    }

When the index reaches the upper-bound, we can adjust the lowerBound and upperBound attributes of X-Axis, so as to shift the chart towards left. Also we may remove the initial chart data which are not visible.

Update:

As noted in comments section below, there is some Memory-Leak when we try to continuously update the bounds. Updation of bounds triggers updation of ticks and Skin related code of Label. For now instead of NumberAxis I have used a custom NoTickNumberAxis which supress the tick updates.


class NoTickNumberAxis extends NumberAxis {
    override function updateTickMarks() : Void {

    }
}

Try it out and let me know feedback!

Source:

var dzone_url = “http://blogs.sun.com/rakeshmenonp/entry/javafx_linechart&#8221;;
var dzone_style = ‘2’;

digg_skin = ‘compact’;
digg_window = ‘new’;

Advertisements
Categories: javafx Tags: , ,
  1. Gesiel Mota
    June 23, 2009 at 6:04 AM

    cool!!!

  2. Nick
    June 23, 2009 at 7:07 AM

    Great post!
    What would happen if you did not use the Event Dispatching Thread but call updateListener.update() directly?

  3. GeekyCoder
    June 23, 2009 at 8:11 AM

    I wonder if JavaFX has serious memory leak. In less than 3 mins, the application run up to 100mb and then gradually increase in memory in Windows Vista.
    I notice that at 102,532kb, every time one minimise and then restore it, there is a increase of 4 to 8 kb memory consumption.
    What has gone wrong ?

  4. June 23, 2009 at 9:17 AM

    @Gesiel Mota Thanks!

  5. June 23, 2009 at 9:19 AM

    @Nick Its to avoid thread synchronization issues. JavaFX code executes on EDT. The java code is executing on another thread, so we update the data from EDT so that it won’t cause any synchronization issues.

  6. June 23, 2009 at 9:23 AM

    @GeekyCoder Thanks a lot.. I did some basic investigation.. its due to rendering of ticks which triggers a lot of code related to Skin when bounds of x-axis is updated. I suppressed tick-update code and it looks stable. I’ll do some further investigation.

  7. June 23, 2009 at 9:06 PM

    Too cool 🙂

  8. August 13, 2009 at 12:13 PM

    Nice work!
    One little bug is in CPUMonitor.fx: it should be
    cpuIndex += 1;
    if(cpuIndex >= cpuLineChart.xAxis.upperBound) {

    }
    or you’ll get those "jumps" after the first time, upperBound is reached.

  9. August 17, 2009 at 9:58 PM

    @M. Rohr Thanks! I have incorporated the change.

  10. kalyan
    November 18, 2009 at 3:48 AM

    ThankYou Menon!…
    U done a greatJob!man……
    please send me line3d,area3d,column2d,column3d charts urgently!….

  11. November 18, 2009 at 3:58 AM

    @kalyan Thanks! Are you looking for any specific example? How-To docs will be good start..
    http://javafx.com/docs/howto/Charts-Tutorial.jsp
    http://javafx.com/learn/howto.jsp
    Let me know if you need any further help..

  12. Thomas
    December 8, 2009 at 1:12 AM

    Seems like the memory leak is still there. Even if I suppress updates with NoTickNumberAxis the app runs out of memory after a while. if I profile it it seems to be a float value that increases until the bitter end. Anyone knows if this will be fixed in future releases ?
    / Thomas

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: