We Keep Coding

Hide column if field is empty table.bootstrapTable

I want to hide the column title: 'Nome do Beneficiário' when the field: 'NomeSocial' is null or empty.
Would you help me, please?
The table is responsive. Using Javascript and bootstrapTable.
tabela.bootstrapTable('refresh');
var options = {
pagination: "true",
classes: "table",
pageSize: 10,
cache: false,
pageList: "[10, 25, 50]",
sidePagination: "server",
url: url,
columns: [
{
title: 'CPF',
field: 'Cpf',
align: 'center',
valign: 'middle'
},
{
title: 'Matrícula',
field: 'Matricula',
align: 'center',
valign: 'middle'
},
{
title: 'Nome do Beneficiário',
field: 'Nome',
align: 'center',
valign: 'middle'
},
{
title: 'Nome Social do Beneficiário',
field: 'NomeSocial',
align: 'center',
valign: 'middle'
},
{
title: 'Visualizar',
align: 'center',
valign: 'middle',
formatter: visualizar
}
],
formatNoMatches: function () {
return mensagemSemRegistro;
}
};
tabela.bootstrapTable(options);
}

Highchart export not applying style(font size) on series data labels

I am creating a column chart using High Charts -- I want to export the well formed chart to PNG image, I am able to apply all the necessary style for exporting but I am not able to apply style on series data labels while exporting-- I want them to be of reduced font size in exported image.
I am inserting code here but somehow the export link/button is not appearing in the chart below
Fiddle Sample
Prompt help will highly be appreciated.
Highcharts.chart('container', {
navigation: {
menuStyle: {
background: '#E0E0E0'
},
buttonOptions: {
theme: {
style: {
cursor: 'pointer',
color: '#039',
textDecoration: 'underline'
},
states: {
hover: {
fill: 'white' //'#a4edba'
},
select: {
stroke: '#039',
fill: 'white'
}
}
}
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: 'Download', //'<span class="glyphicon glyphicon-download-alt"></span>',
menuItems: [{
textKey: 'downloadPNG',
onclick: function() {
this.exportChart();
}
}, {
textKey: 'downloadJPEG',
onclick: function() {
this.exportChart({
type: 'image/jpeg'
});
}
}]
},
},
enabled: true,
filename: 'Industry Data Set',
sourceWidth: 380,
sourceHeight: 300,
chartOptions: { // specific options for the exported image
legend: {
enabled: false,
},
plotOptions: {
series: {
pointWidth: 10,
groupPadding: 0,
dataLabels: {
enable: true,
style: {
fontSize: "10px",
fontWeight: "normal"
}
}
},
},
xAxis: {
//lineWidth: 1,
labels: {
rotate: -45,
enabled: true,
//format: "{value:.0f}",
style: {
fontSize: "6px",
fontFamily: "Arial"
}
},
},
yAxis: {
lineWidth: 1,
title: {
text: "Count",
style: {
fontFamily: "Arial",
fontSize: "8px",
}
},
labels: {
//rotate: -45,
enabled: true,
format: "{value:.0f}",
style: {
fontSize: "6px",
fontFamily: "Arial"
}
},
gridLineWidth: 0
},
},
//scale: 2,
fallbackToExportServer: false
}, // Exporting End
credits: {
enabled: false
},
colors: ['#00Aeef', '#f4b213', '#9cc84b', '#2bc4b6', '#8d64aa', '#0a3f6b', '#aa5019'],
chart: {
type: 'column'
},
title: {
text: 'Industries'
},
xAxis: {
type: 'category',
lineWidth: 1,
tickWidth: 0,
title: {
text: "",
style: {
fontFamily: "Arial"
}
}
},
yAxis: {
lineWidth: 1,
title: {
text: "Count",
style: {
fontFamily: "Arial"
}
},
gridLineWidth: 0,
labels: {
enabled: true,
format: "{value:.0f}",
style: {
fontSize: "8px",
fontFamily: "Arial"
}
},
startOnTick: true,
endOnTick: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Count <b>{point.y}</b>'
},
plotOptions: {
series: {
pointWidth: 20,
groupPadding: 0,
}
},
series: [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1],
['Istanbul', 14.2],
['Karachi', 14.0],
['Mumbai', 12.5],
['Moscow', 12.1],
['São Paulo', 11.8],
['Beijing', 11.7],
['Guangzhou', 11.1],
['Delhi', 11.1],
['Shenzhen', 10.5],
['Seoul', 10.4],
['Jakarta', 10.0],
['Kinshasa', 9.3],
['Tianjin', 9.3],
['Tokyo', 9.0],
['Cairo', 8.9],
['Dhaka', 8.9],
['Mexico City', 8.9],
['Lima', 8.9]
],
dataLabels: {
rotation: -90,
y: -17,
align: "center",
enabled: true,
borderColor: "",
style: {
fontSize: "10px",
fontWeight: 'normal',
fontFamily: "Arial",
textShadow: false
}
}
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 300px; height: 470px; margin: 0 auto"></div>

