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 데이터가 동일한 테이블을 x 값 및 데이터베이스하지만 다른 컬럼 (Y 값)로한다. 감사!

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가 읽을 수있는 형식으로 포맷하는 것입니다. 당신은 x 축을 따라 날짜 값을 사용할 것을 가정하면 아마도 그것은 주문과 같이 쌍으로 데이터를 포맷하는 가장 좋은 것입니다 : 다음 단계에서

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

, 우리는 데이터베이스를 조회, 사용합니다 각 날짜 주위에 따옴표를 감싸고 각 Date를 래핑하는 연결은 대괄호로 묶인 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> 

는 여기에 우리의 최종 결과입니다! 궁금한 점이 있으면 알려주세요.

편집 10/20/14 :

난 당신이 문제가 같은 페이지에 2 개 개의 라인 차트를 생성하는 데있어 참조하십시오. 페이지에 여러 차트를 렌더링하려면 고유 한 ID가있는 <div> 요소를 여러 개 포함하고 생성하려는 각 차트에 대해 zingchart.render 메서드를 호출해야합니다.

this demo을 참조하십시오.

<div> 요소 중 하나는 id = "myChartDiv"이고 다른 요소는 id = "myChartDiv2"입니다. 또한 window.onload 함수에서 zingchart.render 메서드에 대한 두 번의 호출을 포함했습니다. 첫 번째 호출은 ZingChart에게 <div> 요소가 id = "myChartDiv"인 요소의 위치에 차트를 렌더링하도록 지시하고 두 번째 호출은 id = "myChartDiv2"인 <div> 요소의 위치에 차트를 렌더링하도록 ZingChart에 지시합니다.

제공되는 데모의 myData 변수와 같이 페이지의 두 차트에서 동일한 데이터 배열을 사용할 수 있습니다.

편집 10/21/14 : 다시

안녕, CAEL. 내 테스트 환경에서 코드를 사용했는데 myData1 배열의 끝에서 빈 요소를 제거하지 않았기 때문에 데이터가로드되지 않는 것처럼 보입니다. 줄 뒤에

myData1.pop(); 

:

myData.pop(); 

을하고 당신이 가서 잘되어야합니다

은 간단히 추가!