json - How to pass JSP array to Javascript of highchart to generate a column chart -
i novice in highcharts, jsp , javascript , need input , suggestion on issue, have been struggling since 4-5 days. please me.
the issue able 2 output arrays jsp need pass in highchart js generate column graph.
[99, 90, 87, 82, 80, 77, 70, 65, 65, 60] , ['orcl2','orcl2','orcl2','orcl2','orcl1','orcl1','orcl3','orcl2','orcl3','orcl1'] but not able pass value js generate column graph. following entire code using. please suggest me 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') ora_cpu_status trunc(time)=trunc(sysdate) order pcpu desc) 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...
i'm not sure you're going 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 have data in format:
[99, 90, 87, 82, 80, 77, 70, 65, 65, 60] , ['orcl2','orcl2','orcl2','orcl2','orcl1','orcl1','orcl3','orcl2','orcl3','orcl1'] why not (remove 's , rid of json.parse)?
var dincpu = <%=csv%>; var dinpcat = <%=csvwithquote%>; 
Comments
Post a Comment