locked
Using chart helpers with Ajax RRS feed

  • Question

  • User-515183 posted

    Hi,

    I have a page that takes parameters sends from ajax to  controller gets the result and sends it back as  return File(chart, "image/bmp")

    Then on the view I have the above this is the dropdowns for dates to pick and text.  Not working.  Does anyone have any suggestions?  Thanks,

    <img src="@Url.Action("Charts", "ControllerName")" width="500" alt="Maintenance Chart" />

    Thursday, December 13, 2018 7:46 PM

All replies

  • User1520731567 posted

    Hi sbuggle,

    Could you please post more details,such as,view,controller and model...

    I just know this code show a img.

    No more useful information.

    Best Regards.

    Yuki Tao

    Friday, December 14, 2018 9:12 AM
  • User-515183 posted

    Yes of course see below ,  I have a page that loads has input form controls these parameter are sent to the actionresult charts from ajax then image should display beneath the form controls get the values send

     SqlDataReader reader = command.ExecuteReader();
                 
                        var details = new ChartViewModel();
                        while (reader.Read())
                    {
                            details.Readings = reader["valeur"].ToString();
                            details.Datestaken = reader["dates"].ToString();
                            chartData.Add(details);
                           
                    }
    
                        ArrayList xValuel = new ArrayList();
                        ArrayList yValuel = new ArrayList();
    
                        chartData.ToList().ForEach(rs => xValuel.Add(rs.Readings));
                        chartData.ToList().ForEach(rs => yValuel.Add(rs.Datestaken));
                        reader.Close();
    
    
    
                     
    
    
                        var chart = new Chart(width: 1000, height: 700)
    
    
                            .AddTitle("Maintenance Graphs")
    
                               .AddSeries(
                                chartType: "Bar",
                               xValue: xValuel , xField: "Readings",
                               yValues: yValuel, yFields: "Datestaken")
                               .Write();
                        chart.Save("~/Content/chart.bmp");
                        var filepath = "~/Content/chart.bmp";
    
                     return File(filepath, "image/bmp");
                       

    Friday, December 14, 2018 2:02 PM
  • User-515183 posted
      $.ajax({
                             type: 'get',
                           
                             url: '@Url.Action("Charts", "ElecMechLogs")',
                             contentType: "application/json; charset=utf-8",
                             cache:true,
                             dataType: 'html',
                             data: { 'locA':JSON.stringify(locA) ,'date1': date1, 'date2': date2 },
                        
                    success: function (chartData) {
                     
    
                    },
    

    Friday, December 14, 2018 2:03 PM
  • User-474980206 posted

    change your action to return the image as a base64 string. add an id to the image tag, then its: 

    ...       
           success: function (chartData) {
              $('#imageID').attr("src", "data:image/bmp;base64," + chartData); 
           },

    note: bmps are large and base64 doubles the size. you might want to convert to jpeg, or png before converting to base64 

    Friday, December 14, 2018 4:18 PM
  • User-515183 posted

    ok I tried that with the ajax and using the img src = not working.  Is it best to use below and return File

    var filepath = "~/Content/chart.bmp";
    return File(filepath, "image/bmp");
    

     

                        <img src="@Url.Action("_chart", "ElecMechLogs")" id="imageID" width="500" alt="Maintenance Chart" />
    

    or use a partial view and return View(chartData)

     @model List<ColdMillMvc.ViewModels.ElecMechLogs.ChartViewModel>
    
    
    
    
        @{
    
    
    
    
    
            if (Model != null)
            {
    
                var chart = new Chart(width: 600, height: 400, theme: ChartTheme.Vanilla3D);
    
    
                chart.AddTitle("Maintenance Graphs");
    
                chart.AddSeries(
                 chartType: "Bar",
                xValue: Model, xField: "Readings",
                yValues: Model, yFields: "Datestaken");
    
    
                chart.Save("~/Content/chart.bmp");
    
    
            }
        }
    

    Friday, December 14, 2018 4:41 PM
  • User-474980206 posted

    that works as long as everyone sees the same chart.

    Friday, December 14, 2018 6:42 PM
  • User-515183 posted
    Still not working
    Friday, December 14, 2018 7:07 PM
  • User1520731567 posted

    Hi sbuggle,

    Sorry for the late.

    I think you could simplify your code without ajax,you could refer to my demo:

    Controller:

      public ActionResult ElecMechLogs()
            {
                //Create bar chart
                var chart = new Chart(width: 1000, height: 700)
    
    
                            .AddTitle("Maintenance Graphs")
    
                               .AddSeries(
                                chartType: "Bar",
                               xValue: new[] { "15 ", "34", "58 ", "78" },xField: "Readings",
                               yValues: new[] { "50", "70", "90", "110" }, yFields: "Datestaken")
                               .Write();
                chart.Save("~/Content/chart.bmp");
                var filepath = "~/Content/chart.bmp";
                return File(filepath, "image/bmp");
    
            }
    
            public ActionResult Chart_Index()
            {
                return View("Chart_Index");
            }

    View:

    @{
        ViewBag.Title = "Chart_Index";
    }
    
    <h2>Chart_Index</h2>
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
    
        <img src="@Url.Action("ElecMechLogs", "Home")"id="imageID" width="500" alt="Maintenance Chart" />
    
    </body>
    </html>

    How it works:

    If you would like to pass some parameters to action, you could add new{},like:

        <img src="@Url.Action("ElecMechLogs", "Home2",new { key1=value1,key2=value2})"id="imageID" width="500" alt="Maintenance Chart" />
    
     public ActionResult ElecMechLogs(string key1,string key2)
    {
    ... }

    Best Regards.

    Yuki Tao

    Monday, December 17, 2018 9:58 AM
  • User-515183 posted

    Thank you will have to try that! 

    Monday, December 17, 2018 6:24 PM