高图：不规则数据的规则间隔

Question

I have the stored procedure that returns the sensor data that have been stored in the database. To display the values I build graphs using the Highcharts library.

execute [sensors].[dbo].[usp_deddt] 50320001, 1, '20150801', '20150821';

Sometimes, for some time to, the data do not come - I get the gap, for example:

Then my histogram takes the form:

I'd like to see on the X-axis continuous time series.

For example, in my case it should be:

16.08.2015 15:00 16.08.2015 16:00 16.08.2015 17:00 16.08.2015 18:00

How to set regular interval for irregular data?

Answer 1

If I understand from your example correctly it seems that you are using categories for the x axis.

You can solve this problem, without the complication of making fake database data, by simply eliminating categories and using instead a datetime x axis.

Your time stamp values would be used to plot the values along the x axis, which means they would, by default, without adding complication to your database, or unnecessary looping, accomplish a continuous x axis, with the data plotted where it actually occurs.

• http://api.highcharts.com/highcharts#xAxis.type

*

Answer 2

Well as I know you cannot do that many things. The Highcharts display the series, so if yours has a gap it won't automatically get filled.

What you can do is manually generating the missing parts. Eg you can generate it on the database level:

/* create a table with all possible hours */
create table hours (hour varchar2);

insert into hours values ('01:00');
insert into hours values ('02:00');
insert into hours values ('03:00');
insert into hours values ('04:00');
/* ... */

/* the same for days */
/* ... */

Then just outer-join them with your table by the compound date value and you will get your series with all gaps filled.

Also some databases allow you to generate the datasets instead of creating these tables which somebody would call trash and probably would be right, eg in Oracle you can use connect by level statements to achieve this without tables at all.

Another approach would be to generate them on a JavaScript side. You take your array as an input and process it by passing inside the missing values.

Answer 3

Many thanks to all for the help... My small solution:

Added the attribute gapSize from Highstock to mark the gap.

$scope.highchartsNG = {
        options: {
            chart: {
                zoomType: 'x, y'
            },

            plotOptions: {
                column: { stacking: 'normal', color: '#007a94'},
                bar: { dataLabels: {  enabled: true } }
            },
        },

        title: {
              text: ''
        },

        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%e. %b',
                year: '%b'
            },
        },

        series: [{
            type : 'column',
            showInLegend: false,                
            gapSize: 1,
            data: []
        }]
}

In my AngularJS controller I wrote the method (relevant part):

... 
var measurementData = [];   
$scope.setGraphValues = function () {
    ...
    var data = $scope.tableData;
    for(var i = 0; i < data.length; i++) {
        measurementData.push([Date.UTC(yearPart, monthPart,
            dayPart, hourPart, minutePart),data[i].measureData]);
    }
    ...
    $scope.highchartsNG.series[0].data = measurementData;
}

Now everything is OK.