Line labels for the pie chart in jqPlot
This is an implementation of line labels for the pie chart renderer in jqPlot.
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts. However its pie charts lack clear labels with percentage values. The problem has been discussed here and I hope the patch I have provided below solves it.
Download the renderer file jqplot.pieRenderer.lineLabels.js (works with jqPlot 0.9.7)
or just the patch against jqplot.pieRenderer.js 0.9.7.
How to use it:
1. Replace your include line in the <head>
<script type="text/javascript" src="/js/jqplot/plugins/jqplot.pieRenderer.js"></script>
with
<script type="text/javascript" src="/js/jqplot/plugins/jqplot.pieRenderer.lineLabels.js"></script>
2. Enable the line labels in the config of your chart
var optionsObj = {
seriesColors: ["#ff0808","#ff6c0a","#0a8dff","#0aff12","#fff30a"],
grid: {
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: { lineLabels: true, lineLabelsLineColor: '#777' }
}
};
line1 = [['Coffee', 9],['Beer', 4],['TV', 6],['Lost umbrellas', 2],['Bicycle rides', 10]];
chart = $.jqplot('chartdiv', [line1], optionsObj);
3. Add an extra class to your CSS
.jqplot-pie-line-label { color: #666; font-size: 12px; font-family: Arial, sans-serif; text-align: center; height: 12px; line-height: 12px; }
That's it.
A plugin renderer for jqPlot to draw a Hermite spline.
The word "spline" comes from the flexible spline devices used by shipbuilders and draftsmen to draw smooth shapes. Splines are, loosely speaking, mathematical descriptions of general smooth curves, defined by control points and refer to a wide class of functions that are used in applications requiring data interpolation and/or smoothing.
Based on other plugins for jqPlot by Chris Leonello and
Cubic Hermite spline (http://en.wikipedia.org/wiki/Cubic_Hermite_spline)
Special thanks for corrections to Martijn Grendelman.
Download it here: jqplot.hermiteSplineRenderer
Options:
- steps - number of new data points.
- tension - spline 'tension' constant which affects the tightness of the curve. Must be in the interval (0,1)
Usage:
Include the plugin:
... <script type="text/javascript" src="../plugins/jqplot.hermiteSplineRenderer.js"></script> ...
Add to your optionsObj:
...
seriesDefaults: {
renderer:$.jqplot.hermiteSplineRenderer,
rendererOptions:{steps: 60, tension: 0.6},
...
Example:
jqplot.LineRenderer
hermiteSplineRenderer
Do you really know yourself as well as you think you do?
Want your life to get more organized? Curious how much time you spend on particular activities? Interested in making some personal statistics and improving your daily routine? Need more motivation?
Well, if you answered 'yes' to at least one of the questions, StatsCollector is a service you need to test immediately!
With StatsCollector you can simply set your personal goals in many different areas and collect your personal statistics. Its user-friendly, intuitive and customizable interface allows you to keep track of your every day activities as well as share your statistics with others. In consequence, it lets you build good daily routine as well as get rid of some nasty habits.
As a StatsCollector team we are currently working on our website and we would be delighted if you joined our project as a beta tester.
If you're interested in it, please log on www.StatsCollector.com and we'll contact you as soon as possible.