I've been struggling with this for going on a week now and tried just about just about every iteration I could find referenced on searches.
I'm trying to integrate google charts into this program to create three charts based on different data content.
There is no event other than onload that I can determine. Can someone please review and advise how/why the js functions are not triggering?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="top-navigation" onload="BuildCharts()" >
<div id="wrapper">
<div id="page-wrapper" class="gray-bg">
<div class="row border-bottom gray-bg">
<?php include("nav-top.php"); ?>
</div>
<div class="wrapper wrapper-content white-bg">
<div class="container">
<div class="row">
<div class="row show-grid">
<div id="ChartArea1" class="col-xs-6 col-sm-4"></div>
<div id="ChartArea2" class="col-xs-6 col-sm-4"></div>
<div id="ChartArea3" class="col-xs-6 col-sm-4"></div>
</div>
</div>
</div>
</div>
<? require('footer-section-clean2.php'); ?>
</div>
</div>
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Input Mask-->
<script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>
<!-- Chart Components Area -->
<script src="<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Function to generate and display Chart
function drawChart(req_dept) {
var CA = $.ajax({
url: "proc-totals-data.php?req_dept="+req_dept,
dataType: "json",
async: false
}).responseText;
var data = google.visualization.arrayToDataTable(CA);
// Define Display Options
var options = {
title: 'Procedures Performed by Month & Year\n\n',
hAxis: { title: 'by Month', titleTextStyle: {color: '#333'}},
vAxis: { title: 'Count', minValue: 0},
width: { 120, height: 60}
};
// Instantiate and draw the chart.
ChartArea = 'ChartArea'+req_dept;
var chart = new
google.visualization.LineChart(document.getElementById(ChartArea));
chart.draw(data, options);
};
</script>
<script>
function BuildCharts() {
drawChart(1);
drawChart(2);
drawChart(3);
}
</script>
</body>
</html>
I know the code is not the prettiest - but I'm just trying to get it functioning.
Any pointers greatly appreciates. Thanks cyclops
I'm trying to integrate google charts into this program to create three charts based on different data content.
There is no event other than onload that I can determine. Can someone please review and advise how/why the js functions are not triggering?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="top-navigation" onload="BuildCharts()" >
<div id="wrapper">
<div id="page-wrapper" class="gray-bg">
<div class="row border-bottom gray-bg">
<?php include("nav-top.php"); ?>
</div>
<div class="wrapper wrapper-content white-bg">
<div class="container">
<div class="row">
<div class="row show-grid">
<div id="ChartArea1" class="col-xs-6 col-sm-4"></div>
<div id="ChartArea2" class="col-xs-6 col-sm-4"></div>
<div id="ChartArea3" class="col-xs-6 col-sm-4"></div>
</div>
</div>
</div>
</div>
<? require('footer-section-clean2.php'); ?>
</div>
</div>
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Input Mask-->
<script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>
<!-- Chart Components Area -->
<script src="<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Function to generate and display Chart
function drawChart(req_dept) {
var CA = $.ajax({
url: "proc-totals-data.php?req_dept="+req_dept,
dataType: "json",
async: false
}).responseText;
var data = google.visualization.arrayToDataTable(CA);
// Define Display Options
var options = {
title: 'Procedures Performed by Month & Year\n\n',
hAxis: { title: 'by Month', titleTextStyle: {color: '#333'}},
vAxis: { title: 'Count', minValue: 0},
width: { 120, height: 60}
};
// Instantiate and draw the chart.
ChartArea = 'ChartArea'+req_dept;
var chart = new
google.visualization.LineChart(document.getElementById(ChartArea));
chart.draw(data, options);
};
</script>
<script>
function BuildCharts() {
drawChart(1);
drawChart(2);
drawChart(3);
}
</script>
</body>
</html>
I know the code is not the prettiest - but I'm just trying to get it functioning.
Any pointers greatly appreciates. Thanks cyclops
