Displaying JSON data with Chartjs

Question

First up - most of my development experience is with the back end and, while I have plenty of programming experience in that context, I'm not that familiar with Javascript.

I have managed to produce a REST service that (via GSON) generates JSON populated with data from a database. This data includes a list of two values: a date and a double indicating a temperature for that date. An example of the generated JSON can be found here.

What I'd like to try and do is to take the data and display it in a line chart. I've been trying this with Chartjs with extremely limited success.

The code I'm currently using to try and get the chart working is:

var data = [{"2019-03-30":11.0},{"2019-03-31":10.2},{"2019-04-01":10.0}];
var ctx = document.getElementById("temperatureChart").getContext('2d');
var chart = new Chart(ctx, {
    type: "line",
    data: {
        datasets: [
            {
                label: "2019",
                data: data,
                borderColor: "rgb(192,49,62)",
                fill: false
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        title: {
            display: true,
            text: 'Temperature Averages'
        }

    }
});

As you can see - I've, for the moment, simply hard coded a few data values in an attempt to try and get it working. All this produces is a chart with nothing on the X Axis and the values -1.0 to 1.0 in .2 increments - screenshot at the bottom of this post.

Honestly, I've no idea how to proceed from here. Is Chartjs even a good choice for this? Starting to wonder if I've bitten off more than I can chew.

From what I could tell from the chartjs' documentation is that your data structure must be [ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }] instead of [ { "2019-03-30" : 11.0 }, { "2019-03-31" : 10.2 }, { "2019-04-01" : 10.0 }] — UNOPARATOR
– UNOPARATOR, Commented Oct 7, 2019 at 19:19
@UNOPARATOR Sorry - I should've mentioned that I did see that and tried it, but, for reasons unclear to me it only seems to create two data points...imgur.com/a/NoExx2F — Paul Hunnisett
– Paul Hunnisett, Commented Oct 8, 2019 at 13:34
@PaulHunnisett that is the same reason why posted a DevExtreme Charts answer. I've used chartjs back in the day, but couldn't remember how to help with now to be honest. — UNOPARATOR
– UNOPARATOR, Commented Oct 8, 2019 at 17:56

UNOPARATOR · Accepted Answer · 2019-10-07 19:40:23Z

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"];

answered Oct 7, 2019 at 19:40

UNOPARATOR

7061 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Hunnisett Over a year ago

This does seem to work nicely - or, at least, work which is more than I can say for ChartJS. To be fair ChartJS probably works well, but I can't seem to get it working. I literally just copied and pasted your example code so I've still got to get my head around it, but having a working example is definately a step forward - thanks!

UNOPARATOR Over a year ago

DevExpress' website documentation and demos are one of a kind. If you can't find something there, just google it and it is probably answered in their forums (or you can ask here of cource). (Disclaimer, I'm not affiliated with them, I just use their devextreme components in our projects at work)

Collectives™ on Stack Overflow

Displaying JSON data with Chartjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related