2014-04-04 5 views
0

php 및 highcharts api.but를 사용하여 내 데이터베이스에 저장된 결과를 인쇄하려고하는데 그래프가 화면에 표시되지 않습니다. 축도 표시됩니다. 데이터는 mysql database.i에서 가져옵니다. highcharts 데모와 같은 코드이지만 운이 없다.
heres my code그래프를 표시하지 않는 하이 차트

<?php 
require_once ('connection.php'); 
session_start(); 
$username = $_SESSION['username']; 
$quizes=null; 
$score=array(); 
$i=0; 

$result = mysql_query("SELECT * FROM `score` WHERE `username`='$username'") or die(mysql_error); 
while($rows=mysql_fetch_array($result)) { 
$quizes= $quizes. "'".$rows['quiz']."',"; 
$score[$i]=$rows['score']; 
$i=$i+1; 
} 
print_r($score); 
echo $quizes; 
?> 
<html> 
<body> 
<script src="js/jquery.js"></script> 
<script src="highcharts/js/highcharts.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
//passing php variables to javascript variables 
    //eg var mk1=<?php echo $mark1 ?>; 
var mk1=<?php echo $score[1] ?>; 
var mk2=<?php echo $score[2] ?>; 
var mk3=<?php echo $score[3] ?>; 
var mk4=<?php echo $score[4] ?>; 
var mk5=<?php echo $score[5] ?>; 
var mk6=<?php echo $score[6] ?>; 
var mk7=<?php echo $score[7] ?>; 
var mk8=<?php echo $score[8] ?>;  
    var chart1 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'graphDiv', 
     defaultSeriesType: 'column' 
    }, 
    title: { 
     text: 'SEMESTER' 
    }, 
    xAxis: { 
     categories: ['QUIZ A', 'QUIZ B', 'QUIZ C', 'QUIZ D', 'QUIZ E', 'QUIZ F','QUIZ G','QUIZ H'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Percentage' 
     } 
    }, 
    series: [{ 
     name: ['Quiz Progress'], 
     data: [mk1, mk2, mk3, mk4, mk5, mk6, mk7, mk8] 
    },] 
    }); 
}); 
</script> 
<div id="graphDiv" style="width: 700px; height: 400px; float: left"></div> 
    </body> 
    </html> 

답변

0

다음은 하이 차트에서 mysql 데이터베이스의 데이터를 가져 오는 예제입니다. 는 까 하나이다

<head> 
    <meta name="Gopal Joshi" content="Highchart with Mysql" /> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Highchart with Mysql Database</title> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/setup.js"></script> 
    <script type="text/javascript" src="js/test.js"></script>  
</head> 

<body> 
    <script src="js/highcharts.js"></script> 
    <div id="sales" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
</body> 

setup.js Index.php는 시작 여기

var chart; 
$(document).ready(function() { 
     var cursan = { 
    chart: { 
    renderTo: 'sales', 
    defaultSeriesType: 'area', 
    marginRight: 10, 
    marginBottom: 20 
    }, 
    title: { 
    text: 'Highchart With Mysql', 
    }, 
    subtitle: { 
    text: 'www.spjoshis.blogspot.com', 
    }, 
    xAxis: { 
    categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'] 
    }, 
    yAxis: { 
    title: { 
    text: 'Average' 
    }, 
    plotLines: [{ 
    value: 0, 
    width: 1, 
    color: '#808080' 
    }] 
    }, 
    tooltip: { 
     crosshairs: true, 
       shared: true 
    }, 
    legend: { 
    layout: 'vertical', 
    align: 'right', 
    verticalAlign: 'top', 
    x: -10, 
    y: 30, 
    borderWidth: 0 
    }, 

      plotOptions: { 

       series: { 
        cursor: 'pointer', 
        marker: { 
         lineWidth: 1 
        } 
       } 
      }, 

     series: [{ 
     color: Highcharts.getOptions().colors[2], 
    name: 'Test Colomn', 
       marker: { 
        fillColor: '#FFFFFF', 
        lineWidth: 3, 
        lineColor: null // inherit from series 
       }, 
       dataLabels: { 
        enabled: true, 
        rotation: 0, 
        color: '#666666', 
        align: 'top', 
        x: -10, 
        y: -10, 
        style: { 
         fontSize: '9px', 
         fontFamily: 'Verdana, sans-serif', 
         textShadow: '0 0 0px black' 
        } 
       } 
    }], 
     } 

     //Fetch MySql Records 
     jQuery.get('js/data.php', null, function(tsv) { 
    var lines = []; 
    traffic = []; 
    try { 
    // split the data return into lines and parse them 
    tsv = tsv.split(/\n/g); 
    jQuery.each(tsv, function(i, line) { 
    line = line.split(/\t/); 
    date = line[0] ; 
             amo=parseFloat(line[1].replace(',', '')); 
             if (isNaN(amo)) { 
                amo = null; 
             } 
    traffic.push([ 
     date, 
     amo 
    ]); 
    }); 
    } catch (e) { } 
    cursan.series[0].data = traffic; 
    chart = new Highcharts.Chart(cursan); 
    }); 
}); 

data.php 파일을 사용하여 MySQL의 데이터를 가져오고 우리의 차트에 공급됩니다 JS

data.php

data.php은 차트에 사용할 페이지의 값만 인쇄합니다. 동일한 페이지에서 여러 차트로이 방법을 사용할 수 있으며 더 많은 단일 차트에 파일이 더 이상 필요하지 않습니다.

는 것보다 도움을 enter image description here

Click Here 같은 출력 또는 예를 다운로드합니다.

0

데이터를 문자열 형식으로 생각합니다. 여기

var mk1=<?php echo $score[1] ?>; 

to integer: +mk1 // and check typeof +mk1 

데모를 PHP에서 사용로 json_encode()를 고려하고 하나의 배열로 모든 값을 반환하는 http://jsfiddle.net/XF293/

0

I 조언이다, 이런 식으로 같은 정수로 데이터를 변환합니다. 그런 다음 $ .getJSON()을 사용하여 값 인쇄 문제를 방지하십시오. 결과적으로 귀하의 데이터는 어떻게 생겼습니까? 내 말은 자바 스크립트에.

관련 문제