Faust. In search of happiness

Composite Design Pattern in Python

2013-02-14T07:57:00.000-08:00

The structure of the composite design pattern, how it will look in Python and a succinct solution for example a console menu, that contain menu items, each of which could be a menu.

Design patterns have as their explicit supporters, as well as numerous critics. Supporters see them as almost a silver bullet that elegantly solves existing problems of the complexity in projects written in OOP languages, like Smalltalk, C++, Java. Critics attribute this to the limitations of the OOP languages themselves and prove their elegant solutions in functional programming languages.

But is it worth to use Design Patterns in Python that has the properties of both groups?

Below I give an example of using Composite pattern in Python, but i am almost sure that the same functionality can be implemented in a functional style. If You know how, it will be interesting to see your examples.

In classical literature you can see the structure of the pattern like:

But why use interfaces in python? We will use the simpler structure:


class Leaf:
    def do_this(self):
        pass

class Composite(Leaf):
    def do_this(self):
        pass
 
    def add_item(self):
        pass

It looks too easy. To be able to feel any benefit here is an example of the console menu development:


class MenuItem():

    def __init__(self, name, action):
        self.name = name
        self.action = action

    def __str__(self):
        return self.name

class Menu(MenuItem):

    def __init__(self, name):
        MenuItem.__init__(self, name, self.show_menu)
        self.items={}

    def add_item(self, item):
        self.items[len(self.items) + 1] = item

    def show_menu(self):
        choice = -1
        while choice:
            cls()
            print(self)
            choice = read_number()
            if choice in self.items:
                self.items[choice].action()

    def __str__(self):
        res_str = self.name + ':\n0: Exit'
        for i in self.items.keys():
            res_str += str.format('\n{}: {}', i, self.items[i].name)
        return res_str

# rest part of the code is auxiliary
def cls():
    print(80*'\n')

def read_number(text = ''):
    INP='>>'
    text += '\n' + INP if text else INP
    str = ''
    try:
        str = input(text)
        return int(str)
    except ValueError:
        press_enter("Error value: '{}'! Enter please the number".format(str))
        return -1

def press_enter(str = ''):
    str += '\nPress Enter'
    input(str)

if __name__ == '__main__':
    main_menu = Menu('Main')
    main_menu.add_item(MenuItem('A', lambda : press_enter('A')))
    main_menu.add_item(MenuItem('B', lambda : press_enter('B')))
    sub_menu = Menu('Submenu')
    sub_menu.add_item(MenuItem('Sub D', lambda : press_enter('D')))
    sub_menu.add_item(MenuItem('Sub E', lambda : press_enter('E')))
    main_menu.add_item(sub_menu)
    main_menu.show_menu()

You can also download full source: compositeDP.py

Integration Time Series Visualization Cubism.js in SmartGWT

2012-08-24T23:59:00.001-07:00

This article demonstrates the integration JS library Cubism.js in SmartGWT application. Provides examples of configuration and guidelines for the project preparation to integration.
I assume that you are familiar with SmartGWT, so I will not describe this framework. It is better to focus on the task - integrate graphics library visualization to SmartGWT.
Cubism.js it is JavaScript Library with realtime time series visualization support. It based on the D3 library. Cubism.js library supports two types of charts: horizon and comparison.

So, let's start.

First of all, we need to ensure the availability of library from GWT hosted page. If this is not done, then JS debugger will constantly says "the library not found" and therefore nothing will work.

Loading JS libraries into the project

Download libraries from github cubism.v1.js, d3.v2.js and place its into webapp directory of the yours project;

Add two lines to the file of your project_name.gwt.xml:


<script src="d3.v2.js"></script>
<script src="cubism.v1.js"></script>

Add two lines to the file of your project


<script type="text/javascript" language="javascript"
            src="d3.v2.js"></script>
<script type="text/javascript" language="javascript"
            src="cubism.v1.js"></script>

Start your Application server and verify that the files are available at URL.

Write a JSNI method

Now that connected all the JS libraries, we can begin programming JSNI. The code for the JSNI method:


