Java Behind Obvious

Because I am constantly busy working on something, I have never had time to actually put everything in words and pictures. But, since you got here, then you must have already seen some part of my work - and this is the way I’m talking.I'm 23, born in Romania, student at UPG Romania in software development field. I started from 0, mostly with basic stuff, and I’m evolving every day to an expert. I'm focused on freelancing projects, from small websites, to really heavy stuff. I know that I look and act differently from most developers, but this is why you will love to work with me!

Saturday, March 23, 2013

Highcharts both OX and OY logarithmic axis

Today’s tip is about Highcharts. Few months ago, we have talk about Highstock JavaScript library. Well, Highcharts is pretty much the same, since both are developed by Highsoft Solutions AS. There are both pure JavaScript libraries for creating interactive charts, each of them offering some cool options for creating awesome charts for your website.

Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart types.

Today’s challenge for Highcharts is to create a line chart with both OX and OY logarithmic axis. The result will be:

And the code:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Highcharts logarithmic OX and OY axis</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

</script>

<script type="text/javascript">

$(function () {

$('#chart').highcharts({

chart: {

},

title: {

text: 'Logarithmic OX and OY axis'

},

credits: {

href: "http://e-blog-java.blogspot.ro/",

text: "Java Behind Obvious",

style: {

fontSize: '12px'

}

},

exporting: {

width: 1000

},

xAxis: {

type: 'logarithmic',

min: 1,

max: 1000,

tickInterval: 1,

minorTickInterval: 0.1

},

yAxis: {

type: 'logarithmic',

min: 1,

max: 1000,

tickInterval: 1,

minorTickInterval: 0.1,

title: {

text: null

}

},

tooltip: {

headerFormat: 'Name: <b>{series.name}</b> <br />',

pointFormat: 'OX value: {point.x} <br/> OY value: {point.y}'

},

series: [{

name: "series name",

data: [

[5,20],[40,45],[44,89],[50,70],[68,89],[71,191],

[87,265],[95,397],[332,344]

]

}]

});

});

</script>

<script src="../../js/highcharts.js"></script>

<script src="../../js/modules/exporting.js"></script>

</head>

<body>

<div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>

</body>

</html>

That’s it! Hope you like it! For more details and full documentation about Highcharts and Highstock, please visit official website.

How to find a point coordinates between other two points

Theory: Given a segment from point A to point B, our goal is to find a C point coordinates at a specified distance on that segment.

Let’s say that DT is the distance of the AB segment and D is the distance from point A to point C.

Using the distance formula, we can find the distance from point A to point B:

Now, we can easily find the C point coordinates like this:

That’s it. From Java perspective, the mechanism looks like this:

package calculatelinepoints;

public class CalculateLinePoints {

public static void main(String[] args) {

// point A coordinates

double a = 20.0;

double b = 10.0;

// point B coordinates

double c = 50.0;

double d = 40.0;

// calculate distance between the two points

double DT = Math.sqrt(Math.pow((c - a), 2) + Math.pow((d - b), 2));

double D = 20.0; // distance to point C

double x;

double y;

double T = D / DT;

// finding point C coordinate

x = (1 - T) * a + T * c;

y = (1 - T) * b + T * d;

System.out.println("Point C coordinates:\n x: " + x + "\n y: " + y);

}

}

Subscribe to: Posts (Atom)