create bar graph

nurul_1 0 Newbie Poster

12 Years Ago

Hi all,please help me. I want to create bar graph in my system. But I have problems. user can pick date from datetime picker and the graph should appear. But the graph not appear. This is my code.

<?php include("dbase.php"); ?>
<?php 

$dateCollect = $_GET['dateCollect'];

$show = "SELECT count(mailCategory) As mailCategory FROM mail WHERE mailCategory = 'Pos Express' AND dateCollect = '".$dateCollect."'";
$result = mysql_query($show);
$row = mysql_fetch_array($result);

$show2 = "SELECT count(mailCategory) As mailCategory FROM mail WHERE mailCategory = 'Pos Biasa' AND dateCollect = '".$dateCollect."'";
$result2 = mysql_query($show2);
$row2 = mysql_fetch_array($result2);

$show3 = "SELECT count(mailCategory) As mailCategory FROM mail WHERE mailCategory = 'Pos Laju' AND dateCollect = '".$dateCollect."'";
$result3 = mysql_query($show3);
$row3 = mysql_fetch_array($result3);

$show4 = "SELECT count(mailCategory) As mailCategory FROM mail WHERE mailCategory = 'DHL' AND dateCollect = '".$dateCollect."'";
$result4 = mysql_query($show4);
$row4 = mysql_fetch_array($result4);

$show5 = "SELECT count(mailCategory) As mailCategory FROM mail WHERE mailCategory = 'SkyNet' AND dateCollect = '".$dateCollect."'";
$result5 = mysql_query($show5);
$row5 = mysql_fetch_array($result5);

$show6 = "SELECT count(mailCategory) As mailCategory FROM mail WHERE mailCategory = 'City-Link' AND dateCollect = '".$dateCollect."'";
$result6 = mysql_query($show6);
$row6 = mysql_fetch_array($result6);

$show7 = "SELECT count(mailCategory) As mailCategory FROM mail WHERE mailCategory = 'Nationwide' AND dateCollect = '".$dateCollect."'";
$result7 = mysql_query($show7);
$row7 = mysql_fetch_array($result7);

?>





<script>

            function graph(e)
            {


        var service1 = <?php echo $row['mailCategory'];?>;
        var service11 = "Pos Express";
        var service2 = <?php echo $row2['mailCategory'];?>;
        var service22 = "Pos Biasa";
        var service3 = <?php echo $row3['mailCategory'];?>;
        var service33 = "Pos Laju";
        var service4 = <?php echo $row4['mailCategory'];?>;
        var service44 = "DHL";

        var service5 = <?php echo $row5['mailCategory'];?>;
        var service55 = "SkyNet";
        var service6 = <?php echo $row6['mailCategory'];?>;
        var service66 = "City-Link";
        var service7 = <?php echo $row7['mailCategory'];?>;
        var service77 = "Nationwide";



                    var hbar = new RGraph.HBar('cvs', [service1,service2,service3,service4,service5,service6,service7]);
                    hbar.Set('chart.units.pre', '');
                    hbar.Set('chart.units.post', '');
                hbar.Set('chart.colors', ['#2E64FE']);
                    hbar.Set('chart.strokestyle', 'rgba(0,0,0,0)');
                    hbar.Set('chart.labels.above', true);
                    hbar.Set('chart.labels.above', true);
                    hbar.Set('chart.vmargin', 15);
                    hbar.Set('chart.background.grid', false);
                    hbar.Set('chart.labels', [service11,service22,service33,service44,service55,service66,service77]);

                if (!RGraph.isOld()) {
                        hbar.Set('chart.tooltips', [service11,service22,service33,service44,service55,service66,service77]);
                    }

                    hbar.Set('chart.labels.above.decimals', 0);
                    hbar.Set('chart.xlabels', false);
                    hbar.Set('chart.gutter.left', 250);
                    hbar.Set('chart.gutter.right', 50);
                    hbar.Set('chart.gutter.top', 25);

                    hbar.Set('chart.noxaxis', true);
                    hbar.Set('chart.noxtickmarks', true);
                    hbar.Set('chart.noytickmarks', true);
                    RGraph.isOld() ? hbar.Draw() : RGraph.Effects.HBar.Grow(hbar);


                }
    </script>







<form name="form1" method="post" action="">
        <p>
          <label>
            <input type="text" name="dateCollect" id="dateCollect" >
            <a href="calendar.php"><img src="image/iconCalendar.gif" name="cmdCal" value="Launch Calendar" onClick='javascript:window.open("calendar.php?form=form1&field=dateCollect","","top=50,left=400,width=175,height=140,menubar=no,toolbar=no,scrollbars=no,resizable=no,status=no"); return false;' border="0" ></a></label>
          <label>
            <input type="submit" name="Go" id="Go" value="Go" onClick="graph(this.value);"  >
          </label>
        </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>
                <div id="chart_div"><canvas id="cvs" width="600" height="650" style="border: 1px solid gray ">[No canvas support]</canvas></div>
      </p>
      </form>

Please help me. Thank you in advanced

1 Contributor
0 Replies
120 Views

Dani AI

Generated 9 Months Ago

For @nurul1 — the graph not appearing is usually caused by one or more of these simple issues: the form uses POST while your PHP reads GET (so $dateCollect is empty), JavaScript runs at the wrong time or is fed empty/invalid values (which creates a JS syntax error), the RGraph scripts are not included or loaded before your draw code, or the server code uses deprecated mysql* functions. Fix those first and the chart almost always appears.

Quick checklist and minimal fixes to try (in order of likelihood):

Make the form and PHP agree: either change the form to method="get" or read $_POST['dateCollect'] in PHP.
Echo numeric counts as integers so JS gets a valid literal (for example cast to int in PHP before printing).
Don’t call a draw function on a submit that immediately reloads the page. Use type="button" or preventDefault on submit, or render after the page reloads (e.g. run your draw on DOMContentLoaded when PHP variables are present).
Verify the RGraph library files are included and loaded before your script that creates new RGraph.HBar(...).
Replace deprecated mysql_* calls with mysqli or PDO and use a single grouped query instead of many identical queries.

Example pattern: have PHP return a compact JSON of counts (safe, single query), then fetch and draw on the client.

PHP (server-side endpoint):

<?php
// counts.php (POST dateCollect)
$date = $_POST['dateCollect'] ?? '';
if ($date === '') { echo json_encode([]); exit; }
$pdo = new PDO('mysql:host=localhost;dbname=yourdb;charset=utf8','user','pass');
$stmt = $pdo->prepare("SELECT mailCategory, COUNT(*) AS cnt FROM mail WHERE dateCollect = :d GROUP BY mailCategory");
$stmt->execute([':d'=>$date]);
$data = [];
foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $r) $data[$r['mailCategory']] = (int)$r['cnt'];
echo json_encode($data);

Client-side (call endpoint, then draw):

document.getElementById('Go').type = 'button';
document.getElementById('Go').addEventListener('click', function(){
  var date = document.getElementById('dateCollect').value;
  fetch('counts.php', { method:'POST', body: new URLSearchParams({dateCollect: date}) })
    .then(r=>r.json())
    .then(obj=>{
      var labels = Object.keys(obj);
      var values = labels.map(k=>obj[k]||0);
      var h = new RGraph.HBar('cvs', values);
      h.Set('chart.labels', labels);
      h.Draw();
    }).catch(console.error);
});

Final debugging tips: open the browser console for syntax errors, view source to confirm PHP printed numeric values (or JSON), check Network for the fetch/POST result, and confirm the date string matches your DB format (YYYY-MM-DD) or convert it server-side.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.