public native void drawCharts() /*-{
    var context = $wnd.cubism.context()        
        .serverDelay(this.@full.class.Name::serverDelay) 
        .clientDelay(this.@full.class.Name::clientDelay)
        .step(this.@full.class.Name::step)
        .size(this.full.class.Name::width);

    var chartDiv = "#" + this.@full.class.Name::chartId;
    var jsonMetrics = eval(this.@full.class.Name::getMetrics()());

    var metrics = [];
    var self = this;

    function createMetric(name, metricIndex)
    {
        var metric = context.metric(function (start, stop, step, callback)
        {

            var jsonPoints = self.@full.class.Name::getPoints(IDD)(metricIndex,
                    start.getTime(), stop.getTime());
            try
            {
                var json = jsonPoints ? eval("tmp=" + jsonPoints) : null;
            }
            catch (e)
            {
                alert(e + jsonPoints);
            }
            callback(null, json);
        }, name);
        metrics.push(metric);
        return metric;
    }

    var selection = $wnd.d3.select(chartDiv)
            .call(function (div)
            {
                div.append("div")
                        .attr("class", "axis")
                        .call(context.axis().orient("top"));
                div.append("div")
                        .attr("class", "rule")
                        .call(context.rule());
            });
    for (var i = 0; i < jsonMetrics.length; i++)
    {
        var jsonMetric = jsonMetrics[i];
        var metricI = createMetric(jsonMetric.label, jsonMetric.metricIndex);
        var horizonI;

        if (jsonMetric.metricUnit != 'PERCENTAGE')
        {
            horizonI = context.horizon();
        }
        else
        {
            horizonI = context.horizon()
                    .format($wnd.d3.format(".2%"));
        }
        selection.call(function (div)
        {
            div.datum(metricI);
            div.append("div")
                    .attr("class", "horizon")
                    .call(horizonI);
        });
    }
    // On mousemove, reposition the chart values to match the rule.
    context.on("focus", function (i)
    {
        $wnd.d3.selectAll(".value")
                .style("right", i == null ? null : context.size() - i + "px");
    });
}-*/;

A little explanation. This code create and initialize a Cubims context:


var context = $wnd.cubism.context()        
    .serverDelay(this.@full.class.Name::serverDelay) 
    .clientDelay(this.@full.class.Name::clientDelay)
    .step(this.@full.class.Name::step)
    .size(this.@full.class.Name::width);

Where


this.@full.class.Name::serverDelay,
this.@full.class.Name::clientDelay,
this.@full.class.Name::step,
this.@full.class.Name::width

are fields of class.
Here we customize the div id. This is necessary so that we can use multiple charts on one page:


var chartDiv = "#" + this.@full.class.Name::chartId;

Here we obtain a chart metrics from java:


var jsonMetrics = eval(this.@full.class.Name::getMetrics()());

Java method getMetrics generates JSON structure:


public String getJSONMetrics(List metrics)
{
    String s = "[";
    MetricDisplaySummary metric;
    for (int i = 0; i < metrics.size(); i++)
    {
        metric = metrics.get(i);
        s += " {label:'" + metric.getLabel() + "',metricIndex:" + i
            + ",metricName:'" + metric.getMetricName() + "',metricUnit:'"
            + metric.getUnits() + "'},";
    }
    s += "]";
    return s;
}

Cubism request periodically a data with 'step' interval:


var jsonPoints = self.@full.class.Name::getPoints(IDD)(metricIndex,
        start.getTime(), stop.getTime());

Constantly calling this method, Cubism provides visualization of data in real time. Note the method signature - cubism requests data for the period from "start" to "stop". The data will look more beautiful if in this period will be at least one point on the "step" interval.
The last point about build the graph:


for (var i = 0; i < jsonMetrics.length; i++)
{
    var jsonMetric = jsonMetrics[i];
    var metricI = createMetric(jsonMetric.label, jsonMetric.metricIndex);
    var horizonI;

    if (jsonMetric.metricUnit != 'PERCENTAGE')
    {
        horizonI = context.horizon();
    }
    else
    {
        horizonI = context.horizon()
                .format($wnd.d3.format(".2%"));
    }
    selection.call(function (div)
    {
        div.datum(metricI);
        div.append("div")
                .attr("class", "horizon")
                .call(horizonI);
    });
}

