jQuery UI Widgets Forums Chart format (whole static) hours on X axis

This topic contains 6 replies, has 4 voices, and was last updated by  jqWizard 11 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • format (whole static) hours on X axis #29413

    yfands
    Member

    Hello,

    From my remote temperature sensor, I retrieve the following data: (stored in a Mysql database)

    Last_Seen_date              Temperature
    2013-09-24 00:18:32     12.5
    2013-09-24 00:20:32    12.5
    2013-09-24 00:22:32    12.6

    as you can see every 2 minutes the data is stored.

    I would like to see on the X-axis the hours in a whole static format style

    00:00 01:00 02:00 03:00 ……………………..23:00

    and wrapped around these values the data above.
    there is a possiblity that there is no data received (pour reception), so a gap will be seen

    I tried several of your examples with or without the
    type: ‘date’,
    baseUnit: ‘hour’,

    or the
    minValue 0,
    maxValue 23,

    but can’t achieve what I’m looking for..
    can you help ?

    regards
    Frank

    format (whole static) hours on X axis #29414

    yfands
    Member

    for clarity:

    there are 2 columns Last_Seen_date and Temperature.
    the Last_Seen_date is a date and time column 2013-09-24 00:18:32
    and the Temperature a float 12.5

    regards
    Frank

    format (whole static) hours on X axis #29533

    Dimitar
    Participant

    Hello Frank,

    Please check out the demo Custom x-Axis Range for a showcase of gaps in the chart.

    We would also like you to provide us with your chart code and some sample data, so that we may test your scenario locally.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    format (whole static) hours on X axis #29679

    Marachl
    Member

    I have similar problem as yfands.

    I tried several of your examples with categoryAxis from json source in 2013-09-24 00:18:32 format

    and with

    type: ‘date’,
    baseUnit: ‘hour’,

    not work.

    whole code:

    $(document).ready(function () {

    $(‘#jqxChart’).jqxChart({borderLineColor: ‘white’});
    // prepare the data
    var cardid = $(‘.jqxChart_panel’).find(‘input[name=cardid]’).val();
    var dateex = $(‘.jqxChart_panel’).find(‘input[name=dateex]’).val();
    var date_from = $(‘.jqxChart_panel’).find(‘input[name=date_from]’).val();
    var date_to = $(‘.jqxChart_panel’).find(‘input[name=date_to]’).val();
    var source =
    {
    datatype: \”json\”,
    datafields: [
    { name: ‘Date’, type: ‘date’ },
    { name: ‘Altitude’ }

    ],
    url: \”/chart.php?card_id=\” + cardid + \”&date=\” + dateex + \”&date_from=\” + date_from + \”&date_to=\” + date_to + \”\”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // prepare jqxChart settings
    var settings = {
    title: \””.$title.”\”,
    description: \”\”,
    showLegend: true,
    source: dataAdapter,
    categoryAxis: {
    dataField: ‘Date’,
    formatFunction: function (value) {
    return value.getHours() + ‘h’;
    },
    toolTipFormatFunction: function (value) {
    return value.getDate()+ ‘. ‘ + months[value.getMonth()] + ‘ ‘ + value.getFullYear() + ‘ “.translator::find_word(“in”).” ‘ + value.getHours() + ‘ “.translator::find_word(“hours”).” ‘ + value.getMinutes() + ‘ “.translator::find_word(“minutes”).”‘;
    },
    showGridLines: true
    },
    colorScheme: ‘scheme05’,
    seriesGroups: [{
    type: ‘area’,
    valueAxis: {
    displayValueAxis: true,
    minValue: 0,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [{ dataField: ‘Altitude’, displayText: ‘”.translator::find_word(“altitude”).”‘ }]
    }]
    };
    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    // refresh the data when the button is clicked.
    $(‘.jqxChart_panel’).find(‘input[name=refresh]’).click(function () {
    var cardidd = $(‘.jqxChart_panel’).find(‘input[name=cardid]’).val();
    var dateexd = $(‘.jqxChart_panel’).find(‘input[name=dateex]’).val();
    var date_fromd = $(‘.jqxChart_panel’).find(‘input[name=date_from]’).val();
    var date_tod = $(‘.jqxChart_panel’).find(‘input[name=date_to]’).val();
    source.url = \”/chart.php?card_id=\” + cardidd + \”&date=\” + dateexd + \”&date_from=\” + date_fromd + \”&date_to=\” + date_tod + \”\”;
    var dataAdapter = new $.jqx.dataAdapter(source);
    $(‘#jqxChart’).jqxChart({ source: dataAdapter });
    });
    });

    Please help

    format (whole static) hours on X axis #29680

    Marachl
    Member

    one more thing:

    The reason I can not use hour chart “Custom x-Axis Range” is that I have not hour periods, but I need time period, points have to be on axis exactly at the desired location

    format (whole static) hours on X axis #30112

    Dimitar
    Participant

    Hello Marachl,

    Unfortunately, such scenario is not supported in jqxChart. There has to be a set interval between points and they cannot be plotted “randomly” on the axis.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    format (whole static) hours on X axis #31701

    jqWizard
    Participant

    Dates with dashes e.g. ‘2013-09-24 00:18:32’ are not working but only with forward slashes e.g. ‘2013/09/24 00:18:32’.

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

You must be logged in to reply to this topic.