I am trying to create a chart using fusioncharts, I am using an AJAX query to get the data and below is how I'm generating the chart.
My problem is that fusion charts needs to see for example "value" : "1" where as I need to be able to use "0" : "1" because of my php below
My PHP Script to get logins for each hour of yesterday and today
$yesterdays_date = new datetime(date('d.m.Y',strtotime("-1 days")));
$query = "SELECT DATE(login_date) as date, HOUR(login_date) as hour, COUNT(*) as logins FROM logins WHERE login_date >= '".$yesterdays_date->format('Y-m-d')."' GROUP BY DATE(login_date), HOUR(login_date)";
//storing the result of the executed query
$result = $conn->query($query);
//initialize the array to store the processed data
$jsonArray = array();
$array = array(
'today' => array(
"seriesname" => "Logins Yesterday",
"data" => array(
'0' => 0,
'1' => 0,
'2' => 0,
'3' => 0,
'4' => 0,
'5' => 0,
'6' => 0,
'7' => 0,
'8' => 0,
'9' => 0,
'10' => 0,
'11' => 0,
'12' => 0,
'13' => 0,
'14' => 0,
'15' => 0,
'16' => 0,
'17' => 0,
'18' => 0,
'19' => 0,
'20' => 0,
'21' => 0,
'22' => 0,
'23' => 0,
),
),
'yesterday' => array(
"seriesname" => "Logins Today",
"renderAs" => "line",
"showValues" => "0",
"data" => array(
'0' => 0,
'1' => 0,
'2' => 0,
'3' => 0,
'4' => 0,
'5' => 0,
'6' => 0,
'7' => 0,
'8' => 0,
'9' => 0,
'10' => 0,
'11' => 0,
'12' => 0,
'13' => 0,
'14' => 0,
'15' => 0,
'16' => 0,
'17' => 0,
'18' => 0,
'19' => 0,
'20' => 0,
'21' => 0,
'22' => 0,
'23' => 0,
),
),
);
//check if there is any data returned by the SQL Query
if ($result->num_rows > 0) {
//Converting the results into an associative array
while($row = $result->fetch_assoc()) {
if($row['date'] == $yesterdays_date->format('Y-m-d')){
//- Yesterdays data
$array['yesterday']['data'][$row['hour']] = $row['logins'];
}else{
//- Todays data
$array['today']['data'][$row['hour']] = $row['logins'];
}
//$jsonArrayItem = array();
//$jsonArrayItem['date'] = $row['date'];
//$jsonArrayItem['hour'] = $row['hour'];
//$jsonArrayItem['logins'] = $row['logins'];
//append the above created object into the main array.
//array_push($jsonArray, $jsonArrayItem);
}
}
//set the response content type as JSON
header('Content-type: application/json');
//output the return value of json encode using the echo function.
echo json_encode($array);.
My Data returned from the PHP script
My jQuery to generate the chart comparing yesterdays logins with today
function getLogins(){
$.ajax({
url: '/ajax/getLoginsToday.php',
type: 'GET',
success: function(data){
var chartProperties = {
"caption": "Product-wise quarterly revenue Vs profit in last year",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Login Total",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendBgAlpha": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14",
"showHoverEffect": "1"
};
apiChart = new FusionCharts({
type: 'stackedcolumn2dline',
renderAt: 'chartContainer',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": chartProperties,
"categories": [
{
"category": [
{
"label": "00-01"
},
{
"label": "01-02"
},
{
"label": "02-03"
},
{
"label": "03-04"
},
{
"label": "04-05"
},
{
"label": "05-06"
},
{
"label": "06-07"
},
{
"label": "07-08"
},
{
"label": "08-09"
},
{
"label": "09-10"
},
{
"label": "10-11"
},
{
"label": "11-12"
},
{
"label": "12-13"
},
{
"label": "13-14"
},
{
"label": "14-15"
},
{
"label": "15-16"
},
{
"label": "16-17"
},
{
"label": "17-18"
},
{
"label": "18-19"
},
{
"label": "19-20"
},
{
"label": "20-21"
},
{
"label": "21-22"
},
{
"label": "22-23"
},
{
"label": "23-24"
}
]
}
],
"dataset": [
{
"seriesname": "Logins Yesterday",
"data": data
},
{
"seriesname": "Logins Today",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "24000"
},
{
"value": "45000"
},
{
"value": "23000"
},
{
"value": "38000"
}
]
}
]
}
});
apiChart.render();
}
});
}
In my jQuery AJAX success block above you can see i'm trying to set the dataset via the AJAX data but fusioncharts needs to see it like "value":"1" whereas my data is formatted like "0":"1", "23":"4".
What's my best solution to get it into the format that fusioncharts wants?
