Skip to content

Instantly share code, notes, and snippets.

@chriscoyier

chriscoyier/gist:945619

Created April 28, 2011 01:33
Download ZIP

Revisions

  1. chriscoyier revised this gist Apr 30, 2011. 1 changed file with 24 additions and 16 deletions.
    40 changes: 24 additions & 16 deletions gistfile1.php
    View file
    Original file line number Diff line number Diff line change
    @@ -14,14 +14,16 @@
    #chart { margin: 0 auto; padding: 100px 0; height: 400px; position: relative; text-align: center; }
    #chart > a {
    width: 1px;
    background: red;
    /* Fallback color */
    background: orange;
    /* Way cooler gradient */
    background: -webkit-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    background: -moz-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    background: -ms-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    background: -o-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    background: linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    display: inline-block;
    vertical-align: middle;
    display: inline-block;
    vertical-align: bottom;
    text-decoration: none;

    }
    @@ -44,6 +46,9 @@
    #chart > a:hover > span {
    opacity: 1;
    }
    #chart strong {
    padding: 10px;
    }
    </style>

    </head>
    @@ -55,7 +60,6 @@

    $query = "SELECT comment_count FROM " . $wpdb->posts . " WHERE post_type = 'post' && post_status = 'publish' ORDER BY comment_count DESC LIMIT 1";
    $results = $wpdb->get_results($query);

    $maxComments = $results[0]->comment_count;

    query_posts('posts_per_page=-1&order=ASC');
    @@ -68,25 +72,29 @@
    while (have_posts() ) : the_post();

    // Echo the first year post published
    if ($i == 1) { echo "<strong>" . the_date("Y") . "</strong>"; }
    if ($i == 1) {
    echo "<strong>";
    the_date("Y");
    echo "</strong>";
    // prevent from outputting next iteration
    $i = 0;
    }

    $numComments = get_comments_number();

    $heightPercentage = (($numComments / $maxComments) * 100);

    echo "<a href='";
    echo get_permalink();
    echo "' style='height: $heightPercentage%;'>";
    // echo strip_tags(get_the_title());
    echo "<span>$numComments</span>";
    echo "</a>";

    $i++;

    echo "<a href='";
    echo get_permalink();
    echo "' style='height: $heightPercentage%;'>";
    echo "<span>$numComments</span>";
    echo "</a>";

    endwhile;

    // Echo the last year post published
    echo "<strong>" . the_date("Y") . "</strong>";
    echo "<strong>";
    the_date("Y");
    echo "</strong>";

    ?>

  2. chriscoyier revised this gist Apr 30, 2011. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions gistfile1.php
    View file
    Original file line number Diff line number Diff line change
    @@ -16,11 +16,13 @@
    width: 1px;
    background: red;
    background: -webkit-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    display: inline-block;
    background: -moz-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    background: -ms-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    background: -o-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    background: linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    -webkit-transition: width 0.2s ease;
    text-decoration: none;

    }
    #chart > a:hover {
  3. chriscoyier revised this gist Apr 29, 2011. 1 changed file with 61 additions and 9 deletions.
    70 changes: 61 additions & 9 deletions gistfile1.php
    View file
    Original file line number Diff line number Diff line change
    @@ -11,31 +11,83 @@
    <title>Comment Graph</title>

    <style>
    #chart { margin: 50px 0; height: 400px; }
    #chart > div { width: 1px; background: red; display: inline-block; }
    #chart { margin: 0 auto; padding: 100px 0; height: 400px; position: relative; text-align: center; }
    #chart > a {
    width: 1px;
    background: red;
    background: -webkit-linear-gradient(top, hsl(27, 95%, 45%), hsl(27, 95%, 65%), hsl(27, 95%, 45%));
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    -webkit-transition: width 0.2s ease;
    text-decoration: none;

    }
    #chart > a:hover {
    background: black;
    }
    #chart span {
    width: 50px;
    background: black;
    color: white;
    text-align: center;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -30px;
    opacity: 0;
    z-index: 1;
    }
    #chart > a:hover > span {
    opacity: 1;
    }
    </style>

    </head>

    <body>

    <?php query_posts('posts_per_page=-1'); ?>
    <?php
    $i = 1;

    $query = "SELECT comment_count FROM " . $wpdb->posts . " WHERE post_type = 'post' && post_status = 'publish' ORDER BY comment_count DESC LIMIT 1";
    $results = $wpdb->get_results($query);

    $maxComments = $results[0]->comment_count;

    query_posts('posts_per_page=-1&order=ASC');
    ?>

    <div id="chart">

    <?php

    while (have_posts() ) : the_post();

    // Echo the first year post published
    if ($i == 1) { echo "<strong>" . the_date("Y") . "</strong>"; }

    $numComments = get_comments_number();
    $percentage = $numComments / 3;

    echo "<div style='height: $percentage%;'></div>";
    $heightPercentage = (($numComments / $maxComments) * 100);

    echo "<a href='";
    echo get_permalink();
    echo "' style='height: $heightPercentage%;'>";
    // echo strip_tags(get_the_title());
    echo "<span>$numComments</span>";
    echo "</a>";

    $i++;

    endwhile;


    // Echo the last year post published
    echo "<strong>" . the_date("Y") . "</strong>";

    ?>

    </div>

    </body>
  4. chriscoyier renamed this gist Apr 28, 2011. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.php
    View file
    File renamed without changes.
  5. chriscoyier created this gist Apr 28, 2011.
    43 changes: 43 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    <?php
    /*
    Template Name: Comment Graph
    */
    ?>
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset=utf-8>
    <title>Comment Graph</title>

    <style>
    #chart { margin: 50px 0; height: 400px; }
    #chart > div { width: 1px; background: red; display: inline-block; }
    </style>

    </head>

    <body>

    <?php query_posts('posts_per_page=-1'); ?>

    <div id="chart">

    <?php

    while (have_posts() ) : the_post();

    $numComments = get_comments_number();
    $percentage = $numComments / 3;

    echo "<div style='height: $percentage%;'></div>";

    endwhile;

    ?>

    </div>

    </body>

    </html>