Wednesday 17 April 2013

Generating the Graphs in Asp.net

In desing page

// put one literal 

<asp:Literal ID="TATLiteral1" runat="server"></asp:Literal>


In Code Behind


        string sql = "", sql1 = "", sql2 = "", sql3="";
        string condition = "";
        string strXML, strCategories1 ;
        DataTable fdt = null;
        DataTable fdt1 = null;
        DataTable fdt3 = null;
        OracleCommand cmd = null;
        OracleDataAdapter da = null;


       /// genarate the data for your graph

            sql = " Your Query to get data";
            fdt1 = new DataTable();
            cmd = new OracleCommand(sql, conn);
            da = new OracleDataAdapter(cmd);
            da.Fill(fdt1);


     // after getting data put it in the XML format as below

  //  header tag for graph
   
         strXML1 = "<graph  rotateNames='0' animation='1'  numdivlines='4'  baseFont='Arial' baseFontSize='10' baseFontColor='000000' useRoundEdges='1' showLegend='0' bgColor='ffffff' borderColor='ffffff' showYAxisValues='0'>";


   // categories

  strCategories1 = "<categories> <category name='0-2 Hrs' /> <category name='>2 Hrs' /></categories>";

                strXML1 += strCategories1;
// dataset you are providing

                strXML1 += " <dataset seriesName='"+fdt3.Rows[0]["HOSPNAME"]+"' color='8B0000'   showValues='1'>";
                strXML1 += "<set   value='" + fdt1.Rows[0]["Total"].ToString() + "' />";
                strXML1 += "<set   value='" + fdt1.Rows[1]["Total"].ToString() + "' />";
                strXML1 += " </dataset>";

                strXML1 += " <dataset seriesName='"+fdt3.Rows[1]["HOSPNAME"]+"' color='2F4F4F' showValues='1'>";
                strXML1 += "<set   value='" + fdt1.Rows[2]["Total"].ToString() + "' />";
                strXML1 += "<set   value='" + fdt1.Rows[3]["Total"].ToString() + "' />";
                strXML1 += " </dataset>";


                strXML1 += " <dataset seriesName='" + fdt3.Rows[2]["HOSPNAME"] + "' color='20B2AA' showValues='1'>";
                strXML1 += "<set  value='" + fdt1.Rows[4]["Total"].ToString() + "' />";
                strXML1 += "<set  value='" + fdt1.Rows[5]["Total"].ToString() + "' />";
                strXML1 += " </dataset>";
               

                strXML1 += "</graph>";

// binding to literal 

                TATLiteral1.Text = FusionCharts.RenderChartHTML("../ChartsLicense/MSColumn2D.swf", "", strXML1, "Preauthinfo", "350", "170", false);




NOTE : Graph is also depends on the swf files which we provide  like BAR, COLUMN , LINE , STACKED (here m using Multi series column graph)  So download all the swf files from  fusioncharts.com ( refer it for more info for graphs)



Calling the loading images using javascript (processing image)


In head  

//Use this javascript

  <script type="text/javascript">

  function hideLoading()
        {
              document.getElementById('divLoading').style.display = "none";
              document.getElementById('divFrameHolder').style.display = "block";
              document.getElementById('div4').style.display = "none";
              document.getElementById('div2').style.display = "block";
              document.getElementById('div5').style.display = "none";
              document.getElementById('div3').style.display = "block";
        }
     </script>


In form

// call javascript function in iframe tag


 <table style="width:830px;height:480px;font-family:Arial;" bgcolor="white" align="center">
                <tr style="height:8px">
                <td align="center" style="font-weight:bold;font-size:12px;">
                <asp:Label ID="chart4" runat="server" ></asp:Label>
                </td>
                <td align="center" style="font-weight:bold;font-size:12px;">
                <asp:Label ID="chart5" runat="server" ></asp:Label>
                </td>
                </tr>
                <tr style="height:200px">
                <td colspan="2" valign="top" align="center">
                  <div id="divLoading" style="align:center;">
                    <img src="../images/loading45.gif" alt="" width="150px" height="150px" />
                  </div> 
                  <div id="divFrameHolder" style="display:none">  
                <iframe src="smartmisframeaging.aspx" onload="hideLoading()" frameborder="0" scrolling="no" width="100%" height="230"></iframe>
                 </div> 
                </td>
                </tr>
                <tr style="height: 8px">
                <td align="center" style="font-weight:bold;font-size:12px;">
                 <asp:Label ID="chrt1" runat="server"></asp:Label>
                </td>
                <td align="left" style="font-weight:bold;font-size:12px;padding-left:40px;">
                  <asp:Label ID="chrt2" runat="server"></asp:Label>
                  <asp:Label ID="chrt3" runat="server"></asp:Label>
                </td>

                </tr>
                <tr align="left">
                <td  style="width:215px;padding-left:0px;" valign="top" align="center">
                 <div id="div4" style="align:center;">
                    <img src="../images/loading45.gif" alt="" width="150px" height="150px" />
                 </div> 
                <div id="div2" style="display:none">  
                 <iframe id="preauth" src="smartmisframepreauth.aspx"  onload="hideLoading()"      frameborder="0" scrolling="no" width="100%" height="300px"></iframe>
                </div>
                </td>
                <td valign="top" align="center">
                 <div id="div5" style="align:center;">
                    <img src="../images/loading45.gif" alt="" width="150px" height="150px" />
                  </div> 
                 <div id="div3" style="display:none">  
                  <iframe src="smartMISframehrs.aspx"  onload="hideLoading()" frameborder="0" scrolling="no" width="100%" height="300px" marginwidth="0"></iframe>
                 </div> 
                </td>
                </tr>
                </table>