July 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Improving the Grafico Presentation, Page 2

  • June 27, 2011
  • By Jason Gilmore
  • Send Email »
  • More Articles »

Improving the Presentation

Options are available for tweaking the chart line's stroke width and color, background color and more. You can also enable a hover feature which identifies the exact value associated with a point, useful since it's otherwise only possible to approximate a point's value. For example, check out the revised graph presented in Figure 3.


Chart Amazon Sales Ranks with the Grafico Library
Click here for larger image

Figure 3. Tweaking the Graph Presentation

This graph overrides four default options, including stroke_width (the line's width), colors (the line's color), grid_color (the grid's color), and markers (whether the value should appear when the user mouses over a point).

<script type="text/javascript" charset="utf-8">
  window.onload = function () {
    var linegraph = new Grafico.LineGraph($('chart'), 
      { ranks: [32136, 24865, 19498, 42597, 16233, 26997, 30535, 18287] },
      { 
        stroke_width : 3,
        colors : {ranks: '#383638'},
        grid_color: '#abc52f',
        markers : "value"
      }
    );
  };
</script>

Charting Multiple Books

Of course, it would be interesting to simultaneously view the historical rankings of multiple books (see Figure 4). This too is easily accomplished using Grafico; just pass in multiple data sets!


Chart Amazon Sales Ranks with the Grafico Library
Click here for larger image

Figure 4. Charting Multiple Data Sets

In addition to charting multiple data sets, I've added labels which appear when the user hovers over a chart line, and I've also spruced up the data points by adding small circle icons. The code used to create this graph is presented next:

<script type="text/javascript" charset="utf-8">
  window.onload = function () {
    var linegraph = new Grafico.LineGraph($('chart'), 
      { 
        epwzf: [32136, 24865, 19498, 42597, 16233, 26997, 30535, 18287],
        bpm4e: [63256, 54925, 45980, 33762, 45901, 52091, 40013, 33129],
      },
      { 
        stroke_width : 3,
        colors : {epwzf: '#383638', bpm4e: '#F68B1F'},
        grid_color: '#abc52f',
        markers : "circle",
        draw_hovers: true,
        datalabels: {
          epwzf: "Easy PHP Websites with the Zend Framework",
          bpm4e: "Beginning PHP and MySQL, 4E"
        }
      }
    );
  };
</script>

Conclusion

I've tried many graphing solutions over the past several years, and Grafico has easily proved to be the most user-friendly. It natively supports the ability to perform all of the most commonplace tweaks, and setup is incredibly simple. Are you using a different solution? Tell us about it in the comments!

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.



Originally published on http://www.developer.com.

Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel