Bob Cergol
15-Jan-2014, 08:53 AM
The TCharts do not use javascript. The way you customize them is to use the active-x control that is activated in your browser when the graphic output setting in the user profile is set to "TChart - Active-X". Please note that the active-x control is not required for users to display the graph. Any-all editing you would do on a tChart is done using the interface of the Active-X control -- no scripting is involved. You can find a help document on this Active-X control here: Documentation. (ftp://ftp.dataaccess.com/pub/products/dynamicai/documentation) Look for TeeChartGuide.zip
The High Charts -- all of the chart options prefixed with "HC" -- are javascript-based. You can inject javascript into the page using the Rules tab page in report design. You would need to visit www.highcharts.com (http://www.highcharts.com) to learn the technical details and find script examples for customizing high charts. The internals of Dynamic AI's interface to the High Charts is not documented but you can easily see what it is doing by viewing the page source in your browser and/or using other browser developer tools to inspect the scripting.
The attached PDF is a brief set of notes I compiled on the subject and gives a really simple example of controlling colors using js in the rules tab.
Here is a complicated example with screen shots showing the default high chart and the effect of injecting this rule script.
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");
}
72747275
In the future Dynamic AI will provide additional user-control over interactive style charts without requiring scripting.
Regards,
Bob
Powered by vBulletin® Version 4.2.5 Copyright © 2024 vBulletin Solutions Inc. All rights reserved.