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.
-
Author
-
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.6as 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 seenI 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
Frankfor 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.5regards
FrankHello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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
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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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’.
-
AuthorPosts
You must be logged in to reply to this topic.