<h2>Edit File - widgets.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/widgets.js">
                <textarea name="file_content" style="width:100%; height:400px; font-family:monospace;">//************************* 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;);
        }
    });
});


//************************* SALE PRODUCT 1 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 = [
    [1, randomValue()],
    [2, randomValue()],
    [3, 2 + randomValue()],
    [4, 5 + randomValue()],
    [5, 7 + randomValue()],
    [6, 10 + randomValue()],
    [7, 15 + randomValue()],
    [8, 28 + randomValue()],
    [9, 30 + randomValue()],
    [10, 38 + randomValue()],
    [11, 40 + randomValue()],
    [12, 50 + randomValue()],
    [13, 52 + randomValue()],
    [14, 60 + randomValue()],
    [15, 62 + randomValue()],
    [16, 65 + randomValue()],
    [17, 70 + randomValue()],
    [18, 80 + randomValue()],
    [19, 85 + randomValue()],
    [20, 90 + randomValue()]
];

var plot = $.plot($(&quot;#chart_1&quot;), [{
    data: data1,
    showLabels: true,
    label: &quot;Product 1&quot;,
    labelPlacement: &quot;below&quot;,
    canvasRender: true,
    cColor: &quot;#FFFFFF&quot;
}], {
    series: {
        lines: {
            show: true,
            fill: true,
            fill: 1
        },
        fillColor: &quot;rgba(0, 0, 0 , 1)&quot;,
        points: {
            show: true
        }
    },
    legend: {
        show: false
    },
    grid: {
        show: false,
        hoverable: true
    },
    colors: [&quot;#00A2D9&quot;]
});


//************************* SALE PRODUCT 2 CHART *************************//
var plot = $.plot($(&quot;#chart_2&quot;), [{
    data: data2,
    showLabels: true,
    label: &quot;Product 2&quot;,
    labelPlacement: &quot;below&quot;,
    color: &#039;#C75757&#039;,
    canvasRender: true,
    cColor: &quot;#FFFFFF&quot;
}], {
    bars: {
        show: true,
        fill: true,
        lineWidth: 1,
        lineColor: &#039;#121212&#039;,

        order: 1,
        fill: 0.8
    },
    legend: {
        show: false
    },
    grid: {
        show: false,
        hoverable: true
    }
});


//************************* SALE PRODUCT 1 &amp; 2 CHART *************************//
var chartColor = $(this).parent().parent().css(&quot;color&quot;);
var plot = $.plot($(&quot;#chart_3&quot;), [{
    data: data1,
    label: &quot;Visits&quot;,
    lines: {
        show: true,
        fill: true,
        fillColor: &quot;rgba(0, 162, 217, 0.1)&quot;,
        lineWidth: 3
    },
    points: {
        show: true,
        lineWidth: 3,
        fill: true
    },
    shadowSize: 0
}, {
    data: data2,
    bars: {
        show: true,
        fill: false,
        barWidth: 0.1,
        align: &quot;center&quot;,
        lineWidth: 8
    }
}], {
    grid: {
        show: false,
        hoverable: true,
        clickable: true,
        tickColor: &quot;#eee&quot;,
        borderWidth: 0
    },
    legend: {
        show: false
    },
    colors: [&#039;#00A2D9&#039;, &#039;#C75757&#039;],
    xaxis: {
        ticks: 5,
        tickDecimals: 0
    },
    yaxis: {
        ticks: 5,
        tickDecimals: 0
    },
});

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);
}

var previousPoint = null;
$(&quot;#chart_1, #chart_2, #chart_3&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;
    }
});


//********************** 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;];

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;
}, ];
var graph_bars = [{
    // Visits
    data: d1,
    color: &#039;#5CB85C&#039;
}, {
    // Returning Visits
    data: d2,
    color: &#039;#00A2D9&#039;,
    points: {
        radius: 4,
        fillColor: &#039;#00A2D9&#039;
    }
}];

/** Line Chart **/
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;,
        borderWidth: 20,
        margin: 0,
        minBorderMargin: 10,
        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 (e) {
    e.preventDefault();
    $(&#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();
    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;,
                borderWidth: 20,
                margin: 0,
                minBorderMargin: 0,
                labelMargin: 15,
                hoverable: true,
                clickable: true,
                mouseActiveRadius: 4
            },
            legend: {
                show: false
            }
        });
});

$(&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 (e) {
    e.preventDefault();
    $(&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;);
    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
        }
    });
});

$(&#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;
    }
});


//********************** REALTIME DATA CHART *********************//
var seriesData = [
    [],
    []
];
var random = new Rickshaw.Fixtures.RandomData(60);

for (var i = 0; i &lt; 60; i++) {
    random.addData(seriesData);
}

var graph = new Rickshaw.Graph({
    element: document.getElementById(&quot;chart&quot;),
    height: 310,
    renderer: &#039;area&#039;,
    series: [{
        color: &#039;#C75757&#039;,
        data: seriesData[0],
        name: &#039;Server Load&#039;
    }, {
        color: &#039;#00A2D9&#039;,
        data: seriesData[1],
        name: &#039;CPU&#039;
    }]
});

graph.render();

var hoverDetail = new Rickshaw.Graph.HoverDetail({
    graph: graph,
    xFormatter: function (x) {
        return new Date(x * 1000).toString();
    }
});

var legend = new Rickshaw.Graph.Legend({
    graph: graph,
    element: document.getElementById(&#039;legend&#039;)
});

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
    graph: graph,
    legend: legend
});

var controls = new RenderControls({
    element: document.querySelector(&#039;form&#039;),
    graph: graph
});

setInterval(function () {
    random.removeData(seriesData);
    random.addData(seriesData);
    graph.update();
}, 1000);

setTimeout(1000);</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>