Создание HighChart из базы данных
Я действительно новичок в HighChart, и я попробовал несколько примеров, но все еще не уверен. Я пытаюсь сделать еженедельную / ежемесячную базовую гистограмму, чтобы показать активность датчиков, которая есть в базе данных mysql. Ось X — это число значений в каждом месте от датчика таблицы, а ось Y — дни (понедельник-воскресенье).
Это моя база данных таблиц
sensor:
+-----------+---------------------+-------+
| id | time | value |
+-----------+---------------------+-------+
| 12341 | 2015-08-17 10:16:41 | 1 |
| 12341 | 2015-08-17 10:17:29 | 1 |
| 12342 | 2015-08-17 10:18:06 | 1 |
| 12343 | 2015-08-17 13:28:55 | 1 |
| 12344 | 2015-08-17 13:29:49 | 1 |
+-----------+---------------------+-------+
data:
+-----------+--------------------+-------------+
| id | description | location |
+-----------+--------------------+-------------+
| 12341 | Sensor | Location1 |
| 12342 | Sensor | Location2 |
| 12343 | Sensor | Location3 |
| 12344 | Sensor | Location4 | |
+-----------+--------------------+-------------+
Я сделал жестко запрограммированную гистограмму, но понятия не имею, что делать дальше.
highchart.htm
<html>
<head>
<title>Information</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 500px; margin: 0 auto"> </div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'bar'
};
var title = {
text: 'Activities of the Elderly'
};
var subtitle = {
text: 'Testing'
};
var xAxis = {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: {
text: null
}
};
var yAxis = {
min: 0,
title: {
text: 'No. of times movement detected',
align: 'high'
},
labels: {
overflow: 'justify'
}
};
var tooltip = {
valueSuffix: 'times'
};
var plotOptions = {
bar: {
dataLabels: {
enabled: true
}
}
};
// Load the fonts
Highcharts.createElement('link', {
href: '//fonts.googleapis.com/css?family=Signika:400,700',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
// Add the background image to the container
Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
proceed.call(this);
this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
});
Highcharts.theme = {
colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
backgroundColor: null,
style: {
fontFamily: "Signika, serif"}
},
title: {
style: {
color: 'black',
fontSize: '16px',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: 'black'
}
},
tooltip: {
borderWidth: 0
},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
}
},
xAxis: {
labels: {
style: {
color: '#6e6e70'
}
}
},
yAxis: {
labels: {
style: {
color: '#6e6e70'
}
}
},
plotOptions: {
series: {
shadow: true
},
candlestick: {
lineColor: '#404048'
},
map: {
shadow: false
}
},
// Highstock specific
navigator: {
xAxis: {
gridLineColor: '#D0D0D8'
}
},
rangeSelector: {
buttonTheme: {
fill: 'white',
stroke: '#C0C0C8',
'stroke-width': 1,
states: {
select: {
fill: '#D0D0D8'
}
}
}
},
scrollbar: {
trackBorderColor: '#C0C0C8'
},
// General
background2: '#E0E0E8'
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
<?php
mysql_connect ("server","user","password") or die ('Cannot connect to MySQL: ' . mysql_error());
mysql_select_db ("dbtable") or die ('Cannot connect to the database: ' . mysql_error());
$result = mysql_query("SELECT * from sensor") or die ('Query is invalid: ' . mysql_error());
while ($r = mysql_fetch_array($result)) {
$date['data'][] = $r['date'];
$value['data'][] = $r['value'];
}
$result = array();
array_push($result,$date);
array_push($result,$value);
echo json_encode($result);
?>
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
};
var credits = {
enabled: false
};
var series= [{
name: 'Kitchen',
data: [107, 31, 635, 203, 2]
}, {
name: 'Toilet',
data: [133, 156, 947, 408, 6]
}, {
name: 'LivingRoom',
data: [973, 914, 404, 732, 34]
}, {
name: 'BedRoom',
data: [973, 914, 404, 732, 34]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.legend = legend;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
</body>
</html>
0
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …
Web-Answers © 2024
Наверх