I am having issues creating my Highcharts graph out of my csv data. I have the following code that seems that it should work but it produces a blank graph on my server, I think it has something to do with the way that I'm pulling my data. I am using a ajax requests to pull from the csv file and plot the points. My csv is formatted like this.
0,0,0,12:45:37
5,26,130,12:45:37
1,28,28,12:45:42
4,35,140,12:45:47
1,32,32,12:45:52
3,16,48,12:45:57
1,29,29,12:46:02
1,25,25,12:46:07
5,16,80,12:46:12
4,35,140,12:46:17
5,25,125,12:46:22
4,37,148,12:46:27
With new points being added to the csv file every 30 seconds.
This is my code producing a blank graph.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Load cells data</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var t = [];
var Cell1 = [];
var Cell2 = [];
var Cell3 = [];
$.get('test.csv',function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var date = items[0].split('/');
Cell1.push([date, parseFloat(items[1])]);
Cell2.push([date, parseFloat(items[2])]);
Cell3.push([date, parseFloat(items[0])]);
});
var options = {
chart: {
zoomType: 'x',
renderTo: 'chart',
defaultSeriesType: 'line',
animation: Highcharts.svg,
events: {
load: requestData
}
},
title: {
text: 'Reading chart'
},
xAxis: {
title: {
text: 'Date'
},
type: 'datetime'
},
yAxis: {
title: {
text: 'kN'
}
},
series: [{
data: Cell1},{data: Cell2
}, {data: Cell3}],
//barra vertical que une puntos
tooltip: {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
x3: 0,
y3: 2
},
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)'],
[2, 'rgba(50, 50, 50, .8)']
]
},
borderWidth: 0,
style: {
color: '#FFF'
},
crosshairs: true,
shared: true
},
// quitar link Highcharts
credits: {
position: {
align: 'left',
verticalAlign: 'bottom',
x: 0,
y: -10
},
style: {
cursor: 'pointer',
fontSize: '20px',
color: 'rgba(0, 0, 0, 0)'
},
text: 'R E M t i m er.com',
href: 'http://Google.com'
},
// finn quitar link highcharts
};
var chart = new Highcharts.StockChart(options);
function requestData() {
$.ajax({
csv: '\\server\\test.csv',
success: function(csv) {
var items = csv.split(',');
var date = items[0].split('/');
Cell1 = parseFloat(items[1]),
Cell2 = parseFloat(items[2]),
Cell3 = parseFloat(items[3]),
point = [date, Cell1];
point2 = [date, Cell2];
point3 = [date, Cell3];
chart.series[0].addPoint(point);
chart.series[1].addPoint(point2)
chart.series[2].addPoint(point3)
// call it again after one second
setTimeout(requestData, 30000);
},
cache: false
});
}
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Please help.
You need to put date as timestamp.
Since the csv date doesn't contain the day, I suggest put the current date (but check your requirements).
Try this (create a new date based on string in ISO 8601 format):
var date = new Date(new Date().toISOString().substr(0,10) + 'T' + items[3])
Related
I am creating a column type graph. Is there a way in javascript to change the color(which I want to define) of a column IF Gait == Walk
Here is an example of the graph im working on
https://jsfiddle.net/NRKSensors/4t6q5z0j/3/
$(function() {
Highcharts.setOptions({
colors: ['#ffffff', '#000000', '#666666']
});
var chart, merge = Highcharts.merge;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType: 'x ',
marginTop: 20,
borderColor: null,
borderRadius: 20,
borderWidth: 2,
backgroundColor: null,
},
title: {
text: null
},
subtitle: {
text: null
},
data: {
csv: document.getElementById('csv').innerHTML,
seriesMapping: [{
x: 0, // Insert X values in minutes
y: 1, // Insert Y values (Frequency)
label: 2 // Insert Labels (Standing,Walk, Trot, Canter, Jump)
}]
},
tooltip: {
useHTML: true,
formatter: function() {
point = this.point;
html = '<table>';
html += point.label + '</h3></th></tr>';
html += '</table>';
return html;
},
followPointer: true,
hideDelay: 200
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}, // Gemmer Export Menu knappen. Den tror jeg ikke vi skal anvende.
credits: {
enabled: false
},
series: [{
type: 'column',
color: 'black'
}],
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
<pre id="csv" style="display:none">Touchdown,Frequency,Gait
22.414,100,"Walk"
22.42366667,100,"Walk"
22.43333333,103.4482759,Walk
22.44266667,96.77419355,Walk
22.45266667,96.77419355,Walk
24.69466667,136.3636364,Trot
24.70166667,125,Trot
24.70933333,136.3636364,Trot
24.71633333,120,Trot
24.72433333,130.4347826,Trot
25.11933333,68.18181818,Canter
25.13366667,88.23529412,Canter
25.14466667,85.71428571,Canter
25.156,88.23529412,Canter
</pre>
Do I need to prepare the data in the last column with qoutes?, so "Walk" instead of Walk?
Below is an example i made in Matlab. So I need to make it similar to this, but in highcharts
Matlab Column example
One way of doing this is to add a new column called color and set the value of this column based on the value of "Gait". This would be done in after highcharts have parsed the csv data like this:
data: {
csv: document.getElementById('csv').innerHTML, // Delete this line
seriesMapping: [{
x: 0, // Insert X values in minutes
y: 1, // Insert Y values (Frequency)
label: 2, // Insert Labels (Standing,Walk, Trot, Canter, Jump) NOT in quotes '' !!!
color: 3 //specify that column 3 is color
}],
parsed: function(columns) {
columns.push(['Color']) //Add a new column, color
for (var i = 0; i < columns[2].length; i++) {
if (columns[2][i] == 'Walk') {
columns[3].push('Red'); //Set color red for walk
} else if (columns[2][i] == 'Trot') {
columns[3].push('Blue');
} else if (columns[2][i] == 'Canter') {
columns[3].push('green');
} else { //Set grey for any gaits not found
columns[3].push('grey');
}
}
}
},
Working example: https://jsfiddle.net/ewolden/4t6q5z0j/40/
API on data.parsed: https://api.highcharts.com/highcharts/data.parsed
Ok hello everyone. I have designed my HighStock works from
CSV-file. I can get time and 1 line to my serie. I want to
get 2 lines from data. Any ideas? In future I want to get 2 decimals for example 25,01. have you got ideas for that?
In CSV there's seconds,data,data. And it's prints it 1minutes.
And yes, I'm from Finland Student and my code sucks... :)
http://imgur.com/L2VSRGj
Data:
Time in Seconds,Value,Value
0,25,23
60,25,23
120,25,23
....
14220,24,22
14280,24,22
14340,24,22
Javascript in my HC.htm: (it's index)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hannun virtamittaus</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
function getDataFilename(str){
point = str.lastIndexOf("file=")+4;
tempString = str.substring(point+1,str.length)
if (tempString.indexOf("&") == -1){
return(tempString);
}
else{
return tempString.substring(0,tempString.indexOf("&"));
}
}
query = window.location.search;
var dataFilePath = "/data/"+getDataFilename(query);
$(function () {
var chart;
$(document).ready(function() {
// define the options
var options = {
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 5
},
title: {
text: 'Arduinolla mitatut virran arvot'
},
subtitle: {
text: 'Zoomaa haluttu luenta alue'
},
xAxis: {
type: 'datetime',
maxZoom: 2 * 4000000
},
yAxis: {
title: {
text: 'Virran arvot 0-250A'
},
min: 0,
startOnTick: false,
showFirstLabel: false
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +': '+ this.y;
}
},
plotOptions: {
series: {
cursor: 'pointer',
lineWidth: 1.0,
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +':<br/> '+
this.y,
width: 100
});
}
}
},
}
},
series: [{
name: 'Op1',
marker: {
radius: 2
}
}]
};
// Load data asynchronously using jQuery. On success, add the data
// to the options and initiate the chart.
// http://api.jquery.com/jQuery.get/
jQuery.get(dataFilePath, null, function(csv, state, xhr) {
var lines = [],
date,
// set up the two data series
lightLevels = [];
// inconsistency
if (typeof csv !== 'string') {
csv = xhr.responseText;
}
// split the data return into lines and parse them
csv = csv.split(/\n/g);
jQuery.each(csv, function(i, line) {
// all data lines start with a double quote
line = line.split(',');
date = parseInt(line[0], 10)*1400;
lightLevels.push([
date,
parseInt(line[1], 10)
]);
});
options.series[0].data = lightLevels;
chart = new Highcharts.Chart(options);
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/4.2.4/highstock.js"></script>
<script src="https://code.highcharts.com/stock/4.2.4/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 155px"></div>
</body>
</html>
You need to set an array of series objects.
Series:
series: [{
name: 'Op1',
marker: {
radius: 2
}
},{
name: 'Op2'
}]
Parser
jQuery.get(dataFilePath, null, function(csv, state, xhr) {
var lines = [],
date,
// set up the two data series
lightLevels = [];
topLevels = [];
// inconsistency
if (typeof csv !== 'string') {
csv = xhr.responseText;
}
// split the data return into lines and parse them
csv = csv.split(/\n/g);
jQuery.each(csv, function(i, line) {
// all data lines start with a double quote
line = line.split(',');
date = parseInt(line[0], 10)*1400;
lightLevels.push([
date,
parseInt(line[1], 10)
]);
topLevels.push([
date,
parseInt(line[2], 10)
]);
});
options.series[0].data = lightLevels;
options.series[1].data = topLevels;
chart = new Highcharts.Chart(options);
});
I am facing an issue with exporting a column chart with scroll bar enabled which is not exporting a full chart after a scroll. It works for the first time, but when I scroll to the right or left and then when I export, the export is not happening completely.
Here is the sample.
var processedDataArray = [
{"Series_1_Value":1054237.31,"Series_2_Value":297367.88,"Series_3_Value":955472.31, "other":123450.45, "category":"CATEGORY-1"},
{"Series_1_Value":1914955.84,"Series_2_Value":472603.94,"Series_3_Value":1717425.84,"other":234560.45, "category":"CATEGORY-2"},
{"Series_1_Value":1172527.75,"Series_2_Value":368143.09,"Series_3_Value":1073762.75,"other":345670.45, "category":"CATEGORY-3"},
{"Series_1_Value":908568.43,"Series_2_Value":309490.05,"Series_3_Value":809803.43,"other":789010.45, "category":"CATEGORY-4"},
{"Series_1_Value":8001718.08,"Series_2_Value":5983055.85,"Series_3_Value":7112833.08,"other":890102.45, "category":"CATEGORY-5"},
{"Series_1_Value":1060572.17,"Series_2_Value":317503.11,"Series_3_Value":961807.17,"other":901230.45, "category":"CATEGORY-6"},
{"Series_1_Value":2484203.07,"Series_2_Value":1189924.57,"Series_3_Value":2187908.07,"other":435260.45, "category":"CATEGORY-7"},
{"Series_1_Value":6070895.44,"Series_2_Value":2722014.27,"Series_3_Value":5379540.44,"other":678900.45, "category":"CATEGORY-8"}
];
var series1DataArray = [];
var series2DataArray = [];
var series3DataArray = [];
var series4DataArray = [];
var categories = [];
var seriesNms = ['Series 1', 'Series 2', 'Series 3', 'Other'];
var _colors = ['#2F7ED8', '#915612', '#8BBC21', '#AA86F2', '#9054B6', '#76F0A3', '#A98835', '#09ACB6'];
for (i = 0; i < processedDataArray.length; i++) {
var dataObject = processedDataArray[i];
categories.push(dataObject['category']);
series1DataArray.push({
name: dataObject['category'],
y: parseInt(dataObject['Series_1_Value'])
});
series2DataArray.push({
name: dataObject['category'],
y: parseInt(dataObject['Series_2_Value'])
});
series3DataArray.push({
name: dataObject['category'],
y: parseInt(dataObject['Series_3_Value'])
});
series4DataArray.push({
name: dataObject['category'],
y: parseInt(dataObject['other'])
});
}
$(function() {
new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'colChart',
borderColor: '#000000',
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .1)',
plotBorderColor: '#CCCCCC',
plotBorderWidth: 1,
zoomType: 'xy',
width: 960,
events: {
load: function() {
alert('Chart has loaded with exporting option ' + this.options.exporting.enabled + ", min:" + this.xAxis[0].min + ", max:" + this.xAxis[0].max + ", categories.length=" + categories.length);
}
}
},
scrollbar: {
enabled: true
},
colors: _colors,
exporting: {
enabled: true,
sourceWidth: 960,
sourceHeight: 400,
chartOptions: {
xAxis: [{
categories: categories,
max: categories.length - 1
}],
scrollbar: {
enabled: false
}
}
},
yAxis: {
title: {
text: 'Value($)'
}
},
xAxis: {
categories: categories,
max: categories.length > 5 ? 5 : categories.length - 1
},
plotOptions: {
series: {
pointPadding: 0.05,
groupPadding: 0.15
}
},
title: {
text: 'Column Chart',
align: 'center'
},
series: [{
name: seriesNms[0],
data: series1DataArray
}, {
name: seriesNms[1],
data: series2DataArray
}, {
name: seriesNms[2],
data: series3DataArray
}, {
name: seriesNms[3],
data: series4DataArray
}],
credits: {
enabled: false
}
}); //end of Chart const
}); //end of function...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="colChart"></div>
</body>
</html>
How to resolve the issue?. If you see the pop-up dialog it is not displaying the same "export enabled" boolean value.
Adding min and minRange to your exporting.chartOptions.xAxis seems to yield positive results. This does require max to still be there, and seemingly it gives varying results if any of those three are missing.
For example (updated JSFiddle):
exporting:{
enabled: true,
sourceWidth: 960,
sourceHeight: 400,
chartOptions: {
xAxis: [{
categories: categories,
min: 0, // Added for fix
minRange: categories.length-1, // Added for fix
max: categories.length-1
}],
scrollbar:{
enabled: false
}
}
}
Hopefully this resolves your issue. As to why, I do not know.
Is there a way to list let's say 2 charts on the same page where each chart has its data xml file? What I'm doing is generating xml files from rrdtool and I would like to view all charts for the same device on one page.
Here's the code I have that works for one chart:
test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="js/test.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "xml/test.xml",
dataType: "xml",
success: function(xml) {
var series = []
//define series
$(xml).find("entry").each(function() {
var seriesOptions = {
name: $(this).text(),
data: []
};
options.series.push(seriesOptions);
});
//populate with data
$(xml).find("row").each(function() {
var t = parseInt($(this).find("t").text()) * 1000
$(this).find("v").each(function(index) {
var v = parseFloat($(this).text())
v = v || null
if (v != null) {
options.series[index].data.push([t, v])
};
});
});
options.title.text = "CPU - Last 3 hours"
$.each(series, function(index) {
options.series.push(series[index]);
});
chart = new Highcharts.Chart(options);
}
})
</script>
</head>
<body>
<div id="cpu" style="width: 800px; height: 400px; margin: 0 auto; padding: 20px"></div>
</body>
</html>
test.js
Highcharts.setOptions({
global: {
useUTC: false
}
});
options = {
chart: {
renderTo: 'cpu',
type: 'area',
},
title: {
text: 'CPU'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H. %M',
}
},
yAxis: {
title: {
text: 'Utilization %'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%H:%M', this.x) + ': ' + Highcharts.numberFormat(this.y, 2) + ' %';
}
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[1]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: true,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: []
}
And XML file - test.xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xport>
<meta>
<start>1396030800</start>
<step>300</step>
<end>1396030800</end>
<rows>4</rows>
<columns>1</columns>
<legend>
<entry>cpu</entry>
</legend>
</meta>
<data>
<row><t>1396030800</t><v>2.8000000000e+01</v></row>
<row><t>1396031100</t><v>2.9780000000e+01</v></row>
<row><t>1396031400</t><v>3.1596666667e+01</v></row>
<row><t>1396041600</t><v>NaN</v></row>
</data>
</xport>
I encountered the same problem and just solved it!
Before the ready() function:
var chart;
var chart1;
$( document ).ready(function() {
your code....
I created two options, each options render to a different container
options = {
chart: {
renderTo: 'container',
type: 'area',
},
options2 = {
chart: {
renderTo: 'container2',
type: 'area',
},
and use the code below to add to different container:
chart = new Highcharts.Chart(options);
chart1 = new Highcharts.Chart(options2);
then in your html:
<div id="container">
<div id="container2">
Hope this brief explanation helps. Feel free to ask me if anything is not clear to you.
Cheers,
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...
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/
#Barbara,
it worked finally with
var dincpu = <%=csv%>;
var dinpcat = <%=csvWithQuote%>;
along with the fiddle that you gave http://jsfiddle.net/VYLTW/ .
I am putting the entire code in Answer that actually worked.
<%# 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 INSTANCE_NAME,PCPU from ORA_CPU_STATUS order by PCPU desc) where rownum<=10");
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();
String csvWithQuote = list.toString().replace("[", "['").replace("]", "']").replace(", ", "','");
%>
<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 dincpu=<%=csv%>;
var dinpcat = <%=csvWithQuote%>;
var input = dincpu,
data = [],
categories =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'});
});
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>
#Barbara,
1) If you see the latest code I have put all the JSP scriptlet "<% %>" at the top and then called the
var dincpu = <%=csv%>;
var dinpcat = <%=csvWithQuote%>;
After which I could see in view source of the webpage that the values are getting passed to the JS variables in the JS function.
2) Then put the same JS code that you have put in the fiddle.
3) I felt that the function $(document).ready(function() was causing problem which I removed.
And another important thing is that since I was putting all my code in a virtual linux box, there might be some hidden characters thats getting copied while I was coping from windows text editor (Editplus).
I found all those 3 things were responsible for the issue.