We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Example code for reading chart data from database

Thread ID:

Created:

Updated:

Platform:

Replies:

124021 May 9,2016 07:35 PM May 17,2016 01:01 AM ASP.NET MVC 7
loading
Tags: Chart
Daniel Snyder
Asked On May 9, 2016 07:35 PM

I have data of about 70 entries per day, and I would like to show this data on a chart with the date field, but of course, not have the date for every entry listed.  It is about six months of data altogether.

Also, I would like to read this data from a database, so need to have a way of stuffing the values into a class that I can then pass from the controller to the view.   

 I would like example code for this situation if possible.  I am having trouble even figuring out what kind of class to hold the points in.  

thank you in advance,





Saravana Kumar Kanagavel [Syncfusion]
Replied On May 10, 2016 08:50 AM

Hi Daniel, 
 
Thanks for contacting syncfusion support. 
We have analyzed your query. We have created a sample based on your requirement. In the sample, we have created the database with 10 data and then dynamically 6 months data added into the database (in your case you might have the full data available in the table). And we have getting the data from controller through AJAX and binding the data to series in chart. 
 
Please follow the code example below 
 
[CSHTML] 
function updateData(sender) {  // changed event triggered from the dropdown 
 
        var param = parseInt(sender.value); 
        $.ajax({ 
            type: "POST", 
            url: '@Url.Action("chart","Home")', 
            data: { 'data': param }, //To get data from the controller 
            async: false, 
            success: function (data) { 
 
                var chart = $("#container").ejChart("instance"); 
                chart.model.series[0].dataSource = data;               //Binding the data to the series 
                chart.model.series[0].xName = "xValue";  
                chart.model.series[0].yName = "YValue";  
                chart.redraw(); 
            }, 
            error: function (as, data) { 
 
            } 
        }); 
 
 
    } 
 
[C#] 
private System.Data.SqlClient.SqlConnection con; 
        public List<data> PullData(string data) 
        { 
 
            
            List<data> list = new List<data>(); 
            string connetionString = null; 
            SqlConnection sqlCnn; 
            SqlCommand sqlCmd; 
            SqlDataAdapter adapter1 = new SqlDataAdapter(); 
            DataSet ds = new DataSet(); 
            int i = 0; 
            string sql = null; 
            connetionString = @"Data Source=(LocalDB)\v11.0;AttachDbFilename=C:\Users\saravanakumar.kanaga\Documents\My Received Files\Storedprocedure\WebApplication1\App_Data\DB.mdf;Integrated Security=True"; 
            sql = "exec Timeline"; 
            sqlCnn = new SqlConnection(connetionString); 
          
                sqlCnn.Open(); 
                 
                sqlCmd = new SqlCommand(sql, sqlCnn); 
                sqlCmd.CommandText = "Timeline"; 
                sqlCmd.CommandType = CommandType.StoredProcedure; 
                sqlCmd.Connection = sqlCnn; 
               adapter1.SelectCommand = sqlCmd; 
                adapter1.Fill(ds); 
                int x,y; 
                Random random = new Random(); 
                double yValue=0; 
                for (int a = ds.Tables[0].Rows.Count; a < 12600; a++) 
                { 
 
                    yValue += random.NextDouble() * 10 - 5; 
 
                    ds.Tables[0].Rows.Add(new object[] { a, yValue, "20", "30", "50" }); 
                } 
                  for (i = 0; i < ds.Tables[0].Rows.Count; i++) 
                  { 
                     
                    x = (int)ds.Tables[0].Rows[i].ItemArray[0]; 
                    y = (int)ds.Tables[0].Rows[i].ItemArray[1]; 
                     
                    list.Add(new data() { xValue = x,  YValue = y  }); 
                  } 
                  
 
                adapter1.Dispose(); 
                sqlCmd.Dispose(); 
                sqlCnn.Close(); 
           
            return list; 
        } 
 
        public ActionResult Index() 
        { 
             
            return View(); 
        } 
 
        [HttpPost] 
        public ActionResult chart(int data) 
        { 
            var check = data.ToString(); 
            List<data> data1 = PullData(check); 
            return Json(data1); 
        } 
 
     
 
    public class data   //create the class 
    { 
        
        public int xValue { get; set; } 
        public int YValue { get; set; } 
        
    } 
 
In the above code, we are getting the data from the database in the controller page and pass that to the view page using AJAX by selecting the drop down value. And also we have created the class “data” with two properties xValue and yValue and created a list of type “data” and added the values accordingly.    
  
And also we have made sample for your reference and attached in the below location 
 
Note: Please change the ConnectionString for the database according to your location to run the sample.  
 
  
Find the output of the sample below 
 
 
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K 


Daniel Snyder
Replied On May 10, 2016 11:48 AM

Thank you, 

this looks like what I am trying to find, thank you very much.  


Saravana Kumar Kanagavel [Syncfusion]
Replied On May 11, 2016 06:11 AM

Hi Daniel, 
 
Thanks for the update.  
 
Please get back to us if you need any further assistance. 
 
Regards, 
Saravana Kumar K 


Daniel Snyder
Replied On May 14, 2016 04:25 PM

 The data is coming back to the page, but is being displayed as text.  

I have attached the controller, and the view and a portion of a screenshot to show what is being displayed.   I am sure it is something simple, but ... I cant find it.

Please take a look.  






Attachment: question_be4684d9.zip

Daniel Snyder
Replied On May 15, 2016 06:33 PM

I tried a different approach and simply followed the example code located here. 
 
I pasted in the example code up to where it was supposed to bind, and then ran it.
 
The chart is not drawn.  It is fairly simple and straightforward example code, so I doubt I made any mistakes with it.
 

@using Syncfusion.JavaScript.DataVisualization

<div>

@(Html.EJ().Chart("chartContainer")

.Series(sr =>

{

sr.DataSource(ViewBag.ChartData)

.Type(SeriesType.Line)

.XName("Month").YName("Sales")

.Add();

})

.PrimaryYAxis(pry => pry.LabelFormat("${value}K"))

)

 

public class ChartData

 

 

{

 

public string Month;

public double Sales;

public ChartData(string month, double sales)

 

 

{

 

this.Month = month;

this.Sales = sales;

 

 

}

}

 

public ActionResult Index()

 

 

{

 

List<ChartData> data = new List<ChartData>();

data.Add(new ChartData("Jan", 35));

data.Add(new ChartData("Feb", 28));

data.Add(new ChartData("Mar", 34));

data.Add(new ChartData("Apr", 32));

data.Add(new ChartData("May", 40));

data.Add(new ChartData("Jun", 32));

data.Add(new ChartData("Jul", 35));

data.Add(new ChartData("Aug", 55));

data.Add(new ChartData("Sep", 38));

data.Add(new ChartData("Oct", 30));

data.Add(new ChartData("Nov", 25));

data.Add(new ChartData("Dec", 32));

///...

 

 

ViewBag.ChartData = data;

 

return View();

 

 

}

 

</div>

 

 


Daniel Snyder
Replied On May 15, 2016 08:13 PM

Hi,
I found my problem,
 @Html.EJ().ScriptManager()
was not included in the _layout page.
 
thanks!

Daniel

Saravana Kumar Kanagavel [Syncfusion]
Replied On May 17, 2016 01:01 AM

Hi Daniel, 
 
Thanks for update. 
We have analyzed your query and code provided by you . Chart will render without any exception thrown you must include of  “@Html.EJ().ScriptManager()” in the layout page. We have also made a simple sample with your provided code for your reference and attached in the below location. 
 
  
Find the output of the sample below 
 
 

Please let us know if you have any concern.

Regards,
Saravana Kumar K
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;