So I'm pulling some data from a database and getting a UNIX Timestamp and a number. So lets say N (number) was sold on D (date).

There are days missing, like the weekend. I need it to still display the day, but not require any data. It's a line chart.

April 1 2010, 50 sold
April 2 2010, 53 sold
April 7 2010, 10 sold
(I have over a 1,000 records spanning a several years - so I will add a zoom as well)

So the chart should still show April 1-7 but have no data for 3-6. (the line would just go from 2-7).

Any ideas on how to do this?

Thanks, Josh

So I'm pulling some data from a database and getting a UNIX Timestamp and a number. So lets say N (number) was sold on D (date).

There are days missing, like the weekend. I need it to still display the day, but not require any data. It's a line chart.

April 1 2010, 50 sold
April 2 2010, 53 sold
April 7 2010, 10 sold
(I have over a 1,000 records spanning a several years - so I will add a zoom as well)

So the chart should still show April 1-7 but have no data for 3-6. (the line would just go from 2-7).

Any ideas on how to do this?

Thanks, Josh

• javascript
• jquery
• graph
• charts
• highcharts

3 Answers 3

take a look here: http://highcharts./ref/#series second example of 'data' property.

You just have to convert mysql date, convert it to UNIX timestamp (UNIX_TIMESTAMP()), and then multiply it by 1000 (JS needs time in microseconds)...

Scale the x axis of your data when you're creating the chart to only count the days when you have at least one sale, and just ensure your axis is labelled sensibly.

This would mean stepping through your entire data set and ensuring it has sequential numbers. So might not be terribly efficient and could certainly benefit for pre-processing (another key in your database for "sale day" or something).

You can plot your data as normal Y data and use a formatter on the x-axis

dates = ['April 1 2010', 'April 2 2010', 'April 7 2010'];
numSold = [50, 53, 10];

chart = new Highcharts.Chart({
    series: [{
        type: 'line',
        data: numSold
    }],
    xAxis: {
        labels: {
            formatter: function() {
                var dateStr = dates[this.value];
                return dateStr;
            }
        }
    }
});