Chart with Color Function

Chart with Color Function

by Marco Flier

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.bootstrap.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://docs.google.com/uc?authuser=0&amp;id=0B86_iCzuVYsPNVhZb1I1dmZYNjg&amp;export=download"></script>
<!DOCTYPE html>
<div id="chart">

</div>

CSS

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

JavaScript

var data = getGraphData();
var source = {
        datatype: "json",
        datafields: [
            { name: 'PROJECTNR', type: 'number' },
            { name: 'BORINGNR', type: 'number' },
            { name: 'FILTERNR', type: 'number' },
            { name: 'LOCATIE', type: 'string' },
            { name: 'PEILDTG', type: 'string' },
            { name: 'WTMONNDTG', type: 'string' },
            { name: 'WTMONVOLGNR', type: 'string' },
            { name: 'REFERENTIE', type: 'string' },
            { name: 'GWS_MV', type: 'number' },
            { name: 'GWS_NAP', type: 'number' },
            { name: 'GWS_MP', type: 'number' },
            { name: 'VALIDE', type: 'number' },
            { name: 'PEILDATUM', type: 'date' },
            { name: 'TREND_MV', type: 'number' },
            { name: 'TREND_NAP', type: 'number' },
            { name: 'MINPERIOD', type: 'date' },
            { name: 'MAXPERIOD', type: 'date' },
            { name: 'TOESTROMING', type: 'string' },
            { name: 'TREND_MV', type: 'number' },
            { name: 'TREND_NAP', type: 'number' },
            { name: 'MINPERIOD', type: 'date' },
            { name: 'MAXPERIOD', type: 'date' },
            { name: 'MINGRONDWATER_MV', type: 'number' },
            { name: 'MAXGRONDWATER_MV', type: 'number' },
            { name: 'MINGRONDWATER_NAP', type: 'number' },
            { name: 'MAXGRONDWATER_NAP', type: 'number' },
            { name: 'GHG', type: 'number' },
            { name: 'GLG', type: 'number' }
        ],
        localdata: data
    };

    var da = new $.jqx.dataAdapter(source, {
        contentType: 'application/json; charset=utf-8',
        async: false,
        autoBind: true,
        loadComplete: function (data) {
            console.info("Data adapter for graph loaded...");
            console.info(data);
        },
        loadError: function (xhr, status, error) {
            console.error('Error loading "' + source.url + '" : ' + error);
        }
    });

   ...