I am working to build a page similar to http://statistics.amis-outlook.org/data/index.html#COMPARE this how to generate charts based on user slection however i am able to generte charts from database.

Recommended Answers

All 4 Replies

Hi Radwanullah

I'm not sure I am going to answer your question, you should perhaps explain where you are struggling ???

As far as I can see your issue will come down to how you name your checkboxes and this in turn will impact how the request variables are generated for the PHP.

Naming checkboxes with brackets after the name will give you an array of values to work with,

//one way
<input  type="checkbox" name="mycheckbox[]" value="1">
<input  type="checkbox" name="mycheckbox[]" value="2">

//another way
<input  type="checkbox" name="mycheckbox[group1]" value="1">
<input  type="checkbox" name="mycheckbox[group1]" value="2">
<input  type="checkbox" name="mycheckbox[group2]" value="1">
<input  type="checkbox" name="mycheckbox[group2]" value="2">

//see what happens when you do a print_r

print_r ($_REQUEST["mycheckbox"]);

Clarify your question more and you may get some more help.

Thank for your replay.
The checkboxes are dynamic all data is loaded from database i don't know how to load data into chart while data is submitted.

Well it depends what sort of chart you are using, most javascript charts use json, you would still need to parse the data you get from your post to create it into a usable format for the chart. So, you would perhaps make an array in php then format it into the format needed for your graph, example:

$graphx = $_REQUEST["somecheckbox"];
$graphy = $_REQUEST["somecheckbox2"];


$mygraph = array ("x" => $graphy, "y" => $graphy);


echo "<script> var graphdata = ".json_encode ($mygraph)."; 
         //create the graph
      </script>";

That is an example, seeing as I do not know what sort of graphs you are using the above is how to get between client side and server side.

I am trying to build a compare system same as http://statistics.amis-outlook.org/data/index.html#COMPARE. I can generate line chart from mysql database but this is static way. I want this to be dynamic like when user check some checkboxes it should generate the chart base on user request.

    <?php include('conn.php'); ?>

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>New Page</title>
    <style type="text/css">
    #div{
        height:500px;
        width:150px;
        overflow:auto;
        border:thin;
        float:left;
    }
    #div2{
        height:auto;
        width:150px;
        overflow:auto;
        border:thin;
    }
    </style>
    </head>
    <body>
    <form name="" action="2nd.php" method="post"> 
    <div style="border:1; border-color:#006;">
    <?php 
    $sql=$connection->query("SELECT * FROM provinces");
    echo "<div id=\"div\">"; 
    while($result=$sql->fetch_assoc()){
        //echo "<input type=\"checkbox\" name=\""; echo $result['name'];  echo" \" "; echo $result['name']; echo" />"; 
        echo "
    <input type=\"checkbox\" name=\"check[]\" value\""; echo $result['name']; echo" \" />"; 
    echo $result['name']; 
    echo "<br/>";
    }
    echo "</div>";
    ?>
    <?php 
    $sql=$connection->query("SELECT * FROM commodities");
    echo "<div id=\"div2\">"; 
    while($result=$sql->fetch_assoc()){
        //echo "<input type=\"checkbox\" name=\""; echo $result['name'];  echo" \" "; echo $result['name']; echo" />"; 
        echo "
    <input type=\"checkbox\" name=\"check[]\" value\""; echo $result['name']; echo" \" />"; 
    echo $result['name']; 
    echo "<br/>";
    }
    echo "</div>";

    ?>
    <input type="submit" name="save"/>
    </div>
    </form>
    </body>
    </html>

This code is for handling the form file name= 2nd.php

    <?php
     foreach($_POST['check'] as $instrument)
    {
        echo $instrument.'<br>';
    }
    ?>

i am using highchart for generating the charts. the below code get data from database.

    <?php
    //FILE NAME = data.php
    include('../conn.php');

    $query = mysql_query("SELECT * FROM commodities where ");

    $category = array();
    $category['name'] = 'Month';

    $series1 = array();
    $series1['name'] = 'Wordpress';

    $series2 = array();
    $series2['name'] = 'CodeIgniter';

    $series3 = array();
    $series3['name'] = 'Highcharts';


    while($r = mysql_fetch_array($query)) {
        $category['data'][] = $r['month'];
        $series1['data'][] = $r['wordpress'];
        $series2['data'][] = $r['codeigniter'];
        $series3['data'][] = $r['highcharts'];   
    }

    $result = array();
    array_push($result,$category);
    array_push($result,$series1);
    array_push($result,$series2);
    array_push($result,$series3);


    print json_encode($result, JSON_NUMERIC_CHECK);

    mysql_close($con);
    ?> 

This code generate line chart from data driven from data.php file. priviews the data from data.php and priveiw it in chart

FILE NAME= generate.php

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Column chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src="../Highcharts-3.0.10/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Project Requests',
            x: -20 //center
        },
        subtitle: {
            text: '2013',
            x: -20
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'Requests'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: []
    }

    $.getJSON("data.php", function(json) {
        options.xAxis.categories = json[0]['data'];
        options.series[0] = json[1];
        options.series[1] = json[2];
        options.series[2] = json[3];
        chart = new Highcharts.Chart(options);
    });
});
</script>
<script src="../Highcharts-3.0.10/js/highcharts.js"></script>
<script src="../Highcharts-3.0.10/js/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
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.