[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; }
}
|
@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>