Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts

    How to display data from cgi into html

    I would like how to use getElementById as I want to display a barchart of the annual sales totals for the branches from cgi into html with dropdown list.Thanks a lot.
    Code:
    #!/usr/bin/perl
    #Pie Months
    use DBI;
    
    
    $db=DBI->connect("DBI:mysql:uxxxx:mysql","uyyyy","xxxx") || die;
    $sqlstring="select name, sum(takings) from wes_sales join months where id=month and year=2010 group by month order by month;";
    
    $query=$db->prepare ($sqlstring);
    $query->execute() || die;
    $count=0;
    while (@newrow=$query->fetchrow_array) {
    $months[$count]=$newrow[0];
    $takings[$count]=$newrow[1];
    $count++;
    }
    @chartdata=(\@months, \@takings);
    
    use GD::Graph::pie;
    $graph=GD::Graph::pie->new(600,500);
    
    $graph->set(x_label => 'Branch', y_label => 'Sales', title => 'Annual Sales by Branch for 2005', y_max_value => 800000000);
    $graph->set(title => 'Monthly Sales for 2010');
    binmode STDOUT;
    print "Content-type: image/png\n\n";
    print $graph->plot(\@chartdata)->png();

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Fot View Post
    I would like how to use getElementById as I want to display a barchart of the annual sales totals for the branches from cgi into html with dropdown list.Thanks a lot.
    Code:
    #!/usr/bin/perl
    #Pie Months
    use DBI;
    
    
    $db=DBI->connect("DBI:mysql:uxxxx:mysql","uyyyy","xxxx") || die;
    $sqlstring="select name, sum(takings) from wes_sales join months where id=month and year=2010 group by month order by month;";
    
    $query=$db->prepare ($sqlstring);
    $query->execute() || die;
    $count=0;
    while (@newrow=$query->fetchrow_array) {
    $months[$count]=$newrow[0];
    $takings[$count]=$newrow[1];
    $count++;
    }
    @chartdata=(\@months, \@takings);
    
    use GD::Graph::pie;
    $graph=GD::Graph::pie->new(600,500);
    
    $graph->set(x_label => 'Branch', y_label => 'Sales', title => 'Annual Sales by Branch for 2005', y_max_value => 800000000);
    $graph->set(title => 'Monthly Sales for 2010');
    binmode STDOUT;
    print "Content-type: image/png\n\n";
    print $graph->plot(\@chartdata)->png();
    you mean to change the script to output a drop down list instead the image?

    best regards

  • Users who have thanked oesxyl for this post:

    Fot (04-11-2011)

  • #3
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    Hello, the problem is that the user must be able to view any one of the four charts.There are 4 different charts(and codes) with every one graph.So i must transfer the graph into the html page.Thanks.

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Fot View Post
    Hello, the problem is that the user must be able to view any one of the four charts.There are 4 different charts(and codes) with every one graph.So i must transfer the graph into the html page.Thanks.
    if i'm not wrong the script is working and do what you want but you want to know how to output the image in the page. This is not realy a perl question, is html and answer is simple:
    Code:
    <img id="pic" src="/cgi-bin/scriptname" />
    if you have another 3 perl scripts which do same thing and you want to use a single img tag, a select and swap between them based on what the user select you need t use a select element:

    Code:
    <select name="sw">
       <option value="s1">whatever 1</option>
       <option value="s2">whatever 2</option>
       <option value="s3">whatever 3</option>
       <option value="s4">whatever 4</option>
    </select>
    you need some javascript to swap the when the user click on one of the options:
    Code:
    var sel = document.getEelementById('sw');
    sw.onchange = function(){
       var imgs = ['/cgi-bin/script1', '/cgi-bin/script2',
                   '/cgi-bin/script3', '/cgi-bin/script4'];
       var im = document.getElementById('pic');
       im.src = imgs[this.selectedIndex];
    }
    i didn't test anything so could pe some typo, anyway i hope this is what you want.

    best regards

  • Users who have thanked oesxyl for this post:

    Fot (04-11-2011)

  • #5
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    Hello,the problem is that with
    Code:
    <img id="pic" src="/cgi-bin/scriptname" />
    the 4 images displays without the selection of dropdown list, except and there is
    one src="/cgi-bin/scriptname . (I use 4 src and there are in ssh file transfer).
    Thanks.

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Fot View Post
    Hello,the problem is that with
    Code:
    <img id="pic" src="/cgi-bin/scriptname" />
    the 4 images displays without the selection of dropdown list, except and there is
    one src="/cgi-bin/scriptname . (I use 4 src and there are in ssh file transfer).
    Thanks.
    i'm confused.
    what is ssh file transfer and what is the connection between the 4 src and this one.
    if what i explaind in my previous post is not what you want:
    - i don't understand how many pictures you want to have in the page 1 or 4.
    - i don't understand what you want the drop down list to do

    best regards

  • Users who have thanked oesxyl for this post:

    Fot (04-13-2011)

  • #7
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    Hello, thanks.
    The user must be able to view any one of the four charts.So the problem is how I can with dropdown to select one every time.
    About the src I use in my code because are different charts.

    Code:
    <img id="pic" src="chart1.cgi" />
    <img id="pic" src="chart2.cgi" />
    <img id="pic" src="chart3.cgi" />
    <img id="pic" src="chart4.cgi" />

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Fot View Post
    Hello, thanks.
    The user must be able to view any one of the four charts.So the problem is how I can with dropdown to select one every time.
    About the src I use in my code because are different charts.

    Code:
    <img id="pic" src="chart1.cgi" />
    <img id="pic" src="chart2.cgi" />
    <img id="pic" src="chart3.cgi" />
    <img id="pic" src="chart4.cgi" />
    what the dropdown must do when one of this is selected?

    best regards

  • Users who have thanked oesxyl for this post:

    Fot (04-13-2011)

  • #9
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    Hello,the problem is that when select whatever 1 in dropdown then to display one of the four.(one every time not all).Thanks.
    Code:
    <select name="sw">
       <option value="s1">whatever 1</option>
       <option value="s2">whatever 2</option>
       <option value="s3">whatever 3</option>
       <option value="s4">whatever 4</option>
    </select>

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Fot View Post
    Hello,the problem is that when select whatever 1 in dropdown then to display one of the four.(one every time not all).Thanks.
    Code:
    <select name="sw">
       <option value="s1">whatever 1</option>
       <option value="s2">whatever 2</option>
       <option value="s3">whatever 3</option>
       <option value="s4">whatever 4</option>
    </select>
    in this case what doesn't work or what you didn't understand from what i explained in post #4 ?

    best regards

  • Users who have thanked oesxyl for this post:

    Fot (04-13-2011)

  • #11
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    Hello, firstly the dropdown list cannot operate.
    Secondly, if I must add all (<img id="mm" src="xx" />) maybe with different id the browser display all .Thanks

    Code:
    <img id="pic" src="chart1.cgi" />
    <img id="pic" src="chart2.cgi" />
    <img id="pic" src="chart3.cgi" />
    <img id="pic" src="chart4.cgi" />

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Fot View Post
    Hello, firstly the dropdown list cannot operate.
    what does this mean?

    Secondly, if I must add all (<img id="mm" src="xx" />) maybe with different id the browser display all .Thanks

    Code:
    <img id="pic" src="chart1.cgi" />
    <img id="pic" src="chart2.cgi" />
    <img id="pic" src="chart3.cgi" />
    <img id="pic" src="chart4.cgi" />
    if you read carefully post #4 you will see that you don't need to have more then 1 (one) img tag in the page because the src value of this *single* img tag will be changed using javascript when the user select one of the positions from the dropdown list.

    best regards

  • Users who have thanked oesxyl for this post:

    Fot (04-13-2011)

  • #13
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    Maybe the problem there is in src as I write this .I would like your opinion.

    Code:
    <img id="pic" src="http://nnn:nnn@outranet.scm.tees.ac.uk/users/k0nnnnn/wes/wes_ica" />
    Code:
    var sel = document.getEelementById('sw');
    sw.onchange = function(){
       var imgs = ['http://nnn:nnn@outranet.scm.tees.ac.uk/users/wes/wes_ica/chart1', 'http://nnn:nnn@outranet.scm.tees.ac.uk/users/wes/wes_ica/chart2',
                   'http://nnnn:nnn@outranet.scm.tees.ac.uk/users/wes/wes_ica/chart3', 'http://nnnn:nnnn@outranet.scm.tees.ac.uk/users/wes/wes_ica/chart4'];
       var im = document.getElementById('pic');
       im.src = imgs[this.selectedIndex];

  • #14
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Fot View Post
    Maybe the problem there is in src as I write this .I would like your opinion.

    Code:
    <img id="pic" src="http://nnn:nnn@outranet.scm.tees.ac.uk/users/k0nnnnn/wes/wes_ica" />
    Code:
    var sel = document.getEelementById('sw');
    sw.onchange = function(){
       var imgs = ['http://nnn:nnn@outranet.scm.tees.ac.uk/users/wes/wes_ica/chart1', 'http://nnn:nnn@outranet.scm.tees.ac.uk/users/wes/wes_ica/chart2',
                   'http://nnnn:nnn@outranet.scm.tees.ac.uk/users/wes/wes_ica/chart3', 'http://nnnn:nnnn@outranet.scm.tees.ac.uk/users/wes/wes_ica/chart4'];
       var im = document.getElementById('pic');
       im.src = imgs[this.selectedIndex];
    you can't use this kind of url because need aditional step, authorization of the user.

    Edit: try with normal url and check:
    - to see the images in a html page with all 4 img tags without any javascript or something else
    - check if the dropdown list have a id 'sw', in case have another id change 'sw' form the line 'var sel ...' with that value.

    best regards
    Last edited by oesxyl; 04-13-2011 at 08:01 PM.

  • Users who have thanked oesxyl for this post:

    Fot (04-13-2011)

  • #15
    Fot
    Fot is offline
    Regular Coder
    Join Date
    Mar 2011
    Posts
    111
    Thanks
    88
    Thanked 0 Times in 0 Posts
    I put all in a folder with name we but no results :
    Code:
    <img id="pic" src="we" />
    
    <select name="sw">
       <option value="s1">whatever 1</option>
       <option value="s2">whatever 2</option>
       <option value="s3">whatever 3</option>
       <option value="s4">whatever 4</option>
    </select>
    I change jscript

    Code:
    var sel = document.getEelementById('sw');
    sw.onchange = function(){
       var imgs = ['/we/chart1', '/we/chart2',
                   '/we/chart3', '/we/chart4'];
       var im = document.getElementById('pic');
       im.src = imgs[this.selectedIndex];

    and with code that I can see all images in different place

    Code:
    <img id="pic" src="chart1.cgi" />
    <img id="pic" src="chart2.cgi" />
    <img id="pic" src="chart3.cgi" />
    <img id="pic" src="chart4.cgi" />


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •