Link to home
Create AccountLog in
Avatar of faisalmohi
faisalmohi

asked on

how do open window lighbox on click on cfchart

how do open window lighbox on click on cfchart
<script type="text/javascript" src="jquery-old.pack.js"></script>
    <script type="text/javascript" src="greybox.js"></script>
    <link href="greybox.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript">
      var GB_ANIMATION = true;
      $(document).ready(function(){
        $("a.greybox").click(function(){
          var t = this.title || $(this).text() || this.href;
          GB_show(t,this.href,470,600);
          return false;
        });
      });
    </script>

<cfquery name="get_revenue" datasource="prod">
SELECT MNT,ROUND(SUM(NVL(VALUE,0))/1000000,3) TOTAL
fROM BI_TRX WHERE CODE=4 grOUP BY MNT
</cfquery>

<cfquery name="get_target" datasource="prod">
SELECT MNT,target total
FROM revenue_target 
</cfquery>


<cfchart format="PNG" chartheight="200" chartwidth="400" xaxistitle="Month" yaxistitle="Amount in Million"  showlegend="yes" scalefrom="0" scaleto="2">

		
				
      <cfchartseries  type="bar"
		query="get_revenue" 
		itemcolumn="MNT" valuecolumn="TOTAL" serieslabel="Achieved" >
      </cfchartseries>
		<cfchartseries
	             type="line" query="get_target"
	             		itemcolumn="MNT" valuecolumn="TOTAL" serieslabel="Target" >
	</cfchartseries>

		
		
    </cfchart>

Open in new window

Avatar of SRIKANTH MADISHETTI
SRIKANTH MADISHETTI
Flag of India image

you have an attribute URL for cfchart you can give "javascript:..."   to executes a client-side script  for that url attribute .

from js you can a model window which can have lightbox effect

Avatar of faisalmohi
faisalmohi

ASKER

url="javascript:showPage('chart_drill.cfm?yr=#get_revenue.yr#&mnt=$ITEMLABEL$')">

how do i put class here in url attribute as following

<a href="http://google.com/" title="Google" class="greybox">Launch Google</a>




 
<div id="div"></div>

<script>
function showpage(yr,mnt)
{
div = document.getElementById('div');
 
a = document.createElement('a');
a.textContent = 'Launch Google';
a.id = 'link1';
a.href = 'chart_drill.cfm?yr='+yr+'&mnt='+mnt;
a.setAttribute('className', 'greybox');
 
div.appendChild(a);

clickLink(a);
}

function clickLink(linkobj) {
     if (linkobj.getAttribute('onclick') == null) {
          if (linkobj.getAttribute('href')) document.location = linkobj.getAttribute('href');
     }
     else linkobj.onclick();
}
</script>




<body onLoad="showpage(1,2);">

Open in new window



The above code creates a hyper link and clicks on that link to go that href page .

 so you can just call that js function from url attribute of cfchart like this

url="javascript:showPage('#get_revenue.yr#','$ITEMLABEL$');"

I have not tested this but this should work as the created hyper link as the class name with it we can give the lightbox class name to it.

Let me know if it is not working .
could you please instruct me how to do with this?

 <script type="text/javascript" src="jquery-old.pack.js"></script>
    <script type="text/javascript" src="greybox.js"></script>
    <link href="greybox.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript">
      var GB_ANIMATION = true;
      $(document).ready(function(){
        $("a.greybox").click(function(){
          var t = this.title || $(this).text() || this.href;
          GB_show(t,this.href,470,600);
          return false;
        });
      });
    </script>
      

<table width="98%" border="0" cellspacing="1" cellpadding="1">
              <tr>
                <td align='center' class="topbar"><span class="headerwhite">Revenue   <cfoutput>#DateFormat(now(), "yyyy")#</cfoutput>
                  </span></td>
              </tr>
              <tr>
  <td align='center' class="table">
            
                  <cfquery name="get_revenue" datasource="prod">
                  SELECT MNT,yr,ROUND(SUM(NVL(VALUE,0))/1000000,3) TOTAL
                                    FROM BI_TRX WHERE CODE=4 grOUP BY MNT,yr
                  </cfquery>
                  
            <cfquery name="get_target" datasource="prod">
                  SELECT MNT,target total
                                    FROM revenue_target
                  </cfquery>
 
   
   <cfchart format="PNG" chartheight="200" chartwidth="400" xaxistitle="Month" yaxistitle="Amount in Million"  showlegend="yes" scalefrom="0" scaleto="2" url="?">
                        
      <cfchartseries  type="bar"
            query="get_revenue"
            itemcolumn="MNT" valuecolumn="TOTAL" serieslabel="Achieved" >
