Merhabalar,
Highchart gauge tipini kullanıyorum. Ajax ile verileri çekiyorum dizide olan veriyi tek tek alıyorum konsola logluyorum lakin grafiğe getiremiyorum.
Yardımlarınızı Rica ederim.
Kod :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function updateData(sensors_unique_id) {
if(!sensors_unique_id)
return;
var result;
function setValue(value){
result=value;
console.log("Geldi...");
}
$.ajax({
type: "POST",
global:false, async:false,
data
{sensors_unique_id:sensors_unique_id}),
datatype: "JSON",
url: "alicanabiDB.php",
success: function(response) {
if(response)
{
setValue(response);
console.log("girdi...");
}
}
}).then(function() {
setTimeout(updateData, 2000);
});
return result;
};
</script>
<style>
#container {
height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 500px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
</head>
<body>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing use of multiple panes and axis plot bands with a gauge
series. The chart is updated dynamically every few seconds.
</p>
</figure>
<script>
var hizlar;
var turbo;
var turbo1;
var batarya;
var frenHavasi;
var fazAkimi;
var fazVoltaj;
var egzoz;
var cer_akimi;
var cer_akimi2;
var cer_akimi3;
var hava_basinci;
var motor_devri;
var yag_basinc;
var su;
var anaDepo;
var konduvit;
var yag_sicak;
function prepareData(){
var plaka='DE24251';
var response=updateData(plaka);
var parsedJson = $.parseJSON(response)[0];
hizlar =[
parsedJson.hiz ,
parsedJson.hiz1,
parsedJson.hiz2,
parsedJson.hiz3,
parsedJson.hiz4,
parsedJson.hiz5,
parsedJson.hiz6,
parsedJson.hiz7,
parsedJson.hiz8,
parsedJson.hiz9
];
turbo=parseFloat(parsedJson.turbo);
turbo1=parseFloat(parsedJson.tp1);
batarya=parseFloat(parsedJson.batarya)/10;
frenHavasi=parseFloat(parsedJson.fren);
fazAkimi=parseFloat(parsedJson.fazakim);
fazVoltaj=parseFloat(parsedJson.fazvoltaj);
egzoz=parseFloat(parsedJson.egzoz);
cer_akimi=parseFloat(parsedJson.cer1);
cer_akimi2=parseFloat(parsedJson.cer2);
cer_akimi3=parseFloat(parsedJson.cer3);
hava_basinci=parseFloat(parsedJson.anadepo);
motor_devri=parseFloat(parsedJson.motordevri);
yag_basinc=parseFloat(parsedJson.yagbasinc);
su=parseFloat(parsedJson.susicak);
anaDepo=parseFloat(parsedJson.anadepo);
konduvit=parseFloat(parsedJson.konduvit);
bataryaSarj=parseFloat(parsedJson.bataryasarj);
yag_sicak=parseFloat(parsedJson.yagsicak);
}
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hız'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 150,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 80,
to: 100,
color: '#DDDF0D' // yellow
}, {
from: 100,
to: 150,
color: '#DF5353' // red
}]
},
series: [{
name: 'Hız',
data: [0],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
let i = 0;
if (!chart.renderer.forExport) {
setInterval(function () {
if(i == 0){
prepareData();
}
var point = chart.series[0].points[0],
newVal;
hiz = hizlar[i++];
console.log("setInterval başladı");
var plaka='DE24251';
console.log("updateKw çağrıldı sensor id:"+plaka)
var kw = plaka;
//kw = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + hiz;
console.log("NewVal is :"+ newVal);
if (newVal < 0 || newVal > 150) {
newVal = point.y - hiz;
}
console.log("speed "+i+" : "+ hiz);
if(i == 9){
i = 0;
}
point.update(newVal);
}, 2000);
}
});
</script>
</body>
</html>
Highchart gauge tipini kullanıyorum. Ajax ile verileri çekiyorum dizide olan veriyi tek tek alıyorum konsola logluyorum lakin grafiğe getiremiyorum.
Yardımlarınızı Rica ederim.
Kod :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function updateData(sensors_unique_id) {
if(!sensors_unique_id)
return;
var result;
function setValue(value){
result=value;
console.log("Geldi...");
}
$.ajax({
type: "POST",
global:false, async:false,
data
{sensors_unique_id:sensors_unique_id}),datatype: "JSON",
url: "alicanabiDB.php",
success: function(response) {
if(response)
{
setValue(response);
console.log("girdi...");
}
}
}).then(function() {
setTimeout(updateData, 2000);
});
return result;
};
</script>
<style>
#container {
height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
min-width: 310px;
max-width: 500px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
</head>
<body>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing use of multiple panes and axis plot bands with a gauge
series. The chart is updated dynamically every few seconds.
</p>
</figure>
<script>
var hizlar;
var turbo;
var turbo1;
var batarya;
var frenHavasi;
var fazAkimi;
var fazVoltaj;
var egzoz;
var cer_akimi;
var cer_akimi2;
var cer_akimi3;
var hava_basinci;
var motor_devri;
var yag_basinc;
var su;
var anaDepo;
var konduvit;
var yag_sicak;
function prepareData(){
var plaka='DE24251';
var response=updateData(plaka);
var parsedJson = $.parseJSON(response)[0];
hizlar =[
parsedJson.hiz ,
parsedJson.hiz1,
parsedJson.hiz2,
parsedJson.hiz3,
parsedJson.hiz4,
parsedJson.hiz5,
parsedJson.hiz6,
parsedJson.hiz7,
parsedJson.hiz8,
parsedJson.hiz9
];
turbo=parseFloat(parsedJson.turbo);
turbo1=parseFloat(parsedJson.tp1);
batarya=parseFloat(parsedJson.batarya)/10;
frenHavasi=parseFloat(parsedJson.fren);
fazAkimi=parseFloat(parsedJson.fazakim);
fazVoltaj=parseFloat(parsedJson.fazvoltaj);
egzoz=parseFloat(parsedJson.egzoz);
cer_akimi=parseFloat(parsedJson.cer1);
cer_akimi2=parseFloat(parsedJson.cer2);
cer_akimi3=parseFloat(parsedJson.cer3);
hava_basinci=parseFloat(parsedJson.anadepo);
motor_devri=parseFloat(parsedJson.motordevri);
yag_basinc=parseFloat(parsedJson.yagbasinc);
su=parseFloat(parsedJson.susicak);
anaDepo=parseFloat(parsedJson.anadepo);
konduvit=parseFloat(parsedJson.konduvit);
bataryaSarj=parseFloat(parsedJson.bataryasarj);
yag_sicak=parseFloat(parsedJson.yagsicak);
}
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hız'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 150,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 80,
to: 100,
color: '#DDDF0D' // yellow
}, {
from: 100,
to: 150,
color: '#DF5353' // red
}]
},
series: [{
name: 'Hız',
data: [0],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
let i = 0;
if (!chart.renderer.forExport) {
setInterval(function () {
if(i == 0){
prepareData();
}
var point = chart.series[0].points[0],
newVal;
hiz = hizlar[i++];
console.log("setInterval başladı");
var plaka='DE24251';
console.log("updateKw çağrıldı sensor id:"+plaka)
var kw = plaka;
//kw = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + hiz;
console.log("NewVal is :"+ newVal);
if (newVal < 0 || newVal > 150) {
newVal = point.y - hiz;
}
console.log("speed "+i+" : "+ hiz);
if(i == 9){
i = 0;
}
point.update(newVal);
}, 2000);
}
});
</script>
</body>
</html>
