I want to display vote records per service in my column chart. Then, when i click 1 of the service it will show up the vote records of that service by day.
<?php
$sql = $mysqli->query("SELECT * FROM services");
while ($row0 = $sql0->fetch_assoc()) {
$sid0 = $row0['sid'];
$service[] = $row0['service'];
$sql1 = $mysqli->query("SELECT COUNT(*) as totalVotes FROM entries where sid = '$sid0'");
while ($row01 = $sql01->fetch_assoc()) {
$totalVote01 = $row01['totalVotes'];
$vote01[] = (int)$totalVote01;
}
}
?>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['<?php echo join($service, ', ') ?>']
}
series: [{
name: 'Total Votes per Service',
data: [{
name: '<?php echo join($service, ', ') ?>',
y: '<?php echo join($vote01, ', ') ?>',
drilldown: '<?php echo join($service, ', ') ?>'
}]
}]
})
</script>
Error: Highcharts error #14: www.highcharts.com/errors/14
Please help me with codes, my presentation is tomorrow badly need your help. Just a beginner. Thank you so very much!
Problem is in this line
y: '<?php echo join($vote01, ', ') ?>',
It will return a String as '12'
You need to pass a number here.
You can try withoit quote
y: <?php echo join($vote01, ', ') ?>,
or parse value before setting
y: parseFloat('<?php echo join($vote01, ', ') ?>' ),
Related
This is my code example.. the chart and some php code. The php code is the problem.
type here
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
theme: "light1",
exportEnabled: true,
title:{
text: "Chart from Database"
},
data: [{
type: "line", //change type to bar, line, area, pie, etc
dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
}, {
type: "line", //change type to bar, line, area, pie, etc
dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
This was the example, but i only have a file "data.db" from where i can connect (SQlite format3). i need a different type of connection like filename or url. The $con is not working for me.
<?php
$dataPoints1 = array();
$dataPoints2 = array();
$con= mysqli_connect("host","username","password","db");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="SELECT xval,yval1, yval2 FROM datapoints";
if ($result=mysqli_query($con,$sql)){
foreach($result as $row){
array_push($dataPoints1, array("x"=> $row["xval"], "y"=> $row["yval1"]));
array_push($dataPoints2, array("x"=> $row["xval"], "y"=> $row["yval2"]));}
}
mysqli_close($con);
?>
I read 12 of the last data (wind force and direction) directly from the mysq database in the example below.
How can I access the whole array of 12 data? In the example the data of the first array " with [value1[0],value3[0]]" is displayed correctly. As soon as I access the addresses of the whole array "[value1,value3]" only the all data of the wind strength (value1) is displayed correctly. The wind direction (value3) is not considered.
series: [{
type: 'windbarb',
name: 'Wind',
data: [[value1[0],value3[0]]],
}]
Currently I am still a Highcharts beginner. Can someone please tell me what I am doing wrong. I would be very happy about a solution. Many thanks in advance.
Martin
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, value1, value2, value3, reading_time FROM SensorData_04 order by reading_time desc limit 12";
$result = $conn->query($sql);
while ($data = $result->fetch_assoc()){
$sensor_data[] = $data;
}
$readings_time = array_column($sensor_data, 'reading_time');
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$value3 = json_encode(array_reverse(array_column($sensor_data, 'value3')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);
$result->free();
$conn->close();
var value1 = <?php echo $value1; ?>;
var value3 = <?php echo $value3; ?>;
var reading_time = <?php echo $reading_time; ?>;
var chartB = new Highcharts.Chart({
chart:{ renderTo : 'chart-windbarb' },
title: {
text: 'Wind Barbs'
},
xAxis: {
type: 'datetime',
categories: reading_time
},
series: [{
type: 'windbarb',
name: 'Wind',
data: [[value1[0],value3[0]]],
}]
});
I am using column chart in highchart in this i want to show x-axis in date format which i fetch from the google analytics data of my account.and i want to view the date on x-axis and which is not coming in format i want it in formatted way.
it comes like this way "20151001" and i want it to be like this "01-10-2015"
my data is come from google analytic account so i cant use highchart data
this is my code for this
php code from which i get date
$matrics='ga:sessions,ga:pageviews';
$results_top_pages = $analytics->data_ga->get(
'ga:109200082',
date('Y-m-d',strtotime('-6 days')),
date('Y-m-d',strtotime('now')),
$matrics,
array(
'dimensions' => 'ga:date',
// 'sort' => '-ga:pageviews', for acsending and decending page view sorting
'filters'=>'ga:browser%3D~%5E'.$browser.'',
'max-results' => 50
));
if(is_array($results_top_pages->getRows())){
echo '<ol>';
foreach($results_top_pages->getRows() as $top_page){
echo '<li>';
echo $top_page[0];
echo ' - '.$top_page[1].' ';
echo ' - '.$top_page[2].' ';
$data[]=$top_page[2];
$date[]=$top_page[0];
echo '</li>';
}
echo '</ol>';
}
by var_dump of $date i get date in this format:
array(7) {
[0]=>
string(8) "20150930"
[1]=>
string(8) "20151001"
[2]=>
string(8) "20151002"
[3]=>
string(8) "20151003"
[4]=>
string(8) "20151004"
[5]=>
string(8) "20151005"
[6]=>
string(8) "20151006"
}
Edited code from here ::
This is js code for highchart:
$data[]=$top_page[2];
$date[]=date('d-m-y',strtotime($top_page[0]));
// echo '</li>';
}
echo '</ol>';
}
var_dump($date[0]);
$datefirst= date('U', strtotime($date[0])) * 1000;
?>
<script>
$(function () {
$('#container').highcharts({
//alert("call");
chart: {
type: 'column'
},
title: {
text: 'Weekly Traffic'
},
subtitle: {
//text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [<?php echo join($date,','); ?>],
max:6
},
yAxis: {
title: {
text: 'Views'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
connectNulls: false
},
enableMouseTracking: false
}
},
series: [{
pointStart: '<?php echo $datefirst; ?>',
pointInterval: 86400000, //one day
pointRange: 86400000, //one day
name: '<?php echo $browser; ?>',
data: [<?php echo join($data, ',') ?>],
//pointStart: Date.UTC(2015, 0, 1),
// pointInterval: 24 * 3600 * 1000
},
]
});
});
</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Ok, so, working from your example, you just need to format the dates properly.
Something like this:
foreach($results_top_pages->getRows() as $top_page){
echo '<li>';
echo $top_page[0];
echo ' - '.$top_page[1].' ';
echo ' - '.$top_page[2].' ';
$data[]=date('d-m-Y', strtotime($top_page[2])); //add the date function
$date[]=date('d-m-Y', strtotime($top_page[0])); //add the date function
echo '</li>';
}
echo '</ol>';
}
If you want to use a datetime x axis type, which I would suggest any time you're displaying time series data, you would just change the format to use millisecond epoch time, like this:
date('U', strtotime($top_page[2])) * 1000
But instead of building an array of categories, you would set that value as the x value of your data.
Alternatively, if the data is always going to be a daily value, you can set your pointStart property as the start time, and your pointInterval property as 1 day (86400000 milliseconds)
{{edit ----------
An example of the last method:
http://jsfiddle.net/jlbriggs/xabj5qgp/
You supply:
A start datetime stamp in epoch format
An interval between points (ie one day - in milliseconds)
Your array of data points, one data point per interval (day)
The chart does the rest.
{{Edit for comments:
So, you can put the pointStart and pointInterval properties in one of two places - either in the plotOptions, or in the series properties directly.
pointRange isn't necessarily required, but it is usually a good idea as it fixes some potential spacing issues with columns/bars.
So in your case, take this:
series: [{
name: '<?php echo $browser; ?>',
data: [<?php echo join($data, ',') ?>]
},
And add the properties there:
series: [{
pointStart: __your_start_date__,
pointInterval: 86400000, //one day
pointRange: 86400000, //one day
name: '<?php echo $browser; ?>',
data: [<?php echo join($data, ',') ?>]
},
You will need to retrieve that start date from your data source and format it as epoch time in milliseconds (as demonstrated above)
I send data inside an array of objects:
[{name: "x1" , data: [ ... ]}, {name: "x2" , data: [ ... ]} ... ]
Is it possible to show series name in the data point tooltip?
Yes, you can pass a tooltip formatter in the configuration, and the data object contains the series name:
new Contour({
el: '.chart',
tooltip: {
formatter: function (d) {
return d.series + ': ' + d.x + ', ' d.y;
}
}
})
.cartesian()
.line([1,2,3,3,5,6])
.tooltip()
.render();
I am working on high charts api.I want to display each column a different color how it is possible. Below is the code and screen shot of chart
In this image it is showing black for every column but i want different color in each. I give an array of color but it is picking the first one only
$(function () {
$('#pak_med').highcharts({
chart: {
type: 'column'
},
colors: ['#000000', '#0066FF', '#00CCFF'],
title: {
text: [ <?php
$query = mysqli_query($connection," select distinct d ,med, c,country_name from
(select date_format(apdate,'%Y') as d,doc_country as country_name,
med,count(med) as c from view_doc_prescriptions where doc_countryId={$_GET['country']} group by med, d)f
group by d order by d desc ;
") or die("date created error");
//$total=0;
$info = mysqli_fetch_array($query);
// echo $info['spec'];
echo "'";
echo "Top Medicine in ".$info['country_name'];
echo "'";
echo ',';
?>]
},
xAxis: {
categories: [ <?php
$query = mysqli_query($connection," select distinct d ,med, c,country_name from
(select date_format(apdate,'%Y') as d,doc_country as country_name,
med,count(med) as c from view_doc_prescriptions where doc_countryId={$_GET['country']} group by med, d)f
group by d order by d desc ;
") or die("date created error");
//$total=0;
while($info = mysqli_fetch_array($query))
{
// echo $info['spec'];
echo "'";
echo $info['d'];
echo " ";
echo $info['med'];
echo "'";
//echo $info['spec'];
echo ',';
}
?>]
},
credits: {
enabled: false
},
series: [{
name: 'Top Medicine',
data: [ <?php
$query = mysqli_query($connection," select distinct d ,med, c,country_name from
(select date_format(apdate,'%Y') as d,doc_country as country_name,
med,count(med) as c from view_doc_prescriptions where doc_countryId={$_GET['country']} group by med, d)f
group by d order by d desc;
") or die("date created error");
//$total=0;
while($info = mysqli_fetch_array($query))
{
// echo $info['spec'];
echo $info['c'];
//echo $info['spec'];
echo ',';
}
?>]
}]
});
});
Add this line
series:[{
colorByPoint: true,
}]