The ASP.NET MVC application

[Fara Pioky]

The failure to connect the Syncfusion Bar Chart to the SQL database in ASP.NET MVC is most likely caused by incorrect database configuration or improper data binding between the Controller and the View, rather than an issue with Syncfusion itself. A step-by-step verification of the database connection, data retrieval logic, and chart data binding is required to resolve the problem.

Geometry dash

[Durga Gopalakrishnan]

Hi Fara,

Greetings from Syncfusion.

We have prepared a simple bar chart sample that uses CustomerID as the xName and Freight as the yName, sourced directly from the local NORTHWND.MDF database file. The NORTHWND.MDF file has been placed inside the App_Data folder, and the NorthwindLocal connection string has been defined in the Web.config file accordingly.

Index.cshtml

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

<script>

    var chartData = @Html.Raw(ViewBag.ChartData ?? "[]");

 

    var chart = new ej.charts.Chart({

        primaryXAxis: {

            valueType: 'Category',

        },

       series: [{

            dataSource: chartData,

            xName: 'CustomerID',

            yName: 'Freight',

            type: 'Bar',

        }],

   });

 

    chart.appendTo('#container');

</script>

 

HomeController.cs

public ActionResult Index()

{

    var data = new List<ChartPoint>();

    string connStr = ConfigurationManager.ConnectionStrings["NorthwindLocal"].ConnectionString;

 

    string sql = @"

    SELECT TOP 10 CustomerID, SUM(Freight) AS TotalFreight

    FROM Orders

    WHERE CustomerID IS NOT NULL

    GROUP BY CustomerID

    ORDER BY TotalFreight DESC;";

 

    using (var conn = new SqlConnection(connStr))

    using (var cmd = new SqlCommand(sql, conn))

    {

        conn.Open();

        using (var rdr = cmd.ExecuteReader())

        {

            while (rdr.Read())

            {

                var cust = rdr.IsDBNull(0) ? "N/A" : rdr.GetString(0);

                double totalFreight = 0;

                if (!rdr.IsDBNull(1))

                {

                    // Freight in Northwind is decimal; convert safely

                    totalFreight = Convert.ToDouble(rdr.GetDecimal(1));

                }

               data.Add(new ChartPoint { CustomerID = cust, Freight = totalFreight });

            }

        }

    }

 

    ViewBag.ChartData = JsonConvert.SerializeObject(data);

    return View();

}

Web.config

<connectionStrings>

   <add name="NorthwindLocal"

        connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\NORTHWND.MDF;Integrated Security=True;Connect Timeout=30;"

        providerName="System.Data.SqlClient" />

</connectionStrings>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BarChart.zip

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.