Area Charts in Iceberg Charts

Posted on March 11, 2018 by felixzacat

It is now possible to create area charts in Iceberg Charts that look something like this :

area1

This area chart behaves pretty much like a linear XY-chart with the area to the X-axis filled in.

The code looks something like this :

It is pretty much the same as any standard XYCharts. All you have to do is is to set an Area object with a transparancy color onto the XYDataSeries like this :

xyDataSeries.setArea(new Area(new Color(12, 233, 3, 80)));

That’s all there is to it! It is important to add transparancy to the color or the chart will lose its effectiveness. You can checkout out the code in the com.frontangle.ichart.main.test.area package.

Also, by adding the area type ‘STACKED’ to your area object like this :

xyDataSeries.setArea(new Area(new Color(12, 233, 3, 80),Area.AreaType.STACKED));

..your area chart will become a ‘stacked’ area chart (provided all the xy data series are also ‘stacked’ ). A stacked area chart is where the area between the series are filled in. A series cannot criss cross with another series as that would defeat the stacked nature. Here is an example I created which uses immigration by different regions to Australia.

areachart-stacked

Iceberg charts version 1.2.0 is out now!

For all your Swing, Java, Java2D charting needs, simply add this to your maven file and start using it straight away!


Posted in Iceberg Charts | Tagged , , | Leave a comment

Mandelbrot Set in Java

Posted on March 12, 2017 by felixzacat

Mandelbrot Set in Java with Iceberg Charts

The Mandelbrot Set is one of the most famous images in all of mathematics. It is a set of complex numbers which do not escape when applied to a simple methematical formula. You can read more about it on Wikipedia.

To write this in Java it is basically the algorithm, where each x and y value is checked against the simple formula x^2 + y^2 < c. (where c in our case is 5) .

while (x * x + y * y < 5 && iterations < max) {
double x_new = x * x – y * y + c_re;
y = 2 * x * y + c_im;
x = x_new;
iterations++;
}

We have a max iteration, where we consider that if the equation still hasn’t been fulfilled at the max iteration then the point will remain bounded. If it stays bounded then we consider it part of the set, and we add it to our chart set :

Out XYDataSeries is just a an XY series of one pixel square, with no line connectors. All we are doing is plotting out all these values once we have finished going through the iteration.

 

This creates a chart that looks like this :

mand1

That looks pretty simple and straight forward. What if we want to do colors as well? If we assign a different color to an iteration that escapes after a particular number of iterations we can get some pretty cool shading. Eg. if our iteration escapes after only 5 iterations we could have a light red, and if it escapes after 999 iterations then we could use a dark red.

The following code creates a number of XY data series based on the number of possible iterations. For each iterations a different color is used.

This produces a colorful and beautiful chart that looks like this :

mand2

Pretty cool, huh?

These two examples can be found in the Iceberg Charts Project as TestDataXY_Mandelbrot1.java and TestDataXY_Mandelbrot2.java.

Download Iceberg Charts Here

 

 

 

 


Posted in Iceberg Charts | Tagged , | 1 Comment

The Problem with Extjs these days

Posted on February 7, 2017 by felixzacat

I really like Extjs. But I have found myself struggling with Extjs in recent times and questioning the overall philosophy and direction of the framework.

Configuration over convention?

There is this sense to me that Extjs is becoming too over-configurable. I feel the more Extjs becomes configurable, the less control a developer has in debugging any problems, navigating the code flow, and generally understanding what the hell is going on.

It seems that Extjs is pushing for less to be done programatically, and more to be done via configuration parameters. This is a double edged sword. On the one hand this allows for elegant one line solutions to complex issues, and on the other hand provides an unbearable debugging experience for developers.

Along with the thousands of configuration options there is also wizz bang magic like ‘refs’. If you ever had the misfortune of using refs with Extjs4.x global controllers (ie. ‘Ext.app.Controller’) you will know what i mean. Global controllers, ie ‘Ext.app.Controller’, are probably the worst Extjs idea ever. If you combine them with ‘refs’ you will find your generated ‘getter’ methods pulling back unexpected components; particularly if you have multiple instances of a dialog type.

