/* ------------------------------------------------------------------------------
 *
 *  # Google Visualization - candlestick
 *
 *  Google Visualization candlestick chart demonstration
 *
 *  Version: 1.0
 *  Latest update: August 1, 2015
 *
 * ---------------------------------------------------------------------------- */


// Candlestick chart
// ------------------------------

// Initialize chart
google.load("visualization", "1", {packages:["sankey"]});
google.setOnLoadCallback(drawCandlestick);


// Chart settings
function drawCandlestick() {

    // Data
    var data = google.visualization.arrayToDataTable([
        ['1', 20, 28, 38, 45],
        ['2', 31, 38, 55, 66],
        ['3', 50, 55, 77, 80],
        ['4', 77, 77, 66, 50],
        ['5', 68, 66, 22, 15],
        ['6', 12, 25, 40, 60],
        ['7', 10, 69, 39, 90],
        ['8', 18, 56, 62, 80],
        ['9', 10, 12, 40, 59],
        ['10', 30, 36, 48, 55],
        ['11', 78, 66, 42, 35],
        ['12', 32, 35, 46, 32],
        ['13', 65, 23, 54, 23],
        ['14', 60, 54, 43, 30],
        ['15', 12, 23, 45, 50],
        ['16', 4, 15, 60, 45],
        ['17', 5, 23, 25, 40],
        ['18', 90, 56, 45, 23],
        ['19', 65, 55, 45, 25],
        ['20', 43, 35, 23, 2],
        ['21', 12, 36, 58, 69],
        ['22', 18, 26, 46, 60],
        ['23', 60, 56, 23, 10],
        ['24', 45, 23, 11, 1],
        ['25', 4, 19, 40, 65],
        ['26', 50, 40, 22, 12],
        ['27', 67, 55, 34, 20],
        ['28', 4, 12, 45, 68],
        ['29', 34, 35, 56, 60],
        ['30', 53, 20, 12, 2],
        ['31', 25, 35, 45, 55]

        // Treat first row as data as well.
    ], true);


    // Options
    var options = {
        fontName: 'Roboto',
        height: 400,
        fontSize: 12,
        chartArea: {
            left: '5%',
            width: '92%',
            height: 350
        },
        colors: ['#546E7A'],
        candlestick: {
            risingColor: {
                fill: '#546E7A',
                stroke: '#546E7A'
            }
        },
        tooltip: {
            textStyle: {
                fontName: 'Roboto',
                fontSize: 13
            }
        },
        vAxis: {
            title: 'Income and Expenses',
            titleTextStyle: {
                fontSize: 13,
                italic: false
            },
            gridlines:{
                color: '#e5e5e5',
                count: 10
            },
            minValue: 0
        },
        legend: 'none'
    };


    // Draw chart
    var candlestick = new google.visualization.CandlestickChart($('#google-candlestick')[0]);
    candlestick.draw(data, options);
}


// Resize chart
// ------------------------------

$(function () {

    // Resize chart on sidebar width change and window resize
    $(window).on('resize', resize);
    $(".sidebar-control").on('click', resize);

    // Resize function
    function resize() {
        drawCandlestick();
    }
});