Simple Pie Chart in React

Posted on January 2, 2019 by felixzacat

Oh boy, it’s been over a year since I last posted. Too much learning, and trying to keep my head above water with all that’s new in the javascript eco-system.

Anyway here is a very simple pie chart as a react component using SVG. If you don’t want to install a huge JS library just to get a simple pie chart, maybe just copy and paste this code.

It is based heavily on David Gilbertson wonderfully written A simple pie chart in SVG.

You use it as you would any other react component. There are two properties you pass in: its size (ie. radius) and an object which contains an array of the slices, which describe the percent and color.

			let slices = [
				{percent: 0.1, color: '#c1d138'},
				{percent: 0.7, color: '#7e97db'},
				{percent: 0.2, color: '#00ab6b'}
			]

			component = <PieChart slices={slices} width={150}/>

let slices = [

{percent: 0.1, color: '#c1d138'},

{percent: 0.7, color: '#7e97db'},

{percent: 0.2, color: '#00ab6b'}

]

component = <PieChart slices={slices} width={150}/>

Here is the code (note: in JSX and ES6):

 import React from "react";

export default class PieChart extends React.Component{

	constructor(props) {
		super(props)
	}

	render() {
		let viewBox=` -${this.props.width} -${this.props.width} ${this.props.width*2} ${this.props.width*2}`

		let transform = "rotate(0 0 0)"; //if you want it rotated a certain angle change the first number in the this transform object
		return (
			<div>
				<div>
					<svg width={this.props.width} height={this.props.width} viewBox={viewBox} transform = {transform}>
						{getPaths(this.props.slices, this.props.width)}
					</svg>
				</div>
			</div>
		);
	}
}

function getCoordinatesForPercent(percent) {
	const x = Math.cos(2 * Math.PI * percent);
	const y = Math.sin(2 * Math.PI * percent);
	return [x, y];
}

let cumulativePercent = 0;

const getPaths = (slices, size) => {
	let paths = [];

	slices.forEach(slice => {

		let [startX, startY] = getCoordinatesForPercent(cumulativePercent);

		cumulativePercent += slice.percent;

		const [endX, endY] = getCoordinatesForPercent(cumulativePercent);

		// if the slice is more than 50%, take the large arc (the long way around)
		const largeArcFlag = slice.percent > .5 ? 1 : 0;

		// create an array and join it just for code readability
		const pathData = [
			`M ${startX * size} ${startY * size}`, // Move
			`A ${size} ${size} 0 ${largeArcFlag} 1 ${endX * size} ${endY * size}`, // Arc (size is same as radius)
			`L 0 0`, // Line
		].join(' ');

		paths.push(<path d={pathData} fill={slice.color}/>)
	});
	return paths;
}

import React from "react";

export default class PieChart extends React.Component{

constructor(props) {

super(props)

}

render() {

let viewBox=` -${this.props.width} -${this.props.width} ${this.props.width*2} ${this.props.width*2}`

let transform = "rotate(0 0 0)"; //if you want it rotated a certain angle change the first number in the this transform object

return (

<div>

{getPaths(this.props.slices, this.props.width)}

</svg>

</div>

);

}

function getCoordinatesForPercent(percent) {

const x = Math.cos(2 * Math.PI * percent);

const y = Math.sin(2 * Math.PI * percent);

return [x, y];

}

let cumulativePercent = 0;

const getPaths = (slices, size) => {

let paths = [];

slices.forEach(slice => {

let [startX, startY] = getCoordinatesForPercent(cumulativePercent);

cumulativePercent += slice.percent;

const [endX, endY] = getCoordinatesForPercent(cumulativePercent);

// if the slice is more than 50%, take the large arc (the long way around)

const largeArcFlag = slice.percent > .5 ? 1 : 0;

// create an array and join it just for code readability

const pathData = [

`M ${startX * size} ${startY * size}`, // Move

`A ${size} ${size} 0 ${largeArcFlag} 1 ${endX * size} ${endY * size}`, // Arc (size is same as radius)

`L 0 0`, // Line

].join(' ');

paths.push(<path d={pathData} fill={slice.color}/>)

});

return paths;

}

Posted in Uncategorized | Tagged react, reactjs, svg | Leave a comment

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 :

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 :

	ArrayList<DataPoint> values = new ArrayList<DataPoint>();
	values.add(new DataPoint(5, 96));
	values.add(new DataPoint(58, 43));
	values.add(new DataPoint(101, 90));
	
	ArrayList<DataPoint> values2 = new ArrayList<DataPoint>();
	values2.add(new DataPoint(5, 1));
	values2.add(new DataPoint(58, 63));
	values2.add(new DataPoint(101, 290));

	ArrayList<DataPoint> values3 = new ArrayList<DataPoint>();
	values3.add(new DataPoint(5,6));
	values3.add(new DataPoint(58, 33));
	values3.add(new DataPoint(101, 77));
	
	XYDataSeries<DataPoint> xyDataSeries = new XYDataSeries<DataPoint>("alabama");
	xyDataSeries.dataPoints = values;
	xyDataSeries.setArea(new Area(new Color(173, 13, 213, 80)));

	XYDataSeries<DataPoint> xyDataSeries2 = new XYDataSeries<DataPoint>("maryland");
	xyDataSeries2.dataPoints = values2;
	xyDataSeries2.setArea(new Area(new Color(113, 213, 113, 80)));
	
	XYDataSeries<DataPoint> xyDataSeries3 = new XYDataSeries<DataPoint>("california");
	xyDataSeries3.dataPoints = values3;
	xyDataSeries3.setArea(new Area(new Color(12, 233, 3, 80)));
	
	ArrayList<XYDataSeries> ds = new ArrayList<XYDataSeries>();
	ds.add(xyDataSeries);
	ds.add(xyDataSeries2);
	ds.add(xyDataSeries3);
	
