time stamp based graph generation library - Java script
Earlier I worked with JQplot for drawing graph at Client Side.
I was having a handful of JSON data with Time Vs Metric ( Memory Utilization, Disk Utilization, CPU Utilization etc).
It was difficult for me to load these data in JQPlot as I was not able to fit them.
I was searching across many sites, and finally came across a good one., morris.js
Project URL : https://morrisjs.github.io/morris.js/index.html#license
A sample ready now code is available here.
http://jsbin.com/uqawig/441/embed?js,output
Just See a sample code to generate Line Chart.
<html>
<head>
<title></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
</head>
<body>
<div id="myfirstchart" ></div>
<div id="line-example" style="height: 250px;"></div>
<script type="text/javascript">
Morris.Line({
element: 'myfirstchart', // Id of the <div> tag
data: [
{ y: '2015-06-05 14:27:53', a: 1009090900},
{ y: '2015-06-05 14:27:54', a: 75},
{ y: '2015-06-05 14:27:55', a: 50},
{ y: '2015-06-05 14:27:56', a: 75},
{ y: '2015-06-05 14:27:57', a: 50},
{ y: '2015-06-05 14:27:58', a: 75},
{ y: '2015-06-05 14:28:02', a: 100}
],
xkey: 'y',
ykeys: ['a'],
labels: ['Series A']
});
Morris.Line({
element: 'line-example', // Id of the <div> tag
data: [
{ y: '1_2', a: 100, b: 90 },
{ y: '1_7', a: 75, b: 65 },
{ y: '1_8', a: 50, b: 40 },
{ y: '1_9', a: 75, b: 65 },
{ y: '1_10', a: 50, b: 40 },
{ y: '1-11', a: 75, b: 65 },
{ y: '1-12', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
</script>
</body>
</html>
The documention of Line Charts of Morris is available here.
https://morrisjs.github.io/morris.js/lines.html
Usually xkey will be X-Axis and date will be represented at X-Axis only.
Just see a compatible representation of date, so that the parser ( Client Side - Java Script) and generator ( Application Server - Tomcat, Java) are able to understand the common date format among each other.
If you are loading data via AJAX call, then the date format must be changed.
I use Java Servlet at server side, So I modified my code where the data is populated. I always handle date in long data format only. ( getTime() method of java.util.Date class).
Use java.text.SimpleDateFormat class for formatting the date as follows.
String formatted =
new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date(<Long>));
where
y -> Year
M -> Month in year (
d -> Day in month (
H -> Hour in day (0-23)
m -> Minute in hour (0-59)
s -> Second in minute(0-59)
I got the solution reference from here.
http://stackoverflow.com/questions/11610647/simple-date-format-for-string
Earlier I worked with JQplot for drawing graph at Client Side.
I was having a handful of JSON data with Time Vs Metric ( Memory Utilization, Disk Utilization, CPU Utilization etc).
It was difficult for me to load these data in JQPlot as I was not able to fit them.
I was searching across many sites, and finally came across a good one., morris.js
Project URL : https://morrisjs.github.io/morris.js/index.html#license
A sample ready now code is available here.
http://jsbin.com/uqawig/441/embed?js,output
Just See a sample code to generate Line Chart.
<html>
<head>
<title></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
</head>
<body>
<div id="myfirstchart" ></div>
<div id="line-example" style="height: 250px;"></div>
<script type="text/javascript">
Morris.Line({
element: 'myfirstchart', // Id of the <div> tag
data: [
{ y: '2015-06-05 14:27:53', a: 1009090900},
{ y: '2015-06-05 14:27:54', a: 75},
{ y: '2015-06-05 14:27:55', a: 50},
{ y: '2015-06-05 14:27:56', a: 75},
{ y: '2015-06-05 14:27:57', a: 50},
{ y: '2015-06-05 14:27:58', a: 75},
{ y: '2015-06-05 14:28:02', a: 100}
],
xkey: 'y',
ykeys: ['a'],
labels: ['Series A']
});
Morris.Line({
element: 'line-example', // Id of the <div> tag
data: [
{ y: '1_2', a: 100, b: 90 },
{ y: '1_7', a: 75, b: 65 },
{ y: '1_8', a: 50, b: 40 },
{ y: '1_9', a: 75, b: 65 },
{ y: '1_10', a: 50, b: 40 },
{ y: '1-11', a: 75, b: 65 },
{ y: '1-12', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
</script>
</body>
</html>
The documention of Line Charts of Morris is available here.
https://morrisjs.github.io/morris.js/lines.html
Usually xkey will be X-Axis and date will be represented at X-Axis only.
Just see a compatible representation of date, so that the parser ( Client Side - Java Script) and generator ( Application Server - Tomcat, Java) are able to understand the common date format among each other.
If you are loading data via AJAX call, then the date format must be changed.
I use Java Servlet at server side, So I modified my code where the data is populated. I always handle date in long data format only. ( getTime() method of java.util.Date class).
Use java.text.SimpleDateFormat class for formatting the date as follows.
String formatted =
new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date(<Long>));
where
y -> Year
M -> Month in year (
July; Jul; 07 )d -> Day in month (
10)H -> Hour in day (0-23)
m -> Minute in hour (0-59)
s -> Second in minute(0-59)
I got the solution reference from here.
http://stackoverflow.com/questions/11610647/simple-date-format-for-string
No comments:
Post a Comment