Customizing Charts, Graphs and Maps Using PCScript
Mardell Cheney
March 12, 2009
1
The Outline
• • • • • • • PCScript – What is it, and why use it? PCScript – general PCScript – graph PCScript – map PCScript – gauge PCScript – textboxes and shapes Questions
March 12, 2009
2
PCScript
• What is it?
– Presentation Control Script – An object oriented scripting language similar to JavaScript but the objects only have methods, no attributes
• Why is it still around if everything is XMLbased?
– Excellent for quick customizations – Less verbose for things like custom drilldown and hover – Independent of underlying XML format
March 12, 2009 3
Documentation now in Wiki
• Corda Documentation is now in a Wiki • Go To http://wiki.corda.com • • • • • • • Links for different Wiki Spaces on left : CenterView 3.1 Documentation Corda 7.2 Documentation Tutorials Wiki Information More will be added … You can sign up to add or edit content.
4
March 12, 2009
PCScript - main
• • • • • • • addITXML message itemDelimiter paramDelimiter description suppressAutoDescription title
March 12, 2009
5
PCScript – main.addITXML
addITXML – add additional ITXML at main level
main.addITXML( )
March 12, 2009 6
PCScript – main.addITXML
March 12, 2009
7
PCScript – main.message
message – ignore contents of image template and only display the Message instead.
main.message(This message replaces all contents of the image template)
March 12, 2009 8
PCScript – main.message
March 12, 2009
9
PCScript - main
itemDelimiter – change the itemDelimiter character paramDelimiter – change the paramDelimiter character
main.paramDelimiter(^) main.itemDelimiter(|) Twelve Months.setcategories(Bob; and Betty| Fred, and Wilma) Twelve Months.setseries(Sales, for each month|33|29) Twelve Months.addHoverText(1^1^Bob; and Betty's Sales)
March 12, 2009 10
PCScript - main
March 12, 2009
11
PCScript – main (section 508)
• description – set the Chart description for dLink • suppressAutoDescription – suppresses text description generation except for those things that are explicitly specified such as main.description and graph. description • title – Specifies a title for the Corda Image in the generated text description.
March 12, 2009
12
PCScript – main.description
description – set the Chart description for dLink
main.description(Monthly Revenue)
March 12, 2009 13
PCScript – main.description
March 12, 2009
14
PCScript – all objects
• addITXML – Used to add to or change the XML definition of and Object. • setITXMLAttributes – Used to set or change the XML attributes of an Object.
– Example graph.setITXMLAttributes(common="top:100;left:20;width:400")
• hide – Hides an object in the rendered output • show – Makes an object visible (that is set to be hidden) in the rendered output
March 12, 2009
15
PCScript – graph objects
• • • • • • • • • • • • addHoverText addNote addScaleMarker dateInputFormat ddEnable ddPrefix explodePieWedge loadFile numberOfLines setCategories setDataLabelFormat setAttributes • • • • • • • • • • • setScale setSeries setSeriesNames setSeriesStyle setSeriesToSecondScale setStockHLOCOrder suppressAutoDescription suppressDescriptionItem targetCategory transposed useColorPalette
March 12, 2009
16
PCScript – graph.addHoverText
addHoverText – To add Hover text to one or more items
Twelve Months.setcategories(Jan; Feb; Mar; Apr; May; Jun; Jul; Aug; Sep; Oct; Nov; Dec) Twelve Months.setseries(Sales;33;29;43;33;32;42;30;38;39;45;78;46) Twelve Months.addHoverText(Nov,Sales,Wow Look at Nov)
March 12, 2009 17
PCScript – graph.addNote
addNote - To add an always visible NOTE to one or more items
Twelve Months.setcategories(Jan; Feb; Mar; Apr; May; Jun; Jul; Aug; Sep; Oct; Nov; Dec) Twelve Months.setseries(Sales;33;29;43;33;32;42;30;38;39;45;52;90) Twelve Months.addNote(Dec,Sales,Wow Look at Dec)
March 12, 2009 18
PCScript – graph.addScaleMarker
addScaleMarker – Add a scale marker (line or range)
Twelve Months.addScaleMarker(value, line, 2, 30,ff0000) Twelve Months.addScaleMarker(value, range, 38, 55,c0f0d0)
March 12, 2009 19
PCScript – graph.ddEnable
ddEnable – Set drilldown for one or more items
Twelve Months.ddEnable(1-99,1,http://www.corda.com/someapp?cat=%_CATEGORY_NAME)
March 12, 2009 20
PCScript – graph.explodePieWedge
explodePieWedge – specify series to explode and gap width
graph.explodePieWedge(3, 20)
March 12, 2009 21
PCScript – graph.explodePieWedge
explodePieWedge – Result
graph.explodePieWedge(Item 3, 20)
March 12, 2009 22
PCScript – graph.numberOfLines
numberOfLines – sets number of series to show as lines in line / bar combo graphs
graph.numberOfLines(2)
March 12, 2009 23
PCScript – graph.numberOfLines
numberOfLines – results
graph.numberOfLines(2)
March 12, 2009 24
PCScript – graph.setCategories
setCategories – used to set data and colors
graph.setcategories(Group 1; Group 2; Group 3) graph.setseries(Item 1;54;75;85) graph.setseries(Item 2;92;60;70) graph.setseries(Item 3;68;87;37)
March 12, 2009 25
PCScript – graph.setCategories
setCategories – used to set data and colors
graph.setcategories(Group 1;(CLR_ff0000)Group 2; Group 3) graph.setseries(Item 1;54;75;85) graph.setseries(Item 2;92;60;70) graph.setseries(Item 3;68;87;37)
March 12, 2009 26
PCScript – graph.setSeries
setSeries - used to set data and colors
graph.setcategories(Group 1; Group 2; Group 3) graph.setseries(Item 1;54;75;85) graph.setseries((CLR_ff0000)Item 2;92;60;70) graph.setseries(Item 3;68;87;37)
March 12, 2009 27
PCScript – graph.setSeries
setSeries - used to set data and colors
graph.setcategories(Group 1; Group 2; Group 3) graph.setseries(Item 1;54;75;85) graph.setseries(Item 2;92;60;70) graph.setseries(Item 3;68; (CLR_ff0000)87;37)
March 12, 2009 28
PCScript – graph.setAttributes
setAttributes – set color or symbol type (line) for data item
graph.setAttributes(Group 1, Item 2, CLR_0000FF)
March 12, 2009 29
PCScript – graph.setScale
setScale – change some scale attributes
setScale(type, auto|manual, max|startdate, min|enddate, majorTicks)
graph.setScale(value, auto, 100, 20,5)
March 12, 2009 30
PCScript – graph.useColorPalette
useColorPalette – change to the named color palette
Twelve Months.useColorPalette(Olive Monochromatic)
March 12, 2009 31
PCScript – graph.setSeriesStyle
setSeriesStyle – change how a series looks in a line graph
graph.setSeriesStyle(SeriesName, lineWidth, symbolType, areaFill, bubbleType, [lineStyle])
Twelve Months.setSeriesStyle(Sales, 3, 8, , , dashed) Twelve Months.setAttributes(1-99,Sales,SCLR_ff0000)
March 12, 2009 32
PCScript – graph objects
dateInputFormat – set date input (example : %m/%d/%Y) ddPrefix – When you have a long URL to prepend to all drilldown loadFile – Specify a local file to load data from to feed to graph setDataLabelFormat – set format string for data labels
(example %_SERIES_NAME %_VALUE)
setSeriesNames – override the series names of data that is already loaded setSeriesToSecondScale – set a series to use second scale on dual scale graphs setStockHLOCOrder – Specify the column order for High, Low, Open, Close Transposed – allows you to transpose rows and columns after data is sent to graph
March 12, 2009
33
PCScript – gauge
• • • • • • setGaugeValue setGaugeRange deleteAllRanges deleteRange setGaugeLabel setGaugeMinMax
March 12, 2009
34
PCScript – gauge.setGaugeValue
setGaugeValue – set a value into a gauge
gauge.setGaugeValue(84,Network Load)
March 12, 2009 35
PCScript – gauge.setGaugeRange
setGaugeRange – set one or more gauge ranges
Vertical Classic.deleteAllRanges() Vertical Classic.setGaugeRange(Green, 00ff00, 0, 70;Red, ff0000, 70, 100) Vertical Classic.setGaugeValue(84,Network Load)
March 12, 2009 36
PCScript - gauge
deleteAllRanges – remove all ranges (when adding new) deleteRange – remove a specific range setGaugeLabel – set the label text
March 12, 2009
37
PCScript - map
• • • • • • • • • • • addLine addPoint deleteAllRanges deleteRange loadMapFile setDrilldown setHover setLabel setLookup setMapDataColumns setValues
38
March 12, 2009
PCScript – map.setValues
setValues – Set values into a map
US.setValues(State; UT, 33;California, 60)
March 12, 2009 39
PCScript – map.setHover
setHover – specify hover text for a map shape or point
US.setValues(State; UT, 33;California, 60) US.setHover(State;UT,The state of %_LONGNAME - %_VALUE)
March 12, 2009 40
PCScript – map.setDrilldown
setDrilldown – set drilldown action for one or more
US.setValues(State; UT, 33;California, 60) US.setHover(State;UT,The state of %_LONGNAME - %_VALUE) US.setDrilldown(State;UT,http://www.corda.com/someapp?state=%_NAME)
March 12, 2009 41
PCScript – map.addPoint
addPoint – add a point to the map by lat, long with value
US.addPoint(Four Corners, 36.9992,-109.045239,33)
March 12, 2009 42
PCScript – map.addLine
addLine(srclat, srclong, destlat, destlong, [color, width, style, hover, drilldown, target])
US.addLine(36.9992,-109.045239,38.6,-90.2, ff0000, 3, solid, Four Corners to St. Louis)
March 12, 2009 43
PCScript - map
• • • • • • deleteAllRanges – remove all ranges deleteRange – remove a specific range loadMapFile – load data from a file into Map setLabel – override that label for specified shapes or points setLookup – to set explicit name lookup instead of auto setMapDataColumns – specify which column contains map data
March 12, 2009
44
PCScript - shapes
addDescription – used to describe shape in text description addHoverText – set Hover Text for a shape ddEnable – set drilldown target for a shape setLabel – set the shape label or text setValue – set the shape value
March 12, 2009
45
PCScript - textbox
• setText – Set the text for a Textbox • ddEnable – Set drilldown target for a textbox • description – set what will be shown in text description
March 12, 2009
46
PCScript - bitmap
ddEnable – set drilldown target for a bitmap image loadFile – replace bitmap image with a local file
bitmap.loadFile(D:/VE 2008/PCScript - 08/Water lilies_small.jpg)
March 12, 2009 47
PCScript – dynamic.setITXMLAttributes
setITXMLAttributes – set a file and target object to load
dynamic.setITXMLAttributes(file-name=‘US.itxml' object-name=‘US')
March 12, 2009
48
PCScript – Using in CenterView
Building using Server Script
df = datafunnel.get('datafunnels/USRoutes.dfxml'); pcscript = 'main.paramdelimiter(|)'; for (i=2;i <= df.numRows(); i++) { destination = 'request.destination:' + df.cell(i,8) + ';request.lineColor:' + df.cell(i,5)+ ';request.lineWidth:' + df.cell(i,6); drillUrl = '|' + util.getDrill('update- kpilist:RouteMap',destination,'','',''); pcscript += 'dynamic.addline(' + df.cell(i,1) + '|' + df.cell(i,2) + '|' + df.cell(i,3) + '|' + df.cell(i,4) + '|' + df.cell(i,5) + '|' + df.cell(i,6) + '|' + df.cell(i,7) + '|' + df.cell(i,8) + drillUrl + ')'; } pcscript += 'main.paramdelimiter(,)back.hide()';
March 12, 2009
49
PCScript – Using in CenterView
March 12, 2009
50
PCScript – Using in CenterView
March 12, 2009
51
Additional Resources
• CD • Corda Connection – Visual Evolution 2008
– – – – Go to portal.corda.com Login Resources Visual Evolution 2008
• Attend ITXML session following this one • Meet me in the Lounge – 1:00-2:00, 5:00 -5:30
Q&A