I have an existing highchart on which I need to highlight a single column.
It is a percentile graph that has been around for a while, I am still pretty new to high charts, but I have seen a similar question here on SO, this question, though deals with stacked bars and a click event...
The code makes sense to me in the example, but I guess I am missing something,
Here is my sample (trying to highlight the 24th column)
https://jsfiddle.net/52t43y3k/2/
Here is the question I saw:
Highlight one bar in a series in highcharts?
for ref, my code is
var col_chart = $('#section-2-chart').highcharts({
chart: {
type: 'column'
},
tooltip: { enabled: false },
credits:false,
title: false,
xAxis: {
title:{text:'PERCENTILES'},
type: 'Percentile',
labels: {
enabled:true,
formatter: function() {
return this.value*2;
}
}
},
yAxis: {
min: 0,
title:{text:'Total Image Weight'}
},
legend: {
enabled: false
},
series: [{
data: [169,12003,38308.5,61739.7,97069,131895.5,161086.7,198758.7,219779.3,243567.7,276607.7,296931.5,327457.5,362840.3,383978,410685.5,443774,467039.5,491654,517205,544754.7,578468.3,605392.5,644214.5,693765,766953.7,806616,855380.7,894161,942282,1001179.7,1062697.7,1125773.3,1186437,1236893.7,1314379.5,1378944,1454090.3,1553065,1689346,1833150,1957396,2077851.5,2228644.7,2390102,2725365.5,3147844.3,3607372,4239281.5,5190061,9422370.8],
tooltip: {
pointFormat: '<b>{point.y:f} Bytes</b>'
}
}]
});
//TRIED THIS AND series.data[24] - essentially the 24th bar should be highlighted
col_chart.series[0].data[24].update({color:'red'});
You need to access the highcharts off of your jquery object:
col_chart.highcharts().series[0].data[24].update({
color: 'red'
});
For clarity
In your example, the following is true:
console.log(col_chart instanceof jQuery); // true
From the highcharts source:
/**
* Register Highcharts as a plugin in jQuery
*/
if (win.jQuery) {
win.jQuery.fn.highcharts = function () {
var args = [].slice.call(arguments);
if (this[0]) { // this[0] is the renderTo div
// Create the chart
if (args[0]) {
new Highcharts[ // eslint-disable-line no-new
isString(args[0]) ? args.shift() : 'Chart' // Constructor defaults to Chart
](this[0], args[0], args[1]);
return this;
}
// When called without parameters or with the return argument, return an existing chart
return charts[attr(this[0], 'data-highcharts-chart')];
}
};
}
Meaning, highcharts() is a plugin for jQuery, so you can access it (assuming it's been attached to the dom element already, as in your case above) by calling highcharts off a jQuery selector instance.
So I have a large amount of data that I need to display all stored in separate CSV files. So I created two charts just fine in highcharts, one line, one area, but instead of copying and pasting the function over and over again I was hoping I could just iterate through it like so:
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
var libraryLength = library.length;
var area =['#attendanceRoom','#attendanceGroup'];
var i = 0;
function areaChart(){
$(function () {
$.get(library[i], function(csv) {
$(area[i]).highcharts({
chart: {
type: 'area'
},
data: {
csv: csv
},
title: {
text: 'Attendance by Room'
},
yAxis: {
title: {
text: null
},
minorTickInterval: 'auto'
},
legend:{
align: 'left',
verticalAlign: 'top',
floating: true
},
});
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart();
}
I was looking at this Manage multiple highchart charts in a single webpage using jQuery.extend() or Highcharts.setOptions but that sets options for each individual chart and then you just make them over and over again. I thought a better solution might be to just have the one function and then just re-run it for each individual chart especially since I'm pulling the data from .CSV files.
So is this possible? Or should I go with jQuery.extend()?
Thanks for any help in advance!
Just two things I would improve:
$(function () { }); - I would encapsulate whole JS, not only part with AJAX and Highcharts:
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
...
for (i = 0; i < libraryLength; i++){
areaChart();
}
});
make library[i] and area[i] as arguments for areaChart():
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
...
function areaChart(lib, area){
$.get(lib, function(csv) {
$(area).highcharts({
chart: {
type: 'area'
},
data: {
csv: csv
}
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart(library[i], area[i]);
}
});
Of course, you can add more params to areaChart for example type, and pass on what kind of the chart should be rendered:
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
var types = ['line', 'area'];
...
function areaChart(lib, area, type){
$.get(lib, function(csv) {
$(area).highcharts({
chart: {
type: type
},
data: {
csv: csv
}
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart(library[i], area[i], types[i]);
}
});
Don't overdo with the params, no one likes to read 10params and control order etc. Instead you may consider passing one object param (renamed from areaChart to myChart):
myChart({
lib: library[i],
area: area[i],
type: types[i]
});
And in myChart() method:
function myChart(options) {
$.get(options.lib, function(csv) {
$(options.area).highcharts({
chart: {
type: options.type
},
data: {
csv: csv
}
});
});
}
Currently I am doing this:
$(function () {
// Create the chart
$.getJSON('db_cpu.php', function(data) {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
enabled: false
},
title: {
text: 'Database utilization'
},
series: data
}, function (chart) {
normalState = new Object();
normalState.stroke_width = null;
normalState.stroke = null;
normalState.fill = null;
normalState.padding = null;
//normalState.r = null;
normalState.style = hash('text-decoration', 'underline');
hoverState = new Object();
hoverState = normalState;
pressedState = new Object();
pressedState = normalState;
//pressedState.style = hash('text-decoration', 'none');
chart_1DButton = chart.renderer.button('1D', 52, 10, function () {
$.getJSON('db_memory.php', function (data) {
console.log(data);
chart.series[0].setData(data);
chart.redraw();
});
unselectButtons();
chart_1DButton.setState(2);
}, normalState, hoverState, pressedState);
chart_1DButton.add();
});
function unselectButtons() {
chart_1DButton.setState(0);
}
});
});
when I clicked on the button, my chart does not diplay any data. dp_cpu.php and db_memory.php outputs json formated data that has name and data in it already. For exmaple dp_cpu.php outputs this data:
[{"name":"ServerA","data":[[1375142940000,1.85],[1375143540000,2.07],[1375144140000,1.96],[1375144740000,1.9],[1375145340000,2.06],[1375145940000,2.03],[1375146540000,1.69],[1375147140000,2.6],[1375147740000,2.1],[1375148340000,1.68],[1375148940000,2.03],[1375149540000,1.83],[1375150140000,1.84],[1375150740000,2.01],[1375151340000,1.88],[1375151940000,1.6],[1375152540000,2.02],[1375153140000,1.27],[1375153740000,1.47],[1375154340000,2],[1375154940000,1.97],[1375155540000,2.51],[1375156140000,3.59],[1375156740000,4.06],[1375157340000,4.13],[1375157940000,4.15],[1375158540000,4.19],[1375159140000,4.13],[1375159740000,4.44],[1375160340000,4.14],[1375160940000,4.15],[1375161540000,5.01],[1375162140000,4.13],[1375162740000,5],[1375163340000,4.97],[1375163940000,5.04],[1375164540000,5.09],[1375165140000,5.14],[1375165740000,4.93],[1375166340000,4.43],[1375166940000,5],[1375167540000,4.93],[1375168140000,5.1],[1375168740000,5.05],[1375169340000,5],[1375169940000,5.12],[1375170540000,4.14],[1375171140000,4.13],[1375171740000,4.85],[1375172340000,4.19],[1375172940000,4.13],[1375173540000,4.17],[1375174140000,2.02],[1375174740000,1.62],[1375175340000,1.77],[1375175940000,2.01],[1375176540000,1.86],[1375177140000,1.85],[1375177740000,2.1],[1375178340000,2.03],[1375178940000,1.79],[1375179540000,2.09],[1375180140000,1.95],[1375180740000,1.73],[1375181340000,2.12],[1375181940000,2.07],[1375182540000,1.65],[1375183140000,2.1],[1375183740000,2.03],[1375184340000,1.63],[1375184940000,2.13],[1375185540000,1.93],[1375186140000,1.65],[1375186740000,2.19],[1375187340000,1.98],[1375187940000,1.69],[1375188540000,2.13],[1375189140000,1.93],[1375189740000,1.72],[1375190340000,2.15],[1375190940000,2.07],[1375191540000,1.7],[1375192140000,2.15],[1375192740000,2.03],[1375193340000,1.73],[1375193940000,2.71],[1375194540000,1.96],[1375195140000,1.72],[1375195740000,2.15],[1375196340000,2.15],[1375196940000,1.85],[1375197540000,2.2],[1375198140000,1.93],[1375198740000,1.8],[1375199340000,2.19],[1375199940000,1.98],[1375200540000,1.85],[1375201140000,2.27]]}]
I have some more info. when I do another getJSON as below example, It looks like I need to reset each series. This is really not convenient. I need to be able to read and external file and just show whatever in that file as chart and redraw the chart. Any ideas?
$.getJSON('db_memory.php', function (data) {
console.log(data);
chart.series[0].setData([[1375142940000,100],[1375143540000,2.07],[1375144140000,1.96],[1375144740000,1.9],[1376408000000,90.06]]);
chart.series[1].setData([[1375142940000,10],[1375143540000,20.07],[1375144140000,40.96],[1375144740000,50.9],[1376408000000,50.06]]);
chart.series[2].setData([[1375142940000,10],[1375143540000,20.07],[1375144140000,40.96],[1375144740000,50.9],[1376408000000,20.06]]);
chart.series[3].setData([[1375142940000,10],[1375143540000,20.07],[1375144140000,40.96],[1375144740000,50.9],[1375145340000,10.06]]);
});
I have tried something like this and it is partially working with one problem. After clicking the button, I get the chart but my button disappears:
$(function () {
// Create the chart
$.getJSON('db_pc.php', function(data) {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
enabled: false
},
title: {
text: 'Database utilization'
},
series: data
}, function (chart) {
normalState = new Object();
normalState.stroke_width = null;
normalState.stroke = null;
normalState.fill = null;
normalState.padding = null;
//normalState.r = null;
normalState.style = hash('text-decoration', 'underline');
hoverState = new Object();
hoverState = normalState;
pressedState = new Object();
pressedState = normalState;
//pressedState.style = hash('text-decoration', 'none');
chart_1DButton = chart.renderer.button('1D', 52, 10, function () {
$.getJSON('db_memory.php', function (data1) {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
enabled: false
},
title: {
text: 'Database utilization'
},
series: data1
});
});
unselectButtons();
chart_1DButton.setState(2);
}, normalState, hoverState, pressedState);
chart_1DButton.add();
});
function unselectButtons() {
chart_1DButton.setState(0);
}
});
});
You can use addSeries() then you will not need to reset data, but in case when you use setData, redrawing is called, so redraw() can be skipped.
You only add your button when the chart is created.
The problem is that when you use the following code
, new Highcharts.StockChart..., the chart will load again, so it's will render without your button.
So, you have two options, add a callback that will add the button again, or use serie.setData to change it's data dinamically.
I'd go with the second option.
Other problem is that the response is an array, you have to access it the following way data[0]
Finally will have the following code:
chart_1DButton = chart.renderer.button('1D', 52, 10, function () {
$.getJSON('db_memory.php', function (data) {
// update data
// chart.series[0].setData( data[0].data );
// update series' options
chart.series[0].update(data[0]);
});
unselectButtons();
chart_1DButton.setState(2);
}, normalState, hoverState, pressedState);
after looking at different options, I realized that what I need to do maybe better implemented using html/css type buttons:
https://gist.github.com/kix/3039177
And using jquery click event I can load any kind of chart to the div:
$(document).ready(function(){
$("#prof_d").click(function(){
web_cpu();
});
});