Book Image

Learning jqPlot

By : Scott Gottreu
Book Image

Learning jqPlot

By: Scott Gottreu

Overview of this book

Table of Contents (19 chapters)
Learning jqPlot
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Styling our chart and adding functionality


We know that management wants these charts, so we will do our best with what we've got. We know we need to modify the fill color for our pie pieces. We also decide that we want to break our pieces apart.

We only need to add a couple of options to our existing chart. We set sliceMargin under rendererOptions to 5, and this will break our pieces apart by 5 pixels. We also make use of the seriesColors option and pass in an array of hexadecimal color values. We finish by moving the legend to the left of the chart:

...
    seriesDefaults: {
      renderer:$.jqplot.PieRenderer,
      rendererOptions: { 
        showDataLabels: true, 
        startAngle: -90, 
        dataLabelThreshold: 0, 
        sliceMargin: 5
      }
    },
    seriesColors: [ "#4bb2c5", "#F4CA4A", "#EAA228", "#E4CAAB", "#F47241", "#AED8D0", "#F2C185", "#FC4F4B", "#9B8DF4", "#00F41D", "#988167" ],
...
legend: { show: true, placement: 'outside', location: 'e' },
...

With these updates...