Conditionally Bar Chart Color


 Conditionally Bar Chart (SQL Code)
=========================

Step-1 : Create a new page.

--> Create region. Name : Conditionally Bar Chart (SQL Code)

--> type : Chart

--> Attributes--> Type : Bar

--> Series
      --> Type : SQL Query

SELECT F_PRODUCT(B.PRODUCT_ID) Product, sum(B.amount) "Total Sell",

       CASE WHEN sum(B.amount) >=15000 then 'gold'

            WHEN sum(B.amount) >=10000 then 'green'

            WHEN sum(B.amount) >=7000 then 'red'

       ELSE 'red'

       END COLORS

from  PRODUCT_SELL_DETAILS B, PRODUCT_SELL_MASTER A

WHERE A.INVOICE_NO=B.INVOICE_NO

AND A.INVOICE_DATE>=SYSDATE-365

GROUP BY B.PRODUCT_ID;


--> Column Mapping :

    Label : Product

    Value : Total sell

--> GO Appearance

    COLOR : &COLORS. (with [.] Copy to paste)


Bar Chart (Javascript Color)
===================

Step-1 :

--> Create region. Name : Bar Chart (Javascript Color)

--> type : Chart

--> Series-->Type : SQL Query


 SELECT F_PRODUCT(B.PRODUCT_ID) Product, sum(B.amount) "Total Sell"

 from  PRODUCT_SELL_DETAILS B, PRODUCT_SELL_MASTER A

WHERE A.INVOICE_NO=B.INVOICE_NO

AND A.INVOICE_DATE>=SYSDATE-365

 GROUP BY B.PRODUCT_ID;


--> Column Mapping :

    Label : Product

    Value : Total sell


Step-2 : Go to Region body Attributes

--> Type : Bar

--> Advanced :

    Initialization JavaScript Function :


function( options ){         

    // Setup a callback function which gets called when data is retrieved, it allows to manipulate the series 

    options.dataFilter = function( data ) { 

        data.series[ 0 ].items[0].color = "red"; 

        data.series[ 0 ].items[1].color = "blue"; 

        data.series[ 0 ].items[2].color = "yellow"; 

        data.series[ 0 ].items[3].color = "green"; 

        data.series[ 0 ].items[4].color = "purple"; 

        data.series[ 0 ].items[5].color = "purple"; 

        data.series[ 0 ].items[6].color = "purple"; 

        data.series[ 0 ].items[7].color = "purple"; 

         data.series[ 0 ].items[8].color = "purple"; 

        data.series[ 0 ].items[9].color = "purple"; 

         data.series[ 0 ].items[10].color = "purple";  

       data.series[ 0 ].items[11].color = "purple"; 

      data.series[ 0 ].items[12].color = "purple"; 

       data.series[ 0 ].items[13].color = "purple"; 

        return data; 

    };        

    // Set chart initialization options 

    return options; 

}



Post a Comment

Previous Post Next Post