{script}
if($("#{$chartId}").length){
    var onlineUsersContext = $("#{$chartId}").get(0).getContext("2d");
    onlineUsersContext.canvas.height = 100;

    var data = {
        labels: {$categories},
        datasets: {$data}
    };

    {literal}
        var lineChart = new Chart(onlineUsersContext).Line(data, {
            animation: false,
            responsive : true,
            tooltipTemplate: "<%= datasetLabel %> - <%= value %>",
            multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
        });
        streamOnlineUserChart = lineChart;
    {/literal}

    if ( typeof OW.WidgetPanel != "undefined" )
    {
        // Rebuild the chart
        OW.WidgetPanel.bind("move", function(e)
        {
            var canvasId = $(e.widget).find("canvas").attr("id");

            if (canvasId == "{$chartId}")
            {
                lineChart.destroy();
                lineChart = new Chart(onlineUsersContext).Line(data, {
                    animation: false,
                    responsive : true,
                    tooltipTemplate: "<%= datasetLabel %> - <%= value %>",
                    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
                });
                streamOnlineUserChart = lineChart;
            }
        });
    }
}
{/script}
<div class="statistic_chart_wrapper">
    {if $socketEnabled}
        <canvas id="{$chartId}"></canvas>
    {else}
        <span class="socket_disabled">{text key="admin+socket_disabled"}</span>
    {/if}
</div>