Store proxies have also allowed AJAX calls to become highly configurable. With the exception of a few situations, proxies have mostly caused me a lot of pain due to the lack of transparency in what is going on. How I miss the days of the simple AJAX call!

Meaningful Errors..

In my opinion, the developers of Extjs have done a poor job in implementing appropriate exception handling.

Quite often I get an error being thrown, deeply embedded in some for-loop close to extjs’ core, that looks like this :

Uncaught TypeError: Cannot read property ‘substring’ of undefined(…) in parseNamespace()

It took me hours to figure out what the problem was.

My ‘items’ config object in one of my components was referencing another xtype which doesn’t exist or was accidently misspelled.

items : {
xtype: ‘myComponennt’ //misspelled!!
}

I have had this same error on at least 3 other occasions, and each time i have been stumped for at least an hour. Sometimes its because of a misspelling, or sometimes its because I forgot to add it to the requires.

But seriously, how hard can it be to implement extjs so that it throws an error like : Error: ‘myComponennt’ does not exist as an xtype ?

And this is what really annoys, these useless errors that extjs delivers. There is a complete sense of laziness in the extjs code error handling. Common programming mistakes and typos should be intercepted quickly and an exception thrown before it stumbles over some ‘undefined’ deep in some nest of loops.

It’s the kind of stuff that is probably scaring a lot of new developers away from Extjs. Imagine a newbie who forgets a ‘require’ or mistypes an ‘xtype’, and think of how offputting it must be for this newbie to be trawling deep through extjs code, when all he/she wants is to see a meaningful error like ‘Error : xtype : abc could not be found ’.

Almost every extjs developer has almost been on the verge of tears when getting this error :

Uncaught TypeError: Cannot read property ‘added’ of undefined(…)

which is thrown from some onAdded() function deep at Extjs’ core. What could it possible mean? What is it trying to tell you?

What it is trying to tell you is that you did not call addParent() at the end of you initComponent function. This is so frustrating and so common. Can’t they bake it into the extjs code that addParent() is called implicitly?

Anyway, I needed to have this rant. I have been back on an extjs4.x project for a while now, maybe on extjs5/6 they have fixed up some of these issues.


Posted in extjs | Tagged , | Leave a comment

Disadvantages of using GIT over other version control systems

Posted on November 26, 2016 by felixzacat

 

 

 

 

 


Posted in Uncategorized | Leave a comment

Simple Navigation Menu in AngularJS

Posted on May 5, 2016 by felixzacat

I struggled for about half a day trying to get some sort of menu system in AngularJS working. It seems very trivial, and in jQuery it is a breeze, but with angularJS it took a bit of searching and fiddling about and a bit of stackoverflow love .

I wanted something like this :

temp

I have a number of fixed DIVs (or list items. It doesn’t really matter).

On a mouseOver event the style changes via adding and removal of a class. In the same way, a click should change the style to a third style. The CSS looks like this :

 

This is what the HTML looks like. Note the event handlers for click and mouseOver.

This is what the Javascript looks like :

 

You can see the JSFiddle here :

https://jsfiddle.net/zxjg3tpo/10/

 

 

 

 

 

 

 

 

 

 


Posted in angularjs, JavaScript | Tagged , | 1 Comment

Iceberg Charts Beta Release

Posted on March 6, 2016 by felixzacat

Iceberg Charts finally has had its first release.

This beta release can be found here :

http://frontangle.com/icharts/

or from Github here :

https://github.com/oliverwatkins/Iceberg-Charts/releases

It’s taken me many hours to come up with this charting library that attempts to compete with JFreechart and other swing charting libraries out there. My aim is to offer a better charting experience with more types of charts, and a friendlier API than what is out there.

Here is a  quick introduction :

 

Getting Started..

Here is the most basic way of creating a chart with Iceberg Charts. Although more complex constructors are usually used to customize a chart, some basic constructors can help you get started very quickly.

The chart you will see will look like this :

Iceberg Charts automatically fits the data onto a chart with an x-axis and y-axis that have a scale which represents the data in a way which is easy on the eye.

Many Series..

Let’s have a look at more than one data series. Let’s create a number data lists and use a different constructor.

