Chartjs-Displaying JSON data with Chartjs

by

1👍

✅

Since you also asked “Is Chartjs even a good choice for this?”, here is a DevExtreme Charts example:
(modified from devExtreme’s sample)

I modified your data from this: (as I mentioned in your question’s comments)

[ { "2019-03-30" : 11.0 }, { "2019-03-31" : 10.2 }, { "2019-04-01" : 10.0 }]

to this:

[ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }]

HTML:


    <div class="dx-viewport demo-container">
        <div id="chart-demo">
            <div id="chart"></div>
            <div class="options">
                <div class="caption">Options</div>
                <div class="option">              
                    <span>Series Type</span>
                    <div id="types"></div>
                </div>    
            </div>
        </div>
    </div>

CSS:

.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    margin-top: 20px;
}

.option {
    margin-top: 10px;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option > span {
    margin-right: 10px;
}

.option > .dx-widget {
    display: inline-block;
    vertical-align: middle;
}

Javascript:

$(function(){
    var chart = $("#chart").dxChart({
        palette: "Violet",
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: "x",
            type: types[0]
        },
        margin: {
            bottom: 20
        },
        argumentAxis: {
            valueMarginsEnabled: false,
            discreteAxisDivisionMode: "crossLabels",
            grid: {
                visible: true
            }
        },
      series: [
            { valueField: "y", name: "Temperature" }
        ],
        legend: {
            verticalAlignment: "bottom",
            horizontalAlignment: "center",
            itemTextPosition: "bottom"
        },
        title: { 
            text: "Daily Temperature Variations",
            subtitle: {
                text: "(Celsius)"
            }
        },
        "export": {
            enabled: true
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function (arg) {
                return {
                    text: arg.valueText
                };
            }
        }
    }).dxChart("instance");

    $("#types").dxSelectBox({
        dataSource: types,
        value: types[0],
        onValueChanged: function(e){
            chart.option("commonSeriesSettings.type", e.value);
        }
    });
});

var dataSource = [ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }];

var types = ["line", "stackedline", "fullstackedline"];

Leave a comment