I am using this code to render a HighChart:
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
title: '',
type: 'column'
},
xAxis: {
categories: ["<?php echo join($data0, '","') ?>"],
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
name: '<?php echo date("Y",strtotime("-1 year")); ?>',
color: '#666666',
data: [<?php echo join($data1, ',') ?>]
}, {
name: '<?php echo date("Y"); ?>',
color: '#2196F3',
data: [<?php echo join($data2, ',') ?>]
}],
credits: {
enabled: false
},
title: {
text: ''
}
});
</script>
How can get this to update every 5 seconds and show some indication on the chart if something changes?
Try
setInterval(function(){
chart.series[0].update({
data: [<?php echo join($data1, ',') ?>]
}, true);
chart.series[1].update({
data: [<?php echo join($data2, ',') ?>]
}, true);
}, 5000);
Related
I'm trying to make a chart with a time of my database, but I can't do that chartjs "read me" my data.
I try this with Laravel and ChartJS. I make other chart with this way, my problem is only to make charts with Datetime and Times.
<script type="text/javascript">
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: [
#foreach ($ambientes as $key => $value)
'{{ $value->mes }}',
#endforeach
],
datasets: [
{
label: "Tiempo de indisponibilidad",
backgroundColor: "red",
data: [
#foreach ($ambientes as $key => $value)
'{{ $value->tiempo }}',
#endforeach
]
}
]
},
options: {
scales: {
yAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'h:mm'
}
}
}]
},
}
});
</script>
First of all declare two array for label and data and push values into array
/*Declare array*/
#php $label=array(); $data=array(); #endphp
/*push label and values into array*/
#foreach($ambientes as $key => $value)
#php
array_push($label, $value->mes);
array_push($data, $ot['dayot']);
#endphp
#endforeach
Then json_encode values in script
<script type="text/javascript">
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: [<?php echo json_encode($label);?>],
datasets: [
{
label: "Tiempo de indisponibilidad",
backgroundColor: "red",
data: [<?php echo json_encode($data);?>]
}
]
},
options: {
scales: {
yAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'h:mm'
}
}
}]
},
}
});
</script>
Is it possible to hide a Plot Line when I Drill down?
I have a Bar chart that Drill down to a Line Chart, in the "root" (Bar chart) I show a Plot Line Red that shows the Average value, the problem is that when I Drill down to the Line Chart, if the yAxis allow it, it is visible (the Red Plot Line), I want to hide the Plot Line on Drill down, because that average value I just need to see it in the "root" (Bar chart) not when I Drill down.
The average Plot Line has a value of 1865 and it is visible only in the year 2019, because is the only year where it reaches a value high enough to get the yAxis near that value.
So I wonder if theres a way to Hide the Plot Line when I Drill down.
This is my Chart code, i fill it up with PHP, data comes from an XML.
$('#todo').highcharts({
title: {
text: 'Registro de IPE del año 2017 al '+<?php echo date('Y')?>
},
subtitle: {
text: 'Click para ver desgloce del año.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Tiempo de Indisponibilidad (HORAS)'
},
plotLines: [{
color: 'red',
value: avg, // Insert your average here
width: '1',
zIndex: 2, // To not get stuck below the regular plot lines
label:{text:'Promedio: '+parseInt(avg)}
}]
},
credits: {
enabled:false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}
}
},
lang: {
drillUpText: '<< VOLVER'
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:{point.color}">{point.name}: </span> <b> {point.y}</b> Horas<br/>'
},
series: [{
name: 'Brands',
type: 'column',
colorByPoint: true,
data: [
<?php
for($i = 0; $i < $total_registros; $i++)
{
?>
{
name: '<?php echo $registros->registro[$i]->Año; ?>',
y: <?php list($horas, $minutos) = split('[:]', $registros->registro[$i]->TOTAL); echo $horas; ?>,
drilldown: '<?php echo $registros->registro[$i]->Año; ?>'
},
<?php
}
?>
]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
series: [
<?php
for($j = 0; $j < $total_registros; $j++)
{
?>
{
type: 'line',
name: '<?php echo $registros->registro[$j]->Año; ?>',
id: '<?php echo $registros->registro[$j]->Año; ?>',
data:[
[
'Enero',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Enero); echo $horas; ?>
],
[
'Febrero',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Febrero); echo $horas; ?>
],
[
'Marzo',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Marzo); echo $horas; ?>
],
[
'Abril',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Abril); echo $horas; ?>
],
[
'Mayo',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Mayo); echo $horas; ?>
],
[
'Junio',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Junio); echo $horas; ?>
],
[
'Julio',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Julio); echo $horas; ?>
],
[
'Agosto',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Agosto); echo $horas; ?>
],
[
'Septiembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Septiembre); echo $horas; ?>
],
[
'Octubre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Octubre); echo $horas; ?>
],
[
'Noviembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Noviembre); echo $horas; ?>
],
[
'Diciembre',
<?php list($horas, $minutos) = split('[:]', $registros->registro[$j]->Diciembre); echo $horas; ?>
]
]
},
<?php
}
?>
]
}});
The easiest solution would be to remove plot line on drilldown event and add it again on drillup event.
API Reference:
http://api.highcharts.com/highcharts/chart.events.drilldown
http://api.highcharts.com/highcharts/chart.events.drillup
http://api.highcharts.com/highcharts/Axis.addPlotLine
http://api.highcharts.com/highcharts/Axis.removePlotLine
Example:
http://jsfiddle.net/cpcb8acn/
My Candlestick chart imports data from a json file. Everything is great when I don't mess with the file
But when I use php to exclude some json rows to filter the data, I will end up with this even when every value on chart is correct.
How can I fix it?
My settings
(function () {
// $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {
$.getJSON(<?php echo "'getJSON.php?symbol=" . $_GET["symbol"] . "&timeframe=" . $_GET["timeframe"] . "'"; ?>, function (data) {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
buttons: [{
type: 'minute',
count: 1,
text: '1m'
}, {
type: 'minute',
count: 5,
text: '5m'
}, {
type: 'minute',
count: 30,
text: '30m'
}, {
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 5,
text: '5h'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : <?php echo "'" . $_GET["symbol"] . " Price | " . $_GET["timeframe"] . "M'" ?>
},
series : [{
type : 'candlestick',
name : <?php echo "'" . $_GET["symbol"] . " Price'"; ?>,
data : data,
dataGrouping : {
enable: false
}
}]
});
});
});
well im with a problem with a Highchart Graphic. This one -> http://www.highcharts.com/demo/column-basic
I have a database with a table call "Days" and "Works" and i want to put the days that i have in the "categories []" and the work in series[];
BUT
i dont know how my JSON need to be, or the best way to do it is with a JS array
I tried this way:
js_array = new Array(<?php echo implode(',', $array1); ?>);
xAxis: {
categories: js_array,
crosshair: true
},
or just categories:<?php echo json_encode($array1);?>
but dont succeed.
can you help me?
I do this using asp.net (MVC5), but I think is the same idea for php, hope it helps.
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: "Client's downloads"
},
subtitle: {
text: 'Click the columns to view products.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total downloads'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
},
series: [{
name: "Downloads",
colorByPoint: true,
data: [
#foreach (var item in Model)
{
<text>{</text>
<text>name: "</text> #item.Name <text>",</text>
<text>y: </text> #item.Downloads <text>,</text>
<text>drilldown: "</text>#item.Name<text>"},</text>
}
]
}],
drilldown: {
series: [
#foreach (var item in Model)
{
<text>{</text>
<text>name: "</text>#item.Name<text>",</text>
<text>id: "</text>#item.Name<text>",</text>
<text>data: [</text>
foreach (var download in item.ProductDownloads)
{
<text>["</text> #download.Product <text>", </text> #download.Downloads <text>],</text>
}
<text>]</text>
<text>},</text>
}
]
}
});
});
</script>
I have a associate php array (field_data) and i wanna pass it to JS using json_encode function: $jArray = json_encode($field_data);
I'm recieving the array in JS: var irbrowser = <?php echo $jArray; ?>; But in js when i wanna set the value in jArray to pie chart data, It does not render anything.
<?php
$jArray = json_encode($field_data);
?>
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "IE",
y: irbrowser.IE
}, {
name: "Chrome",
y: irbrowser.Chrome,
sliced: true,
selected: true
}, {
name: "Proprietary or Undetectable",
y: irbrowser.Other
}]
}]
});
});
</script>
I found the problem.
It should be converted to Float. so i use parseFloate(irbrowser) function. And set the variables to y. That code
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "IE",
y: parseFloat(irbrowser.IE)
}, {
name: "Chrome",
y: parseFloat(irbrowser.Chrome),
sliced: true,
selected: true
}, {
name: "Proprietary or Undetectable",
y: 0.5
}]
}]
Look at the first few lines of your script
Line 1 you stop the PHP interpreter
Line 2 you attempt a line of PHP ??
Line 3 you start the PHP interpreter
Line 4+ you try to output raw HTML while inside a PHP section
?>
$jArray = json_encode($field_data);
<?php
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
Try
$jArray = json_encode($field_data);
?>
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;