Material Admin Extended Dark

## Flot Charts

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Official website and detailed documentation at: http://www.flotcharts.org/

Live preview: `/flot-charts.html`

Flot charts itself a combination of multiple flot libraries and it's recommended to load all the related javascript libraries in the web page in order to render complete, flawless and responsive charts.

    <!-- Main Flot library -->
    <script src="vendors/bower_components/flot/jquery.flot.js"></script>

    <!-- Responsive charts -->
    <script src="vendors/bower_components/flot/jquery.flot.resize.js"></script>

    <!-- tooltips -->
    <script src="vendors/bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js"></script>

Source files:

- Plugin:
  - JS:
    `/vendors/bower_components/flot/jquery.flot.js`
    `/vendors/bower_components/flot/jquery.flot.resize.js`
    `/vendors/bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js`
    `/vendors/bower_components/flot/jquery.flot.pie.js`
    `/vendors/bower_components/flot-orderBars/js/jquery.flot.orderBars.js`
    `/vendors/bower_components/flot.curvedlines/curvedLines.js`
- LESS: `/less/inc/charts.less`
- HTML: `/flot-charts.html`

## Basic line chart

    <div>
        <div id="chart-line" class="flot-chart"></div>
        <div class="flot-chart-legend flot-chart-legend--line"></div>
    </div>

    // Make some random data for Flot Line Chart
    var data1 = [[1,60], [2,30], [3,50], [4,100], [5,10], [6,90], [7,85]];
    var data2 = [[1,20], [2,90], [3,60], [4,40], [5,100], [6,25], [7,65]];
    var data3 = [[1,100], [2,20], [3,60], [4,90], [5,80], [6,10], [7,5]];

    // Create an Array push the data + Draw the bars
    var barData = [
        {
            label: 'Tokyo',
            data: data1,
            color: '#edeff0'
        },
        {
            label: 'Seoul',
            data: data2,
            color: '#8a99a0'
        },
        {
            label: 'Beijing',
            data: data3,
            color: '#415158'
        }
    ]

    // Let's create the chart
    if ($('#chart-line')[0]) {
        $.plot($("#chart-line"), barData, {
            series: {
                shadowSize: 0
            },
            grid : {
                borderWidth: 1,
                borderColor: '#31424b',
                show : true,
                hoverable : true
            },

            yaxis: {
                tickColor: '#31424b',
                tickDecimals: 0,
                font :{
                    lineHeight: 13,
                    style: "normal",
                    color: "#98a7ac"
                },
                shadowSize: 0
            },

            xaxis: {
                tickColor: '#31424b',
                tickDecimals: 0,
                font :{
                    lineHeight: 13,
                    style: "normal",
                    color: "#98a7ac"
                },
                shadowSize: 0
            },

            legend:{
                container: '.flot-chart-legend--line',
                noColumns: 5
            }
        });
    }

    // Tooltips for Flot Charts

    if ($('.flot-chart')[0]) {
        $('.flot-chart').bind('plothover', function (event, pos, item) {
            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
                $('.flot-tooltip').html(item.series.label + ' of ' + x + ' = ' + y).css({top: item.pageY+5, left: item.pageX+5}).show();
            }
            else {
                $(".flot-tooltip").hide();
            }
        });

        $("<div class='flot-tooltip'></div>").appendTo("body");
    }

## Line chart with curved edges

Curved lines in flot made possible with plugin https://github.com/MichaelZinsmaier/CurvedLines

CurvedLines is a plugin for flot, which displays lines in a smooth curved way. This is achieved by adding additional points in between the "real" data points.

    <script src="vendors/bower_components/flot.curvedlines/curvedLines.js"></script>

    <div class="flot-chart-edge">
        <div id="chart-curved-line" class="flot-chart"></div>
    </div>

    // Make some random data for the Chart
    var d1 = [];
    for (var i = 0; i <= 10; i += 1) {
        d1.push([i, parseInt(Math.random() * 30)]);
    }
    var d2 = [];
    for (var i = 0; i <= 10; i += 1) {
        d3.push([i, parseInt(Math.random() * 30)]);
    }

    // Chart Options
    var options = {
        series: {
            shadowSize: 0,
            curvedLines: {
                apply: true,
                active: true,
                monotonicFit: true
            },
            lines: {
                show: false,
                lineWidth: 0
            }
        },
        grid: {
            borderWidth: 0,
            labelMargin:10,
            hoverable: true,
            clickable: true,
            mouseActiveRadius:6

        },
        xaxis: {
            tickDecimals: 0,
            ticks: false
        },

        yaxis: {
            tickDecimals: 0,
            ticks: false
        },

        legend: {
            show: false
        }
    };

    // Let's create the chart
    if ($("#chart-curved-line")[0]) {
        $.plot($("#chart-curved-line"), [
            {
                data: d1,
                lines: {
                    show: true,
                    fill: 0.98
                },
                label: 'Product 1',
                stack: true,
                color: '#1e2a31'
            }, {
                data: d2,
                lines: {
                    show: true,
                    fill: 0.98
                },
                label: 'Product 2',
                stack: true,
                color: '#edeff0'
            }
        ], options);
    }

    // Tooltips for Flot Charts
    if ($('.flot-chart')[0]) {
        $('.flot-chart').bind('plothover', function (event, pos, item) {
            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
                $('.flot-tooltip').html(item.series.label + ' of ' + x + ' = ' + y).css({top: item.pageY+5, left: item.pageX+5}).show();
            }
            else {
                $('.flot-tooltip').hide();
            }
        });

        $('<div class="flot-tooltip"></div>').appendTo('body');
    }

