function init_line_chart() {

    if (typeof echarts == 'undefined') {
        console.warn('Warning - echarts.min.js is not loaded.');
        return;
    }

    // Define element
    let lineChartElement = document.getElementById('line_chart');

    if(lineChartElement) {

        let lineChart = echarts.init(lineChartElement);

        // variables (this will be set by user)
        let title = 'Usage';
        let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
        let animationDuration = 750;
        let legendData = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
        let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        let yAxisLabelValueFormat = '{value}'; // ex '{value} users'  - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
        let showPointValues = false;
        let inverted = false;
        let showDataZoom = true;
        let stacked = false;
        let markLine = 'average'; // min | max | average
        let series = [];


        legendData.forEach(function (val, idx,arr) {
            series.push(setLineChartSeries(val, [
                    Math.floor(Math.random() * 100),
                    Math.floor(Math.random() * 100),
                    Math.floor(Math.random() * 100),
                    Math.floor(Math.random() * 100),
                    Math.floor(Math.random() * 100),
                    Math.floor(Math.random() * 100),
                    Math.floor(Math.random() * 100),
            ], showPointValues, markLine, stacked));
        });



        // Options
        lineChart.setOption({

            // Chart title
            title: setTitle(title),

            // Define colors
            color: color,

            // Global text styles
            textStyle: setGlobalTextStyle(),

            // Chart animation duration
            animationDuration: animationDuration,

            // Setup grid
            grid: setGrid(showDataZoom),

            // Add legend
            legend: setLegend(legendData),

            // Add tooltip
            tooltip: setTooltip(),

            // Horizontal axis
            xAxis: inverted ? setYAxis(yAxisLabelValueFormat) : setXAxis(xAxisData),

            // Vertical axis
            yAxis: inverted ? setXAxis(xAxisData) : setYAxis(yAxisLabelValueFormat),

            // Axis pointer
            axisPointer: setAxisPointer(),

            // Zoom control
            dataZoom: setDataZoom(showDataZoom),

            // Add series
            series: series
        });

        setResizeEvent(lineChartElement, lineChart);
    }
}

function setLineChartSeries(name, data = [], showPointValues  = false, markLineDataType = null, stack = false) {

    return {
        name: name,
        type: 'line',
        data: data,
        stack: stack,
        smooth: true,
        symbol: 'circle',
        symbolSize: 7,
        label: {
            normal: {
                show: showPointValues
            }
        },
        markLine: {
            data: [{
                type: markLineDataType,
                name: markLineDataType !== null ? (markLineDataType[0].toUpperCase() + markLineDataType.substring(1)) : null,
            }]
        },
        itemStyle: {
            normal: {
                borderWidth: 2
            }
        }
    }
}

function setXAxis(xAxisData) {
    return [{
        type: 'category',
        boundaryGap: true,
        data: xAxisData,
        axisLabel: {
            color: '#fff'
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.25)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        }
    }]
}

function setYAxis(yAxisLabelValueFormat) {
    return [{
        type: 'value',
        axisLabel: {
            formatter: yAxisLabelValueFormat,
            color: '#fff'
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.25)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.1)'
            }
        },
        splitArea: {
            show: true,
            areaStyle: {
                color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
            }
        }
    }]
}

function setLegend(legendData) {
    return {
        data: legendData,
        itemHeight: 8,
        itemGap: 20,
        textStyle: {
            color: '#fff'
        }
    }
}

function setTitle(title) {
    return {
        text: title,
        textStyle: {
            color: '#fff'
        }
    }
}

function setDataZoom(show) {
    return [
        {
            type: 'inside',
            start: 30,
            end: 70
        },
        {
            show: show,
            type: 'slider',
            start: 30,
            end: 70,
            height: 40,
            bottom: 0,
            borderColor: 'rgba(255,255,255,0.1)',
            fillerColor: 'rgba(0,0,0,0.1)',
            handleStyle: {
                color: '#585f63'
            },
            textStyle: {
                color: '#fff'
            },
            handleStyle: {
                color: '#8893a9'
            },
            dataBackground: {
                areaStyle: {
                    color: 'rgba(0,0,0,0.5)'
                }
            }
        }
    ]
}

function setTooltip() {
    return {
        trigger: 'axis',
        backgroundColor: 'rgba(255,255,255,0.9)',
        padding: [10, 15],
        textStyle: {
            color: '#222',
            fontSize: 13,
            fontFamily: 'Roboto, sans-serif'
        }
    }
}

function setGrid(showDataZoom) {
    return {
        left: 0,
        right: 40,
        top: 50,
        bottom: showDataZoom ? 60 : 0,
        containLabel: true
    };
}

function setGlobalTextStyle() {
    return {
        fontFamily: 'Roboto, Arial, Verdana, sans-serif',
        fontSize: 13
    };
}

function setAxisPointer() {
    return [{
        lineStyle: {
            color: 'rgba(255,255,255,0.25)'
        }
    }];
}

function setResizeEvent(lineChartElement, lineChart) {
    // Resize function
    let triggerChartResize = function() {
        lineChartElement && lineChart.resize();
    };

    // On sidebar width change
    let sidebarToggle = document.querySelector('.sidebar-control');
    sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);

    // On window resize
    let resizeCharts;
    window.addEventListener('resize', function() {
        clearTimeout(resizeCharts);
        resizeCharts = setTimeout(function () {
            triggerChartResize();
        }, 200);
    });
}

$(document).ready(init_line_chart);