PDA

View Full Version : How to turn off Data Values on Column Chart



Michael Macliver
19-Sep-2015, 08:42 AM
Is it possible to turn off the "Data Values" on a Highcharts Column chart using the Rules tab?

In Highcharts you can do this using the Plot Options:

plotOptions: {
line: {
dataLabels: {
enabled: false
},
},

9263

Bob Cergol
19-Sep-2015, 03:29 PM
Hi Mike,

Dynamic AI dynamically plays with the data labels according to a variety of factors: number of groupers being charted; size of chart; combination of row & column groupers -- and it will automatically remove the labels, or change their orientation from horizontal to vertical as space allows.

To override that and suppress them requires injecting script via the rules tab so you're on the right track. However you have to encapsulate that script in the right place in the hierarchy of the HighCharts objects. I'm in over my head hear but am researching this further. FWIW here is an example script that generates a complete new chart type that Jeff Kimmel of HCSS shared with me a few years ago. You will find nested in the code a reference to the plotOPtions and dataLabels tags you show in your snippet. I'm testing to see if I can make just that tiny piece work within a standard chart type built into Dynamic AI. The example gives one an appreciation for all the HTML and .js Dynamic AI is generating on the fly, along with the SQL queries all from the metadata of the report design, data source and user profile.


Highcharts.theme = {
colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 400],
stops: [
[0.0, 'rgb(201, 201, 201)'],
[0.3, 'rgb(0, 112, 112)'],
[1.0, 'rgb(255, 255, 255)']
]
},
borderWidth: 0,
borderRadius: 15,
plotBackgroundColor: null,
plotShadow: false,
plotBorderWidth: 0
},
title: {
style: {
color: '#FFF',
font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
subtitle: {
style: {
color: '#DDD',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
xAxis: {
gridLineWidth: 0,
lineColor: '#999',
tickColor: '#999',
labels: {
style: {
color: '#000',
fontWeight: 'bold'
}
},
title: {
style: {
color: '#AAA',
font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
yAxis: {
alternateGridColor: null,
minorTickInterval: null,
gridLineColor: 'rgba(255, 255, 255, .1)',
lineWidth: 0,
tickWidth: 0,
labels: {
style: {
color: '#FFF',
fontWeight: 'bold'
}
},
title: {
style: {
color: '#AAA',
font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
legend: {
itemStyle: {
color: '#CCC'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#333'
}
},
labels: {
style: {
color: '#CCC'
}
},
tooltip: {
backgroundColor: {
linearGradient: [0, 0, 0, 50],
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 0,
style: {
color: '#FFF'
}
},


plotOptions: {
line: {
dataLabels: {
color: '#CCC'
},
marker: {
lineColor: '#333'
}
},
spline: {
marker: {
lineColor: '#333'
}
},
scatter: {
marker: {
lineColor: '#333'
}
},
candlestick: {
lineColor: 'white'
}
},

toolbar: {
itemStyle: {
color: '#CCC'
}
},

navigation: {
buttonOptions: {
backgroundColor: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#606060'],
[0.6, '#333333']
]
},
borderColor: '#000000',
symbolStroke: '#C0C0C0',
hoverSymbolStroke: '#FFFFFF'
}
},

exporting: {
buttons: {
exportButton: {
symbolFill: '#55BE3B'
},
printButton: {
symbolFill: '#7797BE'
}
}
},

// scroll charts
rangeSelector: {
buttonTheme: {
fill: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
stroke: '#000000',
style: {
color: '#CCC',
fontWeight: 'bold'
},
states: {
hover: {
fill: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#BBB'],
[0.6, '#888']
]
},
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.1, '#000'],
[0.3, '#333']
]
},
stroke: '#000000',
style: {
color: 'yellow'
}
}
}
},
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},

navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(16, 16, 16, 0.5)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
}
},

scrollbar: {
barBackgroundColor: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
barBorderColor: '#CCC',
buttonArrowColor: '#CCC',
buttonBackgroundColor: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
buttonBorderColor: '#CCC',
rifleColor: '#FFF',
trackBackgroundColor: {
linearGradient: [0, 0, 0, 10],
stops: [
[0, '#000'],
[1, '#333']
]
},
trackBorderColor: '#666'
},

// special colors for some of the demo examples
legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
legendBackgroundColorSolid: 'rgb(70, 70, 70)',
dataLabelsColor: '#444',
textColor: '#E0E0E0',
maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);


function test(lat,long)
{
window.open("http://maps.google.com/maps?hl=en&ie=UTF8&q=loc:" + lat + "," + long + "&ll=" + lat + "," + long + "&spn=0.04005,0.072956&z=13&output=embed");
}


Also, depending on what you're trying to do, you have to end the script that Dynamic AI is generating before you can start your own. Here's an real simple example of one I wrote to experiment with coloring some groupers based on their data values. It colors sales reps with a name containing the string 'teen' red. Notice the very first line of the script closes DAI's script.



</script>
<script type="text/javascript" src="Images/hc/jquery-1.11.1.min.js"></script>
<script>
$("#DAST TD:contains('teen')").css("background-color","red");


I'll get back to you as soon as I can with a solution to your requirement.

Bob

Bob Cergol
19-Sep-2015, 04:28 PM
Mike,

After inspecting the browser page source of a sample report showing a chart with the labels you don't want, my sense is that the property that controls the labels is buried so deep, that it can't be overridden unless you completely do the whole chart as in the example from Jeff. I think Dynamic AI is applying logic as it merges an extensive amount of metadata and actual data and High Chart libraries to dynamically generate the script that generates the chart in the browser. For exmaple I found this buried in the page source and clearly Dynamic is generating the "enabled: true/false" and rotation settings dynamically according to it's own logic about what will look the best in a given context.



labels: {formatter: function() {return Highcharts.numberFormat(this.value, 0);}, style: {font: 'normal 9px Verdana, sans-serif'}}},
plotOptions: {series: {dataLabels: { enabled: true, rotation: -90, x:-3, y:-50, align: 'right',style: { fontSize: "9px"},


I will ask Carsten at Cintac if they will consider adding an option to turn the data labels on or off in charts in the current version.

Bob

Michael Macliver
19-Sep-2015, 07:08 PM
Thanks Bob. I understand what you're saying, but I thought there might be some sort of call back function so you can do exactly that, i.e. overwrite what DAI has done.

In the High Chart Color Control Options in Dynamic AI version 6.4.46 and higher document it says " “Document.ready “ can be used for many other tweaks to a chart", which I assumed was tweaking an existing chart, not creating a new one from scratch.

Bob Cergol
19-Sep-2015, 10:26 PM
There may be a relatively simple way to do it on the script tab. I just can't find it but I know so little about javascript and manipulating the DOM. Let's see what someone at Cintac or DAE who has knowledge of these can advise.
Bob

Eddy Kleinjan
20-Sep-2015, 08:16 AM
Hi Michael and Bob,

Dynamic AI will load the data series in the chart with data and also explicitly specify that it should show data labels. If you want to disable this, then you cannot do that by setting some global options for the chart, since that does not overrule the setting on the data series.

You can however modify some options of the chart after it has been loaded. You will need to refresh the chart for that. Most probably you will not notice this using the method below, since it will update the chart before it even had the chance to be shown.

You can add the code below to the 'Rules' tab of your report. If you like, you can also 'hack' it into a report style so that it becomes reusable.

Hope this helps!

Best regards,
Eddy

Code to add:
$(document).ready(function() {
for (var i=0; i<chart1.series.length;i++) {
var o = chart1.series[i].options;
o.dataLabels.enabled = false;
chart1.series[i].update(o);
}
});

Bob Cergol
20-Sep-2015, 09:33 AM
That worked for me Eddy.
Thanks,
Bob

Michael Macliver
21-Sep-2015, 02:45 AM
Perfect. Just comes up the first time with out the data labels.

Thanks Eddie.