Laravel and Charting - Determine The Difference Between Datatimes - php

Question

I've been trying to create a chart similar to http://bit.ly/1jF6AY7 for a few weeks now using the Highcharts library. However, it does not understand that there should be zero values (if no value / date is provided) for the following series:
12-18-13
01-01-14
01-03-14
01-06-14
01-15-14
However, clearly using Google charts it is possible as the above graph is showing the gaps properly between the "contributed" dates. I need to do the same for my created_at dates. Any suggestions? I'd prefer to do this using Highcharts, but at this point my stress and hair is more valuable than anything else ;)
Vanilla PHP code example:
$q = $_GET['search'];
if(isset($_GET['time'])) {
$time = $_GET['time'];
} else {
$time = NULL;
}
include_once('../../vendors/HighchartsPHP-master/Highchart.php');
$chart = new Highchart(Highchart::HIGHSTOCK);
$chart->includeExtraScripts();
$chart->chart->renderTo = "chart";
$chart->title->text = "Potential Impact for \${$q}";
$chart->rangeSelector->selected = 1;
$chart->xAxis->type = 'datetime';
$chart->xAxis->gapGridLineWidth = 3;
$chart->xAxis->dateTimeLabelFormats->hour = "%H:%M";
$chart->xAxis->dateTimeLabelFormats->month = "%e. %b";
$chart->xAxis->dateTimeLabelFormats->year = "%b";
// $chart->xAxis->tickInterval = 3600 * 1000;
$chart->yAxis->title->text = "Volume";
$chart->yAxis->min = 0;
$chart->credits->enabled = false;
// $chart->rangeSelector->buttons[] = array(
// 'type' => "minute",
// 'count' => 5,
// 'text' => "5"
// );
...
$chart->rangeSelector->buttons[] = array(
'type' => "month",
'count' => 6,
'text' => "6M"
);
$chart->rangeSelector->buttons[] = array(
'type' => "year",
'count' => 1,
'text' => "1Y"
);
$chart->rangeSelector->buttons[] = array(
'type' => "all",
'text' => "All"
);
$option = new HighchartOption();
$option->global->useUTC = false;
Highchart::setOptions($option);
$chart->series[] = array(
'name' => "Potential Impact for \${$q}",
'data' => new HighchartJsExpr("data"),
'step' => 1,
'gapSize' => 5,
'connectNulls' => false,
'tooltip' => array(
'valueDecimals' => 0
)
);
$data = format_data($q, $time);
$chart->series[0]->data = $data;
?>
<div id="chart"></div>
<script type="text/javascript"><?php echo $chart->render("chart1"); ?></script>
And, the format data function:
function format_data($q, $time = NULL) {
$msg_vol = correlate_created_at_with_msg_vol($q, $time);
while ($tweet = mysqli_fetch_array($msg_vol, MYSQL_ASSOC)) {
$date = $tweet['date'] * 1000;
$count = intval($tweet['count']);
$formatted[] = array($date, $count);
}
return $formatted;
}
In the above picture, you can see not only is it graphing single data points (as illustrated by the tooltip) without showing any visual reference on the chart, but it is skipping the null periods, and not displaying the respective times properly on the xAxis. The odd part is that if you reference the bottom bar which allows the user to change the time period by dragging the bar... That bar has the gaps properly illustrated like what I'm looking for.
If I can't get Highcharts to go to a zero value for the gaps, I at the very least, need it to show the time intervals without jumping by an unpredictable number of minutes, hours, and in some cases, days and weeks.

Answer 1

If you use a datetime based series and there is no data for those points highcharts should handle it. Without seeing your code I image you are doing a category based xAxis and you are not "binning" any data in this time slot.
Edited:
Quick glance at your pasted code shows you are using HighStock, this is good. You can use the ordinal setting. Set this to false and you should see the gaps. Now it is still hard to say as I cannot see what your data is really but this should give us something to go on. You may also want to enable connectNulls.

Answer 2

Easy Solution, force 0 if there is no data.