1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. ASP.NET MVC: Connect Syncfusion Bar Chart on SQL database

ASP.NET MVC: Connect Syncfusion Bar Chart on SQL database

I am very new in Syncfusion and I need help to connect the Bar Chart in SQL database on ASP.NET MVC

From the your documentation I followed it but still not working even it's not connected to database.






Attachment: Syncfusion_Chart_e4e428b3.rar

20 Replies 1 reply marked as answer
DG Durga Gopalakrishnan Syncfusion Team October 11, 2021 12:33 PM UTC

Hi Rica, 

Thanks for using Syncfusion products. 

We have prepared chart sample based on your requirements. Please check with below samples. 

# 1 : not working even it's not connected to database 

We have ensured with local data, we were able to render the chart. Please specify in which scenario you faced the problem and kindly share any screenshot or video which replicates an issue. We have attached tested sample for your reference. 


# 2 : to connect the Bar Chart in SQL database 
 
We have prepared sample to bind the data to chart using SQL Server Database. 
 
List<ChartSqlData> data = new List<ChartSqlData>(); 
string connectionString = null; 
SqlDataAdapter adapter = new SqlDataAdapter(); 
DataSet dataset = new DataSet(); 
connectionString = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\NORTHWND.MDF;Integrated Security=True;"; 
SqlConnection con = new SqlConnection(connectionString); 
con.Open(); 
string command2 = "SELECT * FROM [Products] WHERE UnitPrice < 10"; 
SqlCommand cmd1 = new SqlCommand(command2, con); 
adapter.SelectCommand = cmd1; 
adapter.Fill(dataset); 
for (var i = 0; i < dataset.Tables[0].Rows.Count; i++) 
{ 
       string x1 = Convert.ToString(dataset.Tables[0].Rows[i]["ProductName"]); 
      double y1 = Convert.ToDouble(dataset.Tables[0].Rows[i]["UnitPrice"]); 
       double y2 = Convert.ToDouble(dataset.Tables[0].Rows[i]["UnitsInStock"]); 
       data.Add(new ChartSqlData(x1, y1, y2)); 
} 
ViewBag.dataSource = data; 



If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample so that it will be helpful for further analysis. 

Regards, 
Durga G

RI Rica replied to Durga Gopalakrishnan October 12, 2021 01:08 AM UTC

I got a problem in connection string. I tried to Connect to SQL SERVER - Network related or Instance in SQl Server Configuration Manager and allow other apps in firewall but still not working.

Error:

System.Data.SqlClient.SqlException HResult=0x80131904 Message=A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 50 - Local Database Runtime error occurred. Specified LocalDB instance name is invalid. ) Source=.Net SqlClient Data Provider StackTrace:




DG Durga Gopalakrishnan Syncfusion Team October 12, 2021 02:37 PM UTC

Hi Rica, 

We have validated your reported scenario with attached image and error description. From that, we request you to specify the DataDirectory of connectionString as path location where the database file is available in your application.  

Please let us know if you have any concerns. 

Regards, 
Durga G 


RI Rica replied to Durga Gopalakrishnan October 13, 2021 05:16 PM UTC

Hello! I tried to make integrate the code to my system and there is no data display even it's the same algorithm. I wonder what would the the problem. Here the my code and output







DG Durga Gopalakrishnan Syncfusion Team October 14, 2021 03:19 PM UTC

Hi Rica, 

We have validated the reported scenario with provided screenshots. From that, we would like to let you know that, an empty chart will be rendered when datasource is not available for series. We suggest you to ensure whether data is assigned for chart series using OnClientLoad event in chart.  

<ej:Chart ID="Chart1" OnClientLoad="onChartLoad"></ej:Chart> 
<script> 
        function onChartLoad(args) { 
            var points = args.model.series[0].dataSource; 
            console.log(points); 
       } 
</script> 

If chart series datasource is empty, then data is not binded properly in controller page from database. Please ensure with this case and do the necessary changes. Kindly revert us if you have any concerns. 

Regards, 
Durga G 


RI Rica October 15, 2021 02:25 AM UTC

Hello! Could you guide me I am very new. What would be the problem my bar chart is at the bottom, I can't find the html code of Syncfusion chart component html and css and where I could edit the css of Syncfusion components. Thank you!




Attachment: Screenshots_79714aa0.rar

DG Durga Gopalakrishnan Syncfusion Team October 15, 2021 03:21 PM UTC

Hi Rica, 

We have ensured your reported with provided code snippet. The chart control doesn’t required any CSS styles for rendering. From an attached files, we have noted that the class content-wrapper for DIV element has specific height, so chart is rendered below that element.  

Kindly ensure whether height for this class is referred from other CSS files and you can place chart inside that element or specify height for that element as 0px based on your need. We have also prepared a sample based on provided image and chart is rendered at top page.  

 


If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample to validate this case from our end. 

Regards, 
Durga G 


Marked as answer
RI Rica October 15, 2021 08:02 PM UTC

Thank you :) 


DG Durga Gopalakrishnan Syncfusion Team October 18, 2021 11:49 AM UTC

Hi Rica, 

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you. 

Regards, 
Durga G 


RI Rica October 21, 2021 01:04 AM UTC

Hello, 

I've been trying to customize the legend shape of Syncfusion chart however it doesn't give any changes. There are no error message in the code. I wondered what I missed in the code. Here's my codes


CSHTML FILE

