Dinesh Mishra Dinesh Mishra - 4 months ago 46
JSON Question

How to pass JSP array to Javascript of highchart to generate a column chart

I am a novice in Highcharts, JSP and Javascript and need your input and suggestion on the issue, I have been struggling since 4-5 days. Please help me.

The issue is I am able to get the 2 output arrays from JSP that I need to pass in the highchart JS for generate a column graph.

[99, 90, 87, 82, 80, 77, 70, 65, 65, 60] and
['orcl2','orcl2','orcl2','orcl2','orcl1','orcl1','orcl3','orcl2','orcl3','orcl1']


But I am not able to pass the value to the JS to generate the column graph. Following is the entire code that I am using. Please suggest me where I am going wrong.

<%@ page language="java" import="java.sql.*, java.io.*, java.util.Date, java.util.*,javax.servlet.*, java.text.SimpleDateFormat, java.util.Calendar " %>
<% Class.forName("oracle.jdbc.driver.OracleDriver"); %>
<%
Connection connection=DriverManager.getConnection ("jdbc:oracle:thin:@RAC1.dinu.com:1521:orcl2","cog","cog123");
Statement statement12 = connection.createStatement();
ResultSet resultset12 =
statement12.executeQuery("select * from(select HOST_NAME,INSTANCE_NAME,PID,PCPU, to_char(TIME, 'yyyy-mm-dd hh24:mi:ss') from ORA_CPU_STATUS where trunc(TIME)=trunc(sysdate) order by PCPU desc) where rownum<=10");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="/DBdashboard/1.js"></script>
<script type="text/javascript" src="/DBdashboard/2a.js"></script>
<script type="text/javascript" src="/DBdashboard/3a.js"></script>
<script type="text/javascript" src="/DBdashboard/highcharts-more.js"></script>
<script type="text/javascript" src="/DBdashboard/json2.js"></script>
<script>
$(function () {
var chart;

<%
List<String> list = new ArrayList<String>();
List<String> list2 = new ArrayList<String>();
while(resultset12.next())
{
String val = resultset12.getString(1);
list.add(val);
String val2 = resultset12.getString(2);
list2.add(val2);

String csv = list2.toString().replace("[", "").replace("]", "");
String csvWithQuote = list.toString().replace("[", "'").replace("]", "'").replace(", ", "','");
%>
var dincpu = '<%=csv%>';
var dinpcat = '<%=csvWithQuote%>';
var input = JSON.parse("[" + dincpu + "]"),
data = [],
categories = JSON.parse("[" + dinpcat + "]");
$.each(input, function(index, value){
var color;
if (value > 80) color = 'red';
else if (value > 60) color = 'Orange';
else color = 'green';
data.push({y:value, color: color, url:'https://www.google.com'});
});

$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'COL',
type: 'column'
},
title: {
text: 'Current Top 10 CPU Consumers',
style: {fontSize: '10px'}
},
xAxis: {
categories: categories,
labels: {
rotation: -35,
align: 'center'
}
},
yAxis: {
title: {
text: 'Percentage',
style: {fontSize: '11px'}
}
},
exporting: { enabled: false },
legend: {
enabled: false,
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b>' +'- Oracle User Process CPU Consumed :'+'<b>'+ this.y +' % ' +'</b>' ;
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
location.href = this.options.url;
}
}
}
}
},
series: [{
name: 'CPU Consumed',
pointWidth: 28,
data: data

}]
});
});
});
</script>
</head>
<body>
<div id="COL" style="min-width: 100px; height: 300px; margin: 0 auto"></div>
</body>
</html>


Thanks in Advance...

Answer

I'm not really sure where you're going with this code

String csv = list2.toString().replace("[", "").replace("]", "");
String csvWithQuote = list.toString().replace("[", "'").replace("]", "'").replace(", ", "','");
%>
var dincpu = '<%=csv%>';
var dinpcat = '<%=csvWithQuote%>';
var input = JSON.parse("[" + dincpu + "]"),
       data = [],
categories = JSON.parse("[" + dinpcat + "]");

If you have your data in this format:

[99, 90, 87, 82, 80, 77, 70, 65, 65, 60] and
['orcl2','orcl2','orcl2','orcl2','orcl1','orcl1','orcl3','orcl2','orcl3','orcl1']

Why not do this (remove the 's and get rid of the JSON.parse)?

var dincpu = <%=csv%>;
var dinpcat = <%=csvWithQuote%>;

http://jsfiddle.net/VYLTW/

Comments