I'm using the HighCharts library to chart very large datasets (i.e., ~18,000 points). I'm using quantization on the backend to reduce the number of points to a reasonable size (less than 200). When the user selects a section of the chart, it makes an ajax request to the server and receives a new set with a higher sample frequency. However, when change the pointInterval in plotOptions, it doesn't actually change the interval on the displayed chart.
These are my options that I use to make the chart:
options = {
chart: {
renderTo: settings.highchartId,
zoomType: 'x',
spacingRight: 20,
events: {
load: getChartData,
selection: zoomChart,
}
},
title: {
text: Drupal.settings.openfitcharts.title
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
allowDecimals: false,
title: {
text: Drupal.settings.openfitcharts.xAxisTitle
}
},
yAxis: {
title: {
text: Drupal.settings.openfitcharts.yAxisTitle
},
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
series: [{
type: "line",
data: [],
}],
plotOptions: {
line: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
pointInterval: 1,
pointStart: 0,
}
}
};
This is the function I use to get the data:
function getChartData() {
activityId = settings.seriesData.activityId;
trackType = settings.seriesData.type;
jQuery.getJSON(OPENFIT_DATA_URL, {op: 'TrackHandler.getTrackData', actid: activityId, type: trackType}, function(returnData) {
console.log(returnData);
console.log(chart);
if (returnData != null) {
chart.options.plotOptions.line.pointInterval = returnData.interval;
chart.options.plotOptions.line.pointStart = returnData.start;
chart.xAxis[0].adjustTickAmount();
chart.series[0].setData(returnData.data, true);
}
});
}
You can also use series.update() to update all options once, see: http://jsfiddle.net/7XcMn/
chart.series[0].update({
pointInterval: 100,
data: [100, 200, 300]
});
Change the pointInterval of the series object not the plotOptions:
chart.series[0].pointInterval = 24 * 3600 * 1000;
chart.series[0].setData([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],true);
See this fiddle.
Related
I am trying to create a chart like this one:
:
I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.
I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.
My current Highcharts settings look like this:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Is there an built-in solution for this?
EDIT:
I used the proposed solution by ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.
There is also a small rendering issue - small gaps between the zones.
Best,
Philipp
You can add an extra spline series with zones:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/
API: https://api.highcharts.com/highcharts/series.spline.zones
Can anyone help how to set border in column chart, On click each bar to set a different border and color.
Please use this Reference Code:
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
color: null,
borderWidth:5,
borderColor:'Blue'
}
}
}
},
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]
}]
});
Updating my previous Post.
Here I am using Highcharts default colors by index e.point.index value to set borders color of column and border width is also set by index e.point.index value by click on each column. You can also use custom array of border width and color and access this by e.point.index.
plotOptions: {
series: {
events: {
click: function(e) {
var chart = e.point.series.chart;
e.point.select(true, true);
chart.series[0].data[e.point.index].graphic.attr({
'stroke': colors[e.point.index],
'stroke-width': width[e.point.index],
'fill':Highcharts.defaultOptions.colors[e.point.index],
});
}
},
}
},
var colors= ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE',
'#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'];
var width=[2,5,6,8,9,3,4] ;
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
events: {
click: function(e) {
var chart = e.point.series.chart;
e.point.select(true, true);
chart.series[0].data[e.point.index].graphic.attr({
'stroke': colors[e.point.index],
'stroke-width': width[e.point.index],
'fill':Highcharts.defaultOptions.colors[e.point.index],
});
}
},
/*allowPointSelect: true,
states: {
select: {
borderWidth: 4,
borderColor: '#e4b0b2'
}
}*/
}
},
series: [{
name: 'John',
data: [3, 4, 4, 2, 5],
showInLegend: false,
name: 'Twitter Trending',
colorByPoint: true,
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
You can use plotOptions.series.point.events.click callback function to update any of the point's properties (color, border etc.).
plotOptions: {
series: {
point: {
events: {
click: function() {
this.update({
color: Highcharts.defaultOptions.colors[Math.round(Math.random() * 10)]
});
}
}
}
}
}
Live demo: http://jsfiddle.net/kkulig/dtdw81L7/
I want to set color of highchart column according to average or limit value. For example, limit value is %20, columns value that over %20 will have red color, or under 20% will have green color.
Chart displays:
Scripts:
function GetEnduktiveKapasitiveValues(type) {
$.ajax({
url: app_base_url + "Reactive/_ReaktiveDaily",
type: 'POST',
data: { branchId: 9, dateMonth: 3, type: type },
success: function (result) {
var list = [];
$.each(result.DateList, function (i, val) {
var value = new Date(parseInt(val.substr(6)));
var month = value.getMonth() + 1;
var ret = value.getDate() + "." + month + "." + value.getFullYear();
list[i] = ret;
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Günlük Endüktif - Kapasitif Ceza Limiti Değerleri'
},
subtitle: {
text: ''
},
xAxis: {
categories: list
},
yAxis: {
min: 0,
title: {
text: 'Oran (%)'
}
},
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} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
borderRadius: 20
},
color : ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
},
series: [{
name: result.Name,
data: result.RateList,
type: 'column'
}, {
name: 'Ceza Limiti',
type: 'line',
data: result.Average,
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
},
error: function (result) { }
});
}
I want to get like this result:
Make a temp series object.
Then loop through you data and assign data.color based on your value and push it to series data object.
After the loop finishes push the temp series object to the hightchart options series.
JSFIDDLE
Example is a simple demo. You will need to adapt it to your need.
You can do this by specifying the colour in your data. e.g. from the highcharts examples:
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
color: '#BF0B23'
}, 194.1, 95.6, 54.4]
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/point/color/
http://api.highcharts.com/highcharts#series.data.color
I have a bar chart. I want the dataLabels to not stick onto the bars, but move it to the most right border of the plot area and have it text-aligned right.
This is what I have come to so far: (jsfiddle)
$(function () {
var cat = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']; //, 'Sep', 'Oct', 'Nov', 'Dec', 'foo', 'bar', 'bla'];
var barWidth = 16;
chart = new Highcharts.Chart({
chart: {
type: "bar",
renderTo: 'container',
events: {
load: function() {
var plotHeight = this.plotHeight;
console.log('plotHeight = ' + plotHeight);
var catWidth = (barWidth-2) / (2*plotHeight/cat.length);
var plot = [];
for(var i=0; i<(cat.length); i+=1) {
var newPlot = {
color: 'grey',
width: 1,
value: i+catWidth //+(cat.length/($('#container').height()/10))
};
plot.push(newPlot);
this.xAxis[0].addPlotLine(newPlot);
}
//this.xAxis[0].addPlotLine(plot);
}
}
},
title: {
text: null
},
credits: {
text: null,
enabled: false
},
xAxis: {
categories: cat,
title: {
text: null,
enabled: false
}
},
yAxis: {
title: {
text: null,
enabled: false
},
labels: {
enabled: false
},
gridLineWidth: 0,
gridLineColor: 'none'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: '#000',
formatter: function() {
return Math.abs(this.y).toFixed(1) + '%';
},
crop: false, // DIRTY!!! :(
overflow: 'justify', // DIRTY!!! :(
x: -360 // DIRTY!!! :(
}
}
},
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, 9.9, 9.9, 9.9],
pointWidth: barWidth
}]
});
});
I have to stick at mostly native Highcharts as I need to export the chart as svg to reuse in a pdf file. So using CSS and useHtml: true are out of question as well as dirty hacks like crop: false, overflow: 'justify', dataLabels.x: -360 (just to show you what I want to do - although it is not right aligned).
How am I able to accomplish that?
You can use workaround with the translating datalables like here:
var width = chart.plotWidth;
$.each(chart.series[0].data, function(i,d){
var bbox = d.dataLabel.getBBox().width;
d.dataLabel.attr({
x: width - bbox
});
});
http://jsfiddle.net/9YyVJ/2/
I'm using Highcharts and I want to turn off all the labels. I made my own graph that has its own title and data axes. How do I make the ones provided by Highcharts invisible?
At the moment, I just need to get rid of the y axis marks but I'm not certain how.
Here's what I have so far:
$('#container').highcharts({
chart: {
type: 'area',
backgroundColor: 'transparent'
},
title: {
text: ' '
},
credits: {
enabled: false
},
xAxis: {
categories: [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ']
},
series: [{
name: 'Rich',
color: '#FF0000',
data: []
}, {
name: 'Poor',
data: []
}]
});
}
Highcharts has fabulous documentation with fiddle examples for most stuff: http://api.highcharts.com/highcharts
http://jsfiddle.net/fnHzg/
$('#container').highcharts({
chart: {
},
title : {
text: null
},
xAxis: {
title: {
enabled: false
}
},
yAxis: {
title: {
enabled: false
}
},
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]
}]
});
To also turn off the yAxis and xAxis labels and tick marks:
xAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
tickLength: 0
},