locked
Create Fusion Column Chart from Database using ASP.NET C# RRS feed

  • Question

  • User-1821620314 posted

    I want to create a Fusion Column Chart in ASP.NET C# based on the values in Database. I have a 'Student' table with columns as 'Sid', 'Sname' and 'Smarks' in SQL Server Database and I want to display chart with X Axis as Sname and Y Axis as Smarks. I have searched for many codes but they are not working. Kindly share Detailed Working Code ASAP.

    Tuesday, December 29, 2020 6:43 AM

All replies

  • User-1821620314 posted

    11 Views but 0 Reply. I think no one is willing to help.

    Wednesday, December 30, 2020 6:09 AM
  • User1535942433 posted

    Hi mohitjoshi72,

    Accroding to your description,I suggest you could do these:

    1.Download from FusionCharts.

    2.Start a new web-site; give the name as FusionChartGraph. It will give you one Default.aspx and .cs file.

    3.Download source code and copy the FusionCharts.dll file from the bin directory to some location. Now add a reference to this FusionCharts.dll file.

    4.Copy FusionCharts folder with all contents in your application folder.

    5.Add src="FusionCharts/FusionCharts.js".

    6.Add a JavaScript function to view the value when user will click on data label.

    Example like this:

     <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
        <script type="text/javascript"> 
            function myJS(myVar) {
                window.alert(myVar);
            }
        </script>
    <div>
                <asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
            </div>
     DataTable dt = new DataTable("Chart");
    
            string GraphWidth = "450";
    
            string GraphHeight = "420";
    
            string[] color = new string[12];
    
            //Get connection string from web.config
    
            SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["aspnet-TestApplicationWithDatabase-20190820030542"].ConnectionString);
    
    
            protected void Page_Load(object sender, EventArgs e)
    
            {
    
                if (!IsPostBack)
    
                {
    
                    ConfigureColors();
    
                    LoadGraphData();
    
                    CreateBarGraph();
    
                }
    
            }
    
            private void ConfigureColors()
    
            {
    
                color[0] = "AFD8F8";
    
                color[1] = "F6BD0F";
    
                color[2] = "8BBA00";
    
                color[3] = "FF8E46";
    
                color[4] = "008E8E";
    
                color[5] = "D64646";
    
                color[6] = "8E468E";
    
                color[7] = "588526";
    
                color[8] = "B3AA00";
    
                color[9] = "008ED6";
    
                color[10] = "9D080D";
    
                color[11] = "A186BE";
    
            }
    
            private DataTable LoadGraphData()
    
            {
    
                conn.Open();
    
                string cmd = "select Sname,Smarks from Student";
    
                SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);
    
                adp.Fill(dt);
    
                conn.Close();
    
                return dt;
    
            }
    
    
    
            private void CreateBarGraph()
    
            {
    
                string strCaption = "Month wise Student Distribution";
    
                string strSubCaption = "For the Student mark";
    
                string xAxis = "Sname";
    
                string yAxis = "Smarks";
    
    
    
                //strXML will be used to store the entire XML document generated
    
                string strXML = null;
    
                //Generate the graph element
    
                strXML = @"<graph caption='" + strCaption + @"' subCaption='" + strSubCaption + @"' decimalPrecision='0' pieSliceDepth='30' formatNumberScale='0'
    
              xAxisName='" + xAxis + @"' yAxisName='" + yAxis + @"' rotateNames='1'>";
    
                int i = 0;
    
                foreach (DataRow dr2 in dt.Rows)
    
                {
    
                    strXML += "<set name='" + dr2[0].ToString() + "' value='" + dr2[1].ToString() + "' color='" + color[i] + @"'  link=&quot;JavaScript:myJS('" + dr2["Sname"].ToString() + ", " + dr2["Smarks"].ToString() + "'); &quot;/>";
    
                    i++;
    
                }
    
                //Finally, close <graph> element
    
                strXML += "</graph>";
    
    
    
                FCLiteral1.Text = FusionCharts.RenderChartHTML(
    
                    "FusionCharts/FCF_Column3D.swf", // Path to chart's SWF
    
                    "",                              // Leave blank when using Data String method
    
                    strXML,                          // xmlStr contains the chart data
    
                    "mygraph1",                      // Unique chart ID
    
                    GraphWidth, GraphHeight,                   // Width & Height of chart
    
                    false
    
                    );
    
            }
        }

    More details,you could refer to below articles:

    https://www.codeproject.com/Tips/458890/Generate-Graph-using-FusionChart

    Best regards,

    Yijing Sun

    Wednesday, December 30, 2020 6:19 AM
  • User-1821620314 posted

    I have done the same code by following all the steps but it is not working.

    Wednesday, December 30, 2020 7:00 AM
  • User1535942433 posted

    Hi mohitjoshi72,

    I have done the same code by following all the steps but it is not working.

    What's the problems of your project? Do you have any errors?I suggest you could debug and breakpoint to your codes to check what's the problems.You could post your problems to us.It will help us to solve your problems.

    Best regards,

    Yijing Sun

    Wednesday, December 30, 2020 9:21 AM