firefly-iii/public/js/gcharts.js

/* globals currencyCode, language */
/* exported lineChart, googleColumnChart, stackedColumnChart, comboChart, pieChart, defaultLineChartOptions, defaultAreaChartOptions, defaultBarChartOptions, defaultComboChartOptions, defaultColumnChartOptions, defaultStackedColumnChartOptions, defaultPieChartOptions */
var google = google || {};
google.load('visualization', '1.1', {'packages': ['corechart', 'bar', 'line'], 'language': language});


/* exported   */

var defaultLineChartOptions = {
    curveType: 'function',
    legend: {
        position: 'none'
    },
    interpolateNulls: true,
    lineWidth: 1,
    chartArea: {
        left: 50,
        top: 10,
        width: '95%',
        height: '90%'
    },
    height: 400,
    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
    hAxis: {
        textStyle: {
            color: '#838383',
        },
        baselineColor: '#aaaaaa',
        gridlines: {
            color: 'transparent'
        }
    },
    fontSize: 11,
    vAxis: {
        textStyle: {
            color: '#838383',
        },
        baselineColor: '#aaaaaa',
        format: '\u20AC #'
    }


};

var defaultAreaChartOptions = {
    curveType: 'function',
    legend: {
        position: 'none'
    },
    interpolateNulls: true,
    lineWidth: 1,
    chartArea: {
        left: 50,
        top: 10,
        width: '95%',
        height: '90%'
    },
    height: 400,
    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
    hAxis: {
        textStyle: {
            color: '#838383',
        },
        baselineColor: '#aaaaaa',
        gridlines: {
            color: 'transparent'
        }
    },
    fontSize: 11,
    vAxis: {
        textStyle: {
            color: '#838383',
        },
        baselineColor: '#aaaaaa',
        format: '\u20AC #'
    }


};

var defaultBarChartOptions = {
    height: 400,
    bars: 'horizontal',
    hAxis: {
        textStyle: {
            color: '#838383',
        },
        baselineColor: '#aaaaaa',
        format: '\u20AC #'

    },
    fontSize: 11,
    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
    vAxis: {
        textStyle: {
            color: '#838383'
        },
        textPosition: 'in',
        gridlines: {

            color: 'transparent'
        },
        baselineColor: '#aaaaaa'
    },
    chartArea: {
        left: 15,
        top: 10,
        width: '100%',
        height: '90%'
    },

    legend: {
        position: 'none'
    }
};

var defaultComboChartOptions = {
    height: 300,
    chartArea: {
        left: 75,
        top: 10,
        width: '100%',
        height: '90%'
    },
    vAxis: {
        minValue: 0,
        format: '\u20AC #'
    },
    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
    fontSize: 11,
    legend: {
        position: 'none'
    },
    series: {
        0: {type: 'line'},
        1: {type: 'line'},
        2: {type: 'bars'}
    },
    bar: {groupWidth: 20}
};

var defaultColumnChartOptions = {
    height: 400,
    chartArea: {
        left: 50,
        top: 10,
        width: '85%',
        height: '80%'
    },
    fontSize: 11,
    hAxis: {
        textStyle: {
            color: '#838383'
        },
        gridlines: {
            color: 'transparent'
        },
        baselineColor: '#aaaaaa'

    },
    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
    vAxis: {
        textStyle: {
            color: '#838383'
        },
        baselineColor: '#aaaaaa',
        format: '\u20AC #'
    },
    legend: {
        position: 'none'
    }
};

var defaultStackedColumnChartOptions = {
    height: 400,
    chartArea: {
        left: 50,
        top: 10,
        width: '85%',
        height: '80%'
    },
    legend: {
        position: 'none'
    },
    fontSize: 11,
    isStacked: true,
    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
    hAxis: {
        textStyle: {
            color: '#838383',
        },
        gridlines: {
            color: 'transparent'
        }
    },
    vAxis: {
        textStyle: {
            color: '#838383',
        },
        format: '\u20AC #'
    }
};

var defaultPieChartOptions = {
    chartArea: {
        left: 0,
        top: 0,
        width: '100%',
        height: '100%'
    },
    fontSize: 11,
    height: 200,
    legend: {
        position: 'none'
    },
    colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"],
};


function googleChart(chartType, URL, container, options) {
    "use strict";
    if ($('#' + container).length === 1) {
        $.getJSON(URL).success(function (data) {
            /*
             Get the data from the JSON
             */
            var gdata = new google.visualization.DataTable(data);

            /*
             Format as money
             */
            var money = new google.visualization.NumberFormat({
                                                                  decimalSymbol: ',',
                                                                  groupingSymbol: '.',
                                                                  prefix: currencyCode + ' '
                                                              });
            for (var i = 1; i < gdata.getNumberOfColumns(); i++) {
                money.format(gdata, i);
            }

            /*
             Create a new google charts object.
             */
            var chart = false;
            var options = false;
            if (chartType === 'line') {
                chart = new google.visualization.LineChart(document.getElementById(container));
                options = options || defaultLineChartOptions;
            }
            if (chartType === 'area') {
                chart = new google.visualization.AreaChart(document.getElementById(container));
                options = options || defaultAreaChartOptions;
            }

            if (chartType === 'column') {
                chart = new google.visualization.ColumnChart(document.getElementById(container));
                options = options || defaultColumnChartOptions;
            }
            if (chartType === 'pie') {
                chart = new google.visualization.PieChart(document.getElementById(container));
                options = options || defaultPieChartOptions;
            }
            if (chartType === 'bar') {
                chart = new google.visualization.BarChart(document.getElementById(container));
                options = options || defaultBarChartOptions;
            }
            if (chartType === 'stackedColumn') {
                chart = new google.visualization.ColumnChart(document.getElementById(container));
                options = options || defaultStackedColumnChartOptions;
            }
            if (chartType === 'combo') {
                chart = new google.visualization.ComboChart(document.getElementById(container));
                options = options || defaultComboChartOptions;
            }

            if (chart === false) {
                alert('Cannot draw chart of type "' + chartType + '".');
            } else {
                chart.draw(gdata, options);
            }

        }).fail(function () {
            $('#' + container).addClass('google-chart-error');
        });
    } else {
        console.log('No container found called "' + container + '"');
    }
}


function lineChart(URL, container, options) {
    "use strict";
    return googleChart('line', URL, container, options);
}

function areaChart(URL, container, options) {
    "use strict";
    return googleChart('area', URL, container, options);
}

function columnChart(URL, container, options) {
    "use strict";
    return googleChart('column', URL, container, options);
}

function stackedColumnChart(URL, container, options) {
    "use strict";
    return googleChart('stackedColumn', URL, container, options);
}

function comboChart(URL, container, options) {
    "use strict";
    return googleChart('combo', URL, container, options);
}

function pieChart(URL, container, options) {
    "use strict";
    return googleChart('pie', URL, container, options);
}