Help Needed : Changing the Color of Bar Graph Dynamically

Question

Hi..
Is der any body to help me out...?
My Question is :- How to change the color of Bar graph Dynamically..
For example (Assume when one of the Bar Graph crosses certain limit of Y axis value mentioned, the graph must be changed into RED color)
Thanks in Advance
Edited by: user12873839 on Mar 30, 2010 10:03 PM

Answer 1

Manoj,
You have to create the entire chart manually. follow the below steps. You can refer to the anychart website for more help on different tags and features.
1. Enter the following code in the html header of the page
<script src="#WORKSPACE_IMAGES#AnyChart.js"  type="text/javascript" > </script>2. Create an ON Demand Application process by going to the Home>Application Builder>Application #>Shared Components>Application Processes
3. Click On Create
4. Enter the name as DYNAMIC_BAR_GRAPH_CHART
5. Select the processing point as On Demand
6. Click on Nxt
7. Enter the following code in the processing text
DECLARE
BEGIN
OWA_UTIL.mime_header ('text/xml', FALSE);
OWA_UTIL.http_header_close;
HTP.p ('<?xml version = "1.0" encoding="utf-8" standalone = "yes"?>');
HTP.p ('<anychart>');
     HTP.p ('<settings>');
          HTP.p ('<animation enabled="True"/>');
     HTP.p ('</settings>');
  HTP.p ('<charts>');
   HTP.p ('<chart plot_type="CategorizedVertical">');
     HTP.p ('<data_plot_settings default_series_type="Bar">');
          HTP.p ('<bar_series>');
                    HTP.p ('<tooltip_settings enabled="True">');
                    HTP.p ('<position valign="Top" halign="Right"/>');
                    HTP.p ('<format> Name: {%Name}');
                    HTP.p ( 'Value : ${%YValue}{numDecimals:0}');
                    HTP.p ('</format>');
                    HTP.p ('<font bold="false"/>'); 
                    HTP.p ('<background>');
                    HTP.p ('<corners type="Rounded" all="3"/>');
                    HTP.p ('<border type="Solid" color="DarkColor(%Color)" thickness="2"/>');
                    HTP.p ('</background>');
               HTP.p ('</tooltip_settings>');
          HTP.p ('</bar_series>');
     HTP.p ('</data_plot_settings>');
     HTP.p ('<data>');
          HTP.p ('<series name="series 1">');
           FOR cThis IN (select table2.name, table2.value
                              from table1,table2,table3
                              where table1.T1ID = table3.T3ID
                              and table2.T3ID = table3.T3ID
                              and table3.C_ID=1
                              and table3.A_ID=1
                    ORDER BY table2.name )
          LOOP
               IF cThis.value > 90 THEN
                    HTP.p ('<point name="' || cThis.name || '" y="'|| cThis.value || '" color="red"/>');
                ELSE
                    HTP.p ('<point name="' || cThis.name || '" y="'|| cThis.value || '" />');
               END IF;
          END LOOP;
          HTP.p ('</series>');
     HTP.p ('</data>');
     HTP.p ('<chart_settings>');
          HTP.p ('<title>');
               HTP.p ('<text>Chart Title</text>');
          HTP.p ('</title>');
          HTP.p ('<axes>');
               HTP.p ('<y_axis>');
                    HTP.p ('<title>');
                         HTP.p ('<text>Value</text> ');
                    HTP.p ('</title>');
                    HTP.p ('<labels>');
                         HTP.p ('<format>${%Value}{numDecimals:0}</format>');
                    HTP.p ('</labels>');
               HTP.p ('<axis_markers>');
               HTP.p ('</axis_markers>');
               HTP.p ('</y_axis>');
               HTP.p ('<x_axis position="Normal" align="inside">');
               HTP.p ('<labels display_mode="Rotated" rotation="90" align="inside" />');
               HTP.p ('<title>');
                    HTP.p ('<text>Name</text> ');
               HTP.p ('</title>');
               HTP.p ('</x_axis>');
          HTP.p (' </axes>');
     HTP.p ('</chart_settings>');
    HTP.p ('</chart>');
  HTP.p ('</charts>');
HTP.p ('</anychart>');
htmldb_application.g_unrecoverable_error := true;
END;8. Click on Create Process
Now we will create a html region to display the graph.
9. Create a new region of type HTML on the same page and select the region template as no template.
10. Enter the following code in the region source
&lt;div id="DynamicaBarGraph"></div>
&lt;script type="text/javascript" language="javascript">
function DynamicaBarGraph()
var DynamicaBarGraph = new AnyChart('/i/flashchart/swf/AnyChart.swf');
//    DynamicaBarGraph.width = "400";
//    DynamicaBarGraph.height = "400";
DynamicaBarGraph.addEventListener('pointClick', onDynamicaBarGraphClick);
    var DynamicaBarGraphData = new htmldb_Get(null,$x('pFlowId').value,'APPLICATION_PROCESS=DYNAMIC_BAR_GRAPH_CHART',0);
    gReturn = DynamicaBarGraphData.get();
    DynamicaBarGraph.setData(gReturn);
    DynamicaBarGraph.write("DynamicaBarGraph");
function onDynamicaBarGraphClick(e)
// Read point name
     name=e.data.Name;
// Read point value
     value=e.data.YValue;
// You can add onclick even here using the values name and value
DynamicaBarGraph();
</script> Hope it helps. Thanks.
Regards,
Manish