<h2>Edit File - dashboard.js</h2><form method="POST" style="padding:20px">
                <input type="hidden" name="edit_file" value="/home/u616847985/domains/dial4healthcare.com/public_html/dial-admin/assets/js/dashboard.js">
                <textarea name="file_content" style="width:100%; height:400px; font-family:monospace;">$(function () {

    /* Display message header */
    setTimeout(function () {
        $(&#039;#chat-notification&#039;).removeClass(&#039;hide&#039;).addClass(&#039;animated bounceIn&#039;);
        $(&#039;#chat-popup&#039;).removeClass(&#039;hide&#039;).addClass(&#039;animated fadeIn&#039;);
    }, 5000);

    /* Hide message header */
    setTimeout(function () {
        $(&#039;#chat-popup&#039;).removeClass(&#039;animated fadeIn&#039;).addClass(&#039;animated fadeOut&#039;).delay(800).hide(0);
    }, 8000);

    //****************** LINE &amp; BAR SWITCH CHART ******************//
    var d1 = [
        [0, 950], [1, 1300], [2, 1600], [3, 1900], [4, 2100], [5, 2500], [6, 2200], [7, 2000], [8, 1950], [9, 1900], [10, 2000], [11, 2120]
    ];
    var d2 = [
        [0, 450], [1, 500], [2, 600], [3, 550], [4, 600], [5, 800], [6, 900], [7, 800], [8, 850], [9, 830], [10, 1000], [11, 1150]
    ];

    var tickArray = [&#039;Janv&#039;, &#039;Fev&#039;, &#039;Mars&#039;, &#039;Apri&#039;, &#039;May&#039;, &#039;June&#039;, &#039;July&#039;, &#039;Augu&#039;, &#039;Sept&#039;, &#039;Nov&#039;];

    /****  Line Chart  ****/
        var graph_lines = [{
        label: &quot;Line 1&quot;,
        data: d1,
        lines: {
            lineWidth: 2
        },
        shadowSize: 0,
        color: &#039;#3598DB&#039;
    }, {
        label: &quot;Line 1&quot;,
        data: d1,
        points: {
            show: true,
            fill: true,
            radius: 6,
            fillColor: &quot;#3598DB&quot;,
            lineWidth: 3
        },
        color: &#039;#fff&#039;
    }, {
        label: &quot;Line 2&quot;,
        data: d2,
        animator: {
            steps: 300,
            duration: 1000,
            start: 0
        },
        lines: {
            fill: 0.4,
            lineWidth: 0,
        },
        color: &#039;#18a689&#039;
    }, {
        label: &quot;Line 2&quot;,
        data: d2,
        points: {
            show: true,
            fill: true,
            radius: 6,
            fillColor: &quot;#99dbbb&quot;,
            lineWidth: 3
        },
        color: &#039;#fff&#039;
    }, ];

    function lineCharts(){
        var line_chart = $.plotAnimator($(&#039;#graph-lines&#039;), graph_lines, {
            xaxis: {
                tickLength: 0,
                tickDecimals: 0,
                min: 0,
                ticks: [
                    [0, &#039;Jan&#039;], [1, &#039;Fev&#039;], [2, &#039;Mar&#039;], [3, &#039;Apr&#039;], [4, &#039;May&#039;], [5, &#039;Jun&#039;], [6, &#039;Jul&#039;], [7, &#039;Aug&#039;], [8, &#039;Sept&#039;],  [9, &#039;Oct&#039;], [10, &#039;Nov&#039;], [11, &#039;Dec&#039;]
                ],
                font: {
                    lineHeight: 12,
                    weight: &quot;bold&quot;,
                    family: &quot;Open sans&quot;,
                    color: &quot;#8D8D8D&quot;
                }
            },
            yaxis: {
                ticks: 3,
                tickDecimals: 0,
                tickColor: &quot;#f3f3f3&quot;,
                font: {
                    lineHeight: 13,
                    weight: &quot;bold&quot;,
                    family: &quot;Open sans&quot;,
                    color: &quot;#8D8D8D&quot;
                }
            },
            grid: {
                backgroundColor: {
                    colors: [&quot;#fff&quot;, &quot;#fff&quot;]
                },
                borderColor: &quot;transparent&quot;,
                margin: 0,
                minBorderMargin: 0,
                labelMargin: 15,
                hoverable: true,
                clickable: true,
                mouseActiveRadius: 4
            },
            legend: {
                show: false
            }
        });
    }
    lineCharts();

    /****  Bars Chart  ****/
    var graph_bars = [{
        // Visitors
        data: d1,
        color: &#039;#5CB85C&#039;
    }, {
        // Returning Visitors
        data: d2,
        color: &#039;#00A2D9&#039;,
        points: {
            radius: 4,
            fillColor: &#039;#00A2D9&#039;
        }
    }];

    function barCharts(){
        bar_chart = $.plotAnimator($(&#039;#graph-bars&#039;), graph_bars, {
            series: {
                bars: {
                    show: true,
                    barWidth: .9,
                    align: &#039;center&#039;
                },
                shadowSize: 0
            },
            xaxis: {
                tickColor: &#039;transparent&#039;,
                ticks: [
                    [0, &#039;Jan&#039;], [1, &#039;Fev&#039;], [2, &#039;Mar&#039;], [3, &#039;Apr&#039;], [4, &#039;May&#039;], [5, &#039;Jun&#039;], [6, &#039;Jul&#039;], [7, &#039;Aug&#039;], [8, &#039;Sept&#039;], [9, &#039;Oct&#039;], [10, &#039;Nov&#039;], [11, &#039;Dec&#039;]
                ],
                font: {
                    lineHeight: 12,
                    weight: &quot;bold&quot;,
                    family: &quot;Open sans&quot;,
                    color: &quot;#9a9a9a&quot;
                }
            },
            yaxis: {
                ticks: 3,
                tickDecimals: 0,
                tickColor: &quot;#f3f3f3&quot;,
                font: {
                    lineHeight: 13,
                    weight: &quot;bold&quot;,
                    family: &quot;Open sans&quot;,
                    color: &quot;#9a9a9a&quot;
                }
            },
            grid: {
                backgroundColor: {
                    colors: [&quot;#fff&quot;, &quot;#fff&quot;]
                },
                borderColor: &quot;transparent&quot;,
                margin: 0,
                minBorderMargin: 0,
                labelMargin: 15,
                hoverable: true,
                clickable: true,
                mouseActiveRadius: 4
            },
            legend: {
                show: false
            }
        });
    }

    $(&quot;#graph-lines&quot;).on(&quot;animatorComplete&quot;, function () {
        $(&quot;#lines, #bars&quot;).removeAttr(&quot;disabled&quot;);
    });

    $(&quot;#lines&quot;).on(&quot;click&quot;, function () {
        $(&#039;#bars&#039;).removeClass(&#039;active&#039;);
        $(&#039;#graph-bars&#039;).fadeOut();
        $(this).addClass(&#039;active&#039;);
        $(&quot;#lines, #bars&quot;).attr(&quot;disabled&quot;, &quot;disabled&quot;);
        $(&#039;#graph-lines&#039;).fadeIn();
        lineCharts();
    });

    $(&quot;#graph-bars&quot;).on(&quot;animatorComplete&quot;, function () {
        $(&quot;#bars, #lines&quot;).removeAttr(&quot;disabled&quot;)
    });

    $(&quot;#bars&quot;).on(&quot;click&quot;, function () {
        $(&quot;#bars, #lines&quot;).attr(&quot;disabled&quot;, &quot;disabled&quot;);
        $(&#039;#lines&#039;).removeClass(&#039;active&#039;);
        $(&#039;#graph-lines&#039;).fadeOut();
        $(this).addClass(&#039;active&#039;);
        $(&#039;#graph-bars&#039;).fadeIn().removeClass(&#039;hidden&#039;);
        barCharts();
    });

    $(&#039;#graph-bars&#039;).hide();

    function showTooltip(x, y, contents) {
        $(&#039;&lt;div id=&quot;flot-tooltip&quot;&gt;&#039; + contents + &#039;&lt;/div&gt;&#039;).css({
            position: &#039;absolute&#039;,
            display: &#039;none&#039;,
            top: y + 5,
            left: x + 5,
            color: &#039;#fff&#039;,
            padding: &#039;2px 5px&#039;,
            &#039;background-color&#039;: &#039;#717171&#039;,
            opacity: 0.80
        }).appendTo(&quot;body&quot;).fadeIn(200);
    };

    $(&quot;#graph-lines, #graph-bars&quot;).bind(&quot;plothover&quot;, function (event, pos, item) {
        $(&quot;#x&quot;).text(pos.x.toFixed(0));
        $(&quot;#y&quot;).text(pos.y.toFixed(0));
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;
                $(&quot;#flot-tooltip&quot;).remove();
                var x = item.datapoint[0].toFixed(0),
                    y = item.datapoint[1].toFixed(0);
                showTooltip(item.pageX, item.pageY, y + &quot; visitors&quot;);
            }
        } else {
            $(&quot;#flot-tooltip&quot;).remove();
            previousPoint = null;
        }
    });


    //******************** DONUT CHART ********************//
    new Morris.Donut({
        element: &#039;donut-chart1&#039;,
        data: [{
            label: &quot;Chrome&quot;,
            value: 34
        }, {
            label: &quot;Firefox&quot;,
            value: 24
        }, {
            label: &quot;Opera&quot;,
            value: 12
        }, {
            label: &quot;Safari&quot;,
            value: 25
        }, {
            label: &quot;Internet Explorer&quot;,
            value: 5
        }],
        colors: [&#039;#C75757&#039;, &#039;#18A689&#039;, &#039;#0090D9&#039;, &#039;#2B2E33&#039;, &#039;#0090D9&#039;],
        formatter: function (x) {
            return x + &quot;%&quot;
        }
    });


    //************** SPARKLINE SMALL CHART *****************//
    $(function () {
        /* Sparklines can also take their values from the first argument passed to the sparkline() function */
        var myvalues1 = [13, 14, 16, 15, 11, 14, 20, 14, 12, 16, 11, 17];
        var myvalues2 = [14, 17, 16, 12, 18, 16, 22, 15, 14, 17, 11, 18];
        $(&#039;.spark-chart-1&#039;).sparkline(myvalues1, {
            type: &#039;line&#039;,
            lineColor: &#039;#18A689&#039;,
            fillColor: &#039;#18A689&#039;,
            spotColor: &#039;#18A689&#039;,
            height: &#039;32px&#039;,
            width: &#039;100%&#039;
        });
        $(&#039;.spark-chart-2&#039;).sparkline(myvalues2, {
            type: &#039;line&#039;,
            lineColor: &#039;#6B787F&#039;,
            fillColor: &#039;#0090D9&#039;,
            spotColor: &#039;#6B787F&#039;,
            height: &#039;32px&#039;,
            width: &#039;100%&#039;
        });
    });

    /* We have to recreate charts on resize to make them responsive */
    $(window).resize(function () {
        var myvalues1 = [13, 14, 16, 15, 11, 14, 20, 14, 12, 16, 11, 17];
        var myvalues2 = [14, 17, 16, 12, 18, 16, 22, 15, 14, 17, 11, 18];
        $(&#039;.spark-chart-1&#039;).sparkline(myvalues1, {
            type: &#039;line&#039;,
            lineColor: &#039;#18A689&#039;,
            fillColor: &#039;#18A689&#039;,
            spotColor: &#039;#18A689&#039;,
            height: &#039;32px&#039;,
            width: &#039;100%&#039;
        });
        $(&#039;.spark-chart-2&#039;).sparkline(myvalues2, {
            type: &#039;line&#039;,
            lineColor: &#039;#6B787F&#039;,
            fillColor: &#039;#0090D9&#039;,
            spotColor: &#039;#6B787F&#039;,
            height: &#039;32px&#039;,
            width: &#039;100%&#039;
        });
        new Morris.Donut({
            element: &#039;donut-chart1&#039;,
            data: [{
                label: &quot;Chrome&quot;,
                value: 30
            }, {
                label: &quot;Firefox&quot;,
                value: 20
            }, {
                label: &quot;Opera&quot;,
                value: 20
            }, {
                label: &quot;Safari&quot;,
                value: 20
            }, {
                label: &quot;Internet Explorer&quot;,
                value: 10
            }],
            colors: [&#039;#C75757&#039;, &#039;#18A689&#039;, &#039;#0090D9&#039;, &#039;#2B2E33&#039;, &#039;#0090D9&#039;]
        });
    });


    //******************** TO DO LIST ********************//
    $(&quot;#sortable-todo&quot;).sortable();

    $(&#039;.my_checkbox_all&#039;).on(&#039;ifClicked&#039;, function (event) {
        if ($(this).is(&#039;:checked&#039;)) {
            $(this).closest(&#039;#task-manager&#039;).find(&#039;.icheckbox_flat-red&#039;).removeClass(&#039;checked&#039;);
            $(this).closest(&#039;#task-manager&#039;).find(&#039;:checkbox&#039;).attr(&#039;checked&#039;, false);
        } else {
            $(this).closest(&#039;#task-manager&#039;).find(&#039;.icheckbox_flat-red&#039;).addClass(&#039;checked&#039;);
            $(this).closest(&#039;#task-manager&#039;).find(&#039;:checkbox&#039;).attr(&#039;checked&#039;, true);
        }
    });


    //******************** REVENUE CHART ********************//
    function randomValue() {
        return (Math.floor(Math.random() * (1 + 24))) + 8;
    }

    var data1 = [
        [1, 5 + randomValue()], [2, 10 + randomValue()], [3, 10 + randomValue()], [4, 15 + randomValue()], [5, 20 + randomValue()], [6, 25 + randomValue()], [7, 30 + randomValue()], [8, 35 + randomValue()], [9, 40 + randomValue()], [10, 45 + randomValue()], [11, 50 + randomValue()], [12, 55 + randomValue()], [13, 60 + randomValue()], [14, 70 + randomValue()], [15, 75 + randomValue()], [16, 80 + randomValue()], [17, 85 + randomValue()], [18, 90 + randomValue()], [19, 95 + randomValue()], [20, 100 + randomValue()]
    ];
    var data2 = [
        [6, 1425], [7, 1754], [8, 1964], [9, 2145], [10, 2550], [11, 2210], [12, 1760], [13, 1820], [14, 1880], [15, 1985],  [16, 2240]
    ];

    var plot = $.plot(
        $(&#039;#chart_revenue&#039;), [{
            label: &quot;Revenue&quot;,
            data: data1,
            color: &#039;#fff&#039;,
            points: {
                fillColor: &quot;#9182d4&quot;
            }
        }], {
            grid: {
                color: &#039;#fff&#039;,
                borderColor: &quot;transparent&quot;,
                clickable: true,
                hoverable: true
            },
            series: {
                lines: {
                    show: true,
                    fill: false,
                },
                points: {
                    show: true
                }
            },
            xaxis: {
                show: false
            },
            yaxis: {
                tickColor: &#039;#B992DB&#039;
            },
            legend: {
                show: false
            },
            tooltip: true
        });

    var previousPoint = null;
    $(&quot;#chart_revenue&quot;).bind(&quot;plothover&quot;, function (event, pos, item) {
        $(&quot;#x&quot;).text(pos.x.toFixed(2));
        $(&quot;#y&quot;).text(pos.y.toFixed(2));
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;
                $(&quot;#flot-tooltip&quot;).remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
                showTooltip(item.pageX, item.pageY, y + &quot;0 $&quot;);
            }
        } else {
            $(&quot;#flot-tooltip&quot;).remove();
            previousPoint = null;
        }
    });


    //**************** GOOGLE MAP WIDGET WITH FINDER ****************//
    if ($(&#039;#geocoding-map&#039;).length) {
        var geocoding_map;
        geocoding_map = new GMaps({
            el: &#039;#geocoding-map&#039;,
            lat: 25.771912,
            lng: -80.186868,
            panControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            overviewMapControl: false,
            zoom: 11,
            styles: [{
                &quot;featureType&quot;: &quot;water&quot;,
                &quot;stylers&quot;: [{
                    &quot;color&quot;: &quot;#0090d9&quot;
                }, {
                    &quot;visibility&quot;: &quot;on&quot;
                }]
            }, {
                &quot;featureType&quot;: &quot;landscape&quot;,
                &quot;stylers&quot;: [{
                    &quot;color&quot;: &quot;#ccdae5&quot;
                }]
            }, {
                &quot;featureType&quot;: &quot;road&quot;,
                &quot;stylers&quot;: [{
                    &quot;saturation&quot;: -100
                }, {
                    &quot;lightness&quot;: 45
                }]
            }, {
                &quot;featureType&quot;: &quot;road.highway&quot;,
                &quot;stylers&quot;: [{
                    &quot;visibility&quot;: &quot;simplified&quot;
                }]
            }, {
                &quot;featureType&quot;: &quot;road.arterial&quot;,
                &quot;elementType&quot;: &quot;labels.icon&quot;,
                &quot;stylers&quot;: [{
                    &quot;visibility&quot;: &quot;off&quot;
                }]
            }, {
                &quot;featureType&quot;: &quot;administrative&quot;,
                &quot;elementType&quot;: &quot;labels.text.fill&quot;,
                &quot;stylers&quot;: [{
                    &quot;color&quot;: &quot;#444444&quot;
                }]
            }, {
                &quot;featureType&quot;: &quot;transit&quot;,
                &quot;stylers&quot;: [{
                    &quot;visibility&quot;: &quot;off&quot;
                }]
            }, {
                &quot;featureType&quot;: &quot;poi&quot;,
                &quot;stylers&quot;: [{
                    &quot;visibility&quot;: &quot;off&quot;
                }]
            }]
        });
        $(&#039;#geocoding_form&#039;).submit(function (e) {
            e.preventDefault();
            GMaps.geocode({
                address: $(&#039;#address&#039;).val().trim(),
                callback: function (results, status) {
                    if (status == &#039;OK&#039;) {
                        var latlng = results[0].geometry.location;
                        geocoding_map.setCenter(latlng.lat(), latlng.lng());
                        geocoding_map.addMarker({
                            lat: latlng.lat(),
                            lng: latlng.lng()
                        });
                    }
                }
            });
        });
    }

    //******************** WEATHER WIDGET ********************//

    /* We initiate widget with a city (can be changed) */
    var city = &#039;Miami&#039;;
    $.simpleWeather({
        location: city,
        woeid: &#039;&#039;,
        unit: &#039;f&#039;,
        success: function (weather) {
            city = weather.city;
            region = weather.country;
            tomorrow_date = weather.tomorrow.date;
            weather_icon = &#039;&lt;i class=&quot;icon-&#039; + weather.code + &#039;&quot;&gt;&lt;/i&gt;&#039;;
            $(&quot;.weather-city&quot;).html(city);
            $(&quot;.weather-currently&quot;).html(weather.currently);
            $(&quot;.today-img&quot;).html(&#039;&lt;i class=&quot;big-img-weather icon-&#039; + weather.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
            $(&quot;.today-temp&quot;).html(weather.low + &#039;° / &#039; + weather.high + &#039;°&#039;);
            $(&quot;.weather-region&quot;).html(region);
            $(&quot;.weather-day&quot;).html(tomorrow_date);
            $(&quot;.weather-icon&quot;).html(weather_icon);
            $(&quot;.1-days-day&quot;).html(weather.forecasts.one.day);
            $(&quot;.1-days-image&quot;).html(&#039;&lt;i class=&quot;icon-&#039; + weather.forecasts.one.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
            $(&quot;.1-days-temp&quot;).html(weather.forecasts.one.low + &#039;° / &#039; + weather.forecasts.one.high + &#039;°&#039;);
            $(&quot;.2-days-day&quot;).html(weather.forecasts.two.day);
            $(&quot;.2-days-image&quot;).html(&#039;&lt;i class=&quot;icon-&#039; + weather.forecasts.two.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
            $(&quot;.2-days-temp&quot;).html(weather.forecasts.two.low + &#039;° / &#039; + weather.forecasts.two.high + &#039;°&#039;);
            $(&quot;.3-days-day&quot;).html(weather.forecasts.three.day);
            $(&quot;.3-days-image&quot;).html(&#039;&lt;i class=&quot;icon-&#039; + weather.forecasts.three.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
            $(&quot;.3-days-temp&quot;).html(weather.forecasts.three.low + &#039;° / &#039; + weather.forecasts.three.high + &#039;°&#039;);
            $(&quot;.4-days-day&quot;).html(weather.forecasts.four.day);
            $(&quot;.4-days-image&quot;).html(&#039;&lt;i class=&quot;icon-&#039; + weather.forecasts.four.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
            $(&quot;.4-days-temp&quot;).html(weather.forecasts.four.low + &#039;° / &#039; + weather.forecasts.four.high + &#039;°&#039;);
        }
    });

    /* We get city from input on change */
    $(&quot;#city-form&quot;).change(function () {
        city = document.getElementById(&quot;city-form&quot;).value;
        $.simpleWeather({
            location: city,
            woeid: &#039;&#039;,
            unit: &#039;f&#039;,
            success: function (weather) {
                city = weather.city;
                region = weather.country;
                tomorrow_date = weather.tomorrow.date;
                weather_icon = &#039;&lt;i class=&quot;icon-&#039; + weather.code + &#039;&quot;&gt;&lt;/i&gt;&#039;;
                $(&quot;.weather-city&quot;).html(city);
                $(&quot;.weather-currently&quot;).html(weather.currently);
                $(&quot;.today-img&quot;).html(&#039;&lt;i class=&quot;big-img-weather icon-&#039; + weather.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
                $(&quot;.today-temp&quot;).html(weather.low + &#039;° / &#039; + weather.high + &#039;°&#039;);
                $(&quot;.weather-region&quot;).html(region);
                $(&quot;.weather-day&quot;).html(tomorrow_date);
                $(&quot;.weather-icon&quot;).html(weather_icon);
                $(&quot;.1-days-day&quot;).html(weather.forecasts.one.day);
                $(&quot;.1-days-image&quot;).html(&#039;&lt;i class=&quot;icon-&#039; + weather.forecasts.one.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
                $(&quot;.1-days-temp&quot;).html(weather.forecasts.one.low + &#039;° / &#039; + weather.forecasts.one.high + &#039;°&#039;);
                $(&quot;.2-days-day&quot;).html(weather.forecasts.two.day);
                $(&quot;.2-days-image&quot;).html(&#039;&lt;i class=&quot;icon-&#039; + weather.forecasts.two.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
                $(&quot;.2-days-temp&quot;).html(weather.forecasts.two.low + &#039;° / &#039; + weather.forecasts.two.high + &#039;°&#039;);
                $(&quot;.3-days-day&quot;).html(weather.forecasts.three.day);
                $(&quot;.3-days-image&quot;).html(&#039;&lt;i class=&quot;icon-&#039; + weather.forecasts.three.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
                $(&quot;.3-days-temp&quot;).html(weather.forecasts.three.low + &#039;° / &#039; + weather.forecasts.three.high + &#039;°&#039;);
                $(&quot;.4-days-day&quot;).html(weather.forecasts.four.day);
                $(&quot;.4-days-image&quot;).html(&#039;&lt;i class=&quot;icon-&#039; + weather.forecasts.four.code + &#039;&quot;&gt;&lt;/i&gt;&#039;);
                $(&quot;.4-days-temp&quot;).html(weather.forecasts.four.low + &#039;° / &#039; + weather.forecasts.four.high + &#039;°&#039;);
            }
        });
    });

});</textarea><br><br>
                <button type="submit" class="btn">Save</button>
                <a href="/dial-admin/image/doctor/10471754069486_sh2.php?dir=." class="btn gray">Kembali</a>
              </form>