How to change chart when changing date

Asked

Viewed 110 times

4

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

I have a Datepicker and when selecting a date, I need the chart to be changed according to the date selected.

I have already implemented some fields where the statistics change according to the chosen date, using POST. I tried to do something similar by returning a WebImage or a Chart for the controller but the chart 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 am new in the area and probably not used the tools correctly and I am not sure if the solution I found is the most correct but I will share. There was no need to change the statistics and chart without refreshing 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 selected the date, it would not be necessary to be within the POST, I will seek to inform myself about this.

$.post("/Controller/View", { id: id, Datatexto: dia }, function (image) {
                        window.location.href = "/Controller/View/" + id + "?Datatexto=" + dia;})
c# mvc

  • What is the Controller’s return format? Is it an html? I believe that maybe what you want is something in this sense: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

  • 1

    In Controller I graph the database information using the Helper Chart : img id="Graf" src="@Url.Action("Drawchartmaq", new { id = Model.maq_id })" . So far so good, it appears as wish in the View in html. However, I need it to change dynamically according to the selected date. For this I tried to implement a new function in the Controller by returning a Chart or Webimage. The chart changes but a new blank image appears. @rodrigorf

1 answer

2


Jquery Ajax research I use a lot to do this. And try to change the date Picker event 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 fictional method returning me an image directory and it worked perfectly.. Updates the image...

Group if this Chart is some other object.. Like Canvas you would have to use another tag instead of img.

Browser other questions tagged c# mvc

You are not signed in. Login or sign up in order to post.