jQuery UI Widgets Forums Chart Show Temperature Data Error

This topic contains 1 reply, has 2 voices, and was last updated by  svetoslav_borislavov 1 year, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Show Temperature Data Error #132117

    joko.pitoyo
    Participant

    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

    • This topic was modified 1 year, 3 months ago by  joko.pitoyo.
    • This topic was modified 1 year, 3 months ago by  joko.pitoyo.
    Show Temperature Data Error #132132

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.