Asp.Net MVC razor graph using jquery ajax call

Question

I am trying to bind data to graph through razor. I pull data through a jquery ajax call and planning to bind the resultant data to graph. Is there any option to include razor code inside jquery success function? How can I bind count values to x,yValues in chart code?

https://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart

@{
    var CountsPath = Server.MapPath("~/Content/Images/counts.jpg");

    if (File.Exists(CountsPath))
    {
        File.Delete(CountsPath);
    }

    var PathName = "~/Content/Images/counts.jpg";
    if (!File.Exists(Server.MapPath(PathName)))
    {
        var chartImage = new Chart(600, 400);
        chartImage.AddTitle("Count");
        chartImage.AddSeries(
            chartType: "Pie",
                name: "Sales",
                axisLabel: "Count",
                xValue: new[] { "2011", "2014" },//need from json
                yValues: new[] { "40", "285" });//need from json
        chartImage.Save(path: PathName);
    }
}

Jquery script

<script>
    $(document).ready(function () {
        $.ajax({
            type: 'get',
            url: '/Home/GetSales',
            success: function (data) {
//Bind sales data counts by year result to graph

            },
            error: function (response) {
                alert(response.Message);
            },
            dataType: 'json'
        });
    });
</script>

Result Json:

{"Sales":[
    {"Year":"2011", "loc":"ca"},
    {"Year":"2014", "loc":"wa"},
    {"Year":"2011", "loc":"wi"}
]}

Edit: Or Can I use jquery result groupd by inside Razor code?

Answer 1

As @Stephen Muecke said, this kind of solution is not possible, but, perhaps, you can try it by using a partial view to render your graph in the server and then, inject it with ajax in your web page.

Something like this:

<div>
    your page content
    <div id="graph">
    </div>
</div>

script:

$("#graph").load("MyAction", { yourdata }, function() { yourcallback });

And in "MyAction":

public ActionResult MyAction( ... ) {
    ...
    return PartialView(Model);
};

So, in this case, in 'MyAction' partial view, you can generate your graph.

Answer 2

There is no way to update C# object (ie chartImage) from javascript.

But you can do one thing as you are making call to server to get Json data. So instead of getting data you can get chart directly.

Following is the code:- In HomeController

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetSales()
    {
        var chartImage = new Chart(600, 400);
        chartImage.AddTitle("Count");
        chartImage.AddSeries(
            chartType: "Pie",
                name: "Sales",
                axisLabel: "Count",
                xValue: new[] { "2011", "2014" },// Make change based on your Json Data
                yValues: new[] { "40", "285" }// Make change based on your Json Data
                ).Write(format: "jpg");
        return null;
    }
}  

Index.cshtml

@{
   ViewBag.Title = "Index";   
 } 

<h2>Index</h2>

<img src="/home/GetSales" />

Answer 3

I have created chart in my application using below code 

// On controller side

public void My_Chart(List<my_Class> objClass)
    {
        var myChart = new Chart(width: 400, height: 300, theme: ChartTheme.Blue)
        .AddTitle("My Chart Title")
        .AddLegend()
        .AddSeries("Default",
         xValue: objClass, xField: "FieldName",
         yValues: objClass, yFields: "FieldName")
        .ToWebImage("png");
        // Charts is folder inside my project where image is got saved
        myChart.Save("~/Charts/My_image", "jpeg");
    }


// And .cshtml side code is as follows

<img src="../Charts/My_image.jpeg" />`enter code here`

Note: before image loads your controller side code must be initialised