Создание HighChart из базы данных

Question

Создание 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

bar-chart highcharts mysql php

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

Источник