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
Powered by vBulletin® Version 4.2.5 Copyright © 2024 vBulletin Solutions Inc. All rights reserved.