Filtering chart datas[Answered] RSS

2 replies

Last post Feb 17, 2021 11:45 AM by alpaytoprak

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

alpaytoprak

Member

1 Points

2 Posts

Filtering chart datas

Feb 16, 2021 11:14 AM|alpaytoprak|LINK

I want to let the user select the machine name, start and end dates and have show charts between those dates to the machine name. Here is my view code with chart script ;

<div>

<script>
        $(document).ready(function () {
            $.getJSON("/Grafik/Graphde/", function (data) {
                var Names = []
                var Qts = []
                for (var i = 0; i < data.length; i++)
                {
                    Names.push(data[i].Tarih);
                    Qts.push(data[i].sıcak);
                }

                Highcharts.chart('container', {
                    chart: {
                        type: 'line'
                    },
                    title: {
                        text: 'Monthly Average Temperature'
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com'
                    },
                    xAxis: {
                        categories: Names
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        }
                    },
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            },
                            enableMouseTracking: false
                        }
                    },
                    series: [{
                        name: 'Trend',
                        data: Qts
                    }]
                });
            });
        });
    </script>

I selected machine name, start and end date from this Html helper form

  @using (Html.BeginForm("Graphde", "Grafik", FormMethod.Post))
            {
                <input type="datetime-local" name="startdate" />
                <input type="datetime-local" name="enddate" />
                <input type="text" name="makineadi" value="192.168.0.8" />
                <input id="submit" type="submit" value="Arama" />
            }

But when I selected dates and machine name I can only get JSON results, how can I implement them to the chart and get a view of them? Here is my Jsonresult and and what I got after the date selection;

public ActionResult Index2(String makineadi, DateTime? startdate, DateTime? enddate)
        {
            return View();
        }
 public JsonResult Graphde(String makineadi, DateTime? startdate, DateTime? enddate)
        {
            var data = entities.Database.SqlQuery<sıcaklık>("SELECT Sıcaklık AS sıcak, Tarih = format(Tarih, 'yyyy-mm-dd HH:mm:ss') From Recete Where Machine_IP = '192.168.0.8' and Tarih between DATEPART(m, DATEADD(m, -1, getdate()))and GETDATE()").ToList();
            return Json(data, JsonRequestBehavior.AllowGet);
        }

With this return I can turn which dates I want but I can not use them as a chart view here is what I took after <input id="submit" type="submit" value="Arama" /> this button.

Here what I got after entering date range and machine name, How can I filter my chart and how can I use them after selection as chart.

[{"sıcak":0,"Tarih":"2020-00-07 00:00:00"},{"sıcak":0,"Tarih":"2020-00-07 00:00:00"},{"sıcak":0,"Tarih":"2020-00-09 00:00:00"},{"sıcak":0,"Tarih":"2021-00-07 00:00:00"},{"sıcak":0,"Tarih":"2021-00-07 00:00:00"},{"sıcak":0,"Tarih":"2021-00-08 00:00:00"},{"sıcak":0,"Tarih":"2021-00-08 00:00:00"},{"sıcak":0,"Tarih":"2021-00-08 00:00:00"},{"sıcak":0,"Tarih":"2021-00-08 00:00:00"},{"sıcak":0,"Tarih":"2021-00-08 00:00:00"},{"sıcak":26,"Tarih":"2021-00-08 00:00:00"},{"sıcak":26,"Tarih":"2021-00-09 00:00:00"},{"sıcak":26,"Tarih":"2021-00-09 00:00:00"},{"sıcak":26,"Tarih":"2021-00-09 00:00:00"},{"sıcak":26,"Tarih":"2021-00-09 00:00:00"},{"sıcak":26,"Tarih":"2021-00-10 00:00:00"},{"sıcak":26,"Tarih":"2021-00-10 00:00:00"},{"sıcak":26,"Tarih":"2021-00-10 00:00:00"},{"sıcak":26,"Tarih":"2021-00-11 00:00:00"},{"sıcak":26,"Tarih":"2021-00-11 00:00:00"},{"sıcak":26,"Tarih":"2021-00-12 00:00:00"},{"sıcak":26,"Tarih":"2021-00-12 00:00:00"},{"sıcak":26,"Tarih":"2021-00-12 00:00:00"},{"sıcak":26,"Tarih":"2021-00-12 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 00:00:00"},{"sıcak":26,"Tarih":"2021-00-15 22:00:00"},{"sıcak":26,"Tarih":"2021-10-15 23:10:00"},{"sıcak":26,"Tarih":"2021-00-16 00:00:00"}]

</div> <div></div> <div></div>

Jerry Cai

Participant

970 Points

315 Posts

Re: Filtering chart datas

Feb 17, 2021 08:23 AM|Jerry Cai|LINK

Hi,alpaytoprak

Do you mean when you click the button, but it shows some json rather than update the chart?

You can use ajax call instead to solve it, this is a demo filtered with only enddate:

<div>
    <input type="datetime-local" name="startdate" />
    <input type="datetime-local" name="enddate" id="enddate1"/>
    <input type="text" name="makineadi" value="192.168.0.8" />
    <button id="submit1">Arama</button>
</div>

<div id="container" style="height: 300px"></div>

@section scripts
{
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $("#submit1").click(function () {
            $.ajax({
                url: '/Home/Graphde',
                data: { 'enddate': $("#enddate1").val() },   //it must the same as the parameter in controller
                type: 'GET',
                success: function (data) {
                    var Names = [];
                    var Qts = [];
                    for (var i = 0; i < data.length; i++) {
                        Names.push(data[i].Tarih);
                        Qts.push(data[i].Machine_IP);
                    }
                    Highcharts.chart('container', {
                        chart: {
                            type: 'line'
                        },
                        title: {
                            text: 'Monthly Average Temperature'
                        },
                        subtitle: {
                            text: 'Source: WorldClimate.com'
                        },
                        xAxis: {
                            categories: Names
                        },
                        yAxis: {
                            title: {
                                text: 'Temperature (°C)'
                            }
                        },
                        plotOptions: {
                            line: {
                                dataLabels: {
                                    enabled: true
                                },
                                enableMouseTracking: false
                            }
                        },
                        series: [{
                            name: 'Trend',
                            data: Qts
                        }]
                    });
                }
                });
        });
           
    </script>
}

Result:

Best Regards,

Jerry Cai

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

- Reply
alpaytoprak
Member

1 Points

2 Posts

Re: Filtering chart datas

Feb 17, 2021 11:45 AM|alpaytoprak|LINK

Dear Jerry Cai,

I did it yesterday, but it would be very helpful for other colleagues and I can also use this solution method. Thanks a lot for your kind response.

Best Regards,

Alpay TOPRAK

‹ Previous Thread|Next Thread ›