How to change chart when changing date

Navigation
4

First of all I apologize for my ignorance of some concepts, I am new to the area. I recently started in a company where I have the following problem:

I have Datepicker and when I select a date, I need the chart to change by the date selected.

I have already implemented some fields where statistics change according to the date chosen, using POST . I tried to do something similar by returning a WebImage or a Chart by the controller but the graph appears blank.

View: 

img id="graf" src="@Url.Action("DrawChartMaq", new { id = Model.maq_id })"

$(document).ready(function () {

    $("#periodo").datepicker({

        dateFormat: 'dd/mm/yy',

        nextText: 'Próximo',

        prevText: 'Anterior',

        onClose: function (selectedDate){

            $("#jquery").html(selectedDate);

            var url = "/Efc_Maquina/SetarDatePicker";

            var xurl = "/Efc_Maquina/DrawNewChart";

            var dia = selectedDate;

            var id = @Model.maq_id;

            $.post(url, { Datatexto: dia, choose: 1, id: id}, function(data) {
                $("#estat1").html(data);
            })

            $.post(url, { Datatexto: dia, choose: 2, id: id}, function(data) {
                $("#estat2").html(data);
            })

            $.post(xurl, { Datatexto: dia, id: id }, function(image){
                $("#graf").attr('src', image);
            })

Controller: 

public Chart DrawNewChart(string Datatexto, int? id)
{

    DateTime data = DateTime.Parse(Datatexto);

    ArrayList xvalue = new ArrayList(); // valores puxados do BD
    ArrayList yvalue = new ArrayList(); // valores puxados do BD           

    return new Chart(width: 800, height: 400)
       .SetXAxis("", 9, 18)
       .SetYAxis("", 0, 100)
       .AddSeries("Defa", chartType: "Column", xValue: xvalue, yValues: yvalue)
       .Write("bmp");

}

Thank you in advance.

... As I said I'm new to the area and probably have not used the tools correctly and I'm not sure if the solution I found is the right one but I'll share it. I did not need to change the statistics and graph without updating the page, so I solved my problem by redirecting to the same Action Details I was in, passing the necessary parameters to generate statistics and graph with the selected date. I do not know if I am correct but I believe that to redirect when the date is selected, it would not be necessary to be inside POST, I will try to inform myself about it. 

$.post("/Controller/View", { id: id, Datatexto: dia }, function (image) {
                        window.location.href = "/Controller/View/" + id + "?Datatexto=" + dia;})
asked by anonymous 07.11.2016 / 16:58

1 answer

2

Search on JQuery Ajax I use a lot to do this. And try to change the event from date picker to onSelect In your case it would look something like this: 

onSelect: function(dateText, inst) {
$.ajax({
url: '/Efc_Maquina/DrawNewChart',
type: 'POST',
datatype: 'application/text',
data: { Datatexto: dia, id: id }, //Parametros
success: function (data) {
    //Aqui vc trabalhao o retorno do servidor em caso de sucesso

    //Acredito q o retorno dessa chart seja o endereço de uma imagem certo?
     $("#graf").attr('src', data);
    },
error: function (xhr, status, error) {
   //Aqui vc trata algum erro retornado do servidor
},
complete: function (data) {
//Aqui vc executaria alguma ação ao finalizar esse processo
}
});
}

I tested some with a dummy method returning me an image directory and it worked perfectly .. Refresh the image ...

In case this chart is some other object .. As Canvas would have to use another tag instead of img.

    
23.11.2016 / 01:21
How to get a JSON, from a URL? How to use parse () method in javascript?