PDA

View Full Version : TChart - Active X



jwilk
14-Jan-2014, 10:39 PM
We are needing to create some graphs with multi-dimensions and understand the way to do this is with TChart.

We have a specialist here who knows Java, and he has taken a look. He says in order to do this we need to know what the "place holders" are that you use for each element.

We have searched in the help and are unable to find anything, hence we would greatly appreciate someones advice on this or if we are missing something a clue as to what we need to look at in the help to find the solution for ourselves.

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

jwilk
15-Jan-2014, 02:45 PM
Thanks Bob

jwilk
15-Jan-2014, 07:46 PM
We have been looking at High Chart and it appears we could include the following optional module via the rules and allow an export to Excel.

Can someone please confirm if you think our thoughts are right or if we are looking at totally the wrong thing.

http://www.highcharts.com/docs/export-module/export-module-overview

Bob Cergol
16-Jan-2014, 08:40 AM
I don't see anything on HighCharts page about their export module that talks about Excel or transferring the image file to Excel.

I really doubt this will work, but it looks like it wouldn't cost you anything to give it a try -- if it worked, it would be a static image -- not an interactive chart as the user would have using their browser as the interface to the Dynamic AI report.

Can you define a chart in the Excel sheet itself? Then maybe save the exported report information when prompted, instead of opening it, and then merge it into the sheet containing the Excel-based chart. Just thinking out loud here. I am not an Excel expert by any stretch and have never used its charting features.

Bob

jwilk
16-Jan-2014, 01:43 PM
Thanks Bob. Whilst I tend to agree with you if I tell the client to do that they will ask why they are not just doing the entire job in Excel and bypassing Dynamics. So it sort of seems you cant win no matter what you do!

Bob Cergol
16-Jan-2014, 02:28 PM
I think the answer to that question is really simple: the two products are entirely different animals.

First of all Excel is a Windows application. Dynamic AI is a web-browser application.

Secondly, and more importantly, Excel is not a Business Intelligence platform. To do anything like what you can do with Dynamic AI requires licensing, learning and deploying a large stack of Microsoft products and the involvement of very highly-skilled programmers -- and then its still a Windows application that is relying on a stack of other products to present the information -- and missing the highly interactive nature of Dynamic AI reports running in a web browser.

I think there is just no comparison in terms of cost/performance-functionality ratio between the two and Dynamic AI wins hands-down. But the customer has to decide for themselves. I learned my lesson about horses and water a long time ago. What I try to do in any presentations I make is to show the problems to which Dynamic AI is the solution and also show details of its existing, built-in capabilities that might inspire prospects to imagine how it can solve other of their problems. It is not the solution to every problem. (Which is why we still need Winprint and VRW! :-) )

Regards,
Bob