jQWidgets Forums
jQuery UI Widgets › Forums › Chart › output to chart only rendering title and description
Tagged: charting, jqwidgets charting
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 5 months ago.
Viewing 6 posts - 1 through 6 (of 6 total)
-
Author
-
I am using the column chart with mysqli data in a json array. Here is the chartdata which i have renamed to orderdata.php I only get the title and description rendered in the div.
#Include the connection.php file include('includes/connection.php'); $result = $mysqli->query("SELECT section, datepicker, SUM(amtSale) AS totalSales FROM sales WHERE MONTH(datepicker) = MONTH(CURRENT_DATE) GROUP BY section"); $saleresult = array(); while ($row = mysqli_fetch_assoc($saleresult)) { $section[] = $section; $totalSales[] = $totalSales; } echo json_encode( $saleresult );Here is the javascript in my html page.
$(document).ready(function () { var source = { datatype: "json", datafields: [ { name: 'amtSale'}, { name: 'section'} ], url: 'graphs/orderdata.php' }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: false, downloadComplete: function () { }, loadComplete: function () { }, loadError: function () { } }); // prepare jqxChart settings var settings = { title: "Monthly Sales", description: "Sales by Section", showLegend: true, enableAnimations: true, padding: { left: 20, top: 5, right: 20, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: source, xAxis: { dataField: 'Section', showGridLines: true, flip: false }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 100, toolTipFormatSettings: { thousandsSeparator: ',' }, valueAxis: { flip: true, unitInterval: 100000000, maxValue: 1500000000, displayValueAxis: true, description: '', formatFunction: function (value) { return parseInt(value / 1000000); } }, series: [ { dataField: 'totalSales', displayText: 'Sales' } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); });Hi californiasteve,
This means that your binding fails for some reason. Without a full example, we cannot provide more information about your issue.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Here is full page and data php file.
<!DOCTYPE HTML> <!-- Minimaxing 3.1 by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> <html> <head> <title>Sales Tools - Mileage</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'> <script src="js/jquery.min.js"></script> <script src="js/config.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-panels.min.js"></script> <link rel="stylesheet" href="js/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="js/jqwidgets/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jqwidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="js/jqwidgets/jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="js/jqwidgets/jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="js/jqwidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { datatype: "json", datafields: [ { name: 'amtSale'}, { name: 'section'} ], url: 'graphs/orderdata.php' }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: false, downloadComplete: function () { }, loadComplete: function () { }, loadError: function () { } }); // prepare jqxChart settings var settings = { title: "Monthly Sales", description: "Sales by Section", showLegend: true, enableAnimations: true, padding: { left: 20, top: 5, right: 20, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: source, xAxis: { dataField: 'Section', showGridLines: true, flip: false }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 100, toolTipFormatSettings: { thousandsSeparator: ',' }, valueAxis: { flip: true, unitInterval: 100000000, maxValue: 1500000000, displayValueAxis: true, description: '', formatFunction: function (value) { return parseInt(value / 1000000); } }, series: [ { dataField: 'totalSales', displayText: 'Sales' } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); }); </script> <noscript> <link rel="stylesheet" href="css/skel-noscript.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style-desktop.css" /> </noscript> <!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]--> <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]--> <script> $(function() { $( "#speed" ).selectmenu(); $( "#files" ).selectmenu(); $( "#number" ) .selectmenu() .selectmenu( "menuWidget" ) .addClass( "overflow" ); }); </script> <style> fieldset { border: 0; } label { display: block; margin: 30px 0 0 0; } select { width: 200px; } .overflow { height: 200px; } </style> </head> <body> <!-- ********************************************************* --> <div id="header-wrapper"> <div class="container"> <div class="row"> <div class="12u"> <header id="header"> <h1><a href="menu.php" id="logo">Sales Tools</a></h1> <nav id="nav"> <a href="menu.php">Menu Page</a> <a href="mileage.php" class="current-page-item">Mileage</a> <a href="orders.php">Orders</a> <a href="reports.php">Reports</a> <a href="calendar.php">Calendar</a> <a href="expenses.php">Expenses</a> <a href="accounts.php">Accounts</a> </nav> </header> </div> </div> </div> </div> <div id="main"> <div class="container"> <div class="row main-row"> <div class="12u"> <section> <h2>Mileage</h2> <?php // connect to the database include('includes/connection.php'); //check if the starting row variable was passed in the URL or not if (!isset($_GET['startrow']) or !is_numeric($_GET['startrow'])) { //we give the value of the starting row to 0 because nothing was found in URL $startrow = 0; //otherwise we take the value from the URL } else { $startrow = (int)$_GET['startrow']; } // get the records from the database if ($result = $mysqli->query("SELECT * FROM vehicle ORDER BY datepicker DESC LIMIT $startrow, 10")) { // display records if there are records to display if ($result->num_rows > 0) { // display records in a table echo "<table border='1' cellpadding='10'>"; // set table headers echo "<tr> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Date</th> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Start</th> <th style=\"background-color:#007C9D; color:#FFFFFF;\">End</th> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Total</th> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Car</th> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Section</th> <th style=\"background-color:#007C9D; color:#FFFFFF;\"></th> <th style=\"background-color:#007C9D; color:#FFFFFF;\"></th> </tr>"; while ($row = $result->fetch_object()) { // set up a row for each record echo "<tr>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row->datepicker . "</td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row->startmiles . "</td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row->endmiles . "</td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . ($row->endmiles - $row->startmiles) . "</td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row->car . "</td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row->section . "</td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\"><a href='milesrecord.php?id=" . $row->id . "'>Edit</a></td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\"><a href='milesdelete.php?id=" . $row->id . "'>Delete</a></td>"; echo "</tr>"; } echo "</table>"; } // if there are no records in the database, display an alert message else { echo "No results to display!"; } } // show an error if there is an issue with the database query else { echo "Error: " . $mysqli->error; } // close database connection $mysqli->close(); ?> <div><a href="milesrecord.php">Add New Record</a></div> </section> </div> </div> </div> </div> <div id="footer-wrapper"> <div class="container"> <div class="row"> <div class="6u"> <section> <h2>Total Mileage this Month by Section</h2> <div class="4u"> <?php include ("includes/connection.php"); $result = $mysqli->query("SELECT section, datepicker, SUM(endmiles - startmiles) AS totalmiles FROM vehicle WHERE MONTH(datepicker) = MONTH(CURRENT_DATE) GROUP BY section"); echo "<table border='1'> <tr style= \"border:2px solid #007C9D; align:center;\"> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Section</th> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Total Miles</th> </tr>"; while($row = $result->fetch_assoc()) { echo "<tr>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row['section'] . "</td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row['totalmiles'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?> </div> <br /> <h2>Total Mileage this Year by Section</h2> <div class="4u"> <?php include ("includes/connection.php"); $result = $mysqli->query("SELECT section, datepicker, SUM(endmiles - startmiles) AS totalmiles FROM vehicle WHERE YEAR(datepicker) = YEAR(CURRENT_DATE) GROUP BY section"); echo "<table border='1'> <tr style= \"border:2px solid #007C9D; align:center;\"> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Section</th> <th style=\"background-color:#007C9D; color:#FFFFFF;\">Total Miles</th> </tr>"; while($row = $result->fetch_assoc()) { echo "<tr>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row['section'] . "</td>"; echo "<td style=\"border:2px solid #007C9D; padding:5px;\">" . $row['totalmiles'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?> </div> </section> </div> <div class="4u"> </div> <section> <h2>Monthly Sales Quota</h2> <footer class="controls"> Graph or progress bar for monthly sales.<br /> <div id='chartContainer' style="width:400px; height:200px;"></div> </footer> </section> </div> </div> <div class="row"> <div class="12u"> <div id="copyright"> © Untitled. All rights reserved. | Design: <a href="http://html5up.net">HTML5 UP</a> | Images: <a href="http://fotogrph.com">fotogrph</a> </div> </div> </div> </div> </div> <!-- ********************************************************* --> </body> </html>data file
<?php #Include the connection.php file include('includes/connection.php'); $result = $mysqli->query("SELECT section, datepicker, SUM(amtSale) AS totalSales FROM sales WHERE MONTH(datepicker) = MONTH(CURRENT_DATE) GROUP BY section"); $saleresult = array(); while ($row = mysqli_fetch_assoc($saleresult)) { $section[] = $section; $totalSales[] = $totalSales; } echo json_encode( $saleresult ); ?>Hi californiasteve,
Why do you bind the chart to “source” and not to dataAdapter which performs the binding?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/I’m doing it because this is how your code came, is this not right? The var source is created then referenced in the next function.
$(document).ready(function () { var source = { datatype: "json", datafields: [ { name: 'amtSale'}, { name: 'section'} ], url: 'graphs/orderdata.php' }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: false, downloadComplete: function () { }, loadComplete: function () { }, loadError: function () { } });Hello californiasteve,
I suggest you to look at your Chart initialization code and then look at your “source” property setting. The Chart’s source property is expected to point to dataAdapter. Otherwise, you just point it to some object and that’s it.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic.