Highcharts Demo

by matmuchrapna

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="diag"></div>

CSS

#diag {
    min-width: 700px;
    max-width: 100%;
    height: 500px;
}

JavaScript

$(function() {

    /* Full documentation http://www.highcharts.com/ref/#chart */
    Highcharts.setOptions({
        lang: {
            months: [
                'Январь', 'Февраль', 'Март', 'Апрель',
                'Май', 'Июнь', 'Июль', 'Август',
                'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
            shortMonths: [
                'Янв', 'Фев', 'Мар', 'Апр',
                'Май', 'Июн', 'Июл', 'Авг',
                'Сен', 'Окт', 'Ноя', 'Дек'],
            weekdays: [
                'Понедельник', 'Вторник', 'Среда', 'Четверг',
                'Пятница', 'Суббота', 'Воскресенье'],
            printButtonTitle: 'Распечатать график',
            resetZoom: 'Сбросить масштабирование',
            resetZoomTitle: 'Сбросить зум до 100%',
            exportButtonTitle: 'Сохранить как картинку',
            downloadPNG: 'Сохранить как PNG',
            downloadJPEG: 'Сохранить как JPEG',
            downloadPDF: 'Сохранить как PDF',
            downloadSVG: 'Сохранить как SVG',
            loading: 'Загружается график…',
            thousandsSep: ' '
        },
        global: {
            useUTC: true,
            canvasToolsURL: 'highcharts_canvas.js'
        }
    });

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'diag',
            type: 'line',
            marginTop: 20,
            marginRight: 0,
            marginBottom: 25,
            backgroundColor: '#f7f7f7',
            zoomType: 'xy',
            resetZoomButton: {
                position: {
                    align: 'center',
                    y: -20
                }
            }
        },
        colors: [
            '#ff3030', '#ff8c0a', '#77ff00',
            '#00ffa1', '#00b2ff', '#003cff',
            '#9000ff', '#ff0048', '#f0ed00'
        ],
        credits: {
            enabled: false
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
        ...