Как я могу получить график линии тренда с помощью javascript

Я пытаюсь получить полиномиальную линию тренда 3-го порядка, вычислить значение r-квадрата. Я получаю только линейную диаграмму. На графике линия тренда не отображается. Вот мой код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript" src="js plugins/excanvas.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.min.js"></script>
<script type="text/javascript" src="js plugins/jquery.flot.symbol.min.js"></script>

<script type="text/javascript">
    var data = [
        [0, 11],
        [1, 15],
        [2, 25],
        [3, 24],
        [4, 13],
        [5, 18],
        [6, 22],
        [7, 45],
        [8, 33],
        [9, 12],
        [10, 27],
        [11, 24],
        [12, 20]
    ];
    var bin = [
        [0, 1],
        [1, 2],
        [2, 3],
        [3, 4],
        [4, 5],
        [5, 6],
        [6, 7],
        [7, 8],
        [8, 9],
        [9, 10],
        [10, 11],
        [11, 12],
        [12, 13],
        [13, 14]
    ];

    var dataset = [{
        label: "Frequency",
        data: data,
        points: {
            symbol: "triangle"
        }
    }];
    var options = {
        series: {
            lines: {
                show: true
            },
            points: {
                radius: 3,
                fill: true,
                show: true
            }
        },
        /*
        series:{
                bars:{
                        show:true
                    }
                },
        bars:{
                align:"center",
                barWidth:1
             },
        */

        xaxis: {
            //mode:"",
            //tickSize:[],
            ticks: bin,
            ticklength: 0,
            axisLabel: "Bin",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        },
        yaxis: {
            axisLabel: "Frequncy",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
            tickFormatter: function (v, axis) {
                return v + "Hz";
            }
        },
        legend: {
            noColumns: 0,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            hoverable: true,
            borderWidth: 2,
            borderColor: "#633200",
            backgroundColor: {
                colors: ["#ffffff", "#EDF5FF"]
            }
        },
        trendline: {

            type: 'polynomial',
            degree: 3,
            visibleInLegend: true,

        },
        colors: ["#FF0000", "#0022FF"]
    };

    $(document).ready(function () {
        $.plot($("#flot-placeholder"), dataset, options);
        $("#flot-placeholder").UseTooltip();
    });

    var previousPoint = null,
        previousLabel = null;

    $.fn.UseTooltip = function () {
        $(this).bind("plothover", function (event, pos, item) {
            if (item) {
                if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                    previousPoint = item.dataIndex;
                    previousLabel = item.series.label;
                    $("#tooltip").remove();

                    var x = item.datapoint[0];
                    var y = item.datapoint[1];

                    var color = item.series.color;

                    //console.log(item.series.xaxis.ticks[x].label);                

                    showTooltip(item.pageX,
                    item.pageY,
                    color,
                        "<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> Hz");
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    };

    function showTooltip(x, y, color, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 40,
            left: x - 120,
            border: '2px solid ' + color,
            padding: '3px',
                'font-size': '9px',
                'border-radius': '5px',
                'background-color': '#fff',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            opacity: 0.9
        }).appendTo("body").fadeIn(200);
    }
</script>
</head>

<body>
    <div id="flot-placeholder" style="width:450px;height:300px;margin:0 auto">     </div>
</body>
</html>

Как я могу получить полиномиальную линию тренда на линейной диаграмме?


javascript flot trendline
person ARoy    schedule 14.08.2015    source источник
comment
Сам Flot не поддерживает линии тренда. Вы используете синтаксис параметра из google-visualization. Если вам нужна линия тренда во Flot, вам нужно рассчитать для нее функцию, заполнить массив значениями этой функции и добавить этот массив в виде ряда данных на график.   -  person Raidri    schedule 14.08.2015
comment
Вот пример линейной линии тренда: stackoverflow.com/a/25205397/2610249   -  person Raidri    schedule 14.08.2015
comment
спасибо за ответ @Raidri. Я пытался использовать визуализацию Google, но она поддерживает только линейную и экспоненциальную, не работает для полиномиальной   -  person ARoy    schedule 15.08.2015