<div class="box box-default">
<div class="box-body">
            @Html.EJS().Chart("container").Series(
            sr =>
           {
            sr.XName("Name").YName("Loan").Name("Loan Risk").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).DataSource(ViewBag.dataSource).Add();
            sr.XName("Name").YName("Score").Name("Loan Score").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).DataSource(ViewBag.dataSource).Add();
            sr.Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff")))).DataSource(ViewBag.dataSource).Name("Users").Add();
                                                                                                                       
                                                                                                                    
            }).PrimaryYAxis(px => px.LabelFormat("p1").LabelStyle(ls => ls.Color("#21130d")).LineStyle(ls => ls.Width(0)).MajorTickLines(mg => mg.Width(0))
            .MajorGridLines(mg => mg.Width(0))
            ).PrimaryXAxis(px => px.LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Hide).Interval(1)
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(0))).Tooltip(tt => tt.Enable(true)
            ).ChartArea(area => area.Border(br => br.Color("transparent"))
            ).LegendSettings(lg => lg.Visible(true).Shape(ChartShape.Hexagon)).Title("Pre - Funding Audit Report").Render()

</div>
</div>

I used Shape(ChartShape.Hexagon) method for changing the legend shape but it doesnt work


Attachment: Legend_Shape_78425b1.rar

DG Durga Gopalakrishnan Syncfusion Team October 21, 2021 04:08 PM UTC

Hi Rica, 

We request you to specify the LegendShape for chart Series to achieve your required scenario. We have attached the modified sample for your reference. Please check with below snippet and screenshot. 

@Html.EJS().Chart("container").Series(sr =>{                 sr.LegendShape(Syncfusion.EJ2.Charts.LegendShape.Rectangle).Add(); 
}).LegendSettings(ls=>ls.ShapeHeight(5).ShapeWidth(20)).Render() 

 


Please let us know if you have any concerns. 

Regards, 
Durga G 


RI Rica October 29, 2021 05:49 AM UTC

Hello,

And also if you could guide me how I'm going to get the data from View to Controller to create a Synfusion Pie Chart

using the vw_qc_loan_audit_finding_details_checklist.





Attachment: PieChart_aff340c1.rar


DG Durga Gopalakrishnan Syncfusion Team November 1, 2021 12:51 PM UTC

Hi Rica, 
  
We are validating your reported scenario. We will update the status within one business day(2nd November, 2021). We appreciate your patience until then. 
  
Regards, 
Durga G 


DG Durga Gopalakrishnan Syncfusion Team November 2, 2021 03:30 PM UTC

Hi Rica, 

Thanks for being patience. We have analyzed your query with attached snippet. We request you to use Ajax method to pass the required data from view page to controller page. Please check with the below snippet. 

$.ajax({ 
            url: "/Home/GetData", 
            type: "POST", 
            dataType: "json", 
            contentType: "application/json; charset=utf-8", 
            data: { "chartData": model }, 
            success: function (data) { 
                alert(data); 
            }, 
            failure: function (errMsg) { 
                alert(errMsg); 
            } 
        });  
[HttpPost] 
        public JsonResult GetData(ChartSqlData chartData) 
        { 
            return Json(chartData); 
        } 

Reference Links : 

Please revert us if you have any concerns. 

Regards,  
Durga G 


RI Rica December 1, 2021 01:37 AM UTC

Hello,

Can you please guide me how to use Dialog Editing in ASP.NET MVC Data Grid Control bind in SQL




RS Rajapandiyan Settu Syncfusion Team December 1, 2021 10:53 AM UTC

Hi Rica, 
 
Thanks for contacting Syncfusion support. 
   
Based on your requirement, you want to bind the data from SQL server to DataGrid. You can achieve this requirement by using URL Adaptor. By using this, you can consume data from SQL Server using Microsoft SqlClient and bound it to EJ2 DataGrid.  
   
We have already discussed this in our Knowledge Base. Please refer to the below documentation for more information.  
   
KB:  
 
The URL Adaptor is used to perform On-Demand actions in the EJ2 Grid. This is explained detailly in the below documentation.  
   
   
When we perform any Grid actions like Searching, Paging, Sorting, Filtering, Exporting, Searching, etc., we send correspond actions details to the server (url method used in the DataManager). You can get these by using DataManagerRequest class in your server method. 
 
Here, you can perform your SQL operation with your data based on the Grid actions queries and return correspond data in object format with result and count value to the Grid.  
 
You can map The CRUD operation in grid can be mapped to server-side Controller actions using the properties InsertUrl, RemoveUrl, UpdateUrl, CrudUrl and BatchUrl. 
 
Please get back to us if you need further assistance with this.  
   
Regards,   
Rajapandiyan S   


RI Rica December 1, 2021 09:00 PM UTC

Hello,

Can you give me an example. Thank you!


RS Rajapandiyan Settu Syncfusion Team December 2, 2021 12:20 PM UTC

Hi Rica, 
 
We have already attached the sample in the below KB. Kindly refer this for more information. 
 
 
 
 
Regards,   
Rajapandiyan S   


RI Rica December 3, 2021 02:27 AM UTC

Hello,

I tried the sample demo and it works however I want perform modal dialog window as I add and edit data and save using asp.net mvc bind in SQL. Thank you!




RS Rajapandiyan Settu Syncfusion Team December 3, 2021 09:00 AM UTC

Hi Rica, 
 
Thanks for your update. 
 
You can achieve your requirement by changing the Edit mode as Dialog in the Grid’s EditSettings. Find the below code example and documentation for more information. 
 
Dialog Edit:  
 
 
[index.cshtml] 
 
@Html.EJS().Grid("DialogEdit").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col => 
{ 
    --- 
}).EditSettings(edit => {edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Render() 
 
 
 
Please get back to us if you need any assistance. 
 
Regards,   
Rajapandiyan S   


Loader.
Up arrow icon