使用从Oracle DB获取的数据在Web页面上填充图表

时间：2017-10-06 18:49:52

标签： javascript php html chart.js

我试图更新页面以显示使用来自oracle DB的PHP检索的数据的折线图。我很难掌握如何让图表显示在页面上。

我正在利用Chart.js来构建图表。我的PHP从我喜欢的数据库中提取数据，使用该数据调用JavaScript函数并填充图表，然后单击按钮将其发布回页面。

我坚持的第一部分是让图表填充甚至是静态数据。我能够得到一个表格来使用HTML，但是让图表填充我需要发回一个调用JS函数我相信....任何提示？

在我的html中，我有以下功能

function loadChart() {
if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("charthere").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","php/fill_counts_graph.php",true);
        xmlhttp.send();
}



function chart() {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["10/02/2017", "10/03/2017", "10/04/2017", "10/05/2017", "10/06/2017", "10/07/2017"],
        datasets: [{
            label: '# of Fills',
            data: [86452, 90452 ,55246 , 44179,78442 ,12546 ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});



}

我已将画布设置如下

<canvas id='myChart' width='800' height='400'></canvas>
<script type='text/javascript' src='js/Chart.js'></script>
<div id="charthere"><b>Chart Goes Here....</b></div>

我在下面的表单中有一个按钮

<button id="graph" type="button" onclick="loadChart();">Graph</button>

在PHP文件中，我有以下行尝试调用html中的函数并在屏幕上填充图表

echo "<script>chart();</script>";

如果我将该行单独放在html中，那就可以了。

完整的HTML代码

<html>
<head>
<script>

window.onload = function(){
if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("envSelect").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","php/fill_counts_graph_list.php",true);
        xmlhttp.send();
}

function load_envs() {
if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("envSelect").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","php/fill_counts_graph_list.php",true);
        xmlhttp.send();
}


function generate(start,end,env) {
    if (start == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","php/fill_counts_table.php?sdate="+start+"&edate="+end+"&env="+env,true);
        xmlhttp.send();
    }


}

function loadChart() {
if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("charthere").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","php/fill_counts_graph.php",true);
        xmlhttp.send();
}



function chart() {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["10/02/2017", "10/03/2017", "10/04/2017", "10/05/2017", "10/06/2017", "10/07/2017"],
        datasets: [{
            label: '# of Fills',
            data: [86452, 90452 ,55246 , 44179,78442 ,12546 ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});



}

</script>
</head>
<body>

<form>
<form>
    <input type="date" name="sdates">
    <input type="date" name="edates">
    <input type="test" name="envNames">
<button id="main_update" type="button" onclick="generate(sdates.value,edates.value,envNames.value);">Load</button>
<button id="envs" type="button" onclick="load_envs();">env</button>
<button id="graph" type="button" onclick="loadChart();">Graph</button>

</form>
<br>
<div id="envSelect" name="envNames"><b>Env Selector...</b></div>
<div id="txtHint"><b>Environment info will be listed here...</b></div>
<canvas id='myChart' width='800' height='400'></canvas>
<script type='text/javascript' src='js/Chart.js'></script>
<div id="charthere"><b>Chart Goes Here....</b></div>

</body>
</html>

完整的PHP代码

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 40%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>


<?php

ini_set('display_errors', '1');

if (isset($_GET['sdate'], $_GET['edate'])) {

$sdate =  filter_input(INPUT_GET, 'sdate', FILTER_SANITIZE_STRING);
$edate = filter_input(INPUT_GET, 'edate', FILTER_SANITIZE_STRING);
$env = filter_input(INPUT_GET, 'env', FILTER_SANITIZE_STRING);

#$sdate = date("m/d/Y", strtotime($sdateO);
#$edate = date("m/d/Y", strtotime($edateO);

$conn = oci_connect('cmdb', 'cmdb', 'HOST/cmdb');
if (!$conn) {
    $e = oci_error();
    trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
}

#$sql = "SELECT DOMAIN, FACILITY_COUNT, FILL_COUNT FROM env_daily_stats WHERE domain like ('%p0%') AND type = 'TRexOneWeb' AND TRUNC(datestamp) BETWEEN TO_DATE('" . $sdate . "','MM/DD/YYYY') AND TO_DATE('" . $edate . "','MM/DD/YYYY')";
$sql = "";



$stid = oci_parse($conn, $sql);

// The defines MUST be done before executing
oci_define_by_name($stid, 'DATESTAMP', $datestamp);
oci_define_by_name($stid, 'CUSTOMER_NAME', $domain);
oci_define_by_name($stid, 'ERXFILLS', $fillCount);
#oci_define_by_name($stid, 'FILL_COUNT', $fillCount);

oci_execute($stid);

// Each fetch populates the previously defined variables with the next row's data
echo "<h1>Fill Counts from " . $sdate . " to " . $edate . "</h1>";
echo "<script>chart();</script>";


oci_free_statement($stid);
oci_close($conn);

}

?>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题