CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

Morten Professor

13. november 2015 - 20:26 Der er 6 kommentarer og
1 løsning

Søjle diagram

Hej Eksperter

Jeg vil høre om der er en som kan hjælpe med at få <div> bokse til at ligge sig ned i bunden.
Har noget jeg lige er igang med, ved at lave nogle søjler.

Har lige lidt kode en meget simpel kode.


echo '<div>';
        echo '<div style="float:left; width:20px; height:' . $hits . 'px; background-color:#333">';
        echo $hits;
        echo '</div>';
        echo '</div>';

Det som jeg gerne vil have er at f.eks. en boks der er 600 * 600 og den div boks inde i skal ligge sig i bunden af boksen.

Med venlig hilsen
Morten

Synes godt om

Slater Ekspert

13. november 2015 - 23:28 #1

Det er da vist et CSS-spørgsmål og ikke PHP?

Men det gør du lettest ved at give den indre box position: relative; og bottom: 0; Så sætter du bare højden som du vil, evt. en procent.

Synes godt om

olsensweb.dk Ekspert

14. november 2015 - 12:33 #2

>Det er da vist et CSS-spørgsmål og ikke PHP?
i den grad et CSS spørgsmål

@morticms
inline style gør kun din code rodet!!, style på id eller class

andre ide'er
ref https://www.google.dk/search?q=css+bar+graph
http://geoffgraham.me/creating-a-responsive-css-bar-chart/
http://www.htmlgoodies.com/html5/tutorials/bar-graph-with-css3-and-progressive-enhancement.html <---

du kunne også bruge js/jquery i samarbejde med CSS, og dermed lave andre diagram former
Highcharts jquery baseret, men det anvender du allerede
RGraph js

eller
google chart js
tror jeg, jeg vil anbefale

Synes godt om

Morten Professor

14. november 2015 - 13:59 #3

Takker det hjalp mig.
Er i fuld sving med at afprøve :o)

Vil du smide et svar ronols

Synes godt om

olsensweb.dk Ekspert

14. november 2015 - 17:36 #4

prøv disse 2 eks fra google, lidt tilpassede

barchart.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #barchart_material{
                width:900px;
                height:500px;
            }
        </style>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1.1", {packages: ["bar"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['', 'Oktober', 'Novenber'],
                    [' ', 15, 10]
                ]);
                var options = {
                    chart: {
                        title: 'besøgs tæller',
                        subtitle: 'Hits',
                    },
                    bars: 'horizontal' // Required for Material Bar Charts.
                };
                var chart = new google.charts.Bar(document.getElementById('barchart_material'));
                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div>
            https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#examples
        </div>
        <div id="barchart_material"></div>
    </body>
</html>

columnchart.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #columnchart_material{
                width:500px;
                height:500px;
            }
        </style>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1.1", {packages: ["bar"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['', 'Oktober', 'Novenber'],
                    [' ', 15, 10]
                ]);
                var options = {
                    chart: {
                        title: 'besøgs tæller',
                        subtitle: 'hits',
                    }
                };
                var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div>
            https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
        </div>
        <div id="columnchart_material"></div>
    </body>
</html>

Synes godt om

Morten Professor

14. november 2015 - 19:14 #5

Øv de virkede ikke den kom med denne fejl:
https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
Result of expression 'this.U2[fc]' [undefined] is not a function.×

Synes godt om

Morten Professor

14. november 2015 - 19:25 #6

Fandt den her:


<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Besøg', <?php echo $besoeg; ?>],
          ['Hits', <?php echo $hits; ?>],
          
        ]);

        // Set chart options
        var options = {'title':'Beøg og hits',
                       'width':500,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>

Synes godt om

Morten Professor

14. november 2015 - 19:26 #7

Tak for du viste mig det med de diagrammer. Det virker bare perfekt.
Og det var lige det jeg gik efter.

Med venlig hilsen
Morten

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra PHP kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Adgang til vandaflæsningsdata Af nemlig i PHP	4	22/04/202422:04	30/04/202421:08
Vælg post rækkefølge Af Mojo_dk i PHP	3	06/04/202418:40	07/04/202412:20
Hjælp til PHP Af Friis77 i PHP	5	11/02/202419:58	12/02/202407:55
Total antal records med undtagelse Af uac i PHP	5	09/02/202414:55	09/02/202415:30
Delete form Af lefsa62 i PHP	1	29/01/202412:40	29/01/202412:41

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS

03/05

Test: Vi vil altså virkeligt gerne beholde HP's nye pc - men den koster 360.000 kroner

03/05

Socialdemokratiet vil give massiv offentlig støtte til europæiske AI-virksomheder

03/05

Apple køber egne aktier tilbage for mere end 763 milliarder kroner: Største tilbagekøb nogensinde

03/05

Nørgaard: Jeg kunne have været ejer af KMD, hvis ikke nogle pengedrenge havde kontaktet KMD's chefer

03/05

Interne mails afslører: Derfor besluttede Microsoft at investere milliarder i OpenAI i 2019

03/05

Jakob Høholdt fratræder som CEO for Sentia: Indsætter ny topchef fra Aeven

03/05

Topchef: En tredjedel af alle amerikanernes sundhedsdata flyder på dark web

03/05

Skal du have et nyt job før sommerferien - så bør du tjekke en af disse 10 stillinger

03/05

Åbner for en af Danmarks største it-konsulentaftaler til 2,3 milliarder kroner

03/05

Netcompany har ansat 144 nye medarbejdere siden nytår: "Vi har fået travlt i Danmark," siger en godt tilfreds André Rogaczewski

03/05

Regeringen på trapperne med løsning på omstridt Chromebook-sag: Her kommer svarene

Vis flere artikler

IT-JOB

Matas A/S

Team Lead Development hos Matas Group Digital

Udviklings- og Forenklingsstyrelsen

Senior clojure udvikler til Skats ejendomsvurderingssystem

Udviklings- og Forenklingsstyrelsen

Testmanager med agilt mindset

Timengo

Product and Documentation Specialist

Businessmann A/S

DevOps Consultant

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 19:30	Finde gentagne Instruktioner i ASSEMBER-lister Af snestrup2000 i Andet software
I går 16:17	Dato opslag Af Klaus W i Excel
I går 15:37	Disable button efter 1. klik Af nemlig i JavaScript
I går 12:42	pc hakker og lagger Af Gabi i Windows
I går 09:22	Slet automatisk indehol i felt så det blivet tomt Af gylling i Excel