In this loop shows you how you can customize each metric separately, including to set the height, colors, units, etc. So in your hands have a full control of the graph building and you can use all library visualization features.

Written above is enough to integrate Cubism graphs in SmartGWT. I will share experiences, how to make this code more concise. GWT developers recommend to use JSNI code very sparingly. In this example JSNI used except a plot building also to initialize the metrics and data acquisition. The result is a need to write additional code. Much more practical to implement in your project getting metrics and data via REST API in JSON format. Then your JSNI code will be able to get the data yourself, as most JS visualization libraries involves obtaining data this way. And once implementing REST API + JSON, you get rid of binding in the java code to a specific JS library and can easily replace visualization library if necessary.

References:

Cubism.js: http://square.github.com/cubism;
JSNI Coding Basics: https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI;
SmartGWT documentation: http://www.smartclient.com/product/documentation.jsp.

Using third-party JS libraries in SmartGWT

2012-08-23T22:52:00.001-07:00

Although GWT frameworks and include it their words "richest set of GWT UI components", in fact, it turns out, for example, that their ability to visualization a very, very limited or practically absent in the free version (SmartGWT). As a result, finding the desired functionality in the libraries of JavaScript, in sight seeing such wonderful things as Raphaël and D3.
In fact, it turns out that the use of Smart GWT's extensive server-side components are not as easy as expected. How to do this is described below.

First, came the idea to use HtmlFlow, especially since this class supports the method:


setEvalScriptBlocks(Boolean evalScriptBlocks)

After futile attempts, i found information that this method is not suitable for our purposes.

JSNI - JavaScript Native Interface best suited for this task. In short, you create a native Java method and conclude your JavaScript code in a special comments:


public static native void drawChart(String chartId) /*-{
    ... your code ...
}-*/;

Inside the method, you can access to class fields, using the signature:


obj.@className::fieldName

Also you can access to static and instance class methods:


[instance-expr.]@class-name::method-name(param-signature)(arguments)

I want to mention one more important thing. Your JSNI JavaScript code will be slightly different from the standard JS code that may need to use $wnd to access window object and $doc to access document object. If you get a JavaScript error on the page, "JavaScript library is not found", even though it has access from WEB-server - this is exactly the case.

Another detail - you can not use java arays even primitive types like String [] or int [] in your JSNI code. It is unclear why the developers are not yet implemented this feature. Instead it is proposed to use JsArrays:


