We Keep Coding

highcharts group series click event to get all data in catagory

I have the following chart that on click will return the category plus the series data you clicked on. If you see in the chart I have three columns in my bar chart I wanted to get all three series data on the click. is there anyway to do this?
Here is my existing JS Fiddle js-fiddle-link
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4]
},
{
data: [50, 71.5, 106.4]
},
{
data: [21, 71.5, 106.4]
}]
});

I don't know if there is an easier way to access the series data but this snippet does what you want.
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
const series = this.series.chart.options.series;
const values = series.map(serie => serie.data[this.index]);
console.log(values);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4]
},
{
data: [50, 71.5, 106.4]
},
{
data: [21, 71.5, 106.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

How to set border in column chart - Highchart

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/

HighCharts column unknown number of series

I'm trying to populate a HighCharts dataset with results from SQL Server in Classic ASP.
When the number of series is known everything work OK but I can't get it work correctly for unknown number of series.
Here is my code for 4 series - 1 line and 3 columns.
<script type="text/javascript">
$(function () {
var DivName1 = '<%= DivName(1)%>'
var DivName2 = '<%= DivName(2)%>'
var DivName3 = '<%= DivName(3)%>'
var DivName4 = '<%= DivName(4)%>'
var DivN1 = parseInt('<%= DivN(1)%>')
var DivN2 = parseInt('<%= DivN(2)%>')
var DivN3 = parseInt('<%= DivN(3)%>')
var DivN4 = parseInt('<%= DivN(4)%>')
var DivTotal1 = parseFloat('<%= DivTotal(1)%>')
var DivTotal2 = parseFloat('<%= DivTotal(2)%>')
var DivTotal3 = parseFloat('<%= DivTotal(3)%>')
var DivTotal4 = parseFloat('<%= DivTotal(4)%>')
$('#DivCompTotalA').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
itemWidth: 180,
useHTML: true,
x: 0,
y: 40,
borderWidth: 0
},
xAxis: {
categories: ['']
},
yAxis: {
max: 7.01,
labels: {
enabled: false
},
gridLineColor: 'transparent',
plotLines: [{
value: DivTotal1,
color: '#333333',
width: 2,
label: {
text: 'Org.=' + DivTotal1 + '<br>N=' + DivN1,
align: 'right',
y: -5,
x: 0,
style: {
fontSize: '13px'
}
},
zIndex: 2
}],
title: {
text: ''
}
},
plotOptions: {
column: {
pointPadding: 0.2,
groupPadding: 0.10,
borderWidth: 0
},
series: {
dataLabels: {
enabled: true,
y: 5,
style: {
fontSize: '14px'
}
},
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
}
}
},
series: [{
name: DivName2 + ' [' + DivN2 + ']',
color: '#c9e7ff',
data: [DivTotal2]
}, {
name: DivName3 + ' [' + DivN3 + ']',
color: '#4898a4',
data: [DivTotal3]
}, {
name: DivName4 + ' [' + DivN4 + ']',
color: '#ffd949',
data: [DivTotal4]
}]
});
});
My first question is How to replace these lines:
var DivName1 = '<%= DivName(1)%>'
var DivName2 = '<%= DivName(2)%>'
var DivName3 = '<%= DivName(3)%>'
var DivName4 = '<%= DivName(4)%>'
with a loop I tried this loop but with no success
var N = '<%=N %>'
var DivName = []
for (var i = 0; i <= N; i++) {
DivName[i] = '<%= DivName(i)%>';
}
How to write the "i" inside the '<%= DivName(i)%>' so it will be a variant

Try something like this:
Set series to nothing:
series: []
Fill it by script (where seriesData is array of prepared data. For format check documentation
$.each(Div, function(i){
var chart = $('#container').highcharts();
if (chart.series.length === 1) {
chart.addSeries({
name: Div[i].Name + i + ' [' + Div[i].N + ']',
color: '#c9e7ff',
data: Div[i].Total
});
}
});
Here an example how to add 1 series. You can add as many as you like with each loop.
$(function () {
$('#container').highcharts({
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]
}]
});
// the button handler
$('#button').click(function () {
var chart = $('#container').highcharts();
if (chart.series.length === 1) {
chart.addSeries({
data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
});
}
});
});

How to Change Highchart Column Color Dynamicly

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

Change HighCharts pointInterval after creating chart

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.