Asp.Net MVC razor graph using jquery ajax call

Question

I am trying to bind data to a graph through a razor. I retrieve the data through a jquery ajax call and plan to bind the received data to the chart. Is it possible to include razor code in the jquery success function? How to associate count values ​​with 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>

Json result:

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

Edit: Or Can I use the jquery result group inside Razor code?

Answer 1

@Stephen Muecke, , , , , , ajax -.

- :

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

script:

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

"MyAction":

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

, "MyAction" .

Answer 2

# (i.e chartImage) javascript.

, , Json. .

: - 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