If you run this code then you should see something like this :

In an XY Chart data series differ from each other usually by color and/or line style. Iceberg Charts chooses a style for you. Of course everything in Iceberg charts is configurable, including the data series styles, but one of Iceberg Charts principles is ‘ease of use’ and a number of simple constructors are exposed where Iceberg Charts does most of the work for you.

 

 

 

 


Posted in Iceberg Charts, Swing | Tagged , , | Leave a comment

First AngularJS Application

Posted on February 2, 2016 by felixzacat

I created my first AngularJS application. It is a simple application that allows a user to create a pie chart.

pie

You can have a look at it in action if you click on this link :

http://blue-walrus.com/pie-chart-creator/

I wanted a third party library to create the pie chart so I looked at what angular plugins were out there and I came across the following angularjs component :

http://jtblin.github.io/angular-chart.js/

(The angular-chart library is actually just a wrapper for a javascript library called Chart.js http://www.chartjs.org/)

I also wanted a javascript color chooser so I found a component called jscolor (http://jscolor.com/)

 

Along with the angularjs source, all these source files were added to my index file like so :

 

Part 1. Pie component HTML

The pie chart application requires a central canvas where the chart is displayed. According the angular-chart documentation the chart is added to a canvas by means of setting correct class values, and adding a number of custom directives (eg. chart-legend, chart-labels etc)

this is how we add a chart in a canvas:

 

This is wrapped in a div with an angularjs controller directive (which i will call PieCtrl).

Note also the canvasTitle. It uses a binding point for the chart title (the double curley braces).

 

Part 2. Pie Item component in HTML

Next we create the HTML for the adding of slices. This is more complex and and is made up of three different areas (or divs). All three divs are under the same controller however.

DIV: PieItemsTitle

The pie item title div has an input which maps to the chartName.

ng-model = “slice.newSliceName”

 

DIV: PieItemsAdd

The pieItemsAdd is a form with three fields; the name, color and value of the slice. All these field values use the ng-model directive to map onto a data value in the controller.

 

ng-model = “slice.newSliceName”

ng-model = “slice.newSlicePercent”

ng-model = “slice.newSliceColor”

 

I also made use of ng-minlength to force a user to enter a value for some of the fields before the form could be submitted.

 

 

DIV: PieItemsList

Lastly I have the PieItemsList which is a div that uses an ng-repeater to iterate over all the objects in the slices array.

 

 

Javascript

Part 1. PieItemsCtrl

The PieItemsCtrl is the controller that sits behind the Pie Items component. It basicall handles all the events that are triggered in the DIVs

 

Part 2.

Part 3.

 

 

Part 6. Header

 


Posted in Uncategorized | 1 Comment

Extjs Widget Factory

Posted on May 13, 2015 by felixzacat

What every good extjs application needs is a Widget Factory.

Over time our project team gravitated naturally to this pattern, and suspect it is a common pattern in the community.

Let me break it down..

When developing an extjs GUI you might have a label or other component configured in your panel like this:

 

You will find your code getting very bloated and messy if you only do things this way, and it is also difficult to perform global changes at once, like for example changing the margins for all your textfields at once; You have to go to every individual hard-coded item and change them in the config code. It’s a pain in the butt.

Configuring all your GUI code this way creates all sorts of frightening looking highly indented extjs hierarchies, so the natural way of thinking is to refactor out these configurations into some kind of a factory.

Lets start thinking about factories..

You might define a class called WidgetFactory and make it a singleton :

 

And then you could add a createLabel method to the factory. Calling it from the previous example, the code would look cleaner :

 

That implementation of the method is obviously a bad idea because a specific order is required for the method parameters. It is much cleaner to bundle this up into an anoymous config object like so :

 

The implementation of this createLabel method in our factory might look like this.

 

But it’s still not good enough. What happens when config arguments are missing? We will get all sorts of ‘undefined’ problems. The method wants to do something with those three values.

For these values, it is therefore better to define a default value, and then overwrite it if it appears in the config object.

The improved method :

 

Refactoring this then gives us even cleaner code :

 

Our widget factory contains around seven factory methods including createTextField, createTextArea, createComboBox, and we expect to add more in the future.
The textfield factory method is used very often, so the method is huge as a number of default values need to be set.

Here is a similar createTextField example :

 

What is interesting to note about this method is that xtype can also be passed in as a configuration parameter. This means that the widget type can be changed from what the method is intending to return. This is useful for things like DateField which is a subtype of TextField; you are in effect creating a different xtype but using the same configuration as a textfield.

Also, some parameters can feed into the default value of other parameters, eg clazz.

Update :

SenchaMitch has an even cleaner solution. Using the Ext.apply() method, a default configuration can be defined, and then later have its values overwritten when a new config object comes in :

 

 

 

 

 

 

 


Posted in extjs | Tagged , | 2 Comments

Swing Bubble Charts

Posted on April 26, 2015 by felixzacat

Iceberg Charts also allows you to create bubble charts. Here’s an example I created :

bubble1

The chart displays all the states in the USA comparing ‘Gun Ownership’ against ‘Homicide Rate’. I got this data from Wikipedia, and set up the code like this :

There are a few important things you need to consider :

Factor

You need to give a bubble chart a factor to multiply the magnitude by so that it scales nicely with the X or Y axis. If we did not have a factor then population variable (ie. the circle size) will be far too big to get any decent graph. It needs to be scaled down (in this case by 0.0000001), so that the circles are a nice size in the graph.

Coloring

The color is blended with red, and also has some transparancy. This helps identify bubbles that might be hidden behind other bubbles. I may look into customizing the bubble coloring/gradients etc.

Multi Series

Multi-series bubble charts are possible. The following example shows how you can do two series bubble charts :

bubble2

 

 

 


Posted in Iceberg Charts, Swing, Swing Components | Tagged , , , | Leave a comment

Java Swing Equation Builder

Posted on March 29, 2015 by felixzacat

 

A few years ago back in 2006 I created a Swing component called ‚Equation Builder‘. It builds equations in the natural visual style that you get when writing on paper.

You can build some pretty cool looking equations like this :

ebimage001

Elements can be dragged and dropped onto empty nodes in the canvas in the middle.

When you first open up the application it looks like this :

ebimage002

A node represented by the gray circle is displayed in the middle. You can drag node operators (displayed in the table on the right), or inputs (table on the bottom) onto this node. You can also replace it with a constant or drag other calculations onto this node (second tab on the bottom).

 

Let’s drag an addition operator onto the root node :
ebimage003

 

Because an addition operator is binary, the single empty node gets replaced with two empty nodes.

We can replace one these empty nodes with another operator, division, which is also a binary operator however visually it is up-down rather than left-right :

ebimage004

 

You get the picture..! Just keep adding operators and the thing expands and expands.

 

A node can also be replaced with an input (aka variable) defined in the table. Or a node can also be replaced with a constant (aka a number). You just have to click on the empty node and a textfield appears. You can then add any kind of number to the equation.

ebimage005

 

There is even an implementation of the sum operator (Sigma). Here is an arbitrary example:

ebimage006

 

I also have a power operator implemented :

ebimage007

 

 

Hmm… it needs a bit more work, but still it looks OK. (I have no idea what those gray squares are L )

 

I think technically this program is pretty interesting.

What is most interesting to me is that the whole equation is rendered using GridBagLayout, which shows how powerful GridBagLayout can be. Everytime you replace an empty node, you are removing the empty node object, keeping the grid bag constraints, and with these grid bag constraints, adding a new object in ist place.

There is a type of Model-View relationship in the elements. There are the visual object, all extending from Node.java, and there is a model hierarchy which shadows this visual model. Elements in this hierarchy all extends from CalculationObject.

I think ist kind of redundant having these two hierarchy models. I’m not sure what I was thinking those years ago.

Anyway this project needs a lot of love. So if you want to contribute on Github go for it! If you feel like you could use this component please let me know. I would be really interested to know how someone would use this component.

 

The project can be downloaded here :

https://github.com/oliverwatkins/calculation_project

 


Posted in Swing, Swing Components | Tagged , , | Leave a comment
THREE_COLUMN_PAGE