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 %}
]
});
});
Related
I'm trying to draw a chart where categories can be filtered, and it's working pretty nicely, I used this to do it.
Problem is : my last category is the total of the others, and so is taller. I want that when the "total" checkbox is unchecheck the chart resize, but it doesn't and resize only if I also uncheck the "class7" checkbox.
you can try it here : https://jsfiddle.net/4rfdgvum/
var chart=null;
$(function() {
var chart = new Highcharts.Chart('container', {
chart: {
type: 'column',
shadow: true
},
title: {
text: 'My Title'
},
xAxis: {
categories: [{"class":"class1","name":"cat1"},{"class":"class2","name":"cat2"},{"class":"class3","name":"cat3"},{"class":"class4","name":"cat4"},{"class":"class5","name":"cat5"},{"class":"class6","name":"cat6"},{"class":"class7","name":"cat7"},{'class': 'total','name':'total'}],
labels: {
formatter: function() {
return this.value.name;
},
useHTML: true
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Numbers'
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x.name + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter: function(){
return Highcharts.numberFormat(this.percentage,0) + '%';
}
}
}
},
series: [{
name: 'Ok',
color: 'green',
stack: 'a',
data: [
223,174,139,27,17,6,3,589 ]
},
{
name: 'Not Ok',
color: 'red',
stack: 'a',
data: [
21,29,26,14,15,11,11,127 ]
},
{
name: 'Partialy Ok',
color:'orange',
stack: 'a',
data: [
5,11,25,1,1,3,0,46 ]
},
{
name: 'Not usable',
color:'grey',
stack: 'a',
data: [
20,70,67,160,163,170,168,818 ]
},
{
name: 'Not done',
color:'brown',
stack: 'a',
data: [
173,158,185,240,246,252,260,1514 ]
}
]
}, function() {
$('input[type=checkbox]').bind('click', function() {
togglePointsByClass(this.value, $(this).is(':checked'), chart)
});
});
var visibleArr = [0,1,2,3,4,5,6,7];
function togglePointsByClass(className, shouldShow, chart) {
var isChartDirty = false;
if (shouldShow) {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className) {
visibleArr.push(i);
}
});
} else {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className && visibleArr.indexOf(i) > -1) {
visibleArr.splice(visibleArr.indexOf(i), 1);
}
});
}
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
})
}
}
$('#container').highcharts().redraw();
});
Thanks
You can use axis.setExtremes() for setting max of the yAxis.
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
}, false, false);
const max = visibleArr.reduce((a, b) => Math.max(chart.yAxis[0].stacks.columna[b].total, a), -Infinity)
chart.yAxis[0].setExtremes(0, max);
}
example: https://jsfiddle.net/mw7euo1a/
I am new to javascript and so to highcharts. i am stuck in a task for long time.
I have created a highstock chart using highchart API. i am getting data using ajax call and display it in highstock chart. All works fine up till here. My page has option to recreate the chart with showing data in weekly, monthly and quarterly form. For this purpose i used datagrouping on my area chart and here the problem comes up.Now what i want is if user select, say weekly period, then all alternate weekly period areas should have opposite colors, for example, if 1st is dark grey then 2nd should be light grey and then 3rd again dark grey and so on.
2nd thing i want gaps between every group data.
Note that i have multiple series in the chart.
Is there any way to do this. Can any one please help me.
here is my code
function line_chart() {
$.getJSON('http://<?php echo $location; ?>/js/highcharts/server_processing/issuer/tbldailyprice2.php?' + ticker, function (data) {
// Create the chatu b ajanrt
mychart = $('#container2').highcharts('StockChart', {
chart: {
events: {
load: function () {
chart = this;
if (period_name == 'default') {
chart.series[0].update({
dataGrouping: {forced: false,
enabled: false,
approximation: '',
units: [['day', [1]]],
}
});
} else if (period_name == 'Quarterly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
dataGrouping: {forced: true,
approximation: 'sum',
enabled: true,
units: [['month', [3]]],
},
});
} else
if (period_name == 'Monthly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
dataGrouping: {
approximation: 'sum',
forced: true,
enabled: true,
units: [['month', [1]]],
}
});
} else
if (period_name == 'Weekly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
approximation: 'sum',
dataGrouping: {forced: true,
enabled: true,
approximation: 'sum',
units: [['week', [1]]],
}
});
}
$.getJSON('http://' + closeperiodsurl, function (newdata) {
chart.series[0].setData(newdata);
// series.setData(data);
});
$.getJSON('http://' + buys_sells_url + "&type=buy", function (newdata) {
chart.series[2].setData(newdata);
// series.setData(data);
});
$.getJSON('http://' + buys_sells_url + "&type=sell", function (newdata) {
chart.series[3].setData(newdata);
// series.setData(data);
});
}
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
}, tooltip: {
shared: false,
crosshairs: true,
formatter: function () {
var rV = null;
var symbol = '$';
var color;
var company = "?c=<?php echo $_REQUEST["c"] ?>";
var ticker_id = "&t=<?php echo $_REQUEST["t"] ?>";
if (this.series.name == 'Buy' || this.series.name == 'Sell' || this.series.name == 'Periods') {
var date = "&date=" + this.x;
if (this.series.name == 'Buy') {
color = '#0000FF';
} else if (this.series.name == 'Sell') {
color = '#FF0000';
}
$.ajax({
//dataType: "json",
url: '../js/highcharts/server_processing/issuer/trade_summary.php' + company + ticker_id + date,
async: false, // this will stall the tooltip
success: function (ajax) {
rV = ajax;
// converting currency values to symbols
var chek = rV.search("EUR");
var chek1 = rV.search("GBP");
var chek_minus = rV.search("-");
if (chek != -1) {
symbol = '\u00A3';
rV = rV.replace("EUR", "\u00A3");
} else if (chek1 != -1) {
rV = rV.replace("GBP", "\u20AC");
symbol = '\u20AC';
}
var split_text = rV.split('<br/>');
// changing the color of last row of tooltip for +ve and _ve values of net trades
if (chek_minus == -1) {
rV = split_text[0] + '<br/><span style="color:' + color + '">' + split_text[1] + '</span>';
} else {
rV = split_text[0] + '<br/><span style="color:#ff0000">' + split_text[1] + '</span>';
}
}
});
}
if (this.series.name == 'Periods') {
var date = "&date=" + this.x;
var transactions = '';
$.ajax({
//dataType: "json",
url: 'http://' + closeperiodsurl + date + '&action=hover',
async: false, // this will stall the tooltip
success: function (ajax) {
transactions = ajax;
}
});
var period_format = '';
if (period_name == 'Quarterly') {
period_format = period_name;
var s = '';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + "1st Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + "2nd Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
s = s + "3rd Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
s = s + "4th Quarter"
}
period_format = s + " " + Highcharts.dateFormat('%Y', this.x);
} else if (period_name == 'Monthly') {
period_format = Highcharts.dateFormat('%b %Y', new Date(this.x));
} else if (period_name = 'Weekly') {
var s = '';
if (Highcharts.dateFormat('%e', this.x) >= 1 && Highcharts.dateFormat('%e', this.x) <= 7) {
s = s + "1st Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 8 && Highcharts.dateFormat('%e', this.x) <= 14) {
s = s + "2nd Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 15 && Highcharts.dateFormat('%e', this.x) <= 21) {
s = s + "3rd Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 22 && Highcharts.dateFormat('%e', this.x) <= 28) {
s = s + "4th Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 29 && Highcharts.dateFormat('%e', this.x) <= 31) {
s = s + "5th Week"
}
period_format = s + " " + Highcharts.dateFormat('%b %Y', this.x);
}
return period_format + "<br/>" + transactions + "<br/>" + symbol + numberWithCommas(this.y) + " Repurchased";
} else
return (Highcharts.dateFormat('%e', new Date(this.x)) == '1') ? Highcharts.dateFormat('%est %b %Y', new Date(this.x)) : ((Highcharts.dateFormat('%e', new Date(this.x)) == '2') ? Highcharts.dateFormat('%end %b %Y', new Date(this.x)) : ((Highcharts.dateFormat('%e', new Date(this.x)) == '3') ? Highcharts.dateFormat('%erd %b %Y', new Date(this.x)) : Highcharts.dateFormat('%eth %b %Y', new Date(this.x)))) + '<br/>' +
(this.series.name == 'Buy' || this.series.name == 'Sell' ? rV : '');
},
valueDecimals: 2
},
xAxis: {
lineColor: '#000',
lineWidth: 1,
type: 'datetime',
maxZoom: 3600000 * 24 * 30 * 2, // roughly 2 months
//maxZoom: 28 * 24 * 3600000, // fourteen days
maxPadding: 0.05
},
// Y AXIS - PRIMARY
yAxis: [{
//minorTickInterval: 'auto',
lineColor: '#000',
// max: 1000,
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: ''
}
}, {// Secondary yAxis
title: {
text: 'Close Periods',
max: 0.4,
min: 0.3,
gridLineColor: '#FFFFFF',
gridLineWidth: 0,
},
//labels:false,
opposite: true
}],
navigator: {
// hides the plotted line at bottom of the chart
series: {
lineWidth: 0,
marker: {
enabled: false
}
}
},
plotOptions: {
series:{ pointPadding:0,
groupPadding:5,
pointWidth:25
}
},
series: [{
// CLOSE PERIOD
name: '',
maxPointWidth: 90,
color: '#c0c0c0',
yAxis: 1,
type: close_period_chart_type,
lineWidth: 1,
shadow: false,
fillOpacity: '0.85',
data: [],
dataGrouping: {
approximation: '',
enabled: false,
forced: false,
units: [['month', [1]]],
},
}, {
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2,
enabled: true
}
}, {
//BUYS
name: 'Buy',
//unit: '%',
color: '#ffffff',
type: 'scatter',
enableMouseTracking: true,
marker: {
symbol: 'url(../img/highcharts/buy.png)'
},
data: [],
tooltip: {
enabled: true
}
}, {
// SELLS
name: 'Sell',
//unit: '%',
color: '#ffffff',
type: 'scatter',
// enableMouseTracking: true,
marker: {
symbol: 'url(../img/highcharts/sell.png)'
},
data: [],
}],
});
});
}
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]]
}
]
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 am filling the bar of the chart to particular color at specific conditions but at its mouse hover over the bar it is regaining its original color.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Title',
style: { fontSize: '17px', color: 'Black', fontWeight: 'bold', fontfamily: 'Times New Roman' }
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'AT',
'KW',
'ND',
'IT'
]
},
yAxis: {
min: 0,
title: {
text: 'Attributes Scores'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
minPointLength: -200
}
},
series: [{
name: 'YTD',
color: "#4F81BD",
data: [67, 66, 87, 60]
// data: eval('(' + seriesYTD + ')')
}, {
name: 'MAY',
color: "#BFBFBF",
data: [65, 65, 57, 70]
}, {
name: 'JUNE',
color: "#92D050",
data: [61, 77, 47, 94]
}],
exporting: {
enabled: false
}
}, function (chart) {
var ct = 0;
var minArray = new Array();
$.each(chart.series[0].data, function (i, data) {
min = data.y;
minArray[ct] = data.y;
// alert(minArray[ct]);
ct = ct + 1;
});
ct = 0;
$.each(chart.series[2].data, function (i, data) {
// alert('1: '+ data.y + ' - 2: '+ minArray[ct]);
if (data.y < minArray[ct])
data.graphic.attr({
fill: 'red'
});
else
data.graphic.attr({
fill: '#92D050'
});
ct = ct + 1;
});
});
});
Please see the code on this jsfiddle
Please suggest how to resolve this problem so that after tooltip view, the changed color i.e. red retain on specific bars.
Try to use point.update which will affect point options, not only actual state/color of that point, see: http://jsfiddle.net/NWmKL/3/