## Bar Chart

flot-orderBars plugin is used in the below example in order to show the bars side by side.

Include flot-orderBars javascript asset file:

    <script src="vendors/bower_components/flot-orderBars/js/jquery.flot.orderBars.js"></script>

    <div>
        <div id="chart-bar" class="flot-chart"></div>
        <div class="flot-chart-legend flot-chart-legend--bar"></div>
    </div>

    // Make some random data for Flot Line Chart
    var data1 = [[1,60], [2,30], [3,50], [4,100], [5,10], [6,90], [7,85]];
    var data2 = [[1,20], [2,90], [3,60], [4,40], [5,100], [6,25], [7,65]];
    var data3 = [[1,100], [2,20], [3,60], [4,90], [5,80], [6,10], [7,5]];

    // Create an Array push the data + Draw the bars
    var barData = [
        {
            label: 'Tokyo',
            data: data1,
            color: '#edeff0',
            bars: {
                order: 0
            }
        },
        {
            label: 'Seoul',
            data: data2,
            color: '#8a99a0',
            bars: {
                order: 1
            }
        },
        {
            label: 'Beijing',
            data: data3,
            color: '#415158',
            bars: {
                order: 2
            }
        }
    ]

    // Let's create the chart
    if ($('#chart-bar')[0]) {
        $.plot($("#chart-bar"), barData, {
            series: {
                bars: {
                    show: true,
                    barWidth: 0.05,
                    fill: 1
                }
            },
            grid : {
                    borderWidth: 1,
                    borderColor: '#31424b',
                    show : true,
                    hoverable : true
            },

            yaxis: {
                tickColor: '#31424b',
                tickDecimals: 0,
                font :{
                    lineHeight: 13,
                    style: "normal",
                    color: "#98a7ac"
                },
                shadowSize: 0
            },

            xaxis: {
                tickColor: '#31424b',
                tickDecimals: 0,
                font :{
                    lineHeight: 13,
                    style: "normal",
                    color: "#98a7ac"
                },
                shadowSize: 0
            },

            legend:{
                container: '.flot-chart-legend--bar',
                noColumns: 5
            }
        });
    }

    // Tooltips for Flot Charts
    if ($('.flot-chart')[0]) {
        $('.flot-chart').bind('plothover', function (event, pos, item) {
            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
                $('.flot-tooltip').html(item.series.label + ' of ' + x + ' = ' + y).css({top: item.pageY+5, left: item.pageX+5}).show();
            }
            else {
                $(".flot-tooltip").hide();
            }
        });

        $("<div class='flot-tooltip'></div>").appendTo("body");
    }

## Pie Chart

Include Flot Pie chart library:

    <script src="vendors/bower_components/flot/jquery.flot.pie.js"></script>

    <div>
        <div id="chart-pie" class="flot-chart flot-chart--lg"></div>
        <div class="flot-chart-legend flot-chart-legend--pie"></div>
    </div>

    // Make some sample data
    var pieData = [
        {data: 1, color: '#edeff0', label: 'Toyota'},
        {data: 2, color: '#c6cbcd', label: 'Nissan'},
        {data: 3, color: '#9fa6aa', label: 'Hyundai'},
        {data: 4, color: '#798288', label: 'Scion'},
        {data: 4, color: '#525d65', label: 'Daihatsu'}
    ]

    // Pie Chart
    if($('#chart-pie')[0]){
        $.plot('#chart-pie', pieData, {
            series: {
                pie: {
                    show: true,
                    stroke: {
                        width: 0
                    }
                }
            },
            legend: {
                container: '.flot-chart-legend--pie',
                noColumns: 5
            }
        });
    }