You need to overwrite series options in the exporting property. plotOptions.series will not affect the series because options for a specific series have higher priority.
exporting: {
chartOptions: {
series: [{
dataLabels: {
style: {
fontSize: "6px",
fontWeight: "normal"
}
}
}],
example: http://jsfiddle.net/s0uj4Lkk/2/

some of dataLabels not showing in stacked column Highchart

I built a stacked column chart using Highcharts, but there is a problem with dataLabels. Some of the data labels cannot be displayed.
I have created a JSFiddle: http://jsfiddle.net/samsularifin/7gf787vL/1/
This my Javascript code:
$(function () {
$('#ctrend').highcharts({
chart: {
type:'column',
margin: 75,
options3d: {
enabled: false,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: 'Month to Month Rev',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
subtitle: {
text: 'LEVEL',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
plotOptions: {
column: {
depth: 25
}
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb','Mar', 'Apr','May','Jun','Jul']
},
yAxis: {
title: {
text: '(In Bio)'
},
stackLabels: {
useHTML: true,
x: 0,
y:-28,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
color:'#722c84',
//textShadow: "1px 1px #000"
},
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.total, 0);
},
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0.1,
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
}
},
series: {
dataLabels: {
crop: false
}
}
},
tooltip: {
formatter: function() {
return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,2) + '</b>, in '+ this.series.name;
}
},
series: [{
name: 'Voice',
data: [4.77,4.08,4.76,4.66,4.78,4.93,5.07],
index:3,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
},
{
name: 'SMS',
data: [4.07,3.45,4.20,4.28,4.41,4.68,5.23],
index:2,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Other',
data: [0.52,0.49,0.61,0.62,0.62,0.64,0.70],
index:0,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Data',
data:[1.55,1.39,1.72,1.68,1.86,2.15,2.27],
index:1,
shadow : true,
dataLabels: {
enabled: true,
crop: false,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Need help!

Highcharts thinks that these data labels are too close to show them all.
You can remedy this by allowing overlap, using this code (JSFiddle):
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
// ...
}
}
}
Or making it less likely to occur by reducing the padding (JSFiddle):
plotOptions: {
series: {
dataLabels: {
padding: 0
// ...
}
}
}

Highchart Bar on big range data dont show

I'm currently working on a web project for showing traffic usage in chart mode, and I'm using Highchart Bar for this project.
The problem is, when I run this code it doesn't give error at all
<script type="text/javascript">
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Sum of User'
},
xAxis: {
categories: [
'A','B','C','D', ],
labels: {
rotation: -20,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'User Values: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'sum',
data: [
3,5,1,1, ],
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'center',
x: 0,
y: 17,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
</script>
But when I'm increasing the data categories into A, B, C, D, E, F, and G with each categories values respectively: 2,1,1,17,1,43,6,5, the script doesn't show any graph at all. Any ideas?

I dont think anything is wrong.
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Sum of User'
},
xAxis: {
categories: [
'A','B','C','D','E','F','G' ],
labels: {
rotation: -20,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'User Values: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'sum',
data: [
2,1,1,17,1,43,6, ],
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'center',
x: 0,
y: 17,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
test the fiddle
let me know your comments.

Please start with small data...
Like first try to display A,B,C ..
then A,B,C,D ..if success then add one more E..
Do small steps then check at which point that graph does not show..
On this way may solve you problem.

highcharts- php/mysql data fetch

i have echoed the data from database in another file.. now i am fetching data . I am new to jquery and highchart.. plz help
my data format passed is :
[
{"name":"a","data":0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]},
{"name":"b","data":[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]}
]
my code for highchart is :
var chartOptions = {
chart: {
renderTo: 'container',
zoomType: 'x',
defaultSeriesType: 'line',
backgroundColor: null,
plotBackgroundColor: null,
borderRadius:20,
plotShadow: false,
events: {
load: function() {
// event.exporting.buttons.infoButton.symbolX=5;
// event.exporting.buttons.infoButton.symbolY=2;
// info_img=0;
// this.renderer.rect(5, 5, 60, 25, 15).attr({ fill: issue_col[1], zIndex: 0 }).add();
}
},
style: {
zIndex: 1
},
marginRight:30
},
title: {
text: 'hello',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
xAxis: {
type:'datetime',
title: {
text: null
}
},
yAxis: {
title: {
text: 'nothing is coming',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none'
}
},
min: 0.0,
},
credits: {
enabled: true,
position: {
align: 'center',
x: 10,
verticalAlign: 'bottom',
y: -3
},
href: "http://www.interscapetech.com",
style: {
cursor: 'pointer',
color: '#909090',
fontSize: '9px'
},
text: "(c)1997- Interscape Technologies Inc. All rights reserved."
},
/*labels:{
items: [{
html: "TM",
style: {
fontSize:'8px',
left: '330px',
top: '140px'
}
}],
style: {
color: 'grey'
}
},*/
lang:{
downloadButtonTitle:'Download Chart',
printButtonTitle :'Print Chart',
infoButtonTitle:'Chart Information',
switchButtonTitle:'Click to Enlarge'
// switchButtonTitle:'Switch to Bar Chart'
},
navigation:{
buttonOptions:{
align:'right',
verticalAlign:'middle',
height:15,
symbolFill: '#4572A7',
hoverSymbolFill: '#768F3E',
hoverBorderColor:'#92A8CD',
borderColor:'#3D96AE',
backgroundColor:'white',
borderRadius:5,
borderWidth:2,
width:20,
symbolX:10,
symbolY:8,
symbolSize:10
}
},
subtitle: {
text: '',
align:'left',
style: {
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: '12px',
textShadow: 'none',
color: 'white'
},
x:3, //-165 if center
y:12
},
plotOptions: {
line: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
zindex:1
},
series:[{
zindex:1
}]
}
,
tooltip: {
formatter: function() {
var ctime= Highcharts.dateFormat('%m/%d/%Y %H:%M:%S',this.x);
var s = '<b>'+ ctime +'</b>';
$.each(this.points, function(i, point) {
var result=Math.round(point.y*10)/10;
s += '<br/>'+ point.series.name +': '+result;
});
return s;
},
shared: true,
backgroundColor: '#FCFFC5'
},
legend: {
itemStyle: {
fontFamily: 'Arial',
fontSize: '12px',
textShadow: 'none'
},
enabled: true
// symbolPadding: 10
},
series: []
};
$(document).ready(function()
{
var url='highchars_test2.php';
alert('helo');
$.getJSON(url, function(seriesData){
$(seriesData).each(function(i, pdata){
console.log();
if(i==(seriesData.length-1) || i==(seriesData.length-2))
{}
else
{
alert(pdata['data']);
chartOptions.series.push(pdata);
}
});
chart = new Highcharts.Chart(chartOptions);
});
});
cannot create the chart.. plz help..

in series a data is not formatted properly ( opening bracket missing)
I added that and its working
check this out http://jsfiddle.net/q6LVV/

Seems like in series a, the opening square bracket is missing before the data array.