How do I get something like this...?

[m4rk0551]

I am trying to achieve something like this:
http://reviews.teamxbox.com/xbox-360/1358/NASCAR-08/p2/ (scroll down until you get a graph with "Game Play" and all).

I need it for my site and I was wondering how can I get this. Is there a type of software that does this automatically and is customizable. Some coder I know said I can do this using php, GD image class. He said this is easy, but for a non-coder like me, I was wondering if there is a STEP-BY-STEP tutorial on this so called GD image class, and how it works.

Thanks

[Costin Trifan]

These are just simple statistics. You display them based on the database records...

search for: display simple statistics from database and see if you find what you need.

It really depends on what database you have and what's the programming language you're using (PHP, ASP.NET....)

[clarkegraphics]

What they did there is just have a simple table. They had some designer create the images for the scores (GAMEPLAY: 7.7 etc.) and then just filled in the information in the cell below.
and and
Here's the code.

<div style="width: 430px; margin: 0px auto 0px auto; padding:0px"><div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_gameplay.jpg" width="113" height="20" style="border: 0px" /></div>

                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_bar_7.7.jpg" width="277" height="20" style="border: 0px" /></div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_7.7.jpg" width="40" height="20" style="border: 0px" /></div>
                  <br class="brclear" />
                  </div>
                  <div style="width: 420px; padding: 4px; border-right: 1px solid #868982; border-left: 1px solid #868982"><div style="width: 98%"><i>Nice tuning and setup options this time around.  Handling is spot-on…A.I. is not.  </i></div></div><div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_graphics.jpg" width="113" height="20" style="border: 0px" /></div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_bar_7.5.jpg" width="277" height="20" style="border: 0px" /></div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_7.5.jpg" width="40" height="20" style="border: 0px" /></div>

                  <br class="brclear" />
                  </div>
                  <div style="width: 420px; padding: 4px; border-right: 1px solid #868982; border-left: 1px solid #868982"><div style="width: 98%"><i>The best looking stock car game on the market, but still needs some shader work.  </i></div></div><div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_audio.jpg" width="113" height="20" style="border: 0px" /></div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_bar_8.0.jpg" width="277" height="20" style="border: 0px" /></div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_8.0.jpg" width="40" height="20" style="border: 0px" /></div>
                  <br class="brclear" />
                  </div>

                  <div style="width: 420px; padding: 4px; border-right: 1px solid #868982; border-left: 1px solid #868982"><div style="width: 98%"><i>Believable sound effects and excellent commentary from the Doctor and pit crew members.</i></div></div><div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_longevity.jpg" width="113" height="20" style="border: 0px" /></div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_bar_8.0.jpg" width="277" height="20" style="border: 0px" /></div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_8.0.jpg" width="40" height="20" style="border: 0px" /></div>
                  <br class="brclear" />
                  </div>
                  <div style="width: 420px; padding: 4px; border-right: 1px solid #868982; border-left: 1px solid #868982"><div style="width: 98%"><i>No Featherlights hurts a bit, but extensive sedan and truck racing race options even the playing field a bit.  </i></div></div><div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_innovation.jpg" width="113" height="20" style="border: 0px" /></div>

                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_bar_7.3.jpg" width="277" height="20" style="border: 0px" /></div>
                  <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_7.3.jpg" width="40" height="20" style="border: 0px" /></div>
                  <br class="brclear" />
                  </div>
                  <div style="width: 420px; padding: 4px; border-right: 1px solid #868982; border-left: 1px solid #868982"><div style="width: 98%"><i>Not quite the game of tomorrow.</i></div></div><div>
              <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_overall.jpg" width="113" height="20" style="border: 0px" /></div>
              <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_bar_7.8.jpg" width="277" height="20" style="border: 0px" /></div>
              <div style="float: left"><img src="http://media.teamxbox.com/xbox-skins/xbox-360/score_chart/score_chart_7.8.jpg" width="40" height="20" style="border: 0px" /></div>

              <br class="brclear" />
              </div><div style="padding: 3px 0px 2px 0px; text-align: center"><i>Overall Score NOT an average</i></div></div>            </div>

[Costin Trifan]

@ clarkegraphics:
Yes, for a static html page which would be updated manually every time the statistics are changing...but that's not an option, IMO...

He can use that code and modify it accordingly with the data from the database using php or any other programming language to display the results and not editing it manually...

[ToddW]

Originally Posted by Costin Trifan

@ clarkegraphics:
Yes, for a static html page which would be updated manually every time the statistics are changing...but that's not an option, IMO...

He can use that code and modify it accordingly with the data from the database using php or any other programming language to display the results and not editing it manually...

Yeah, PHP and MYSQL with some graphics would be easy to keep it updated daily or in real-time.

[bbhit]

@ clarkegraphics:
good