Friends ,
i want to show contineous line between Two points of series even
if any y axis value missing from serries .
As i have attached code for upper series "tokio" march month y axis
value is missing .I want line should be contineous .
Below is my code .
Can any one have idea about this,please help.
$(function () {
var seriesdata = [];
var options = {
chart: {
type: 'spline'
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: [],
min: 0
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{ name: 'tokio', data: [['Jan', 7.0], ['Feb', 6.9], ['Mar', null],['Apr', 18.2]] },
{ name: 'NewYork', data: [['Jan', -0.2], ['Feb', 0.8], ['Mar', 5.7], ['Apr', 11.3], ['May', 17.0]] }
]
};
///To pass category from json object
var dataarrey = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var items = [];
var item;
for (i = 0; i < dataarrey.length; i++) {
item = { data: dataarrey[i] };
items.push(item);
}
for (i = 0; i < items.length; i++)
{
options.xAxis.categories[i] = items[i].data;
}
$('#container').highcharts(options);
});
Take a look at the connectNulls property:
http://api.highcharts.com/highcharts#plotOptions.area.connectNulls
Just remove the point with the null value:
series: [
{
name: 'tokio',
data: $.grep([['Jan', 7.0],['Feb', 6.9],['Mar', null],['Apr', 18.2]],
function(i){
return i[1] != null;
})
},
{
name: 'NewYork',
data: [['Jan', -0.2], ['Feb', 0.8], ['Mar', 5.7], ['Apr', 11.3], ['May', 17.0]]
}
]
Related
i'm trying to make a chart that shows two diferent sets of data.
Both are distributed in 12 month, but one set of data is only relevant from the current month onwards.
I have something like this example (JSFiddle)
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
pointStart: 1
}]
});
My problem is that i would like to show the data from before the start of the second data with one single column.
For example, in the JSFiddle linked above i'd like to se January as a wider column instead of the thin one with an empty space on the right. Is that possible?
Thanks for reading.
For example, in the JSFiddle linked above i'd like to se January as a
wider column instead of the thin one with an empty space on the right.
Is that possible?
It is possible, however it will require a bit of custom code. The better solution is to centre the single column.
Code:
var maxGroupedColumns = 0;
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
var newSeriesArr = [],
chart = this,
groupedSeries = {},
pointOffset;
// create a new series for each point
for (var i = chart.series.length - 1; i >= 0; i--) {
var series = chart.series[i];
var pointsInSeries = series.points.length;
for (var j = pointsInSeries - 1; j >= 0; j--) {
var point = series.points[j];
// omit the point if its y value equals to 0
if (!point.y) {
continue;
}
// make sure that x property of each point is initialized
point.options.x = point.x;
var newSeriesOptions = {
data: [point.options],
// move relevant options from the original series
color: series.color,
name: series.name,
// linking series items in legend
linkedTo: series.options.id
};
if (!groupedSeries[point.x]) {
// create group
groupedSeries[point.x] = [];
}
// create series and assign it to group
groupedSeries[point.x].push(chart.addSeries(newSeriesOptions, false));
if (groupedSeries[point.x].length > maxGroupedColumns) {
// update max grouped columns number
maxGroupedColumns = groupedSeries[point.x].length;
}
point.remove(false);
}
//series.remove(false);
series.setData([]);
}
// handle pointPlacement for each series
pointOffset = 1 / maxGroupedColumns;
for (var x in groupedSeries) {
var group = groupedSeries[x];
group.forEach(function(series, index) {
series.update({
pointPlacement: pointOffset * index - ((group.length - 1) * pointOffset) / 2,
}, false);
});
}
chart.redraw();
}
}
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
grouping: false,
pointRange: 1,
pointPadding: 0.25,
}
},
series: [{
name: 'Tokyo',
id: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
id: 'London',
data: [null, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
Demo:
https://jsfiddle.net/wchmiel/1wph8ojx/3/
Please take a look at this jsfiddle highcharts example i prepared to show you our case:
http://jsfiddle.net/nogz0j2b/
Highcharts.chart('container', {
title: {
text: 'Test Chart'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Value 1',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Value 2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Value 1',
type: 'line',
yAxis: 1,
data: [2.50, 2.50, 2.50, 3.20, 3.20, 3.20, 3.20, 3.20],
}, {
name: 'Value 2',
type: 'line',
data: [150, 85.89, 67.43, 38.12, 12.50, 6.20, 2.20, 1.20],
}]
});
Somehow we need to align the two y axis to show the correct time when the 2 lines are crossing and Value 2 is smaller than Value 1. So in my example it would be in July.
Currently it is missleading because the line crossing is earlier because of the difrerent tick positions.
I hope you have some ideas ... thank you!
you can add linkedTo:0, in the secondary yAxis attributes and type: 'logarithmic', in both
So yAxis is
yAxis: [{ // Primary yAxis
type: 'logarithmic',
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Value 1',
style: {
color: Highcharts.getOptions().colors[1]
}
},
}, { // Secondary yAxis
linkedTo:0 ,
type: 'logarithmic',
title: {
text: 'Value 2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
tickPositions: [0,1,2,3]
}],
Updated Fiddle
When I use multiaxes and big numbers, Highcharts renders double the height needed to show the data. How can I achieve fitting the vertical axis to the data correctly?
Here the example code:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 991009.6, 1010.2, 14563.1, 1016.9, 1018.2, 1016.7],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [967416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 1010.2, 14563.1, 991016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 991010.2, 14563.1, 1016.9, 1018.2, 1016.7],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
Fiddle here: http://jsfiddle.net/voqxkb3m/1/
You can set alignTicks: false to your chart properties.
Updated fiddle:
http://jsfiddle.net/jlbriggs/voqxkb3m/2/
You can adjust settings like maxPadding and endOnTick to further reduce the yAxis spacing.
http://jsfiddle.net/jlbriggs/voqxkb3m/3/
I have an irregular set of data with empty intervals, but I have no way of knowing.
Is there any way to highlight them on the graph?
Example: http://i.stack.imgur.com/fzZ4f.jpg
I use xAxis: {ordinal: false} for the graph line, but I need to highlight empty points, for example like this: http://i.stack.imgur.com/xTZbZ.jpg
In the series, the points are missing, and do not receive null points. And I can't set to null. Code script with graph:
// Example data:
data = [[x1,y1],[x2,y2],[x6,y6]]; // x3,x4 and x5 are missing.
function changeData(min, max) {
var chart = $('#{{div_id}}').highcharts();
chart.showLoading('Actualizando datos...');
var params = {type:'{{type}}', id: '{{id}}', from: min, to: max};
$.post("{{url('dashboardmetric')}}", {metric: 'getDataGraphMetric', params: params},
function(data) {
$.each(data, function(i, v){
chart.series[i].setData(data[i], true); //Seteo de datos de la serie
});
chart.hideLoading(); //Se libera el bloquero
}, "json");
}
$(function() {
Highcharts.setOptions({
lang: {
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
},
global: {
useUTC: false
}
});
$('#{{div_id}}').highcharts('StockChart', {
chart: {
borderColor: '#DDDDDD',
borderWidth: 1,
borderRadius: 10
},
title: {
text: '{{title}}'
},
credits: {
enabled: false
},
navigator: {//Es la serie historica y completa
adaptToUpdatedData: false,
height: 45,
series: {data: {{navigator}}}
},
scrollbar: {
liveRedraw: false
},
rangeSelector: {
buttons: [{type: 'hour', count: 6, text: '6H'},
{type: 'day', count: 1, text: '1D'},
{type: 'day', count: 2, text: '2D'},
{type: 'week', count: 1, text: '1S'},
{type: 'month',count: 1, text: '1M'},
{type: 'year', count: 1, text: '1A'},
{type: 'year', count: 2, text: '2A'},
{type: 'all',text: 'Todo'}]
},
xAxis: {
ordinal: false,
events: {
setExtremes: function(e) {
changeData(e.min, e.max);
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
marker: {
enabled: false,
lineWidth: 1,
states: {
hover: {
enabled: false
}
}
}
}
},
tooltip: {
formatter: function() {
shortMonths = new Array('Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic');
weekdays = new Array('Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado');
var date = new Date(this.x);
num_day = date.getDate();
index_weekday = date.getDay();
index_shortMonths = date.getUTCMonth();
if(date.getHours() < 10) {h = "0" + date.getHours();} else {h = date.getHours();}
if(date.getMinutes() < 10) {m = "0" + date.getMinutes();} else {m = date.getMinutes();}
var s = '<span style="font-size:10px">' + weekdays[index_weekday] + ', ' + shortMonths[index_shortMonths] + ' ' + num_day + ', ' + h + ':' + m + '</span>';
$.each(this.points, function(i, point) {
bits = point.y;
if(bits>=1000000000) {bits=(bits/1000000000).toFixed(2)+' Gb';}
else if(bits>=1000000) {bits=(bits/1000000).toFixed(2)+' Mb';}
else if(bits>=1000) {bits=(bits/1000).toFixed(2)+' Kb';}
else if(bits>1) {bits=bits+' bits';}
else if(bits==1) {bits=bits+' bit';}
else {bits='0 bits';}
serie = point.series;
s += '<br/><span style="color:'+serie.color+'">'+ serie.name +'</span>: <b>'+ bits +'</b>';
});
return s;
},
borderColor: '#FFA500',
valueDecimals: 0
{# valueSuffix: ' {{unit}}' #}
},
series: [
{% for serie in series %}
{
name: '{{serie.name | raw}}',
data: {{serie.data}},
color: '{{serie.color | raw}}',
marker: {
symbol: '{{serie.symbol | raw}}'
}
},
{% endfor %}
]
});
});
For this.x, I am getting the index location when I push the data in via code. If I populate the data separately, like the following code, then this.x returns the right item. How can I fix this issue?
Works
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
Index location is getting pushed out for this.x here
var points = [{
Name: 'good',
Y: '15000'
}, {
Name: 'baad',
Y: '3000'
}, {
Name: 'wow',
Y: '2000'
}];
var chartData = {
GetChartSeries: function (points, name) {
var seriesData = [];
if (points != null && points != 'undefined') {
for (i=0; i<points.length; i++) {
seriesData.push({
name: ""+points[i].Name,
y: parseFloat(points[i].Y)
//,color: ''
});
}
}
return seriesData;
}
};
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80],
borderColor: '#A4A4A4',
borderRadius: 5,
borderWidth: 2
},
legend: {
enabled: false
},
title: {
text: 'Graduation Year Breakdown'
},
colors: ['#790000'],
legend: {
enabled: false
},
plotOptions: {
series: {
/*
dataLabels: {
enabled: true,
color: 'red'
},
*/
borderRadius: 3,
colorByPoint: true
}
},
tooltip: {
formatter: function() {
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'in year: '+ this.x;
}
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Students'
}
},
series: [{
//name: 'Population',
data: chartData.GetChartSeries(points, ""),//[4000, 3400, 2000, 34000, 120000],
dataLabels: {
enabled: true,
//rotation: -90,
color: '#4F4F4F',
align: 'center',//'right',
//x: 4,
//y: 10,
style: {
fontSize: '12px',
//fontWeight: 'bold',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
While I am uncertain as to why your solution doesn't work, I can propose an alternative solution.
The tooltip formatter function has access to a number of different parameters. Instead of this.x, you could use this.point.name.
For example:
formatter: function() {
// If you want to see what is available in the formatter, you can
// examine the `this` variable.
// console.log(this);
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'in year: '+ this.point.name;
}