	XYChart chart = new XYChart("Multiple Area with opacity and overlap", "X Axis",
			"Y Axis", ds);

ArrayList<DataPoint> values = new ArrayList<DataPoint>();

values.add(new DataPoint(5, 96));

values.add(new DataPoint(58, 43));

values.add(new DataPoint(101, 90));

ArrayList<DataPoint> values2 = new ArrayList<DataPoint>();

values2.add(new DataPoint(5, 1));

values2.add(new DataPoint(58, 63));

values2.add(new DataPoint(101, 290));

ArrayList<DataPoint> values3 = new ArrayList<DataPoint>();

values3.add(new DataPoint(5,6));

values3.add(new DataPoint(58, 33));

values3.add(new DataPoint(101, 77));

XYDataSeries<DataPoint> xyDataSeries = new XYDataSeries<DataPoint>("alabama");

xyDataSeries.dataPoints = values;

xyDataSeries.setArea(new Area(new Color(173, 13, 213, 80)));

XYDataSeries<DataPoint> xyDataSeries2 = new XYDataSeries<DataPoint>("maryland");

xyDataSeries2.dataPoints = values2;

xyDataSeries2.setArea(new Area(new Color(113, 213, 113, 80)));

XYDataSeries<DataPoint> xyDataSeries3 = new XYDataSeries<DataPoint>("california");

xyDataSeries3.dataPoints = values3;

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

ArrayList<XYDataSeries> ds = new ArrayList<XYDataSeries>();

ds.add(xyDataSeries);

ds.add(xyDataSeries2);

ds.add(xyDataSeries3);

XYChart chart = new XYChart("Multiple Area with opacity and overlap", "X Axis",

"Y Axis", ds);

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.

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!

<dependency>
	<groupId>com.frontangle</groupId>
	<artifactId>iceberg-charts</artifactId>
	<version>1.2.0</version>
</dependency>

<groupId>com.frontangle</groupId>

<artifactId>iceberg-charts</artifactId>

</dependency>

Posted in Iceberg Charts | Tagged java, java2d, Swing | 1 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 :

		XYDataSeries series = new XYDataSeries(
				new UIPointSquare(Color.GRAY, 1), null, "");

1 2	XYDataSeries series = new XYDataSeries( new UIPointSquare(Color.GRAY, 1), null, "");

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.

		ArrayList values = new ArrayList();

		int width = 1000, height = 1000, max = 1000;
		
		double factor = 5.0;
		
		for (int y_pos = 0; y_pos < height; y_pos++) {

			for (int x_pos = 0; x_pos < width; x_pos++) {

				double c_re = (x_pos - width / 2) * factor/ width;

				double c_im = (y_pos - height / 2) * factor / width;

				double x = 0;
				double y = 0;

				int iterations = 0;

				/**
				 * Check how far x_pos, y_pos, whether it escapes, or is bounded to some degree
				 */
				while (x * x + y * y < factor && iterations < max) {
					double x_new = x * x - y * y + c_re;
					y = 2 * x * y + c_im;
					x = x_new;
					iterations++;
				}
				if (iterations < max)
					values.add(new DataPoint(x_pos, y_pos));
			}
		}

		XYDataSeries series = new XYDataSeries(
				new UIPointSquare(Color.GRAY, 1), null, "");

		series.dataPoints = values;

		XYChart chart = new XYChart("", "", "", series);
		chart.setSize(1000, 500);
		chart.rightOffset = 200;

