Waveform Graphic Canvas JS

I think you can try using Chart.js, there is an example (Stacked (line)) which I think is what you are looking for:

You have several options for chart generation, here are some of the more popular plugins:

Fusion Charts

Highcharts

Google Charts

In the example I'm going to give, it's going to be using Fusion Charts (Well I'm more accustomed, but for practically all the plugins you find will follow the same logic)

In the case they would not be 'waves' but an area chart.

Define a json with the chart header:

Note: I'm guessing the data for the chart will come via PHP.

$json = '';
//Essa chave é fechada no segundo bloco de código da resposta
$json .= '{';
$json .= '"chart": {';
$json .= '"caption": "Gráfico de valor",';
$json .= '"subcaption": "",';
$json .= '"yaxisname": "Valor",';
$json .= '"formatnumberscale": "1",';
$json .= '"plotgradientcolor": "34495e",';
$json .= '"bgcolor": "FFFFFF",';
$json .= '"showalternatehgridcolor": "0",';
$json .= '"showplotborder": "0",';
$json .= '"showvalues": "0",';
$json .= '"labeldisplay": "WRAP",';
$json .= '"divlinecolor": "CCCCCC",';
$json .= '"suseroundedges": "1",';
$json .= '"showcanvasborder": "0",';
$json .= '"canvasborderalpha": "0",';
$json .= '"defaultnumberscale": "PB",';
$json .= '"numberscalevalue": "1024,1024",';
$json .= '"palettecolors": "34495e",';
$json .= '"showborder": "0"';
$json .= '},';

After defining the header, you will define the data and labels for the chart:

$json .= '"data": [';
$json .= '{';
$json .= '"label": "2012",';
$json .= '"value": "43570",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "2013",';
$json .= '"value": "55553",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "2014",';
$json .= '"value": "68892",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "Predicted",';
$json .= '"showlabelborder": "0",';
$json .= '"labelhalign": "left",';
$json .= '"lineposition": "0",';
$json .= '"dashed": "1",';
$json .= '"color": "#6E98AA",';
$json .= '"vline": "true",';
$json .= '"startIndex": 2';
$json .= '},';
$json .= '{';
$json .= '"label": "2015",';
$json .= '"value": "83835",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "2016",';
$json .= '"value": "101055",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "2016",';
$json .= '"value": "120643",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '}';
$json .= ']';
//Esse é o fechamento da chave do primeiro bloco
$json .= '}';

The labels and label values can be brought from the bank, from a csv, another json, as long as it is EXACT for the graphic format you want, you find examples for each type in the documentation.

And to render, you need to instantiate the mergeCharts class and tell what it needs to do.

    //Inclua a classe do FusionCharts
    include 'caminho/ate/a/classe/fusionCharts.php';
    //Printa a div que irá conter o gráfico
    echo '<div id="chart-1"></div>';
    $id = uniqid();
    //chart-1 é a id do elemento que o gráfico irá ser renderizado,  
    //$id é necessário ser uma chave única caso deseje renderizar o gráfico mais de um vez sem dar refresh na pagina   
    $Chart = new \FusionCharts("Area2D", "$id", "100%", 400, "chart-1", "json", $json);
    $Chart->render();

I did not get to test, but this should give you something like this:

PS:Icopiedthisexamplefromthe fusionCharts site and gave a brief explanation on what to do .

PS2: You need to include the dependencies of the plugin and include jQuery.