</cfchartseries>
            <cfchartseries
             type="line" query="get_target"
           
            itemcolumn="MNT" valuecolumn="TOTAL" serieslabel="Target" >
      </cfchartseries>


    </cfchart>
   
                  
                        </td>
              </tr>
              <tr>
                <td align='center' class="topbar"><span class="headerwhite">Visa Revenue</span></td>
              </tr>
              <tr>
                <td align='center' class="table">&nbsp;</td>
              </tr>
              <tr>
                <td align='center' class="topbar"><span class="headerwhite">Master Card Revenue</span></td>
              </tr>
              <tr>
                <td align='center' valign="top" class="table">&nbsp;</td>
              </tr>
            </table>
jquery-old.pack.js
greybox.js
greybox.css
<div id="div"></div>

<script>
function showpage(yr,mnt)
{
div = document.getElementById('div');
 
a = document.createElement('a');
a.textContent = 'Launch Google';
a.id = 'link1';
a.href = 'chart_drill.cfm?yr='+yr+'&mnt='+mnt;
a.setAttribute('className', 'greybox');
 
div.appendChild(a);

clickLink(a);
}

function clickLink(linkobj) {
     if (linkobj.getAttribute('onclick') == null) {
          if (linkobj.getAttribute('href')) document.location = linkobj.getAttribute('href');
     }
     else linkobj.onclick();
}
</script>





 
 
 
 
 
 
 <script type="text/javascript" src="jquery-old.pack.js"></script>
    <script type="text/javascript" src="greybox.js"></script>
    <link href="greybox.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript">
      var GB_ANIMATION = true;
      $(document).ready(function(){
        $("a.greybox").click(function(){
          var t = this.title || $(this).text() || this.href;
          GB_show(t,this.href,470,600);
          return false;
        });
      });
    </script>
      

<table width="98%" border="0" cellspacing="1" cellpadding="1">
              <tr>
                <td align='center' class="topbar"><span class="headerwhite">Revenue   <cfoutput>#DateFormat(now(), "yyyy")#</cfoutput>
                  </span></td>
              </tr>
              <tr>
  <td align='center' class="table">
            
                
 <cfset get_revenue = QueryNew("MNT, yr, TOTAL", "VarChar, Varchar, Varchar")>

<!--- Make two rows in the query --->
<cfset newRow = QueryAddRow(get_revenue, 2)>

<!--- Set the values of the cells in the query --->
<cfset temp = QuerySetCell(get_revenue, "MNT", "test1", 1)>
<cfset temp = QuerySetCell(get_revenue, "yr", "2009", 1)>
<cfset temp = QuerySetCell(get_revenue, "TOTAL", "10", 1)>
<cfset temp = QuerySetCell(get_revenue, "MNT", "test", 2)>
<cfset temp = QuerySetCell(get_revenue, "yr", "2010", 2)>
<cfset temp = QuerySetCell(get_revenue, "TOTAL", "12", 2)>
   
    <cfset get_target = QueryNew("MNT, target, TOTAL", "VarChar, Varchar, Varchar")>

<!--- Make two rows in the query --->
<cfset newRow = QueryAddRow(get_target, 2)>

<!--- Set the values of the cells in the query --->
<cfset temp = QuerySetCell(get_target, "MNT", "test1", 1)>
<cfset temp = QuerySetCell(get_target, "target", "2009", 1)>
<cfset temp = QuerySetCell(get_target, "TOTAL", "10", 1)>
<cfset temp = QuerySetCell(get_target, "MNT", "test", 2)>
<cfset temp = QuerySetCell(get_target, "target", "2010", 2)>
<cfset temp = QuerySetCell(get_target, "TOTAL", "12", 2)>

   <cfchart format="PNG" chartheight="200" chartwidth="400" xaxistitle="Month" yaxistitle="Amount in Million"  showlegend="yes" scalefrom="0" scaleto="2" url="javascript:showpage('#get_revenue.yr#','$ITEMLABEL$');">
                        
      <cfchartseries  type="bar"
            query="get_revenue" 
            itemcolumn="MNT" valuecolumn="TOTAL" serieslabel="Achieved" >
</cfchartseries>
            <cfchartseries
             type="line" query="get_target"
            
            itemcolumn="MNT" valuecolumn="TOTAL" serieslabel="Target" >
      </cfchartseries>


    </cfchart>
   
                  
                        </td>
              </tr>
              <tr>
                <td align='center' class="topbar"><span class="headerwhite">Visa Revenue</span></td>
              </tr>
              <tr>
                <td align='center' class="table">&nbsp;</td>
              </tr>
              <tr>
                <td align='center' class="topbar"><span class="headerwhite">Master Card Revenue</span></td>
              </tr>
              <tr>
                <td align='center' valign="top" class="table">&nbsp;</td>
              </tr>
            </table>

Open in new window


Just create a test.cfm with this and see i created a dummy queries.

run the test.cfm it should work correctly
 and redirect to page /chart_drill.cfm?yr=2009&mnt=test1 u will get both yr and mnt values on clicking the chart .

 so just replace the original queries with ur queries in main page and run it.
ASKER CERTIFIED SOLUTION
Avatar of SRIKANTH MADISHETTI
SRIKANTH MADISHETTI
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account