HIghcharts.js add catgories with addseries on column chart - javascript

I have a highcharts column graph which updates dynamically with a new series. I would like to have the x-axis category label also update with the series. I am updating the categories, which I believe is correct, but they are not displaying on the chart. Thoughts?
Thank you.
else{
var chart = $('#chart-area').highcharts();
categories = chart.xAxis[0].categories;
categories.push(data.item.test);
chart.xAxis[0].setCategories(categories, false);
chart.addSeries({
name: data.item.test,
data: [parseInt(data1)] // in data should be number not string
});
chart.redraw();
}
});

Solution is to use series.addPoint() instead of chart.addSeries(), for example:
chart.series[0].addPoint({ name: 'name', y: parseInt(val) })
Otherwise, each series is created for first category always.

Related

Enable x-axis label for the last chart selected

I have common x axis for all 3 charts. Want to show X-axis label only for the last chart selected. I wouldn't know exactly how many chart I would select. So this has to be dynamic.
I tried below:
I initially disable x-axis label for all charts. Need to enable x-axis label only for the last chart selected(Which would be the bottom most chart).
document.querySelectorAll('#checkboxes input').forEach(function(checkbox) {
checkbox.addEventListener('change', (e) => {
const id = e.target.dataset.id,
checked = e.target.checked,
checkedCheckboxes = document.querySelectorAll('#checkboxes input:checked').length,
node = document.querySelector(`#chart${id}`);
const chartEps = [
chartEp1,
chartEp2,
chartEp3,
]
console.log("id", id)
//chartEps[id].xAxis[0].options.labels.enabled = true
// The ID has to be the id of last chart selected. So that only for last chart xAxis label is enabled.
chartEps[id].update({
labels: {
enabled: true
},
});
Please see fiddle: https://jsfiddle.net/xhLt6a01/8/
Instead of dynamic x axis label, I also tried setting empty chart with x axis which need to shown at all times at the bottom (commented code at the bottom of fiddle).
But couldn't get both options to work. I would really appreciate If I could get any help on this.
To dynamically enable/disable the labels, in the update call, set the option xAxis, but (somehow unexpectedly) it should be at the top level of the options object, at the same level as chart:
Highcharts.charts.forEach(function(chart, i) {
chart.update({
chart: {
height: height / checkedCheckboxes
},
xAxis:{
labels: {
enabled: ...your boolean criterion here for chart i...
}
}
});
});
For the particular case when you want to enable the axis only for the last shown chart I'd use something on lines of
{enabled: selected[i] && selected.indexOf(true, i+1) === -1}
where selected is an array that keeps track on selected checkboxes, that is equivalent to shown charts. Take a look at this fiddle for a modified version of your original code.

Data not showing with the Timestamp Values : Highcharts

So What I am doing is that I am taking timestamp data as X axis and the values as Y-axis.
but the problem arises is that the data is not displaying on the chart althogh the timestamp values are being displayed in the console, but not displaying on chart.
the data values are as follows:
var countArray = ["2020-14-03 11:14:48.225000","2020-14-03 11:14:48.226000","2020-14-03 11:14:48.227000","2020-14-03 11:14:48.228000","2020-14-03 11:14:48.229000","2020-14-03 11:14:48.230000","2020-14-03 11:14:48.231000","2020-14-03 11:14:48.232000","2020-14-03 11:14:48.233000","2020-14-03 11:14:48.234000","2020-14-03 11:14:48.235000","2020-14-03 11:14:48.236000","2020-14-03 11:14:48.237000","2020-14-03 11:14:48.238000","2020-14-03 11:14:48.239000","2020-14-03 11:14:48.240000","2020-14-03 11:14:48.241000","2020-14-03 11:14:48.242000","2020-14-03 11:14:48.243000","2020-14-03 11:14:48.244000"]; //X-axis Values
var numArray = [2,5,3,6,4,6,3,6,3,6,3,7,3,6,3,5,3,5,6,3] ; // Y-axis Values
Here is the Fiddle That I am trying.
https://jsfiddle.net/abnitchauhan/wq4na5fy/
the main problem is that the data is not displaying as per the values above
You have set the shift argument in the addPoint method to true, which, combined with an empty data array, causes that points do not appear.
if (x > 1000) {
series.addPoint([x, y], true, false, false);
}
Live demo: https://jsfiddle.net/BlackLabel/xhok1d6e/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
You have to enable tooltip in highcharts option like below:
tooltip: {
enabled: true,
},
The tooltip's content is rendered from a subset of HTML.
Highcharts Tooltip document
Highcharts Tooltip API Reference

Add custom parameter to info.contentsFunction

I need to be able to add some custom info to the pie.info.contentsFunction in Zoomcharts. I have multiple charts on the page, each one created like so...
var pc = new PieChart({
pie: {
innerRadius: 0.5,
},
container: chartContainer1,
area: { height: 500 },
data:chartData,
toolbar: {
"fullscreen": true,
"enabled": true
},
info: {
contentsFunction: boomChartTT
}
});
In the "boomChartTT" function I need to know what chart is being hovered upon. I'd like to be able to do something like this...
info: {
contentsFunction: boomChartTT(i)
}
...where 'i' is the index of the chart.
The reason I need to know the chart index is because I have some other data saved in an indexed array for each chart. The index of the chart matches the index of the data.
EXAMPLE: if user hovers on a slice in chart2 I'd want to pass '2' to the boomChartTT function so I can access the totals data for that chart (say, totalsData[2]).
I've done this in the past with other chart libraries by simply adding a data attribute to the chart container to give me the index like so...
<div id="chartContainer1" data-index="1"></div>
...and then I'm able to access the chartContainer from the hover function (contentsFunction) and then get that index.
I don't want to add the totals data to the actual chart data because I'd have to add it to each slice which is redundant.
Is there a way to do this?
Please let me know if my post is unclear.
EDITED TO ADD:
I don't think it matters but here is the boomChartTT function:
function boomChartTT(data,slice){
var tt="<div class=\"charttooltip\">";
if(data.name==="Others" || data.name==="Previous"){return tt+=data.name+"</div>";}
//var thisData=dataSearch(totalsData[i],"REFERRINGSITE",data.id);
tt+="<h5 class=\"strong\">"+data.id+"</h5>"+oHoverTable.render(thisData)+"</div>";
return tt;
}
The commented line is where I would need the index (i) to to get the correct totalsData.
SOLVED. I simply added "chartIndex" to the data like so...
for(var i=0;i<r.length;i++){
var thisDataObj ={
id:r[i].REFERRINGSITE,
value:r[i].PCTOFSALES,
name:r[i].REFERRINGSITE,
chartIndex: arguments[1],//<----- arguments[1] is the chart index
style: { expandable: false, fillColor: dataSearch(dataRSList,"REFERRINGSITE",r[i].REFERRINGSITE)[0].COLOR }
};
chartData.preloaded.subvalues.push(thisDataObj);
}
Then in the boomChartTT function...
function boomChartTT(data,slice){
var tt="<div class=\"charttooltip\">";
if(data.name==="Others" || data.name==="Previous"){return tt+=data.name+"</div>";}
var thisData=dataSearch(totalsData[data.chartIndex-1],"REFERRINGSITE",data.id);
tt+="<h5 class=\"strong\">"+data.id+"</h5>"+oHoverTable.render(thisData)+"</div>";
return tt;
}
I feared that adding custom fields to the chart data would break the chart (which I believe I've experienced with other libraries). So, there you go.

Threshold value change on click of rangeSelector in HighStock graph

I need to change the threshold value on click of rangeSelector in HighStock graph.
Also, I need to change the line value inside PlotLines of y-axis.
I tried following code
xAxis: {
events:{
setExtremes: function(e) {
if (e.trigger == "rangeSelectorButton" &&
e.rangeSelectorButton.text == "1m"){
// this.threshold = 20;
alert("on click of 1m range selector");
// for threshold value
this.threshold=20;
this.series[0].plotOptions.threshold=20;
this.plotOptions[0].series[0].threshold=20;
this.rangeSelector.clickButton(0, true);
// for changing the line value of plotLines
this.yAxis[0].plotLines[0].value=20;
}
},
}
},
Click here for jsfiddle link
I have put some alert to test that click on rangeSelector is working fine.
I tried to change the values but the chart is not getting updated.
Any help would be really appreciated.
Inside setExtremes, this references the xAxis object. The threshold is on the series object, so you need to get a reference to the right series.
var series = this.chart.series[0];
Then, you need to update it with the new value.
series.update({threshold: threshold}, false);
I'm passing false for the redraw parameter, since we're also going to update the plotLine, and we'll only want to redraw once.
For the plotLine, you'll need a reference to the yAxis.
var yAxis = this.chart.yAxis[0];
And, then you'll need to pass the new plotLine settings to the update method.
yAxis.update({
plotLines: [{
value: threshold,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}]
});
https://jsfiddle.net/w6bzohgd/3/

Highcharts Column Series Point Object Click Function

Recently I posted a question on Highcharts column charts drilldown. I have found that in click event of point object you can find out which column was clicked. I have implemented the same in my code but I am not getting alert in my code. Please find below my code. First is my chart options variable -
var columnoptions = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Column Chart'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Exposure'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('here');
}
}
}
}
},
series: []
};
I am filling the series dynamically with below statements in a loop -
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
Finally I display my chart like this -
chart = new Highcharts.Chart(columnoptions);
But I am not getting any alert on column click. I get error javascript error messages in IE. I am using IE8. Kindly help me with this. Highcharts official example with static data works fine and I have seen that. My chart displays correctly without any issues. But I need to know which column was clicked to implement drilldown functionality. Please help.
---Edit
Here is the full function I am using to draw the charts-
function displayColumnChart(){
columnoptions.series = [];
columnoptions.xAxis.categories = [];
var seriesOptions = {
name: 'Column Chart',
data: [],
};
/* category array contains x axis category values
value array contains y axis numeric values */
for(index = 0; index < categoryArray.length; index++){
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
}
columnoptions.series.push(seriesOptions);
chart = new Highcharts.Chart(columnoptions);
}
I am reading my data from an XML doc and then creating value and category array. Chart comes fine but not getting alert on point click. Please help. Thanks. :) Sorry for delay in posting the code.
I only added the latest version of the highcharts and point click is working for me. Thanks.

Categories