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

Question

Спасибо. Теперь я могу видеть второй график, но второй график, который у меня есть, не содержит никаких данных, поэтому это просто пустой график. Это мой php-код. Что я делаю не так? Мой код:

<?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> 

FYI, данные из той же таблицы, х значение и базы данных, но разные столбцы (у значения). Благодаря!

Answer 1

Я нахожусь в команде здесь, в 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. Предполагая, что вы хотите использовать значение даты вдоль оси х, возможно, было бы лучше, чтобы форматировать данные в виде упорядоченных пары, как это:

"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> 

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

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

Edit 10/20/14:

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

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

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

Edit 10/21/14:

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

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

myData1.pop(); 

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

myData.pop(); 

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