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>
Related
I can't use foreach php code in javascript code of registerJS in yii2. Browser shows "PHP Parse Error – yii\base\ErrorException syntax error, unexpected 'foreach' (T_FOREACH)" error. Here is my code:
<canvas id="bar-chart" width="500" height="150"></canvas>
<?php
$lang = Yii::$app->language;
$title = 'title_'.$lang;
$this->registerJs("
new Chart(document.getElementById('bar-chart'), {
type: 'bar',
data: {
labels: [
" . foreach ($models as $model) { . "
' " . $model->$title . " ',
" . } . "
],
datasets: [
{
label:'Label',
backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f', '#e7fc00'],
data: [479,1654,499, 2632]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Title'
}
}
});
", yii\web\View::POS_READY);
I'll pull out foreach code from javascript output.
<?php
$titles = [];
foreach($models as $model)
{
$titles[] = sprintf("'%s'", $model->title);
}
$titlesText = implode(',', $titles);
$this->registerJs("
new Chart(document.getElementById('bar-chart'), {
type: 'bar',
data: {
labels: [
".$titlesText."
],
datasets: [
{
label:'Label',
backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f', '#e7fc00'],
data: [479,1654,499, 2632]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Title'
}
}
});
", yii\web\View::POS_READY);
You cannot use the foreach statement there, in the middle of a string. You should generate the string coming from the foreach beforehand and then join it with the js string:
$mystring = "";
foreach ($models as $model) {
$mystring .= "' " . $model->$title . " ',";
}
$this->registerJs("
new Chart(document.getElementById('bar-chart'), {
type: 'bar',
data: {
labels: [ $mystring ],
datasets: [
{
label:'Label',
backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f', '#e7fc00'],
data: [479,1654,499, 2632]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Title'
}
}
});
", yii\web\View::POS_READY);
I have this code in javascript for chart column:
$(function () {
$('#grafic_column').highcharts({
chart: {
type: 'column'
},
series: [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1],
['Istanbul', 14.2]
]
}]
});
});
And this cod in php:
<?php
$ar = array(
['Shanghai', 23.7],
['Lagos', 16.1],
['Istanbul', 14.2]
);
echo json_encode($ar);
?>
How do import the values results from php in series.data:? Thank you!
Assuming your PHP file is accessible with a server, you can just perform $.get to make an AJAX request to the file serving the data:
$(function () {
$.get('/yourphpfile.php').then(function(data) {
$('#grafic_column').highcharts({
chart: {
type: 'column'
},
series: [{
name: 'Population',
data: data
}]
});
})
});
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 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);