I am new in Highcharts. I am creating multiple series reading from Java server side JSON list, the JSON objects consist multiple series and each series have 'Electric IRms' following by 'Temperature' mapping to two Y Axis label.
The problem I encounter is 2nd Y axis unit is not display.
The JSON list format are
{name, "serialNumber1_type1", {"data", [[timestamp1, value1],
[[timestamp2, value2], ...
{name, "serialNumber1_type2", {"data", [[timestamp1, value1],
[[timestamp2, value2], ...
{name, "serialNumber2_type1", {"data", [[timestamp1, value1],
[[timestamp2, value2],
{name, "serialNumber2_type2", {"data", [[timestamp1, value1],
...
{"title","HighCharts Title"}
e.g my JSON list
[{"name":"5004672_IRms"},{"data":[[1373958000000,53],[1373958300000,53]....
{"name","5004672_Temperature"},{"data":[[1373958000000,80],[1373958300000,81]....
{"name":"5004687_IRms"},{"data":[[1373958000000,54],[1373958300000,53]..
{"name","5004687_Temperature"},{"data":[[1373958000000,82],[1373958300000,83]...
....
{"title", "HighCharts_Title"}
]
My code below
$(function() {
var titleName='';
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
rangeSelector : {
{
type: 'day',
count: 1,
text: '1 d'
},{
type: 'week',
count: 1,
text: '1 wk'
}, {
type: 'all',
text: 'all'
}],
selected: 1
},
title: {
text: '(IRms & Temperature)'
},
xAxis: {
title: {
text: 'Time (UTC)'
},
type: 'datetime',
labels: {
align: 'left',
formatter: function() {
return Highcharts.dateFormat('%I:%M %P', this.value);
}
},
gridLineDashStyle: 'dot',
gridLineWidth: 1,
tickInterval: 60 * 60 * 1000,
lineWidth: 2,
lineColor: '#92A8CD',
tickWidth: 3,
tickLength: 6,
tickColor: '#92A8CD',
},
yAxis: [{
labels: {
formatter: function() {
return this.value;
}
},
title: {
text: ''
},
opposite: true
},
{
gridLineWidth: 0,
title: {
text: '',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +'°F';
}
}
}
],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
...
width: 200
});
sname = this.series.name;
$.getJSON('/em/em/historypointdetail?pointid=' + sname, function(response) {
......
});
}
}
},
marker: {
lineWidth:
}
},
series: []
};
var serialNumber;
$.getJSON('/em/em/lli?id=<c:out value="${elementIds}" />',function(data) {
$.each(data, function(key,value) {
$.each(value, function(key,val) {
if (key == 'name') {
serialNumber = val;
}
else if (key == 'data') {
var dataseries = { data: []};
$.each(val, function(key,val) {
dataseries.data.push(val);
});
dataseries.name=serialNumber;
var names = serialNumber.split('_');
if (names[1] == 'IRms') {
options.title.text = 'Current';
options.series.yAxis = 0;
options.yAxis[0].title.text = 'Current';
}
else if (names[1] == 'Temperature') {
options.title.text = 'Temperature';
options.series.yAxis = 1;
options.yAxis[1].title.text = 'Temperature';
}
options.series.push(dataseries);
}
else if (key == 'title') {
htext = val;
}
});
});
chart = new Highcharts.StockChart(options);
chart.setTitle({text: htext});
}).error(function() {console.log('error');});
I created two Y Axis and 2nd Y Axis have labels return this.value + " F". but 2nd Y Axis
label is not display when chart draw.
Thanks
When adding series to different yAxis, you need to specify index of that yAxis, or ID, for example:
var dataseries = { data: [], yAxis: 1};
Related
I wanted to have different values on the left(negative) side as 1k ,2k,3k etc and different values on the right(positive) side of y-axis like 100,200,300 etc...
I tried different approaches by having conditions in labels formatter function
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'48-51', '51-54', '57-60', '60-63',
'63-66'
],
oppositecategories = [];
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Headcount and Hires Age Distribution'
},
subtitle: {
text: 'Lorem Ipsum'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: oppositecategories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: [{
title: {
text: null
},
labels: {
formatter: function() {
return Math.abs(this.value) + 'K';
},
y: 10
}
},
{
title: {
text: null
},
opposite: false,
reversed: false,
labels: {
step: 100,
y: 100
}
}
],
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y * 1000), 0);
}
},
series: [{
name: 'Current HC',
data: [-2.132, -1.387, -1.121, -1.479, -1.239]
}, {
name: 'Hires(4Q)',
data: [
1.17, 1.72, 1.36, 1.03, 1.21
]
}]
});
I expect different values on negative side and different values on positive side
You can create two separate yAxis for the series:
yAxis: [{
max: 0,
offset: 0,
width: '50%'
}, {
min: 0,
offset: 0,
left: '50%',
width: '50%'
}]
Live demo: http://jsfiddle.net/BlackLabel/Lgqyc4k8/
Using yAxis.labels.formatter you can have this result :
yAxis: [{
title: {
text: null
},
tickInterval:0.1,
labels: {
formatter: function() {
if(this.value < 0 && this.value % 0.5 === 0){ // Negative value only on .5 k
return Math.abs(this.value) + 'K';
} else if(this.value > 0){ // Positive values
return this.value * 1000;
} else if (this.value === 0) {
return 0;
}
},
y: 10
}
},
Fiddle
I created a Pie Donut chart with highcharts, it works well. Now what I want to do is when I hover an area, I want to highlight its parents and children and also to have all their data in the tooltip.
Here is my chart :
https://jsfiddle.net/whoknows/q9srL6o7/2/
And here is what I'd like to do :
http://i.imgur.com/AMr42dO.png
Thanks.
It is possible to use setState in mouseOver and mouseOut events of points to set hover state for multiple points. Tooltip formatter can also display multiple points that will match criteria. I have added hoverGroup variable to each point to find those points for setting states and for tooltip.
Example: http://jsfiddle.net/q9srL6o7/4/
$(function () {
var chart;
$(document).ready(function () {
var colors = ["#00bcd4", "#00838f", "#69f0ae", "#f4511e", "#d81b60", "#1e88e5"],
categories = ['Site #1', 'Site #2', 'Site #3', 'Site #4', 'Site #5'],
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Site #1',
categories: ['Leisure', 'Business'],
data: [45.01, 10.1],
drilldown: {
name: 'In/Out',
categories: ['In', 'In', 'Out', 'Out'],
data: [32.97, 12.04, 6.1, 4]
}
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Site #2',
categories: ['Leisure', 'Business'],
data: [13.12, 8.51],
drilldown: {
name: 'In/Out',
categories: ['In', 'In', 'Out', 'Out'],
data: [8.53, 4.59, 3.12, 5.39]
}
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Site #3',
categories: ['Leisure', 'Business'],
data: [9.91, 2.03],
drilldown: {
name: 'In/Out',
categories: ['In', 'In', 'Out', 'Out'],
data: [5.91, 4, 1, 1.03]
}
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Site #4',
categories: ['Leisure', 'Business'],
data: [4.55, 2.6],
drilldown: {
name: 'In/Out',
categories: ['In', 'In', 'Out', 'Out'],
data: [4, 0.55, 0.75, 1.85]
}
}
}, {
y: 4.17,
color: colors[4],
drilldown: {
name: 'Site #5',
categories: ['Leisure', 'Business'],
data: [2.49, 1.68],
drilldown: {
name: 'In/Out',
categories: ['In', 'In', 'Out', 'Out'],
data: [1.46, 1.03, 0.45, 1.23]
}
}
}],
siteData = [],
trafficData = [],
inoutData = [],
inoutColors = ['#faba59', '#f79f45', '#8cd260', '#5cc064'];
for (var i = 0; i < data.length; i++) {
siteData.push({
name: categories[i],
y: data[i].y,
color: data[i].color,
hoverGroup: i
});
for (var j = 0; j < data[i].drilldown.data.length; j++) {
trafficData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: j === 0 ? '#f06e4a' : '#36a061',
hoverGroup: i
});
}
for (var k = 0; k < data[i].drilldown.drilldown.data.length; k++) {
inoutData.push({
name: data[i].drilldown.drilldown.categories[k],
y: data[i].drilldown.drilldown.data[k],
color: inoutColors[k],
hoverGroup: i
});
}
}
// Create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
showInLegend: false,
legend: {
enabled: false
},
credits: {
enabled: false
},
title: {
enabled: false,
text: ''
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
point: {
events: {
mouseOver: function () {
var hoverGroup = this.hoverGroup,
series = this.series.chart.series;
$.each(series, function (i, s) {
$.each(s.points, function (j, p) {
if (p.hoverGroup == hoverGroup) p.setState('hover');
});
});
},
mouseOut: function () {
var series = this.series.chart.series;
$.each(series, function (i, s) {
$.each(s.points, function (j, p) {
p.setState('');
});
});
}
}
}
}
},
tooltip: {
valueSuffix: '',
formatter: function () {
var ret = '',
once = true,
hoverGroup = this.point.hoverGroup,
series = this.series.chart.series;
$.each(series, function (i, s) {
$.each(s.points, function (j, p) {
if (p.hoverGroup == hoverGroup) {
ret = '<span style="color:' + p.color + ';">●</span> ' + p.name + ' :' + p.y + '<br/>' + ret;
}
});
});
return ret;
}
},
series: [{
name: 'In/Out',
data: inoutData,
size: '85%',
innerSize: '20%',
dataLabels: {
formatter: function () {
return null;
}
}
}, {
name: 'Type de trafic',
data: trafficData,
size: '90%',
innerSize: '85%',
dataLabels: {
formatter: function () {
return null;
}
}
}, {
name: 'Site',
data: siteData,
size: '100%',
innerSize: '90%',
dataLabels: {
formatter: function () {
return null;
}
}
}]
});
});
});
I'm a newbie in html and javascript.
I'm Trying to make a spline chart with csv data file but the chart only shows the points.
Could anyone help me? Thanks in advance.
The parsing csv code follows below:
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)*1000;
lightLevels.push([
date,
parseFloat(line[1], 10)
]);
});
options.series[0].data = lightLevels;
chart = new Highcharts.Chart(options);
});
});
});
The graph code is:
chart: {
type: 'spline',
backgroundColor: '#464344',
renderTo: 'container',
zoomType: 'x',
spacingRight: 20,
},
navigator: {
enabled: true,
height: 15
},
scrollbar: {
enabled: true,
height: 5
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'minute',
count: 30,
text: '30m'
}, {
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'minute',
count: 180,
text: '3h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'all',
text: 'All'
}],
inputDateFormat: '%b %e/%H:%M',
inputEditDateFormat: '%b-%e/%H:%M',
inputDateParser: function(value) {
value = value.split(/[:\.]/);
return Date.UTC(
1970,
0,
1,
parseInt(value[0]),
parseInt(value[1]),
parseInt(value[2]),
parseInt(value[3])
);
},
},
title: {
text: 'Pistas Foam - Cloro Livre (mg/l)'
},
subtitle: {
text: 'Clique e arraste na area do grafico para zoom'
},
xAxis: {
type: 'datetime',
maxZoom: 1 * 1800000
},
yAxis: {
title: {
text: 'Cloro Livre mg/l (0 - 5)'
},
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: 200
});
}
}
},
}
},
series: [{
name: 'Cloro Livre',
marker: {
radius: 2
}
}]
};
I have a combo graphs, with Pie and Bar Graph, now my problem is that I want pie chart and bar graph both controlled from the same legend, as status are the same... source example created a JS fiddle any help would be much appreciated.
http://jsfiddle.net/TV8f4/
$(document).ready(function () {
var Loveralldata = [0,1,1,0,0,5];
var LDNOKdata = [['1032',11],['1040',0]];
var LDOKONOKdata = [['1032',1],['1040',0]];
var LDOKOOKdata = [['1032',1],['1040',0]];
var LTBDdata = [['1032',1],['1040',0]];
var LNAdata = [['1032',1],['1040',0]];
var LNUAdata = [['1032',4],['1040',8]];
var LCatData = ['Delhi HO','Regional Offices'];
$('#location').highcharts({
chart: {
//events: {
// click: function (event) {
// alert('hide');
// }
//}
},
credits: {
enabled: false
},
title: {
text: 'Location chart'
},
xAxis: {
categories: LCatData
},
yAxis: {
maxPadding: 1.5
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert(this.options.name);
}
}
}
}
},
tooltip: {
formatter: function () {
var s;
if (this.point.name) { // the pie chart
s = '' +
this.series.name + ': ' + this.y ;
} else {
s = '' +
this.category + ' ' + this.x + ': ' + this.y;
}
return s;
}
},
colors: ['#367A01', '#00D700', '#FFD700', '#D9D9D9', '#F4FA58', '#757873'],
labels: {
items: [{
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Adequate and Effective',
data: LDOKOOKdata
}
, {
type: 'column',
name: 'New Remediation Plans',
data: LDOKONOKdata
}, {
type: 'column',
name: 'New Controls',
data: LDNOKdata
},
{
type: 'column',
name: 'Not Updated/Approved ',
data: LNUAdata
},
{
type: 'column',
name: 'NA',
data: LNAdata
}
, {
type: 'column',
name: 'To Be Deleted',
data: LTBDdata
}
, {
type: 'pie',
name: 'Overall Status',
data: [['Adequate and Effective', Loveralldata[2]], ['New Remediation Plans', Loveralldata[1]], ['New Controls', Loveralldata[0]], ['Not Updated/Approved', Loveralldata[5]], ['NA', Loveralldata[3]], ['To Be Deleted', Loveralldata[4]]],
center: [100, 50],
size: 150,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
You can use legendItemClick event and then hide element with series index in pie chart like here http://jsfiddle.net/TV8f4/3/
legendItemClick:function(){
var index = this.index,
chart = this.chart,
series = chart.series,
len = series.length,
pieSerie = series[len-1];
pieSerie.data[index].setVisible();
}
I have a chart that displays series data by year.
eg 1011, 1112, 1213, 1415, and shows an actual and target for each year.
If the user clicks on a column, the chart drills down into that dataset, however I'd like to be able to show Actual and Target next to each other, rather than a single column...
JSFiddle: http://jsfiddle.net/MuydK/
Any help appreciated, am stumped on this as tried several methods.
I believe I understand how to set up the data into a series set rather than just a dataset, but don't know what changes I need to make to SetChart etc...
Also the Series titles disappear once I've drilled in and out once, any ideas...?
Many Thanks for you help.
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
data1 = [ ...
I updated your code with simple data, I think this is what you want,This is just a demo you can update code according to you.
JSFiddle
Here is code:
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
data1 = [
{
y: 1674,
color: colors[0],
drilldown: {
name: '1011 Actual',
categories: ['BS', 'B', 'IT', 'C'],
data: [3, 32, 54, 50],
color: colors[0],
name1: '1011 Target',
data1: [0, 31, 50, 60],
color1:colors[1]
}
}
]; var colors = Highcharts.getOptions().colors,
categories2 = ['1011', '1112', '1213', '1415'],
name2 = 'Target',
data2 = [
{
y: 1633,
color: colors[1],
drilldown: {
name: '1011 Actual',
categories: ['BS', 'B', 'IT', 'C'],
data: [3, 32, 54, 50],
color: colors[0],
name1: '1011 Target',
data1: [0, 31, 50, 60],
color1:colors[1]
}
}
]; function setChart(name, categories, data, color) {
console.log(name, categories, data, color);
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
color: color[i]
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'con1',
type: 'column'
},
title: {
text: 'Learner Responsive 16-18'
},
subtitle: {
text: 'Click the columns to view breakdown by department. Click again to view by Academic Year.'
},
xAxis: {
categories: categories1
, labels: {rotation:-90, align:'right'}
},
yAxis: {
title: {
text: 'Learner Responsive 16-18'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function () {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart([drilldown.name,drilldown.name1], drilldown.categories, [drilldown.data, drilldown.data1], [drilldown.color,drilldown.color1]);
} else { // restore
setChart(name, categories1, [data1, data2], 'white');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function () {
return this.y; // +'%';
}
}
}
},
tooltip: {
formatter: function () {
var point = this.point,
series = point.series,
s = 'Learner Responsive 16-18' + '<br/>' + this.x + ' ' + series.name + ' is <b>' + this.y + '</b><br/>';
if (point.drilldown) {
s += 'Click to view <b>' + point.category + ' ' + series.name + ' </b>' + ' by department';
} else {
s += 'Click to return to view by academic year.';
}
return s;
}
},
series: [{
name: name1,
data: data1,
color: colors[0]
},{
name: name2,
data: data2,
color: colors[1]
}],
exporting: {
enabled: false
}
},
function (chart) {
console.log(chart);
});
});
});