		chart.setTitleFont(new Font("Ariel", Font.PLAIN, 24));
		chart.setTitle("Maths");

ArrayList values = new ArrayList();

int width = 1000, height = 1000, max = 1000;

double factor = 5.0;

for (int y_pos = 0; y_pos < height; y_pos++) {

for (int x_pos = 0; x_pos < width; x_pos++) {

double c_re = (x_pos - width / 2) * factor/ width;

double c_im = (y_pos - height / 2) * factor / width;

double x = 0;

double y = 0;

int iterations = 0;

/**

* Check how far x_pos, y_pos, whether it escapes, or is bounded to some degree

while (x * x + y * y < factor && iterations < max) {

double x_new = x * x - y * y + c_re;

y = 2 * x * y + c_im;

x = x_new;

iterations++;

}

if (iterations < max)

values.add(new DataPoint(x_pos, y_pos));

}

XYDataSeries series = new XYDataSeries(

new UIPointSquare(Color.GRAY, 1), null, "");

series.dataPoints = values;

XYChart chart = new XYChart("", "", "", series);

chart.setSize(1000, 500);

chart.rightOffset = 200;

chart.setTitleFont(new Font("Ariel", Font.PLAIN, 24));

chart.setTitle("Maths");

This creates a chart that looks like this :

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.

		int max = 100;
		int height = 1000;
		int width = 1000;

		int[] colors = new int[max];

		HashMap<Integer, XYDataSeries> map = new HashMap<Integer, XYDataSeries>();
		for (int i = 0; i < max; i++) {

			Color color = new Color(Color.HSBtoRGB(i / 256f, 1, i / (i + 8f)));

			XYDataSeries series = new XYDataSeries(new UIPointSquare(color, 1),
					null, "");

			series.dataPoints = new ArrayList();
			map.put(i, series);
		}
		XYDataSeries series = new XYDataSeries(
				new UIPointSquare(Color.BLACK, 1), null, "");
		series.dataPoints = new ArrayList();
		map.put(0, series);

		ArrayList values = new ArrayList();

		/**
		 * Analyse every pixel along X and Y
		 */
		for (int y_pos = 0; y_pos < height; y_pos++) {

			for (int x_pos = 0; x_pos < width; x_pos++) {

				double c_re = (x_pos - width / 2) * 5.0 / width;

				double c_im = (y_pos - height / 2) * 5.0 / width;

				double x = 0, y = 0;

				int iterations = 0;

				/**
				 * Check how far x_pos, y_pos, whether it escapes, or is bounded to some degree
				 */
				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++;
				}

				if (iterations < max) {

					XYDataSeries ser = map.get(iterations);
					ser.dataPoints.add(new DataPoint(x_pos, y_pos));
				}
			}
		}

		for (int i = 0; i < max; i++) {
			XYDataSeries d = map.get(i);
			if (d.dataPoints.size() == 0) {
				map.remove(i);
			}
		}

		ArrayList al = new ArrayList(map.values());

		XYChart chart = new XYChart("Maths is Fun!!", "Real Axis",
				"Complex Axis", al);

		System.out.println("point number " + values.size());

		chart.setSize(1000, 500);
		chart.rightOffset = 200;

		chart.setTitleFont(new Font("Ariel", Font.PLAIN, 24));
		chart.setTitle("Maths is Fun!");

int max = 100;

int height = 1000;

int width = 1000;

int[] colors = new int[max];

HashMap<Integer, XYDataSeries> map = new HashMap<Integer, XYDataSeries>();

for (int i = 0; i < max; i++) {

Color color = new Color(Color.HSBtoRGB(i / 256f, 1, i / (i + 8f)));

XYDataSeries series = new XYDataSeries(new UIPointSquare(color, 1),

null, "");

series.dataPoints = new ArrayList();

map.put(i, series);

}

XYDataSeries series = new XYDataSeries(

new UIPointSquare(Color.BLACK, 1), null, "");

series.dataPoints = new ArrayList();

map.put(0, series);

ArrayList values = new ArrayList();

/**

* Analyse every pixel along X and Y

for (int y_pos = 0; y_pos < height; y_pos++) {

for (int x_pos = 0; x_pos < width; x_pos++) {

double c_re = (x_pos - width / 2) * 5.0 / width;

double c_im = (y_pos - height / 2) * 5.0 / width;

double x = 0, y = 0;

int iterations = 0;

/**

* Check how far x_pos, y_pos, whether it escapes, or is bounded to some degree

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++;

}

if (iterations < max) {

XYDataSeries ser = map.get(iterations);

ser.dataPoints.add(new DataPoint(x_pos, y_pos));

}

for (int i = 0; i < max; i++) {

XYDataSeries d = map.get(i);

if (d.dataPoints.size() == 0) {

map.remove(i);

}

ArrayList al = new ArrayList(map.values());

XYChart chart = new XYChart("Maths is Fun!!", "Real Axis",

"Complex Axis", al);

System.out.println("point number " + values.size());

chart.setSize(1000, 500);

chart.rightOffset = 200;

chart.setTitleFont(new Font("Ariel", Font.PLAIN, 24));

chart.setTitle("Maths is Fun!");

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

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 java, Swing | 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 extjs, javascript | 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 :

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 :

.item {
    float: left;
    padding: 20px;
    margin:3px;
    width: 40px;
    background-color: green;
}
.hover {
    background-color: orange;
}
.clicked {
    background-color: blue;
}

.item {

float: left;

padding: 20px;

margin:3px;

width: 40px;

background-color: green;

}

.hover {

background-color: orange;

}

.clicked {

background-color: blue;

}

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

 <body ng-app="navTest" ng-controller="NavTestCtrl">
<div>
 <div class="item" ng-click="click($event, 1)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
1
 </div>
 <div class="item" ng-click="click($event, 2)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
2
 </div>
 <div class="item" ng-click="click($event, 3)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
3
 </div>
</div>
</body>

<div>

</div>

</div>

</div>

</body>

This is what the Javascript looks like :

var app = angular.module('navTest', [

]);

app.controller('NavTestCtrl', function ($scope, $location, $http) {

  $scope.click = function($event, position) {

    elem = angular.element($event.target);

    var e = angular.element($event.target.parentElement.children);
    e.removeClass("clicked");

    if (elem.hasClass("clicked")) {
      elem.removeClass("clicked")
    }else {
      elem.addClass("clicked")
    }
  };


  $scope.hoverIn = function($event){
    angular.element($event.target).addClass('hover')
  };

  $scope.hoverOut = function($event){
    angular.element($event.target).removeClass('hover')
  };
});

var app = angular.module('navTest', [

]);

app.controller('NavTestCtrl', function ($scope, $location, $http) {

$scope.click = function($event, position) {

elem = angular.element($event.target);

var e = angular.element($event.target.parentElement.children);

e.removeClass("clicked");

if (elem.hasClass("clicked")) {

elem.removeClass("clicked")

}else {

elem.addClass("clicked")

}

};

$scope.hoverIn = function($event){

angular.element($event.target).addClass('hover')

};

$scope.hoverOut = function($event){

angular.element($event.target).removeClass('hover')

};

});

You can see the JSFiddle here :

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

Posted in angularjs, JavaScript | Tagged angularjs, javascript | 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.

ArrayList<DataPoint> values = new ArrayList<DataPoint>(); values.add(new DataPoint(5, 96)); values.add(new DataPoint(58, 43)); values.add(new DataPoint(101, 90)); values.add(new DataPoint(135, 67)); values.add(new DataPoint(150, 70)); XYChart lineChart = new XYChart(values, "My Easy Example"); JFrame frame = new JFrame(); frame.add(lineChart); frame.setSize(700, 500); frame.setVisible(true);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  ArrayList<DataPoint> values = new ArrayList<DataPoint>();
  values.add(new DataPoint(5, 96));
  values.add(new DataPoint(58, 43));
  values.add(new DataPoint(101, 90));
  values.add(new DataPoint(135, 67));
  values.add(new DataPoint(150, 70));

  XYChart lineChart = new XYChart(values, "My Easy Example");

  JFrame frame = new JFrame();
  frame.add(lineChart);
  frame.setSize(700, 500);
  frame.setVisible(true);

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.

ArrayList<DataPoint> values = new ArrayList<DataPoint>(); values.add(new DataPoint(5, 30)); values.add(new DataPoint(10, 11)); values.add(new DataPoint(15, 14)); values.add(new DataPoint(20, 5)); values.add(new DataPoint(25, 8)); ArrayList<DataPoint> values2 = new ArrayList<DataPoint>(); values2.add(new DataPoint(5, 2)); values2.add(new DataPoint(10, 33)); values2.add(new DataPoint(15, 6)); values2.add(new DataPoint(20, 14)); values2.add(new DataPoint(25, 17)); ArrayList<DataPoint> values3 = new ArrayList<DataPoint>(); values3.add(new DataPoint(5, 130)); values3.add(new DataPoint(10, 74)); values3.add(new DataPoint(15, 67)); values3.add(new DataPoint(20, 22)); values3.add(new DataPoint(25, 68)); ArrayList<DataPoint> values4 = new ArrayList<DataPoint>(); values4.add(new DataPoint(5, 90)); values4.add(new DataPoint(10, 65)); values4.add(new DataPoint(15, 80)); values4.add(new DataPoint(20, 83)); values4.add(new DataPoint(23, 90)); XYDataSeries series = new XYDataSeries(values, "First"); XYDataSeries series2 = new XYDataSeries(values2, "Second"); XYDataSeries series3 = new XYDataSeries(values3, "Third"); XYDataSeries series4 = new XYDataSeries(values4, "Fourth"); XYChart lineChart = new XYChart("Many Series Example", "My X Axis", "My Y Axis", series, series2, series3, series4);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

  ArrayList<DataPoint> values = new ArrayList<DataPoint>();
  values.add(new DataPoint(5, 30));
  values.add(new DataPoint(10, 11));
  values.add(new DataPoint(15, 14));
  values.add(new DataPoint(20, 5));
  values.add(new DataPoint(25, 8));

  ArrayList<DataPoint> values2 = new ArrayList<DataPoint>();
  values2.add(new DataPoint(5, 2));
  values2.add(new DataPoint(10, 33));
  values2.add(new DataPoint(15, 6));
  values2.add(new DataPoint(20, 14));
  values2.add(new DataPoint(25, 17));

  ArrayList<DataPoint> values3 = new ArrayList<DataPoint>();
  values3.add(new DataPoint(5, 130));
  values3.add(new DataPoint(10, 74));
  values3.add(new DataPoint(15, 67));
  values3.add(new DataPoint(20, 22));
  values3.add(new DataPoint(25, 68));

  ArrayList<DataPoint> values4 = new ArrayList<DataPoint>();
  values4.add(new DataPoint(5, 90));
  values4.add(new DataPoint(10, 65));
  values4.add(new DataPoint(15, 80));
  values4.add(new DataPoint(20, 83));
  values4.add(new DataPoint(23, 90));

  XYDataSeries series = new XYDataSeries(values, "First");
  XYDataSeries series2 = new XYDataSeries(values2, "Second");
  XYDataSeries series3 = new XYDataSeries(values3, "Third");
  XYDataSeries series4 = new XYDataSeries(values4, "Fourth");

  XYChart lineChart = new XYChart("Many Series Example", "My X Axis", "My Y Axis", series, series2, series3, series4);

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 java, Swing, tutorial | 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.

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 :

<link rel="stylesheet" href="css/angular-chart.min.css">
<link rel="stylesheet" href="main.css">

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="lib/Chart.min.js"></script>
<script src="lib/angular-chart.min.js"></script>
<script src="lib/jscolor.min.js"></script>

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:

<div ng-controller="PieCtrl" id="PieChart">
    <div id="canvasTitle">{{chartTitle}}</div>
    <canvas id="pie" class="chart chart-pie" chart-legend="true" chart-data="data" chart-labels="labels"
            chart-colours="colours">
    </canvas>
</div>

<div id="canvasTitle">{{chartTitle}}</div>

<canvas id="pie" class="chart chart-pie" chart-legend="true" chart-data="data" chart-labels="labels"

chart-colours="colours">

</canvas>

</div>

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 ng-controller="PieItemsCtrl" id="PieItems">
    <div id="PieItemsTitle">
        <h3>Enter Chart Title Here : </h3>
        <input ng-model="chartName" type="text" ng-keyup="change()"/>
    </div>
    <div id="PieItemsAdd">
        <h3>Add Sections Here :</h3>
        <form name="form" class="css-form">
            <table>
                <tr>
                    <td>Name :</td>
                    <td><input name="newSlice" ng-model="slice.newSliceName" required ng-minlength=1 type="text"/>
                    </td>
                </tr>
                <tr>
                    <td>Value :</td>
                    <td><input name="newValue" type="number" integer required ng-model="slice.newSlicePercent"
                               type="text"/></td>
                </tr>
                <tr>
                    <td>Color :</td>
                    <td>
                        <input name="newColor" class="jscolor" ng-model="slice_newSliceColor" value="cc66f1"/>
                    </td>
                </tr>
            </table>
            <input type="submit" value="Add Slice" class="button" ng-click="buttonClick()"></button>
        </form>
    </div>
    <div id="PieItemsList">
        <table>
            <tr ng-repeat="item in slices">
                <td>Name :
                    {{item.Name}}
                </td>
                <td>
                    Color :
                    <div style="float:right; background-color:#{{item.Color}}">
                        {{item.Color}}
                    </div>
                </td>
                <td>
                    Value :
                    {{item.Percent}}
                </td>
                <td>
                    <button class="button" ng-click="deleteClick(item)">Delete</button>
                </td>
            </tr>
        </table>
    </div>
</div>

<h3>Enter Chart Title Here : </h3>

</div>

<h3>Add Sections Here :</h3>

<table>

<tr>

</td>

</tr>

<tr>

<td>Value :</td>

<td><input name="newValue" type="number" integer required ng-model="slice.newSlicePercent"

type="text"/></td>

</tr>

<tr>

<td>Color :</td>

<td>

</td>

</tr>

</table>

</form>

</div>

<table>

<td>Name :

</td>

<td>

Color :

</div>

</td>

<td>

Value :

</td>

<td>

<button class="button" ng-click="deleteClick(item)">Delete</button>

</td>

</tr>

</table>

</div>

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.

ng-repeat="item in slices"

1	ng-repeat="item in slices"

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

app.controller('PieItemsCtrl', function($scope, $http, $rootScope, pieItems) {

    $scope.slice_newSliceColor = "654654";

    $scope.change = function() {
        pieItems.setTitle($scope.chartName);
    }
    $scope.slices =  pieItems.list();
    $scope.buttonClick = function($event) { //submit button

        if ($scope.form.$valid) {

            var elems = pieItems.list();

            for (i = 0; i < elems.length; i++) {
                if ($scope.slice.newSliceName === (elems[i].Name)) {
                    alert('Slice with this name already exists')
                    return;
                }
            }
            var obj = {
                Name: $scope.slice.newSliceName,
                Percent: $scope.slice.newSlicePercent,
                Color: $scope.slice_newSliceColor
            }
            pieItems.add(obj)
        }
    }

    $scope.deleteClick = function(item, $event) {
        pieItems.delete(item);
    }
} )

app.controller('PieItemsCtrl', function($scope, $http, $rootScope, pieItems) {

$scope.slice_newSliceColor = "654654";

$scope.change = function() {

pieItems.setTitle($scope.chartName);

}

$scope.slices = pieItems.list();

$scope.buttonClick = function($event) { //submit button

if ($scope.form.$valid) {

var elems = pieItems.list();

for (i = 0; i < elems.length; i++) {

if ($scope.slice.newSliceName === (elems[i].Name)) {

alert('Slice with this name already exists')

return;

}

var obj = {

Name: $scope.slice.newSliceName,

Percent: $scope.slice.newSlicePercent,

Color: $scope.slice_newSliceColor

}

pieItems.add(obj)

}

$scope.deleteClick = function(item, $event) {

pieItems.delete(item);

}

} )

Part 2.

app.controller("PieCtrl", function ($scope, $timeout, pieItems) {
    $scope.labels = pieItems.labelsItems();
    $scope.data = pieItems.data();
    $scope.chartTitle = pieItems.getTitle();

    function watcherFunction(newData) {
        $scope.labels = pieItems.labelsItems();
        $scope.data = pieItems.data();
        $scope.chartTitle = pieItems.getTitle();
        $scope.colours = pieItems.getColors();

        //$scope.colours = ['#FFFFFF','#FFFF11','#FFFFFF','#FFFF11'];
    }

    $scope.$watch(pieItems.list, watcherFunction, true);
    $scope.$watch(pieItems.getTitle, watcherFunction, true);
});

app.controller("PieCtrl", function ($scope, $timeout, pieItems) {

$scope.labels = pieItems.labelsItems();

$scope.data = pieItems.data();

$scope.chartTitle = pieItems.getTitle();

function watcherFunction(newData) {

$scope.labels = pieItems.labelsItems();

$scope.data = pieItems.data();

$scope.chartTitle = pieItems.getTitle();

$scope.colours = pieItems.getColors();

//$scope.colours = ['#FFFFFF','#FFFF11','#FFFFFF','#FFFF11'];

}

$scope.$watch(pieItems.list, watcherFunction, true);

$scope.$watch(pieItems.getTitle, watcherFunction, true);

});

Part 3.

app.factory('pieItems', function() {
    var items = [];
    var title = "";
    var itemsService = {};

    itemsService.add = function(item) {
        items.push(item);
    };
    itemsService.setTitle = function(t) {
        title = t;
    };
    itemsService.getTitle = function() {
        return title;
    };

    itemsService.delete = function(item) {

        for (i = 0; i < items.length; i++) {
            if (items[i].Name === item.Name) {
                items.splice(i, 1);
            }
        }
    };
    itemsService.list = function() {
        return items;
    };
    itemsService.labelsItems = function() {

        var a = [];
        for (i = 0; i < items.length; i++) {
            a.push(items[i].Name);
        }
        return a;
    };
    itemsService.getColors = function() {

        var a = [];
        for (i = 0; i < items.length; i++) {
            a.push('#' + items[i].Color);
        }
        return a;
    };
    itemsService.data = function() {

        var a = [];
        for (i = 0; i < items.length; i++) {
            a.push(items[i].Percent);
        }
        return a;
    };

    return itemsService;
});

app.factory('pieItems', function() {

var items = [];

var title = "";

var itemsService = {};

itemsService.add = function(item) {

items.push(item);

};

itemsService.setTitle = function(t) {

title = t;

};

itemsService.getTitle = function() {

return title;

};

itemsService.delete = function(item) {

for (i = 0; i < items.length; i++) {

if (items[i].Name === item.Name) {

items.splice(i, 1);

}

};

itemsService.list = function() {

return items;

};

itemsService.labelsItems = function() {

var a = [];

for (i = 0; i < items.length; i++) {

a.push(items[i].Name);

}

return a;

};

itemsService.getColors = function() {

var a = [];

for (i = 0; i < items.length; i++) {

a.push('#' + items[i].Color);

}

return a;

};

itemsService.data = function() {

var a = [];

for (i = 0; i < items.length; i++) {

a.push(items[i].Percent);

}

return a;

};

return itemsService;

});

Part 6. Header

<div ng-app="app">
    <div id="header">
        <span id="title">
            <h1>
                Online Pie Chart Creator
            </h1>
        </span>
        <div id="img">
            <img src="img/chart.PNG"/>
        </div>
    </div>

<h1>

Online Pie Chart Creator

</h1>

</span>

</div>

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:

{
    xtype: 'label',
    cls: 'userLabel',
    id: 'userLabel',
    text: ' ' + _this.userName 
},

{

xtype: 'label',

cls: 'userLabel',

id: 'userLabel',

text: ' ' + _this.userName

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 :

Ext.define('js.WidgetFactory', {
    singleton:true,
}

Ext.define('js.WidgetFactory', {

singleton:true,

}

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

{
WidgetFactory.createLabel(‘label’, ‘dmwfUserLabel’, ‘dmwfUserLabel’, ‘’ + _this.userName)
}

{

WidgetFactory.createLabel(‘label’, ‘dmwfUserLabel’, ‘dmwfUserLabel’, ‘’ + _this.userName)

}

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 :

WidgetFactory.createLabel(‘{
    cls: 'userLabel',
    id: 'userLabel',
    text: ' ' + _this.userName 
},

WidgetFactory.createLabel(‘{

cls: 'userLabel',

id: 'userLabel',

text: ' ' + _this.userName

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

createLabel: function (config) {
    return {
        xtype: 'label',
        cls: config.cls,
        id: config.id,
        text: config.text
    };
},

createLabel: function (config) {

return {

xtype: 'label',

cls: config.cls,

id: config.id,

text: config.text

};

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 :

createLabel: function (config) {
    var clazz = 'undefined';
    if (config.cls) {
        clazz = config.cls
    }
    var text = '';
    if (config.text) {
        text = config.text
    }
    var itemId = '';
    if (config.itemId) {
        itemId = config.itemId;
    }
    var margin = '2 2 2 2';
    if (config.margin) {
        margin = config.margin;
    }

    var customComponent = {
        xtype: 'label',
        cls: clazz,
        text: text,
        itemId: itemId,
        margin: margin
    };
    return customComponent;
},

createLabel: function (config) {

var clazz = 'undefined';

if (config.cls) {

clazz = config.cls

}

var text = '';

if (config.text) {

text = config.text

}

var itemId = '';

if (config.itemId) {

itemId = config.itemId;

}

var margin = '2 2 2 2';

if (config.margin) {

margin = config.margin;

}

var customComponent = {

xtype: 'label',

cls: clazz,

text: text,

itemId: itemId,

margin: margin

};

return customComponent;

Refactoring this then gives us even cleaner code :

createLabel: function (config) {
    var clazz = config.cls ? config.cls : 'undefined';
    var text = config.text ? config.text : '';
    var itemId = config.itemId ? config.itemId : '';
    var margin = config.margin ? config.margin : '2 2 2 2';

    var customComponent = {
        xtype: 'label',
        cls: clazz,
        text: text,
        itemId: itemId,
        margin: margin
    };
    return customComponent;
},

createLabel: function (config) {

var clazz = config.cls ? config.cls : 'undefined';

var text = config.text ? config.text : '';

var itemId = config.itemId ? config.itemId : '';

var margin = config.margin ? config.margin : '2 2 2 2';

var customComponent = {

xtype: 'label',

cls: clazz,

text: text,

itemId: itemId,

margin: margin

};

return customComponent;

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 :

Ext.define('js.WidgetFactory', {
    createTextField: function (config) {

        var tooltip = config.tooltip ? config.tooltip : '';
        var clazz = config.cls ? config.cls : config.name + '-textfield';
        var itemId = config.itemId ? config.itemId : config.name + 'Item';
        var isReadOnly = config.readOnly ? config.readOnly : false;
        var disabled = config.disabled ? config.disabled : false;
        var customMargin = config.margin ? config.margin : '2 2 2 2';
        var labelWidth = config.labelWidth ? config.labelWidth :'100';
        var maxLength = config.maxLength ? config.maxLength :999;
        var enforceMaxLength = config.enforceMaxLength ? config.enforceMaxLength : true;
        var anchor = config.anchor ? config.anchor : '-6'; //for anchor layout
        var xtype = config.xtype ? config.xtype : 'textfield';

        return {
            xtype: xtype,
            cls: clazz,
            labelWidth: labelWidth,
            margin: customMargin,
            disabled: disabled,
            name: config.name,
            readOnly: isReadOnly,
            anchor: anchor,
            maxLength: maxLength,
            enforceMaxLength: enforceMaxLength,
            itemId : itemId,
            listeners: {
                render: function (c) {
                    Ext.create('Ext.tip.ToolTip', {
                        target: c.getEl(),
                        width: 300,
                        html: tooltip
                    });
                }
            }
        };
    },

Ext.define('js.WidgetFactory', {

createTextField: function (config) {

var tooltip = config.tooltip ? config.tooltip : '';

var clazz = config.cls ? config.cls : config.name + '-textfield';

var itemId = config.itemId ? config.itemId : config.name + 'Item';

var isReadOnly = config.readOnly ? config.readOnly : false;

var disabled = config.disabled ? config.disabled : false;

var customMargin = config.margin ? config.margin : '2 2 2 2';

var labelWidth = config.labelWidth ? config.labelWidth :'100';

var maxLength = config.maxLength ? config.maxLength :999;

var enforceMaxLength = config.enforceMaxLength ? config.enforceMaxLength : true;

var anchor = config.anchor ? config.anchor : '-6'; //for anchor layout

var xtype = config.xtype ? config.xtype : 'textfield';

return {

xtype: xtype,

cls: clazz,

labelWidth: labelWidth,

margin: customMargin,

disabled: disabled,

name: config.name,

readOnly: isReadOnly,

anchor: anchor,

maxLength: maxLength,

enforceMaxLength: enforceMaxLength,

itemId : itemId,

listeners: {

render: function (c) {

Ext.create('Ext.tip.ToolTip', {

target: c.getEl(),

width: 300,

html: tooltip

});

}

};

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 :

Ext.define('js.WidgetFactory', {
    singleton : true,

    defaultLabel : {
        xtype : 'label',
        margin : '2 2 2 2'
    },

    createLabel: function (config) {
//reason for {} as first arg is to create a new object instead
//of applying onto the defaultLabel object
        return Ext.apply({}, config, this.defaultLabel);
    }
});

Ext.define('js.WidgetFactory', {

singleton : true,

defaultLabel : {

xtype : 'label',

margin : '2 2 2 2'

createLabel: function (config) {

//reason for {} as first arg is to create a new object instead

//of applying onto the defaultLabel object

return Ext.apply({}, config, this.defaultLabel);

}

});

Posted in extjs | Tagged extjs, javascript | 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 :

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 :

ArrayList xySeriesList = new ArrayList();

ArrayList values = new ArrayList();

values.add(new DataPointWithMagnitude("Alabama", 51.70, 2.8, 4779736));
values.add(new DataPointWithMagnitude("Alaska", 57.80, 2.7, 710231));
values.add(new DataPointWithMagnitude("Arizona", 31.10, 3.6, 6392017));

//.....removed lines for brevity

values.add(new DataPointWithMagnitude("Virginia", 35.10, 3.1, 8001024));
values.add(new DataPointWithMagnitude("Washington", 33.10, 1.4, 6724540));
values.add(new DataPointWithMagnitude("West Virginia", 55.40, 1.5, 1852994));
values.add(new DataPointWithMagnitude("Wisconsin", 44.40, 1.7, 5686986));
values.add(new DataPointWithMagnitude("Wyoming", 59.70, 0.9, 563626));

XYDataSeries series = new XYDataSeries(values, new BubblePoint(Color.BLUE),
null, "1994");

YAxis yAxis = new YAxis(0.0, 10.0, 1.0, null, null, "No. of Homicides per 100,000 ");
XAxis xAxis = new XAxis(0.0, 100.0, 50.0, 10.0, null, "Gun Ownership (%)");

xySeriesList.add(series);

double factor = 0.0000001;

BubbleChart chart = new BubbleChart(xySeriesList, yAxis, xAxis, factor);

chart.width = 900;
chart.height = 650;

chart.rightOffset = 200;

chart.titleFont = new Font("Ariel", Font.PLAIN, 24);
chart.title = "Gun Ownership versus Homicide Rate";

ArrayList xySeriesList = new ArrayList();

ArrayList values = new ArrayList();

values.add(new DataPointWithMagnitude("Alabama", 51.70, 2.8, 4779736));

values.add(new DataPointWithMagnitude("Alaska", 57.80, 2.7, 710231));

values.add(new DataPointWithMagnitude("Arizona", 31.10, 3.6, 6392017));

//.....removed lines for brevity

values.add(new DataPointWithMagnitude("Virginia", 35.10, 3.1, 8001024));

values.add(new DataPointWithMagnitude("Washington", 33.10, 1.4, 6724540));

values.add(new DataPointWithMagnitude("West Virginia", 55.40, 1.5, 1852994));

values.add(new DataPointWithMagnitude("Wisconsin", 44.40, 1.7, 5686986));

values.add(new DataPointWithMagnitude("Wyoming", 59.70, 0.9, 563626));

XYDataSeries series = new XYDataSeries(values, new BubblePoint(Color.BLUE),

null, "1994");

YAxis yAxis = new YAxis(0.0, 10.0, 1.0, null, null, "No. of Homicides per 100,000 ");

XAxis xAxis = new XAxis(0.0, 100.0, 50.0, 10.0, null, "Gun Ownership (%)");

xySeriesList.add(series);

double factor = 0.0000001;

BubbleChart chart = new BubbleChart(xySeriesList, yAxis, xAxis, factor);

chart.width = 900;

chart.height = 650;

chart.rightOffset = 200;

chart.titleFont = new Font("Ariel", Font.PLAIN, 24);

chart.title = "Gun Ownership versus Homicide Rate";

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 :

        ArrayList xySeriesList = new ArrayList();

        ArrayList values = new ArrayList();
        ArrayList values2 = new ArrayList();

        values.add(new DataPointWithMagnitude("A", 15, 12, 40));
        values.add(new DataPointWithMagnitude("B", 40, 20, 50));
        values.add(new DataPointWithMagnitude("C", 90, 89, 110));
        values.add(new DataPointWithMagnitude("D", 210, 110, 110));
        values.add(new DataPointWithMagnitude("E", 300, 130, 24));
        values.add(new DataPointWithMagnitude("F", 350, 140, 80));
        values.add(new DataPointWithMagnitude("G", 370, 150, 20));
        values.add(new DataPointWithMagnitude("H", 400, 160, 120));

        values2.add(new DataPointWithMagnitude("A", 15, 22, 20));
        values2.add(new DataPointWithMagnitude("B", 40, 30, 70));
        values2.add(new DataPointWithMagnitude("C", 90, 99, 60));
        values2.add(new DataPointWithMagnitude("D", 210, 140, 87));
        values2.add(new DataPointWithMagnitude("E", 300, 110, 12));
        values2.add(new DataPointWithMagnitude("F", 350, 175, 76));
        values2.add(new DataPointWithMagnitude("G", 370, 134, 40));
        values2.add(new DataPointWithMagnitude("H", 400, 349, 80));

        XYDataSeries series = new XYDataSeries(values, new BubblePoint(Color.BLUE), null, "Series 1");
        XYDataSeries series2 = new XYDataSeries(values2, new BubblePoint(Color.ORANGE), null, "Series 2");

        YAxis yAxis = new YAxis(0.0, 400.0, 50.0, null, null, "Y Axis ");
        XAxis xAxis = new XAxis(0.0, 400.0, 50.0, null, null, "X Axis");

        xySeriesList.add(series);
        xySeriesList.add(series2);

        BubbleChart chart = new BubbleChart(xySeriesList, yAxis, xAxis, 1);

        chart.width = 700;
        chart.height = 700;
        chart.rightOffset = 200;

        chart.titleFont = new Font("Ariel", Font.PLAIN, 24);
        chart.title = "Two Series Bubble Chart";

ArrayList xySeriesList = new ArrayList();

ArrayList values = new ArrayList();

ArrayList values2 = new ArrayList();

values.add(new DataPointWithMagnitude("A", 15, 12, 40));

values.add(new DataPointWithMagnitude("B", 40, 20, 50));

values.add(new DataPointWithMagnitude("C", 90, 89, 110));

values.add(new DataPointWithMagnitude("D", 210, 110, 110));

values.add(new DataPointWithMagnitude("E", 300, 130, 24));

values.add(new DataPointWithMagnitude("F", 350, 140, 80));

values.add(new DataPointWithMagnitude("G", 370, 150, 20));

values.add(new DataPointWithMagnitude("H", 400, 160, 120));

values2.add(new DataPointWithMagnitude("A", 15, 22, 20));

values2.add(new DataPointWithMagnitude("B", 40, 30, 70));

values2.add(new DataPointWithMagnitude("C", 90, 99, 60));

values2.add(new DataPointWithMagnitude("D", 210, 140, 87));

values2.add(new DataPointWithMagnitude("E", 300, 110, 12));

values2.add(new DataPointWithMagnitude("F", 350, 175, 76));

values2.add(new DataPointWithMagnitude("G", 370, 134, 40));

values2.add(new DataPointWithMagnitude("H", 400, 349, 80));

XYDataSeries series = new XYDataSeries(values, new BubblePoint(Color.BLUE), null, "Series 1");

XYDataSeries series2 = new XYDataSeries(values2, new BubblePoint(Color.ORANGE), null, "Series 2");

YAxis yAxis = new YAxis(0.0, 400.0, 50.0, null, null, "Y Axis ");

XAxis xAxis = new XAxis(0.0, 400.0, 50.0, null, null, "X Axis");

xySeriesList.add(series);

xySeriesList.add(series2);

BubbleChart chart = new BubbleChart(xySeriesList, yAxis, xAxis, 1);

chart.width = 700;

chart.height = 700;

chart.rightOffset = 200;

chart.titleFont = new Font("Ariel", Font.PLAIN, 24);

chart.title = "Two Series Bubble Chart";

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

THREE_COLUMN_PAGE

Recent Posts
Simple Pie Chart in React
January 2nd, 2019
Oh boy, it's been over a year since I last posted. Too much learning, and trying to keep my he[...]
Area Charts in Iceberg Charts
March 11th, 2018
It is now possible to create area charts in Iceberg Charts that look something like this : Th[...]
Mandelbrot Set in Java
March 12th, 2017
Mandelbrot Set in Java with Iceberg Charts The Mandelbrot Set is one of the most famous images in a[...]
The Problem with Extjs these days
February 7th, 2017
I really like Extjs. But I have found myself struggling with Extjs in recent times and questioning t[...]
Disadvantages of using GIT over other version control systems
November 26th, 2016
[...]
Browse Netbeans Tutorial
- Creating a simple RCP app with Netbeans and Maven
- Creating a RCP Application in Netbeans - [Part 2]
Featuring Top 2/2 of Netbeans Tutorial
Subscribe
Read more
November 2020

M T W T F S S

« Jan

1

2 3 4 5 6 7 8

9 10 11 12 13 14 15

16 17 18 19 20 21 22

23 24 25 26 27 28 29

30
Blogroll
My links
Other Java Rich Client Blogs
UML
clustr
Meta
Search for:
Posts on UML
Featuring Top 3/3 of UML
Categories
- angularjs (1)
- Design Pattern (7)
- Eclipse (1)
- extjs (4)
- Iceberg Charts (4)
- JavaScript (9)
- Netbeans RCP (2)
- Netbeans Tutorial (2)
- Refactoring (2)
- RIA (2)
- Swing (18)
- Swing Components (13)
- Swing Design Pattern (4)
- Tutorial (7)
- UML (3)
- Uncategorized (10)
- Usability (1)
Java Desktop
Archives

November 2020
M	T	W	T	F	S	S
« Jan
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Latest Swing Components

Tags

Latest Tutorials

Javascript

Who's Online

Swing Design Patterns

Pages

All Swing Posts

Simple Pie Chart in React

Area Charts in Iceberg Charts

Mandelbrot Set in Java

Mandelbrot Set in Java with Iceberg Charts

The Problem with Extjs these days

Configuration over convention?

Meaningful Errors..

Disadvantages of using GIT over other version control systems

Simple Navigation Menu in AngularJS

Iceberg Charts Beta Release

Getting Started..

Many Series..

First AngularJS Application

Part 1. Pie component HTML

Part 2. Pie Item component in HTML

DIV: PieItemsTitle

DIV: PieItemsAdd

DIV: PieItemsList

Javascript

Part 1. PieItemsCtrl

Extjs Widget Factory

Update :

Swing Bubble Charts

Factor

Coloring

Multi Series

Recent Posts

Simple Pie Chart in React

Area Charts in Iceberg Charts

Mandelbrot Set in Java

The Problem with Extjs these days

Disadvantages of using GIT over other version control systems

Browse Netbeans Tutorial

Blogroll

My links

Other Java Rich Client Blogs

UML

clustr

Meta

Posts on UML

Categories

Java Desktop

Archives