native JsArray getNativeArray() /*-{
    return [ { x: 0, y: 1}, { x: 2, y: 3}, { x: 4, y: 5}, ];
}-* /;

or can write method, that also return JSON structure, for example:


public String getJSONPoints(int metricIndex, long start, long stop)
{
    Collection<Double> points = pointsStorage
        .get(metricIndex)
        .getValues(start, stop);
    String s = "[";
    for (Double point : points)
    {
        s += point + ",";
    }
    s += "]";
    return s;
}

and then in JavaScript:


var jsonPoints = eval(this.@class-name::getPoints(IDD)(metricIndex, 
        start.getTime(), stop.getTime()));

Knowing these basics will allow to write JSNI code. Writing JSNI methods is a powerful technique, but developers recommend used it sparingly.

References:

HtmlFlow: http://www.smartclient.com/smartgwt/javadoc/com/smartgwt/client/widgets/HTMLFlow.html;
JSNI presentation;
JSNI Coding Basics: https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI

Comparison of JavaScript Data Visualization Libraries

2012-06-05T19:11:00.001-07:00

In my previous review Choice Free JavaScript Data Visualization Library was considered more also 20 popular among developers JavaScript solutions for charts. In addition to a short description and a graphic example each library was considered from a perspectives of the licensing, visualization technology, HTML5 support and capability of the integration with GWT. In this review for Clarity these and additional characteristics combine in a matrix.

The intention of this comparison is to show some examples of JavaScript Data Visualization libraries with their different features.

Another important aspect which should be considered in the comparison is the support from community (i.e. # of users/developers/commits in last month, etc.) for that JS charting library. Although it is hard to gather this kind of information, I think it is the most valuable for the final decision.

Table of Javascript Data Visualization Libraries

	Chart types by category	HTML5 canvas capable (fallback method)	Size	GWT support	Dependency on other js libs	Mobile friendly	Level of interactiveness	License	Can incorporate custom graphics (background images, icons)	Largest Sites currently using	Project health (mailing list traffic, Stack Overflow questions)	Formats supported	Interesting features
arcadiaCharts	line, area, pie, donut, bar, column, scatter, xy, logarithmic scale charts, time plot	Yes	variable JavaScript Version - 9,7 Mb GWT Version - 3,6 Mb	Yes	No	No	hovers and follows	ArcadiaCharts license	Yes		Latest realease Jan-13-2012	png	apply color and style, Axis types, CSV data import
Cubism.js	realtime series	Yes	78,5 Kb	No	D3	No	hovers and follows	Apache License	No		7 commits , 20 wiki messages in last month		scalable, effective (each pixel encodes a distinct point in time), data-source agnostic
D3	arc, polar area, gantt, timelines and timing, sankey, candlestick, data table, hypergraph	Yes	109 Kb	No	No	No	hovers and follows	BSD license	No		6 commits, 30 new wiki messages, 1796 search results and 179 new topics on stackoverflow in last month		a large number of solutions for data visualization
Dojo GFX	bar, line, pie, bubble, candleStick, area, scatter, high-low, column, stacked, clustered and spider	No	variable, from 31 Kb up to 3,7 Mb	Yes	No	Yes	hovers and follows	modified BSD license/ the Academic Free License version 2.1	No		16 search results on stackoverflow. Books: Dojo: The Definitive Guide, Practical Dojo Projects, Learning Dojo, etc.		supports gauges, openLayers maps and geo charting
dygraphs	area, bar, candlestick, line	Yes	69 Kb	No	No	Yes	hovers, follows and zooming	MIT	Yes	Integrated Space Weather Analysis System, Eutelsat, 10gen MongoDB Monitoring Service	34 search results and 1 new topics on stackoverflow in last month	png	Supports error bands around data series, can intelligently chart fractions, customizable click-through actions
Flot	bars, lines, points, filled areas, time series, pie, stacked charts any combinations of these, in the same plot and even on the same data series	Yes	core size is 37 Kb, plugins vary in size	Yes, gflot	jQuery	Yes, all iOS and most Android devices	legends, hovers and drilldowns, panning, zooming, mouse tracking, automatically redraw when window is resized	MIT/BSD	Yes		873 search results and 39 new topics on stackoverflow and 25 new topics on groups in last month	jpg, png	using various symbols for points, multiple axis plotting prerendered images and many other
Flotr	histograms, lines, points, pie, candle sticks, radar, markers	No	67.4 Kb	No	Prototype Javascript Framework	No	hovers and follows	MIT	No		60 search results and 2 new topics on stackoverflow in last month, available only alpha version	png	easy to learn syntax
Flotr2	bar, line, candlestick, area, scatter, whisker, bubbles, timeline, time, pie, radar	Yes, (IE support with FlashCanvas and excanvas)	variable, from 31 Kb up to 656 Kb	No	No	Yes, built for performance and includes touch events / multi touch	select, zoom, pointer tracking, hovers, robust internal event system	MIT	Yes		10 earch results and 2 new topics on stackoverflow in last month	jpg, png	extensible plugin framework, tuned for performance. JSON api, programmable for interactivity
Google Chart Tools	pie, scatter, gauge, geo, combo, line, bar, area, candlestick	Yes	works on the principle "chart as service"	Yes	No	Yes	hovers and follows	Terms of Service.	No		135 search results and 8 new topics on stackoverflow in last month
gRaphaël	pie, bar,line, dot	No	g.raphael.js - 10 Kb, g.pie.js - 4 Kb, g.bar.js - 8 Kb, g.line.js - 4 Kb, g.dot.js - 2.5 Kb	Yes	Raphaël	No	hovers and follows	MIT	No		108 search results and 5 new topics on stackoverflow in last month		small JavaScript library
Highcharts	line, spline, area, areaspline, column, bar, pie and scatter	No	311 Kb	Yes	No	Yes	hovers, follows and zooming	highcharts license	Yes		1001 search results and 118 new topics on stackoverflow in last month	jpg,png, pdf, svg	rich in its capabilities library
Humble Finance(library are no longer supported)	two 2d data sets which share an axis	Yes	up to 3.7 Mb	No	Prototype and Flotr	No	hovers, follows and zooming	MIT	No		3 search results on stackoverflow		this tool lends itself well to the display of financial data
Envision.js	real-time, timeSeries, finance, custom (fractal)	Yes	up to 1.3 Mb	No	Flotr2	No	hovers, follows and zooming	MIT	No		5 new topics on groups in last month		Allows you to create dynamic and interactive HTML5 visualizations
JavaScript InfoVis Toolkit	area, bar, pie, treemap, sunburst, icicle, spaceTree, rGraph, hyperTree	Yes	308 Kb	Yes	No	Yes	hovers and follows	MIT	No		76 search results and 3 new topics on stackoverflow in last month		a large number of solutions for data visualization
jqPlot	bar, line, area, xy, scatter, combo, pie, donut, column, logarithmic scale charts, time plot	Yes	variable. Core size is 172 Kb, with all additional plugins up to 493 Kb	No	jQuery	Yes. There are plugins for mobile support	hover, highlighting, legends, click to turn toggle series on/off, tooltips, etc	MIT/GPL v2	Yes	Wikimedia	active project with 73 forks.. 526 search results and 55 new topics on stackoverflow, 52 new topics on groups in last month	png	chart types like Mekko, bubble, pyramid, funnel and block charts. Ability to drag and drop points. Automatic trend line calculations
jQuery Sparklines	line, bar, tristate, discrete, pie charts, bullet graphs	No	up to 119 Kb	No	jQuery	No	form of tooltips, mouseover highlighting and click interaction	New BSD License	No		25 search results and 3 new topics on stackoverflow in last month		plugin for generate sparklines (small inline charts)
jQuery Visualize	bar, area, pie, line	Yes	24,2 Kb	No	jQuery	Yes	hovers and follows	MIT	Yes		32 search results on stackoverflow		visualize is one of the 12 enhancement-driven widgets that accompanies on the book Designing with Progressive Enhancement
milkchart	bar, line, scatter, column, pie, donut	Yes	Minified is at 25 Kb	No	Mootools	Yes	legends	MIT	No		8 search results on stackoverflow	png	simple and small. Takes a Table element or JSON data
RGraph	bar, bi-polar,line, pie, donut, Gantt, Funnel, Waterfall, gauge, progress bars, meter, radar, scatter radial scatter, rose	Yes	variable up to 830 Kb	No	No	Yes	tooltips, annotating, context, menus, resizing, zoom	RGraph license	Yes		Latest realease June-01-2012, 58 search results and 6 new topics on stackoverflow in last month	png	many interesting types of charts, good documentation
Rickshaw	area, lines, bars, scatterplot	No	variable up to 712 Kb	Yes	D3	No	renderers, legends, hovers, range selectors, etc.	MIT	No		9 search results and 2 new topics on stackoverflow in last month		works with real-time data
Timeplot	time series	No	161 Kb	Yes	No	No	hovers and follows	BSD	No		16 search results and 1 new topics on stackoverflow in last month		interactive time series plots and overlay Timeline event files over them

Choice Free JavaScript Data Visualization Library

2012-05-28T20:11:00.000-07:00

Anyone who has ever had to deal with the data, understand the importance of visualization. One thing to show the user a table with dozens of rows and fields, and quite another visualize this data in a form of the chart. The great advantage of the chart, that it can be interactive - the ability to recognize the values of the point under mouse pointer, also zooming range of interest and other goodies.
Here a review of popular JavaScript libraries for drawing charts, that do not require Flash and can be used free of charge.

WEB Visualiztion Techonologies

Main technologies used for visualization:

solutions based on proprietary Adobe Flash (formerly Macromedia Flash) multimedia platform (requires special software installed on the client side);
solutions based on Vector Markup Language (VML). Mainly to support IE 5.0+ browsers family;
solutions based on Scalable Vector Graphics (SVG) in combination with the Javascript language allows you to create interactive charts. All major modern web browsers have a support for SVG and can render markup directly, including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari;
solutions based on HTML5, that in addition to the SVG support also allows you to draw directly on the canvas.

Since there are many javascript solutions for graphics, the purpose of this article is to consider only those that popular among developers.
For completeness, here is a list of libraries that have been considered, but excluded for various reasons:

PlotKit - has not been updated for more than 5 years;
Chronoscope - website not available;
Ortho - no interactive examples;
FusionCharts - no free versions;
ZingChart - commercial;
Protovis - is no longer under active development. Developers recommend switching to D3.js;
tickerplot - has not been updated for more than 2 years;
HumbleFinance - these charts are no longer supported. Developers recommend to use Envision.js;

So, lets review:

JavaScript Data Visualization Libraries

Dojo GFX

Dojo GFX is a cross-browser 2D vector graphics API that enables development of rich graphic web application on desktop and mobile without having to deal with the browser's native graphics technologies.
Expected support the HTML5 since version 1.8 in Dojo DND. There is a project tatami, aims to integrate the Google Web Toolkit (GWT) and the DOJO framework.

gRaphaël

gRaphaël’ based on Raphaël graphics library. Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. There is porting raphael4gwt and gwt-wrapper for raphael.

Google Chart Tools

A Chart as service. A chart requires three libraries:

The Google JSAPI API
The Google Visualization library
The library for the chart itself.

These libraries are loaded using two <script> links in your page code. Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions). The Google Chart Tools API provides GWT bindings to the Google Chart Tools.

jqPlot

jqPlot is an open source project by Chris Leonello. Plotting and charting plugin for the jQuery Javascript framework. jqPlot uses the HTML5 canvas element for drawing plots, for IE 6 - 8, it relies on Google's excanvas library. There are plugins for mobile support. Supports many types of interactiveness: hover, highlighting, legends, click to turn toggle series on/off, tool tips, etc. Project dual licensed under the MIT and GPL version 2 licenses. A large number of different types of graphs and more than 90 examples. Numerous chart types like Mekko, bubble, pyramid, meter gauge, funnel and block charts. Has no integration with GWT. Ability to drag and drop points, automatic trend line calculations.

Data-Driven Documents is very powerful solution released under BSD license. It has a lot of plugins on almost all occasions.D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as CSS3, HTML5 and SVG. Has no integration with GWT (used JSNI to exchange data at a higher level between the Java and the JavaScript code).

Flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary data sets on-the-fly client-side. The plugin based on HTML5 and works with most modern browsers (the excanvas Javascript emulation helper is used for IE < 9). A focus is on simple usage, attractive looks and interactive features like zooming and mouse tracking. Supported bars, lines, points, filled areas, time series, pie, stacked charts any combinations of these, in the same plot and even on the same data series. Released under the MIT/BSD Licenses. Exist GFlot project, which is a GWT adaptation of Flot.

Flotr

Flotr is a javascript plotting library based on the Prototype Javascript Framework (version 1.6.0.2 at the moment) and inspired by Flot (written by Ole Laursen). Canvas HTML is emulated by ExplorerCanvas, a javascript that let’s you handle VML the same way as HTML Canvas. Flotr is released under the MIT License. Has no integration with GWT.

Flotr2

Flotr2 is a library for drawing HTML5 charts and graphs. It is a branch of flotr which removes the Prototype dependency and includes many improvements. Features: mobile support, framework independent, extensible plugin framework, custom chart types, FF, Chrome, IE6+, Android, iOS, lines, bars, candles, pies, bubbles.Has its own license. Has no integration with GWT.

Rickshaw

It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc.
Built on d3.js Rickshaw is free and open source, available under the MIT license. Rickshaw can show interactive real-time data with the ability to work with the timeline. Exist rickshaw-gwt wrapper.

Timeplot

Web Widget for Plotting Time Series. Timeplot is a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them (with the same data formats that Timeline supports). Timeplot is open source software and is licensed under the BSD license. The timeline widget has a GWT wrapper.

JavaScript InfoVis Toolkit

Tthe JavaScript InfoVis Toolkit uses the HTML5 Canvas element for plotting and animating graphs.Very nice graphics. The project seems to develop a one person: Nicolas Garcia Belmonte. Gwt-graph project will provide Graph drawing canvas for GWT projects.

RGraph

RGraph is a charts library that uses Javascript and HTML5 to draw and supports over twenty different types of charts. Using the new HTML5 canvas tag, RGraph creates these charts inside the web browser using Javascript, meaning quicker pages and less web server load. RGraph is free to use on non-commercial websites such as personal blogs, educational, or charity sites. For use in commercial projects will have to pay. Has no integration with GWT. Many interesting types of charts and good documentation. Levels of interactiveness: tooltips, annotating, context menus, resizing, zoom + lots more. More information is in the docs.

arcadiaCharts

arcadiaCharts is a JavaScript charting component for the usage in web based environments. For download available GWT and JavaScript library versions. Supported chart-types are: line, area, pie, donut, bar, column, scatter, xy, logarithmic scale charts, time plot. Features: Apply color and style, Interactivity, Axis types, CSV data import.You can use ArcadiaCharts for free for commercial use on a "give and take" basis. In return for the free use we ask you for a link back to website on the page displaying the chart. There is html5 support.

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. Each example displayed below takes just 1 line of HTML or javascript to generate. The plugin was written by Gareth Watts for Splunk Inc and released under the New BSD License. Has no integration with GWT.

dygraphs

Dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. Plots time series without using an external server. Lightweight (69kb) and responsive. Displays values on mouseover, making interaction easily discoverable. Dygraphs supports area, bar, line and candlestick charts. Compatible with the Google Visualization API. There is currently no GWT wrapper around Dygraphs, however there is a class that can be used to easily load Dygraphs into the browser.

Highcharts

Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types. Free for Non-commercial, for use in commercial projects will have to pay. One of the richest library in its capabilities. Highcharts-gxt/gwt is the official Highchart-gwt/gxt adapters blog.

jQuery Visualize

The Filament Group's jQuery plugin for creating accessible charts & graphs from table elements using HTML 5 Canvas. Used a technique for creating accessible charts and graphs that uses JavaScript to scrape data from an HTML table and generate bar, line, area, and pie chart visualizations using the HTML5 canvas element. This technique provides a simple way to generate charts and it is accessible to people who browse the web with a screen reader or other assistive technology, or with browsers that don't fully support JavaScript or HTML5 Canvas. The plugin itself is licensed for free distribution with MIT and GPL licenses.Last update was 2 years ago. Has no integration with GWT.

Milkchart

This library will generate a graph similar to Microsoft Excel. All of the graphs use shared options from the Base class: Column, Bar, Line, Scatter, Pie. There is no area chart. It's all based on Mootools underneath. Used 100% HTML5′s Canvas element, no fallback. MilkChart is released under the MIT license. Has no integration with GWT. You could save the chart as PNG. Simple and small. Takes a Table element or JSON data.

Envision.js

Envision.js is a visualization toolkit for for creating fast, dynamic and interactive HTML5 visualizations. Supports next types of charts: real-time, timeSeries, finance, custom (fractal). Features include: data preprocessing for performance, an event mediator for re-usable interactive functionality, CSS and JS templates which provide a good starting place and cross browser support. It has a touch / mobile support. Has no integration with GWT.

Cubism.js

Very interesting graphs with real time visualization support. Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better real time dashboards, pulling data from Graphite, Cube and other sources. Cubism is available under the Apache License on GitHub. Has no integration with GWT. There is html5 support.

Conclusion

Among the visualization libraries there are the trend towards to HTML5 technologies for drawing charts. Therefore, for the long term, it is recommended to select library that supports HTML5. Commercial projects should pay attention to the libraries: D3, Envision.js, jQuery Visualize, Flot, Flotr2, jqPlot, arcadiaCharts and JavaScript InfoVis Toolkit, because they have attractive licensing policy.
Separately, I would like to mention libraries with GWT support: Dojo GFX, gRaphaël, Google Chart Tools, Flot, Rickshaw, Timeplot, JavaScript InfoVis Toolkit, arcadiaCharts and Highcharts.

To be continued

Comparison of the specific features of each library:
Comparison of JavaScript Data Visaulisation Libraries.