We Keep Coding

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.

How to hide Fields and Strike-through Legends when the data is empty or Zero in Pie/Polar/Doughnut Chart?

Following is my resultant chart
Here the value of legends Happy and Very Happy is 0, hence it is overlapping each other and unable to read. So, How can I hide these values and strike through the legends while loading itself like in the below image? And yes, it is a dynamically loaded chart.
Link - Reference Pie Chart
Thanks in advance.

I am posting this answer hoping that, it will be helpful for someone later. You can also post a better solution if found.
After some deep diving into the library the files, I realised that is there are no direct answers to my question. But we can achieve that by emptying the label text in case of 0 data values.
For that, we must edit the chart options as follows,
public pieChartOptions: ChartOptions = {
responsive: true,
legend: {
position: 'top',
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
const label = ctx.chart.data.labels[ctx.dataIndex];
if (ctx.dataset.data[ctx.dataIndex] > 0)
return label + " : " + ctx.dataset.data[ctx.dataIndex];
else
return "" // retun empty if the data for label is empty
},
}
},
showLines: true,
spanGaps: true,
cutoutPercentage: 1,
rotation: 15, // rotate the chart
};
Here in the function returns empty value in case the data for the corresponding label is 0. Also I rotate the chart 15deg to make the labels horizontal align in most cases.
Reference - Chart.js documentation
Hence I achieved a better view to the user and the overlapping issues are resolved. Thanks.

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.

Google Pie Chart generates blank chart

I'm using the following json to generate my PieChart, but it generates a blank chart with no error.
The following block is my code to generate the chart:
$.post('/admin/relatorios/getVendasCidadeChart', {
dt_inicio: $("#datepicker-from").val(),
dt_fim: $("#datepicker-to").val()
}).done(function(donutData){
var dados = new google.visualization.DataTable(donutData);
var options = {
title: "Vendas por Cidade",
width: "100%",
height: "100%",
};
var chart = new google.visualization.PieChart(document.getElementById('vendas-cidade'));
chart.draw(dados, options);
});
The json output by the post request:
{"cols":[{"id":"","label":"Loja","type":"string"},{"id":"","label":"Valor(R$)","type":"number"}],"rows":[{"c":[{"v":"Loja Shopping"},{"v":"8620.00"}]},{"c":[{"v":"Loja Centro"},{"v":"10240.00"}]}]}
Chart generated:
http://i.stack.imgur.com/Dfhe4.png
Update 1
Fiddle reproducing the problem:
https://jsfiddle.net/thatmesg/1/

I had similar "issue" but that wasn't an issue. All my pie slices were just returning 0 which may happen and it's logically correct.
Add sliceVisibilityThreshold: 0 to your options variable. It should display the legend even if there will be no data. If you'll see the legend then we can assume that Google Chart library works as expected. If not... then we'll investigate further.
var options = {
legend: { position: 'top', maxLines: 6 },
sliceVisibilityThreshold: 0
};
EDIT:
I see that you're using wrong type of brackets:
That's how your JSON should look like. If you generate it using PHP, don't forget to use json_encode.
var data = google.visualization.arrayToDataTable([["Category","Hours"],["Compliance \/ Policy ($0.00)",0],["Harrassment ($0.00)",0],["Productivity ($0.00)",0],["Skills Gap ($0.00)",0],["Values Behaviour ($0.00)",0]]);
Also I see that yous JSON contains "keys". You should do something like (remove keys and pass just values to the JSON):
$final['json'] = json_encode(array_values($pie_hours));

The issue was with my values... The column "Valor" is defined as number, but the values was coming as strings with quotes...
Just removed the quotes from my JSON and it worked
{"cols":[{"id":"","label":"Loja","pattern":"","type":"string"},{"id":"","label":"Valor(R$)","pattern":"","type":"number"}],"rows":[{"c":[{"v":"Loja Shopping","f":null},{"v":8620.00,"f":null}]},{"c":[{"v":"Loja Centro","f":null},{"v":10240.00,"f":null}]}]}
Updated fiddle

HIghcharts.js add catgories with addseries on column chart

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.