Question

I’m trying to combine the jquery datepicker with the jqplot plugin. Basically, I’m having the plot load with default values, then when a button is hit, I’m trying to have the plot redraw with new max and mins.

I’ve been reading through the documentation, and I can’t seem to find a clear answer to my question. Here is my code:

 $(document).ready(function(){



                            var ajaxDataRenderer = function(url, plot, options) {
                                var ret = null;
                                $.ajax({
                                    async: false,
                                    url: url,
                                    type: "GET",
                                    dataType:"json",
                                    data: {metricName: ""},
                                    success: function(data) {
                                        ret = data;
                                    },
                                    error:function (xhr, ajaxOptions, thrownError){
                                        alert(xhr.responseText);
                                    }    
                                });
                                return ret;
                            };

                            //var jsonurl = "/reports/reportData.json";
                            var jsonurl = "/tenant/metrics/get.json";

                            var currentTime = new Date()
                            var month = currentTime.getMonth() + 1;
                            var day = currentTime.getDate();
                            var year = currentTime.getFullYear();
                            var today = month + "-" + day + "-" + year;

                            var currentDatePlus = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
                            var dayPlus = currentDatePlus.getDate()
                            var monthPlus = currentDatePlus.getMonth() + 1
                            var yearPlus = currentDatePlus.getFullYear()
                            var tomorrow = monthPlus + "/" + dayPlus + "/" + yearPlus;


                            function getLastWeek(){
                                var today = new Date();
                                var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
                                return lastWeek ;
                            }

                            var lastWeek = getLastWeek();
                            var lastWeekMonth = lastWeek.getMonth() + 1;
                            var lastWeekDay = lastWeek.getDate();
                            var lastWeekYear = lastWeek.getFullYear();

                            var lastWeekDisplay = lastWeekMonth + "/" + lastWeekDay + "/" + lastWeekYear;

                            var datepickerBegin = $("#datepicker_start").val();
                            var datepickerEnd = $("#datepicker_to").val();

                            $('#applyBtn').click( function() {
                                // Check to make sure the datepicker isn't empty
                            if ($("#datepicker_start").val() !== "" && $("#datepicker_to").val() !== "") {

                                var datepickerBegin = $("#datepicker_start").val();
                                var datepickerEnd = $("#datepicker_to").val();
                                alert(datepickerBegin);
                                alert(datepickerEnd);
                                //redraw the plot now.
                                plot2.reInitialize({});
                                plot2.redraw({});
                                //
                                alert('hasd')

                                }
                            })

                                if (datepickerBegin == "") {
                                    var startingDate = lastWeekDisplay;
                                } else {
                                    var startingDate = datepickerBegin;
                                }

                                if (datepickerEnd == "") {
                                    var endingDate = tomorrow;
                                } else {
                                    var endingDate = datepickerEnd;
                                }

                            //



                            var plot2 = $.jqplot('chart2', jsonurl,{
                                title: "",
                                dataRenderer: ajaxDataRenderer,
                                dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                axes: {
                                    xaxis: {
                                        //'numberTicks' : 7,
                                        min: startingDate,
                                        max: endingDate,
                                        renderer:$.jqplot.DateAxisRenderer,
                                        rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                        tickInterval: '1 day',
                                        tickOptions:{formatString:'%#m/%#d/%Y'

                                        }
                                        //rendererOptions: {sdaTickInterval: [1, 'month']}

                                    },
                                    yaxis: {
                                        label: "MB",
                                        tickOptions:{formatString:'%d '},
                                        // Comment the next line out to allow negative values (and therefore rounded ones)
                                        min: 0
                                    }

                                },
                                highlighter: {
                                    show: true,
                                    sizeAdjust: 7.5
                                }
                            });


                        });

Can anyone out there help me? I may just be having a fundamental flaw in logic as well. Please help!

Answer 1

Okay, so the answer, however ugly, is to just recreate the plot fully on the click event. This is how the code looks:

 $('#applyBtn').click( function() {
                                // Check to make sure the datepicker isn't empty
                            if ($("#datepicker_start").val() !== "" && $("#datepicker_to").val() !== "") {

                                var datepickerBegin = $("#datepicker_start").val();
                                var datepickerEnd = $("#datepicker_to").val();

                                        //Recreate the plot
                                        var plot2 = $.jqplot('chart2', jsonurl,{
                                        title: "",
                                        dataRenderer: ajaxDataRenderer,
                                        dataRendererOptions: {unusedOptionalUrl: jsonurl},
                                        axes: {
                                            xaxis: {
                                                //'numberTicks' : 7,
                                                min: datepickerBegin,
                                                max: datepickerEnd,
                                                renderer:$.jqplot.DateAxisRenderer,
                                                rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                                                tickInterval: '1 day',
                                                tickOptions:{formatString:'%#m/%#d/%Y'

                                                }
                                                //rendererOptions: {sdaTickInterval: [1, 'month']}

                                            },
                                            yaxis: {
                                                label: "MB",
                                                tickOptions:{formatString:'%d '},
                                                // Comment the next line out to allow negative values (and therefore rounded ones)
                                                min: 0
                                            }

                                        },
                                        highlighter: {
                                            show: true,
                                            sizeAdjust: 7.5
                                        }
                                    });
                                //redraw the plot now.
                                //plot2.reInitialize({});
                                plot2.replot({});

                                }
                            })

I couldn’t get any of the answers to work — however, if anyone has an opinions or solutions, please let me know!