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.
|
ASP.NET MVC:
Controller:
List<ChartData> data = new List<ChartData>();
data.Add(new ChartData("Big Text Bank encourages and supports a healthy", 4,4,4.5,4.5));
data.Add(new ChartData("I consider Big Tex Bank to be diverse, refelcting", 4,4.67,4.5,4));
data.Add(new ChartData("I look forward to coming to work every day", 5,4,4.5,4.33));
data.Add(new ChartData("I would refer a friend to work here", 5,4.67,4.5,4.67));
ViewBag.dataSource = data;
View page:
@(Html.EJ().Chart("container")
.Series(sr =>
{
sr.DataSource(ViewBag.dataSource).XName("Xvalue").YName("YValue1").Add();
sr.DataSource(ViewBag.dataSource).XName("Xvalue").YName("YValue2").Add();
sr.DataSource(ViewBag.dataSource).XName("Xvalue").YName("YValue3").Add();
sr.DataSource(ViewBag.dataSource).XName("Xvalue").YName("YValue4").Add();
})
//...
)
|
|
Stored procedure:
CREATE PROCEDURE [dbo].[ChartData]
AS
BEGIN
SET NOCOUNT ON;
SELECT * FROM Orders
END
RETURN 0
View page:
@(Html.EJ().Chart("container")
.Load("chartLoad")
)
function chartLoad(sender) {
$.ajax({
type: "POST",
url: '@Url.Action("DataSource", "Home")',
async: false,
success: function (data) {
sender.model.series = [];
//Bind the data source to chart as above with respect to your series length
}
});
}
Controller:
public ActionResult DataSource(DataManager dm)
{
DataOperations operation = new DataOperations();
DataTable dt = new DataTable("Order");
string constring = ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("ChartData", con))
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
// Load into the dataTable
dt.Load(dr);
dr.Close();
con.Close();
}
}
//Convert the dataTable into list
List<EditableOrder> resList = new List<EditableOrder>();
//...
return Json(new { result = resList }, JsonRequestBehavior.AllowGet);
}
|
|
ASP.NET MVC:
string connectionString = null;
SqlDataAdapter adapter = new SqlDataAdapter();
DataSet dataset = new DataSet();
connectionString = @"Data Source=SYNCLAPN7430;Initial Catalog=chartDataSource;Integrated Security=True";
SqlConnection con = new SqlConnection(connectionString);
con.Open();
//Filter the data depend upon your requirement here
string command2 = "select * from chartData";
SqlCommand cmd1 = new SqlCommand(command2, con);
adapter.SelectCommand = cmd1;
//Stored the obtained data in dataset
adapter.Fill(dataset);
//Depends upon the length of data, stored the data in list
for (var i = 0; i < dataset.Tables[0].Rows.Count; i++)
{
string x1 = Convert.ToString(dataset.Tables[0].Rows[i].ItemArray[0]);
double y1 = Convert.ToDouble(dataset.Tables[0].Rows[i].ItemArray[1]);
double y2 = Convert.ToDouble(dataset.Tables[0].Rows[i].ItemArray[2]);
double y3 = Convert.ToDouble(dataset.Tables[0].Rows[i].ItemArray[3]);
double y4 = Convert.ToDouble(dataset.Tables[0].Rows[i].ItemArray[4]);
data.Add(new ChartData(x1, y1, y2, y3, y4));
}
//Returned data using viewbag to view page
ViewBag.dataSource = data;
|
|
Queries |
Response | ||
|
Is there anyway to pass that information from controller instead of having to write as shown below in the View |
Yes, we can able to pass the series name from controller. We have prepared a sample, in which have passed series name from code behind and bind in the view page as depicted below.
You can change this with respect to your requirement. But from your query 2, we suspect that, you have already achieved this requirement.
| ||
|
It did put the title on the legend but i was not able to see the columns for the chart. |
From the provided code snippet, we found that you have mapped YName property with different variable, so chart is not rendered properly. Thus we suggest, to map the properties with the variable you have declared in code behind, so the chart is render properly.
Find the modified code snippet below:
Screenshot:
 |
|
Queries |
Response | |
|
all 11 charts loading, the legend is only showing on the very last chart for some reason. |
From your code snippet we found that for all the charts you have specified same id(chartContainer), so the reported scenario occurs. To overcome this you need to specify the chart with unique id, so that legends will be visible to all the charts.
| |
|
I need to have it so the series are entered from top down not from bottom up. |
By default our bar chart will render with bottom up approach. However your requirement can be achieved by specifying isInversed property of axis to true, so that chart will render as per your expectation(top down). Find the code snippet below.
Screenshot:
 |
