Подключите ZingCharts к MySQL (постройте линейный график)

    <?php
/* Open connection to "zing_db" MySQL database. */
$mysqli = new mysqli("localhost", "root", "database123", "productno");

/* Check the connection. */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?><script>
/* First line chart */

var myData=[<?php
$data=mysqli_query($mysqli,"SELECT * FROM records");
while($info=mysqli_fetch_array($data))
echo '["'.$info['Date'].'",'.$info['Alibaba'].'],'; /* Data is formatted here, using the . concatenation operator */
echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];

//--------- Second Line Chart ---------------

var myData1=[<?php
$data1=mysqli_query($mysqli,"SELECT * FROM records");
while($info1=mysqli_fetch_array($data1))
echo '["'.$info1['Date'].'",'.$info1['Lelong'].'],'; /* Data is formatted here, using the . concatenation operator */
echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];

<?php
/* Close the connection */
$mysqli->close();
?>
myData.pop(); /* Pop off the final, empty element from the myData array */

//Display first line chart

window.onload=function(){
zingchart.render({
id:"AlibabaChart",
width:"100%",
height:300,
data:{
"type":"line",
"title":{
"text":"Alibaba"},
"series":[
{
"values":myData
}
]
}
});

//Display second line chart

zingchart.render({
id:"LelongChart",
width:"100%",
height:300,
data:{
"type":"line",
"title":{
"text":"Lelong"},
"series":[
{
"values":myData1
}
]
}
});

};

</script>

Я в команде здесь, в ZingChart, и я буду рад помочь вам.

Я реплицировал вашу настройку базы данных MySQL, используя указанную структуру, чтобы лучше вам помочь, и наполнил ее некоторыми фиктивными данными, которые выглядят так:

Date,Alibaba
1/13/11,70
2/13/11,42
3/13/11,33
4/13/11,3
5/13/11,28
...

Сначала нам нужно открыть соединение с базой данных:

<?php
/* Open connection to database */
$mysqli = new mysqli("localhost", "root", "pass", "productno");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>

Как только мы успешно открыли соединение, следующим шагом будет форматирование данных в формате, читаемом ZingChart. Предполагая, что вы хотите использовать свои значения даты вдоль оси x, возможно, было бы лучше отформатировать ваши данные в виде упорядоченных пар, например:

"values":[
[Date(string),value(int)],
[Date2(string),value2(int)],
[Date3(string),value3(int)]
...
]

На следующем шаге мы будем запрашивать базу данных и использовать конкатенацию, чтобы обернуть кавычки вокруг каждой даты, а также для обтекания каждой даты, упорядоченная пара Alibaba в квадратных скобках.

<script>
/* Create myData variable in js that will be filled with db data */
var myData=[<?php
$data=mysqli_query($mysqli,"SELECT * FROM records");
while($info=mysqli_fetch_array($data))
echo '["'.$info['Date'].'",'.$info['Alibaba'].'],'; /* Data is formatted here, using the . concatenation operator */
echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];
<?php
/* Close the connection */
$mysqli->close();
?>
myData.pop(); /* Pop off the final, empty element from the myData array */

На этом этапе, если бы вы просматривали исходный код страницы, переменная myData выглядела бы так:

var myData = [
["2011-01-13", 70],
["2011-02-13", 42],
["2011-03-13", 33],
...
];

…а это значит, что он готов быть помещенным в наш график!

    window.onload = function() {
zingchart.render({
id: "myChart",
width: "50%",
height: 400,
data: {
"type": "line",
"title": {
"text": "Data Pulled from MySQL Database"},
"series": [{
"values": myData
}]
}
});
};
</script>

Вот наш окончательный результат:

Я надеюсь, что это поможет вам! Дайте знать, если у вас появятся вопросы.

Изменить 20.10.14:

Я вижу, у вас возникли проблемы при создании двух линейных диаграмм на одной странице. Для отображения нескольких диаграмм на странице необходимо включить несколько <ДИВ> элементы с уникальными идентификаторами, с вызовом метода zingchart.render для каждой диаграммы, которую вы хотите сгенерировать.

Пожалуйста, посмотрите на это демо.

Обратите внимание, что есть два <ДИВ> элементы, один с id = «myChartDiv» и другой с id = «myChartDiv2». Мы также включили два вызова метода zingchart.render в функцию window.onload. Первый вызов сообщает ZingChart визуализировать диаграмму в месте расположения <ДИВ> элемент с id = «myChartDiv», а второй вызов сообщает ZingChart, что нужно визуализировать диаграмму в месте расположения <ДИВ> элемент с id = «myChartDiv2».

Можно использовать один и тот же массив данных в обеих диаграммах на странице, как показано с помощью переменной myData в предоставленной демонстрации.

Изменить 21.10.14:

Привет снова, Cael. Я использовал ваш код в моей тестовой среде, и похоже, что данные не загружаются, потому что вы не выскакивали из пустого элемента в конце массива myData1.

Просто добавьте:

myData1.pop();

после строки:

myData.pop();

и тебе должно быть хорошо идти!