Show Temperature Data Error

[joko.pitoyoParticipant]

what wrong with this code and sample, this code can’t show temperature

show_chart=function(temperatures){
            console.log(temperatures);

            var settings = {
                title: "Chart Temperature",
                description: "Informasi suhu(°C) didalam kendaraan ",
                enableAnimations: true,
                enableCrosshairs: true,
                showLegend:false,
                source: temperatures,
                 xAxis:
                    {
                        minValue: 30,
                        maxValue: 50,
                        flip: false,
                        dataField: 'tdate',
                        valuesOnTicks: true,
                        rangeSelector: {
                            serieType: 'area',
                            padding: { /*left: 0, right: 0,*/ top: 20, bottom: 0 },
                            // Uncomment the line below to render the selector in a separate container
                            //renderTo: $('#selectorContainer'),
                            backgroundColor: 'white',
                            size: 110,
                            gridLines: {visible: false},
                        },
                        labels: {
                            angle: -45,
                            rotationPoint: 'topright',
                            offset: { x: 0, y: -30 },
                            formatSettings:function(label){
                                console.log(label);
                                return label;
                            }
                        }
                    },
                seriesGroups:
                    [
                        {
                            type: 'line',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 20,
                                description: 'Derajat celcius (°C)'
                            },
                            series: [
                                    { dataField: 'temp', displayText: 'Temperature'}
                            ]
                        }
                    ]
            };
            $('#chartContainer').jqxChart(settings);

}

sample data

var sampleData=[
    {
        "index": 1,
        "tdate": "2022-12-24 00:00:04",
        "temp": 57
    },
    {
        "index": 2,
        "tdate": "2022-12-24 00:00:14",
        "temp": 39
    },
    {
        "index": 3,
        "tdate": "2022-12-24 00:00:24",
        "temp": 41
    },
    {
        "index": 4,
        "tdate": "2022-12-24 00:00:34",
        "temp": 33
    },
    {
        "index": 5,
        "tdate": "2022-12-24 00:00:44",
        "temp": 26
    },
    {
        "index": 6,
        "tdate": "2022-12-24 00:00:50",
        "temp": 37
    }
]

show_chart(sampleData);

call function

[svetoslav_borislavovParticipant]

Hi,

There are two problems:

The first one is that on the xAxis you have got min and max values for the date ‘tdate’, but the provided values are not dates but numbers (30 and 50).

The second one is that the ‘tdate’ is date but it in the sampleData it is a plain string. You have to add property ‘type’ and set it to ‘date’.
This property should be passed to the xAxis object

Here is your working example: http://jsfiddle.net/omyxjpc6/1/

I hope this helps you!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts