Google Chart - Cubic Polynomials

Google chart example that draws a cubic polynomial using coefficients from a form.

by MariusNastasa

HTML

<script src="https://www.google.com/jsapi"></script>
<h2> Cubic Polynomials </h2>
<div id='preamble'>
    <p> A cubic polynomial is an equation of the form: </p>
    <p>y(x) = ax<sup>3</sup> + bx<sup>2</sup> + cx + d</p>
    <p> 
        Change the coefficients in the form below and watch 
        the impact on th resulting curve
    </p>
</div>
<p>
    <label>a</label>
    <input id='a' type='text' value='1' />
</p>
<p>
    <label>b</label>
    <input id='b' type='text' value='1' />
</p>
<p>
    <label>c</label>
    <input id='c' type='text' value='-100' />
</p>
<p>
    <label>d</label>
    <input id='d' type='text' value='0' />
</p>
<p>
    <label>Min X</label>
    <input id='min' type='text' value='-10' readonly='true' class='uneditable'/>
</p>
<p>
    <label>Max X</label>
    <input id='max' type='text' value='10' readonly='true' class='uneditable'/>
</p>
<p>
    <button id='update' onclick="updateChart()">Update</button>
</p>
<div id='chart'></div>

CSS

label {
    display: inline-block;
    width: 50px;
    text-align: right;
}

#chart {
    width: 100%;
    height: 256px;
}

.uneditable {
    color: lightgray;
}

JavaScript

//Preliminaries to do line charts
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(initChart);

// Variables in the global environment
var chart, data;
var options = {
    hAxis: {title: 'X'},
    vAxis: {title: 'Function Y(X)'},
    legend:{position:'none'}
    };

// Compute the table of polynomial value using coefficients specified in the form
function getTable() {
    var a    = Number(document.getElementById('a').value);
    var b    = Number(document.getElementById('b').value);
    var c    = Number(document.getElementById('c').value);
    var d    = Number(document.getElementById('d').value);
    var min  = Number(document.getElementById('min').value);
    var max  = Number(document.getElementById('max').value);

    var table = [ ];
    for (var x=min ; x<=max ; x++) {
        table.push([x, a*Math.pow(x, 3) + b*Math.pow(x, 2) + c*Math.pow(x,1) + d*Math.pow(x,0)]);
    }
    
    return(table);
}

// Initialise the chart
function initChart() {
    
    // Create the chart and data instances
    chart = new google.visualization.LineChart(document.getElementById('chart'));
    data = new google.visualization.DataTable();

    // Add columns to the data
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y(X)');
    
    // Add rows to the data from some source
    data.addRows(getTable());
    
    // Draw the chart with options
    chart.draw(data, options);
}

// Update the chart values for y(x) but keep the same x values
function updateChart() {
    var table = getTable();
    for (var r=0; r< table.length ; r++) {
        var row = table[r];
        data.setValue(r, 1, row[1]);
    }
    chart.draw(data, options);
}