<h3></h3>
<p></p>

    <table>
        <tr>
            <td>
                <div id="chart-container">
        <div id="chart" style="width: 400px; height: 450px;"></div>
</div>            </td>
            <td>
                <div id="legend-container"></div>
            </td>
        </tr>
    </table>

<script src="/js/jquery.flot.js" type="application/javascript"></script>
    <script src="/js/jquery.flot.categories.js" type="application/javascript"></script>
    <script src="/js/jquery.flot.axislabels.js" type="application/javascript"></script>
    <script src="/js/jquery.flot.tickrotor.js" type="application/javascript"></script>
    <script src="/js/jquery.flot.stack.js" type="application/javascript"></script>
<script src="/js/jquery.flot.tooltip.js" type="application/javascript"></script>
<script type="application/javascript">
    $(function () {
        var data = [{"data":[["\u0413\u041e\u0423",2264],["\u041d\u041e\u0423",38]],"label":"\u0427\u0438\u0441\u043b\u043e \u043e\u0431\u0449\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0443\u0447\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439, \u0435\u0434\u0438\u043d\u0438\u0446 (\u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443 \u041e\u041a\u0415\u0418)"}],
            $placeholder = $('#chart');
        $.plot($placeholder, data, {"series":{"stack":false,"lines":{"show":false,"steps":false},"points":{"show":false},"bars":{"show":true,"barWidth":0.3,"align":"center"},"pie":{"show":false,"stroke":{"width":0.5}}},"colors":["#0066FF","#990000","#339966","#009999","#FF9966","#3399FF","#993366"],"legend":{"show":true,"container":"#legend-container"},"grid":{"borderWidth":0,"hoverable":true},"tooltip":{"show":true,"content":"<strong>%y<\/strong>"},"yaxis":{"axisLabel":null},"xaxis":{"min":-0.5,"mode":"categories","axisLabel":"\u0442\u0438\u043f \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438","rotateTicks":135,"reserveSpace":true}});
        var chartWidth = $placeholder.width();
        $('#chart-container').on('scroll', function () {
            var scroll = $(this).scrollLeft();
            if (chartWidth < scroll) {
                return
            }

            var selectors = ['.yaxisLabel', '.flot-text'];
            for (var selector in selectors) {
                $(selectors[selector]).css({'left': $(this).scrollLeft()});
            }
        });
    });
</script>
