Home
Intelligence (Analytics)
How can I dynamically change a column background color
rveeraraghav
<p>
Find more posts tagged with
Comments
kclark
<p>Can you post your rptdesign so I can look at your highlight rules?</p>
rveeraraghav
<p>Attached is the report. I got an error attaching a csv file. </p><p>Ideally, I need an if, else if, else if.. else construct. Not sure if hightlights does that.</p><p>Thanks,</p><p> Ravi</p>
kclark
<p>You could use a script like this in the onCreate() of the cell.</p><pre class="_prettyXprint">if(this.getValue() < 5000) { this.getStyle().backgroundColor = "red";}if(this.getValue() > 5000 && this.getValue() < 10000) { this.getStyle().backgroundColor = "yellow";}if(this.getValue() > 10000) { this.getStyle().backgroundColor = "green";}</pre>
rveeraraghav
<p>Thanks for the reply, Your solution works as long as I am calculating using that cell's value. Is there a way I can access other cell's values from the row? Something like this.getParent().getCell('name').getValue()? Then I will be all set. Because I need to create the color based on a column called 'percentage' which is a different cell.</p><p>- Ravi</p>
kclark
<p>I've attached an example for you. What I did was store each value of my percent aggregation in an ArrayList PGV from the onRender() of that item. Then in the onCreate() of what need to be highlighted I used a script like this to decide if it needs to be highlighted and what color (green, yellow, or red).</p><pre class="_prettyXprint">var array = reportContext.getPersistentGlobalVariable("array");var counter = parseInt(reportContext.getPersistentGlobalVariable("counter"));var test = array.get(counter);if(array.get(counter) >= .005) { this.getStyle().backgroundColor = "green";}else if(array.get(counter) < .005 && array.get(counter) >= .0025) { this.getStyle().backgroundColor = "yellow";}else if(array.get(counter) < .0025) { this.getStyle().backgroundColor = "red";}counter++reportContext.setPersistentGlobalVariable("counter", counter.toString())</pre><p>Here's the report:</p><pre class="_prettyXprint"><?xml version="1.0" encoding="UTF-8"?><report xmlns="http://www.eclipse.org/birt/2005/design" version="3.2.23" id="1"> <property name="createdBy">Eclipse BIRT Designer Version 4.2.2.v201301221637 Build <4.2.2.v20130206-1509></property> <property name="units">in</property> <method name="initialize"><![CDATA[var array = new java.util.ArrayList();reportContext.setPersistentGlobalVariable("array", array);reportContext.setPersistentGlobalVariable("counter", "0")]]></method> <property name="iconFile">/templates/blank_report.gif</property> <property name="bidiLayoutOrientation">ltr</property> <property name="imageDPI">96</property> <data-sources> <oda-data-source extensionID="org.eclipse.birt.report.data.oda.jdbc" name="Data Source" id="7"> <list-property name="privateDriverProperties"> <ex-property> <name>contentBidiFormatStr</name> <value>ILYNN</value> </ex-property> <ex-property> <name>metadataBidiFormatStr</name> <value>ILYNN</value> </ex-property> </list-property> <property name="odaDriverClass">org.eclipse.birt.report.data.oda.sampledb.Driver</property> <property name="odaURL">jdbc:classicmodels:sampledb</property> <property name="odaUser">ClassicModels</property> </oda-data-source> </data-sources> <data-sets> <oda-data-set extensionID="org.eclipse.birt.report.data.oda.jdbc.JdbcSelectDataSet" name="Data Set" id="8"> <list-property name="columnHints"> <structure> <property name="columnName">CUSTOMERNUMBER</property> <text-property name="displayName">CUSTOMERNUMBER</text-property> <text-property name="heading">CUSTOMERNUMBER</text-property> </structure> <structure> <property name="columnName">CHECKNUMBER</property> <text-property name="displayName">CHECKNUMBER</text-property> <text-property name="heading">CHECKNUMBER</text-property> </structure> <structure> <property name="columnName">PAYMENTDATE</property> <text-property name="displayName">PAYMENTDATE</text-property> <text-property name="heading">PAYMENTDATE</text-property> </structure> <structure> <property name="columnName">AMOUNT</property> <text-property name="displayName">AMOUNT</text-property> <text-property name="heading">AMOUNT</text-property> </structure> </list-property> <structure name="cachedMetaData"> <list-property name="resultSet"> <structure> <property name="position">1</property> <property name="name">CUSTOMERNUMBER</property> <property name="dataType">integer</property> </structure> <structure> <property name="position">2</property> <property name="name">CHECKNUMBER</property> <property name="dataType">string</property> </structure> <structure> <property name="position">3</property> <property name="name">PAYMENTDATE</property> <property name="dataType">date</property> </structure> <structure> <property name="position">4</property> <property name="name">AMOUNT</property> <property name="dataType">float</property> </structure> </list-property> </structure> <property name="dataSource">Data Source</property> <list-property name="resultSet"> <structure> <property name="position">1</property> <property name="name">CUSTOMERNUMBER</property> <property name="nativeName">CUSTOMERNUMBER</property> <property name="dataType">integer</property> <property name="nativeDataType">4</property> </structure> <structure> <property name="position">2</property> <property name="name">CHECKNUMBER</property> <property name="nativeName">CHECKNUMBER</property> <property name="dataType">string</property> <property name="nativeDataType">12</property> </structure> <structure> <property name="position">3</property> <property name="name">PAYMENTDATE</property> <property name="nativeName">PAYMENTDATE</property> <property name="dataType">date</property> <property name="nativeDataType">91</property> </structure> <structure> <property name="position">4</property> <property name="name">AMOUNT</property> <property name="nativeName">AMOUNT</property> <property name="dataType">float</property> <property name="nativeDataType">8</property> </structure> </list-property> <xml-property name="queryText"><![CDATA[select *from payments]]></xml-property> <xml-property name="designerValues"><![CDATA[<?xml version="1.0" encoding="UTF-8"?><model:DesignValues xmlns:design="http://www.eclipse.org/datatools/connectivity/oda/design" xmlns:model="http://www.eclipse.org/birt/report/model/adapter/odaModel"> <Version>2.0</Version> <design:ResultSets derivedMetaData="true"> <design:resultSetDefinitions> <design:resultSetColumns> <design:resultColumnDefinitions> <design:attributes> <design:identifier> <design:name>CUSTOMERNUMBER</design:name> <design:position>1</design:position> </design:identifier> <design:nativeDataTypeCode>4</design:nativeDataTypeCode> <design:precision>10</design:precision> <design:scale>0</design:scale> <design:nullability>Nullable</design:nullability> <design:uiHints> <design:displayName>CUSTOMERNUMBER</design:displayName> </design:uiHints> </design:attributes> <design:usageHints> <design:label>CUSTOMERNUMBER</design:label> <design:formattingHints> <design:displaySize>11</design:displaySize> </design:formattingHints> </design:usageHints> </design:resultColumnDefinitions> <design:resultColumnDefinitions> <design:attributes> <design:identifier> <design:name>CHECKNUMBER</design:name> <design:position>2</design:position> </design:identifier> <design:nativeDataTypeCode>12</design:nativeDataTypeCode> <design:precision>50</design:precision> <design:scale>0</design:scale> <design:nullability>Nullable</design:nullability> <design:uiHints> <design:displayName>CHECKNUMBER</design:displayName> </design:uiHints> </design:attributes> <design:usageHints> <design:label>CHECKNUMBER</design:label> <design:formattingHints> <design:displaySize>50</design:displaySize> </design:formattingHints> </design:usageHints> </design:resultColumnDefinitions> <design:resultColumnDefinitions> <design:attributes> <design:identifier> <design:name>PAYMENTDATE</design:name> <design:position>3</design:position> </design:identifier> <design:nativeDataTypeCode>91</design:nativeDataTypeCode> <design:precision>10</design:precision> <design:scale>0</design:scale> <design:nullability>Nullable</design:nullability> <design:uiHints> <design:displayName>PAYMENTDATE</design:displayName> </design:uiHints> </design:attributes> <design:usageHints> <design:label>PAYMENTDATE</design:label> <design:formattingHints> <design:displaySize>10</design:displaySize> </design:formattingHints> </design:usageHints> </design:resultColumnDefinitions> <design:resultColumnDefinitions> <design:attributes> <design:identifier> <design:name>AMOUNT</design:name> <design:position>4</design:position> </design:identifier> <design:nativeDataTypeCode>8</design:nativeDataTypeCode> <design:precision>15</design:precision> <design:scale>0</design:scale> <design:nullability>Nullable</design:nullability> <design:uiHints> <design:displayName>AMOUNT</design:displayName> </design:uiHints> </design:attributes> <design:usageHints> <design:label>AMOUNT</design:label> <design:formattingHints> <design:displaySize>22</design:displaySize> </design:formattingHints> </design:usageHints> </design:resultColumnDefinitions> </design:resultSetColumns> <design:criteria/> </design:resultSetDefinitions> </design:ResultSets></model:DesignValues>]]></xml-property> </oda-data-set> </data-sets> <styles> <style name="report" id="4"> <property name="fontFamily">sans-serif</property> <property name="fontSize">10pt</property> </style> <style name="crosstab-cell" id="5"> <property name="borderBottomColor">#CCCCCC</property> <property name="borderBottomStyle">solid</property> <property name="borderBottomWidth">1pt</property> <property name="borderLeftColor">#CCCCCC</property> <property name="borderLeftStyle">solid</property> <property name="borderLeftWidth">1pt</property> <property name="borderRightColor">#CCCCCC</property> <property name="borderRightStyle">solid</property> <property name="borderRightWidth">1pt</property> <property name="borderTopColor">#CCCCCC</property> <property name="borderTopStyle">solid</property> <property name="borderTopWidth">1pt</property> </style> <style name="crosstab" id="6"> <property name="borderBottomColor">#CCCCCC</property> <property name="borderBottomStyle">solid</property> <property name="borderBottomWidth">1pt</property> <property name="borderLeftColor">#CCCCCC</property> <property name="borderLeftStyle">solid</property> <property name="borderLeftWidth">1pt</property> <property name="borderRightColor">#CCCCCC</property> <property name="borderRightStyle">solid</property> <property name="borderRightWidth">1pt</property> <property name="borderTopColor">#CCCCCC</property> <property name="borderTopStyle">solid</property> <property name="borderTopWidth">1pt</property> </style> </styles> <page-setup> <simple-master-page name="Simple MasterPage" id="2"> <page-footer> <text id="3"> <property name="contentType">html</property> <text-property name="content"><![CDATA[<value-of>new Date()</value-of>]]></text-property> </text> </page-footer> </simple-master-page> </page-setup> <body> <table id="9"> <property name="dataSet">Data Set</property> <list-property name="boundDataColumns"> <structure> <property name="name">CUSTOMERNUMBER</property> <text-property name="displayName">CUSTOMERNUMBER</text-property> <expression name="expression" type="javascript">dataSetRow["CUSTOMERNUMBER"]</expression> <property name="dataType">integer</property> </structure> <structure> <property name="name">CHECKNUMBER</property> <text-property name="displayName">CHECKNUMBER</text-property> <expression name="expression" type="javascript">dataSetRow["CHECKNUMBER"]</expression> <property name="dataType">string</property> </structure> <structure> <property name="name">PAYMENTDATE</property> <text-property name="displayName">PAYMENTDATE</text-property> <expression name="expression" type="javascript">dataSetRow["PAYMENTDATE"]</expression> <property name="dataType">date</property> </structure> <structure> <property name="name">AMOUNT</property> <text-property name="displayName">AMOUNT</text-property> <expression name="expression" type="javascript">dataSetRow["AMOUNT"]</expression> <property name="dataType">float</property> </structure> <structure> <property name="name">Aggregation</property> <text-property name="displayName">percent</text-property> <property name="dataType">float</property> <property name="aggregateFunction">PERCENTSUM</property> <list-property name="arguments"> <structure> <property name="name">Expression</property> <expression name="value" type="javascript">row["AMOUNT"]</expression> </structure> </list-property> <property name="allowExport">true</property> </structure> </list-property> <column id="33"/> <column id="34"/> <column id="35"/> <column id="40"/> <column id="36"/> <header> <row id="10"> <cell id="11"> <label id="12"> <text-property name="text">CUSTOMERNUMBER</text-property> </label> </cell> <cell id="13"> <label id="14"> <text-property name="text">CHECKNUMBER</text-property> </label> </cell> <cell id="15"> <label id="16"> <text-property name="text">PAYMENTDATE</text-property> </label> </cell> <cell id="37"/> <cell id="17"> <label id="18"> <text-property name="text">AMOUNT</text-property> </label> </cell> </row> </header> <detail> <row id="19"> <cell id="20"> <data id="21"> <property name="resultSetColumn">CUSTOMERNUMBER</property> </data> </cell> <cell id="22"> <data id="23"> <property name="resultSetColumn">CHECKNUMBER</property> </data> </cell> <cell id="24"> <data id="25"> <property name="resultSetColumn">PAYMENTDATE</property> </data> </cell> <cell id="38"> <data id="41"> <method name="onRender"><![CDATA[var array = reportContext.getPersistentGlobalVariable("array");var newVal = parseFloat(this.getValue()).toFixed(4)array.add(newVal);this.setDisplayValue(newVal)reportContext.setPersistentGlobalVariable("array", array)]]></method> <property name="resultSetColumn">Aggregation</property> </data> </cell> <cell id="26"> <data id="27"> <method name="onRender"><![CDATA[var array = reportContext.getPersistentGlobalVariable("array");var counter = parseInt(reportContext.getPersistentGlobalVariable("counter"));var test = array.get(counter);if(array.get(counter) >= .005) { this.getStyle().backgroundColor = "green";}else if(array.get(counter) < .005 && array.get(counter) >= .0025) { this.getStyle().backgroundColor = "yellow";}else if(array.get(counter) < .0025) { this.getStyle().backgroundColor = "red";}counter++reportContext.setPersistentGlobalVariable("counter", counter.toString())]]></method> <property name="resultSetColumn">AMOUNT</property> </data> </cell> </row> </detail> <footer> <row id="28"> <cell id="29"/> <cell id="30"/> <cell id="31"/> <cell id="39"/> <cell id="32"/> </row> </footer> </table> </body></report></pre>
rveeraraghav
<p>Thank you so much. That was a big help.</p><p>- Ravi</p>
kclark
<p>You're welcome, let us know if you have anymore questions!
</p>