Hi Rockstar8,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetChartData()
{
List<Data> dt = GetSampleData();
object[] labels = dt.Select(x => x.LABLESNAMES).Distinct().ToArray();
string message = "[";
string axis = "[";
for (int i = 0; i < labels.Length; i++)
{
message += "{'label':'" + labels[i] + "','data':[";
var d = dt.Where(x => x.LABLESNAMES == labels[i].ToString())
.Select(x => new { axisValue = x.XAXISVAL, dataValue = x.DATAVAL, axisName = x.XAXISNAMES });
foreach (var item in d)
{
message += "[" + item.axisValue + "," + item.dataValue + "],";
if (i == 0)
{
axis += "[" + item.axisValue + ",'" + item.axisName + "'],";
}
}
message = message.Substring(0, message.Length - 1) + "]},";
}
message = message.Substring(0, message.Length - 1);
message += "]";
axis = axis.Substring(0, axis.Length - 1);
axis += "]";
ChartData chart = new ChartData();
chart.data = message;
chart.xaxisTicks = axis;
return Json(chart, JsonRequestBehavior.AllowGet);
}
public class ChartData
{
public string data { get; set; }
public string xaxisTicks { get; set; }
}
private static List<Data> GetSampleData()
{
List<Data> dt = new List<Data>();
dt.Add(new Data { ID = 1, LABLESNAMES = "FOO", DATAVAL = 300, XAXISVAL = 1.1, XAXISNAMES = "One" });
dt.Add(new Data { ID = 2, LABLESNAMES = "BAR", DATAVAL = 145, XAXISVAL = 1.1, XAXISNAMES = "One" });
dt.Add(new Data { ID = 3, LABLESNAMES = "BAZ", DATAVAL = 365, XAXISVAL = 1.1, XAXISNAMES = "One" });
dt.Add(new Data { ID = 4, LABLESNAMES = "FOO", DATAVAL = 0, XAXISVAL = 2.1, XAXISNAMES = "Two" });
dt.Add(new Data { ID = 5, LABLESNAMES = "BAR", DATAVAL = 0, XAXISVAL = 2.1, XAXISNAMES = "Two" });
dt.Add(new Data { ID = 6, LABLESNAMES = "BAZ", DATAVAL = 200, XAXISVAL = 2.1, XAXISNAMES = "Two" });
dt.Add(new Data { ID = 7, LABLESNAMES = "FOO", DATAVAL = 300, XAXISVAL = 3.1, XAXISNAMES = "Three" });
dt.Add(new Data { ID = 8, LABLESNAMES = "BAR", DATAVAL = 152, XAXISVAL = 3.1, XAXISNAMES = "Three" });
dt.Add(new Data { ID = 9, LABLESNAMES = "BAZ", DATAVAL = 0, XAXISVAL = 3.1, XAXISNAMES = "Three" });
return dt;
}
public class Data
{
public int ID { get; set; }
public string LABLESNAMES { get; set; }
public int DATAVAL { get; set; }
public double XAXISVAL { get; set; }
public string XAXISNAMES { get; set; }
}
}
View
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script>
<script src="../../Scripts/jquery.flot.barnumbers.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "GET",
url: "/Home/GetChartData",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var options = {
series: {
stack: 0,
lines: { show: false, steps: false },
bars: {
// horizontal: true,
show: true,
barWidth: 0.9,
align: 'left',
numbers: { show: true }
}
},
xaxis: { ticks: eval(r.xaxisTicks) }
};
$.plot($('#placeholder'), eval(r.data), options);
}
});
});
</script>
<div id="placeholder" style="width: 400px; height: 300px;">
</div>
Screenshot