How to change chart when changing date

Posted on

Question :

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;})
                    

Answer :

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.

    

Leave a Reply

Your email address will not be published. Required fields are marked *