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. Image for the cookie policy date

Example code for reading chart data from database

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,





7 Replies

SK Saravana Kumar Kanagavel Syncfusion Team May 10, 2016 12:50 PM UTC

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 



TW Twalker May 10, 2016 03:48 PM UTC

Thank you, 

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



SK Saravana Kumar Kanagavel Syncfusion Team May 11, 2016 10:11 AM UTC

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



TW Twalker May 14, 2016 08:25 PM UTC

 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


TW Twalker May 15, 2016 10:33 PM UTC

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>

 

 



TW Twalker May 16, 2016 12:13 AM UTC

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

Daniel


SK Saravana Kumar Kanagavel Syncfusion Team May 17, 2016 05:01 AM UTC

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
 


Loader.
Up arrow icon