I want to display data from MySQL database to highchart. When I do print_r the data, it can display the array as well, but when I try to display them to the chart, it's not working. here's my code:
controller:
$lokasi = $this->Objekwisata_m->getLokasi();
$jumlahSad = array();
$temp = 0;
foreach ($lokasi as $lok ) {
$sad = $this->Objekwisata_m->getSad($lok['id_lokasi']);
$jumlahSad[$temp] = count($sad);
$temp++;
}
$data['jumlahSad'] = $jumlahSad;
$data['lokasi'] = $this->Objekwisata_m->getLokasi();
$this->load->view('objek_wisata_v', $data);
model
public function getSad($id_lokasi){
$this->db->select('t.result');
$this->db->from('tbl_testimoni t');
$this->db->join('tbl_master_lokasi l', 't.id_lokasi = l.id_lokasi', 'left');
$this->db->where("t.result", "'sad'");
$this->db->where("t.id_lokasi = '".$id_lokasi."'");
$query = $this->db->get();
return $query->result_array();
}
highchart.js
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Grafik Kepuasan Pengunjung KRB'
},
xAxis: {
categories: [<?php foreach($lokasi as $lok){
echo "'".$lok['nama_lokasi']."',";
}?>],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: 'percents'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Sad',
data: [<?php foreach($jumlahSad as $s){
echo "'".$s."',";
}?>]
}, {
name: 'Happy',
data: [<?php foreach($jumlahHappy as $h){
echo "'".$h."',";
}?>]
}, {
name: 'Disgust',
data: [<?php foreach($jumlahDisgust as $d){
echo "'".$d."',";
}?>]
}]
});
</script>
Related
I hope someone here can help me.
I have a chart with multiple y-axes.
I can adjust most colors.
Only the color in the legend and in the tooltip does not match the line color.
The line color and the color of the axis is green. However, the color in the legend and in the tooltip is blue.
Can someone write me where I can set this color?
example
<script type="text/javascript">
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = H.dateFormat('%d.%m.%Y', row.x);
}
return row;
});
return rows;
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%d.%m.%Y}'
}
},
yAxis: [{ //Betriebstunden
labels: {
format: '{value} h',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Betriebsstunden',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { //Temperatur MIN, MAX
title: {
text: 'Temperatur Bereich',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { //Delta
title: {
text: 'Temperatur Delta',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[4]
}
}
}, { //Drehzahl
title: {
text: 'Max. Drehzahl',
style: {
color: Highcharts.getOptions().colors[6]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[6]
}
},
opposite: true
}],
tooltip: {
xDateFormat: '%d.%m.%Y',
crosshairs: true,
shared: true
},
series: [{
name: 'Betriebsstunden',
data: <?php echo chartDataTimeDate($mysqli, $sqlBS) ?>,
type: 'spline',
line: {
color: Highcharts.getOptions().colors[2]
},
tooltip: {
valueSuffix: ' h',
},
lineColor: Highcharts.getOptions().colors[2],
lineWidth: 3,
marker: {
enabled: false
}
}, {
name: 'Temperatur',
data: <?php echo chartDataTimeDate($mysqli, $sqlTemp) ?>,
type: 'arearange',
yAxis: 1,
color: Highcharts.getOptions().colors[0],
marker: {
enabled: false
}
},{
name: 'Temperatur Delta',
data: <?php echo chartDataTimeDate($mysqli, $sqlDelta) ?>,
type: 'spline',
yAxis: 2,
tooltip: {
valueSuffix: ' °C'
},
Color: Highcharts.getOptions().colors[4],
lineColor: Highcharts.getOptions().colors[4],
lineWidth: 3,
marker: {
enabled: false
}
},{
name: 'Drehzahl',
data: <?php echo chartDataTimeDate($mysqli, $sqlDZ) ?>,
type: 'spline',
yAxis: 3,
tooltip: {
valueSuffix: ' %'
},
Color: Highcharts.getOptions().colors[6],
lineColor: Highcharts.getOptions().colors[6],
lineWidth: 3,
marker: {
enabled: false
}
}]
});
</script>
Set series.color instead of series.line.color:
series: [{
name: 'Betriebsstunden',
type: 'spline',
color: Highcharts.getOptions().colors[2],
...
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/mx8fsbaz/
API Reference: https://api.highcharts.com/highcharts/series.line.color
I have some dates as below mentioned from my database,
['2017-09-18', '2017-09-19', '2017-09-22', '2017-09-23', '2017-09-24','2017-09-26']
Need to add this into jqchart
axes: [
{
type: 'dateTime',
location: 'bottom',
labels: {stringFormat: 'dd-mm-yyyy'},
minimum: new Date(<?php echo str_replace("-",",",substr(min($dtarray),0,-8)); ?>),
maximum: new Date(<?php echo str_replace("-",",",substr(max($dtarray),0,-8)); ?>),
title: { text: 'Days in month' }
},
My code goes like this , but i need to add dates instead of min & max value,
because some dates are missing while checking.
This is my
Here two X-axis is coming i need only one having date.
Please help
We can add date in series,
$(document).ready(function () {
$('#jqChart').jqChart({
title: { text: 'Efficiency' },
animation: { duration: 1 },
shadows: {
enabled: true
},
axes: [
{
type: 'category',
location: 'bottom',
title: { text: 'Days in month' },
categories: [<?php echo $dateData; ?>],
zoomEnabled: true,
},
{
type: 'linear',
name: 'y1',
location: 'left',
title: { text: 'Working hours' },
labels: {
stringFormat: '%d'
},
minimum:0,
maximum:15,
interval:1
},
{
type: 'category',
name: 'y2',
location: 'right',
strokeStyle: '#FCB441',
majorGridLines: { strokeStyle: '#FCB441' },
majorTickMarks: { strokeStyle: '#FCB441' },
title: { text: 'LUF/Efficiency' },
labels: {
stringFormat: '%.1f'
},
minimum:0,
maximum:5
}
],
series: [
{
type: 'stackedColumn',
axisY: 'y1',
title: 'Effective time',
fillStyle: 'green',
data: [<?php echo $dat1; ?>],
labels: {
font: '12px sans-serif'
}
},
{
type: 'stackedColumn',
axisY: 'y1',
title: 'Idle time',
fillStyle: 'red',
data: [<?php echo $dat3; ?>],
labels: {
font: '12px sans-serif'
}
}
]
});
});
<?php
$dat1="";
$dat2="";
$obj->AssetStatbyTeam($frmdt,$todt,$empcode);
$res = $obj->execute();
while($row1=mysql_fetch_array($res))
{
if($i==1)
{
$dat1=$dat1.sec_to_time($row1['wrk_time']);
$dat2=$dat2.sec_to_time($row1['idle_time']);
}
else
{
$dat1=$dat1.",".sec_to_time($row1['wrk_time']);
$dat2=$dat2.",".sec_to_time($row1['idle_time']);
}
$i++;
}
?>
$(function () {
Highcharts.setOptions({
global : { useUTC : false
}
});
$('#container').highcharts({
title: {
text: 'coefficient 10 days',
x: -20
},
subtitle: {
text: 'Company',
x: -20
},
xAxis: {
categories: [<?php echo join($data, ',')?>],
type: 'datetime'
},
yAxis: {
title: {
text: 'Коэффициент'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '', enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
series: [
{
name: 'value',
data: [<?php echo join($koef, ',')?>]
}, {
name: 'norm',
data: [<?php echo join($norm, ',')?>], color: '#FF0000'
}
]
});
});
When format in php as 'Ymd', date is correct but as number, like '20151210' this not readable for users. When i try format (in php code) 'd.m.Y' java say script1007 error. On api.highcharts.com nothing in the description specified what to do. Probably i need set in javascript something about datetime setting.
I'm using HighStock.js to build the graph of a stock ticker, and i need to display 2 days data into a graph , and i don't have data when stock market closes , so i'm getting straight line from Nov 27 11:20 to Nov 28 5:19 . I should not get any line when stock closes, that line should be trimmed along with x-axis. I'm having prices in the interval of every 20 mins for 2 days. Below is my code,
$.each(names, function(i, name) {
if(i==0)
{
seriesOptions[i] = {
name: name,
data: [<?php echo join($data0, ',') ?>],
};
}
else if(i==1)
{
date3:[<?php echo $date1 ?>];
seriesOptions[i] = {
name: name,
data: [<?php echo join($data1, ',') ?>],
};
}
else if(i==2)
{
seriesOptions[i] = {
name: name,
data: [<?php echo join($data2, ',') ?>]
};
}
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
function createChart() {
var date_new1 ;
var date_new2 ;
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
dataLabels: {
enabled: true
},
yAxis: {
title: {
text: 'PRICE',
},
},
xAxis: {
title: {
text: 'PERIOD',
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
navigator: {
enabled: false,
},
rangeSelector: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
series: seriesOptions
});
}
});
The feature to automatically collapse weekends is not completely implemented yet. It is scheduled for the next release of highstock (the one after 1.0.2). Here is the corresponding feature request: on uservoice
I'm using Highcharts for a project which brings a mysql recordset.
I have two things i can't find the solution:
values are always form 3000 to 8000, how can i show 3000, 3500, 4000 and so on on the x axis?
the chart allows me to zoom in, and I'd like to show the y axis no matter the zoom level, is there a way?
here is my code:
var SpectrumName = '<?php echo $SpectrumName; ?>';
var SpectrumDate = '<?php echo $SpectrumDate; ?>';
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
size:[ 400,250 ],
chart: {
renderTo: 'container',
zoomType: 'xy',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 50,
},
title: {
text: 'AstroSpec Observation of: ' + SpectrumName,
x: -20 //center
},
subtitle: {
text: 'Acquired on: ' + SpectrumDate,
x: -20
},
xAxis: {
categories: [<?php echo $x_colf1; ?>],
labels: {
formatter: function() {
if (this.index % 500) { // even numbers only
return this.value;
} else {
return false;
}
}
}
},
yAxis: {min: 0,
title: {
text: ''
},
plotLines: [{
value: 30,
width: 3,
color: '#808080'
}]
},
plotOptions: {
series: {
enableMouseTracking: false,
marker: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'R',
data: [<?php echo $y_axis; ?>]
}]
});
});
For # 1, try setting min and tickInterval as follows:
xAxis: {
min: 3000,
tickInterval: 500
}
I did not quite get the requirement # 2.