wordpress › wordpress charts « wordpress plugins

5
2/5/2014 WordPress › WordPress Charts « WordPress Plugins http://wordpress.org/plugins/wp-charts/installation/ 1/5 Plugin Directory Search Extending WordPress Plugins Developer Center Themes Mobile Ideas Kvetch! Search Plugins widget (3,827) Post (2,420) plugin (2,308) admin (1,914) posts (1,829) sidebar (1,569) twitter (1,305) google (1,304) comments (1,289) images (1,244) page (1,201) image (1,114) Ready to get started? Download WordPress Search WordPress.org Username Password Log in (forgot?) or Register Popular Tags More »

Upload: mannmann

Post on 07-May-2017

232 views

Category:

Documents


5 download

TRANSCRIPT

Page 2: WordPress › WordPress Charts « WordPress Plugins

2/5/2014 WordPress › WordPress Charts « WordPress Plugins

http://wordpress.org/plugins/wp-charts/installation/ 2/5

links (972)

Create amazing HTML5 charts easily in WordPress. A flexible and

lightweight WordPress chart plugin including 6 customizable chart

types.

Download Version 0.6.9.1

Description Installation FAQ Screenshots Changelog Stats Support Reviews Developers

Easy

1.Search WP charts via plugins > add new. 2.find the plugin listed and click activate. 3. Use

the Shortcodes and widget for fun and profit

Not So Easy

1. Fire up your favourite FTP and upload wp_charts folder to the /wp-

content/plugins/ directory

2. Activate the plugin through the 'Plugins' menu in WordPress

3. For Now - Use the Shortcodes for fun and profit

Usage

Basic Concept

the basic shortcode is [wp_charts] which on its own should not produce anything. you will

need to add properities to the shotcode for it to work. The format for shortcode properties is

property="somthing". for example, each chart needs a title and a type, so we would start

by putting the following into the wordpress editor : [wp_charts title="any title"

type="pie"]. Different Charts require different specific basic properties, as described

below. Further you can see a full list of properties with descriptions as well.

Important

Every chart reuqires a type, title and data or datasets attributes.

if you're using a Pie, Doughnut, or PolarArea chart type you must use the data shortcode

attribute (as these are 1 dimensional charts), where as if you're using the Bar, Line or

5 stars

4 stars

3 stars

2 stars

1 stars

Ratings

4.8 out of 5 stars

14

3

0

0

0

Requires: 3.8 or higher

Compatible up to: 3.8.1

Last Updated: 2014-1-25

Downloads: 10,398

Author

Paul2 plugins

Support

18 of 19 support threads in the last

two months have been resolved.

Got something to say? Need help?

View support forum

WordPress Charts

4 stars

Page 3: WordPress › WordPress Charts « WordPress Plugins

2/5/2014 WordPress › WordPress Charts « WordPress Plugins

http://wordpress.org/plugins/wp-charts/installation/ 3/5

Radar chart types you must use the datasets attribute (as these types are

multidimentional). Also note that datasets are seperated using the next keyword as

shown in the examples below.

Example Shortcode Usage

Pie Chart

[wp_charts title="mypie" type="pie" align="alignright" margin="5px 20px" data="10,32,50,25,5"]

Doughnut Chart

[wp_charts title="mydough" type="doughnut" align="alignleft" margin="5px 20px" data="30,10,55,25,15,8" colors="69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264"]

Polar Area Chart

[wp_charts title="mypolar" type="polarArea" align="alignright" margin="5px 20px" data="40,32,5,25,50,45" labels="one,two,three,four,five,six"]

Bar Chart

[wp_charts title="barchart" type="bar" align="alignleft" margin="5px 20px" datasets="40,32,50,35 next 20,25,45,42 next 40,43, 61,50 next 33,15,40,22" labels="one,two,three,four"]

Line Chart

[wp_charts title="linechart" type="line" align="alignright" margin="5px 20px" datasets="40,43,61,50 next 33,15,40,22" labels="one,two,three,four"]

Radar Chart

[wp_charts title="radarchart" type="radar" align="alignleft" margin="5px 20px" datasets="20,22,40,25,55 next 15,20,30,40,35" labels="one,two,three,four,five" colors="#CEBC17,#CE4264"]

All Shortcode Attributes

'type' = "pie"

choose from pie, doughnut, radar, polararea, bar, line

'title' = "chartname"

each chart requires a uniqe title. (note that the title should be unique on the page if you are using multiple charts on the same page)

'width' = "45%"

optional - This sets the width of the container for the chart, and should be the only size property you need to adjust. Setting it as a % value will make the chart fluid / responsive, you can use any valid CSS measurement of value (em, px, %).

'height' = "auto"

optional - the height will automatticaly be proportionate to the width, and you should not need to adjust this .

'canvaswidth' = "625"

optional - this will be converted to px, only adjust this up or down if you experience rendering issues.

'canvasheight' = "625"

optional - this will be converted to px, only adjust this up or down if you experience rendering issues.

'margin' = "20px"

optional - use standard css syntax for the margin, defaults to 5px for top, bottom, left and right.

'align' = "alignleft"

optional - use one of the standard WordPress alignment classes alignleft, alignright, aligncenter.

'class' = ""

optional - apply a css class to the chart container.

'labels' = ""

Used for the bar, line and polararea charts.

'data' = "30,50,100"

Used for the pie, doughnut and radar charts.

Compatibility

WordPress 3.8.1

+ Plugin 0.6.9.1

= Not enough data

1 person says it w orks.

0 people say it's broken.

Log in to vote.

Page 4: WordPress › WordPress Charts « WordPress Plugins

2/5/2014 WordPress › WordPress Charts « WordPress Plugins

http://wordpress.org/plugins/wp-charts/installation/ 4/5

About

Blog

Hosting

Jobs

Support

Get Involved

Learn

Showcase

Plugins

Themes

Ideas

WordCamp

WordPress.TV

BuddyPress

bbPress

'datasets' = "30,50,100 next 20,90,75"

Used for the bar, line, and radar charts, the data for each 'set' is put in as before, but using the 'next' keyword to seperate each of the datasets.

'colors' = "69D2E7,#E0E4CC,#F38630,#96CE7F,#CEBC17,#CE4264"

optional - These should be put in in there HEX value only(as above). These are the default colors, there should be the same number of colours as data points, or datasets, but if you only got a few, or too many, don't worry the plugin will handle it. (more practically if you don't want your chart to look like a rainbow, the plugin will cycle a set a colors for your data)

'fillopacity' = "0.7"

optional - for line, bar and polararea type charts you can set an opactiy for fill of the chart.

'pointstrokecolor' = "#FFFFFF"

optional - for line and polararea type charts you can set the point color, though usually looks pretty good with the default.

'animation' => 'true'

optional - turn the load animation for the charts on or off

'scaleFontSize' => '12'

optional - adjust the font size of the scale for the charts that display it

'scaleFontColor' => '#666'

optional - change the scale font colour

'scaleOverride' => 'false'

optional - by default this is turned off, and the script attempts to output an appropriate scale, setting this to true will require the following three properties to be set as well: scaleSteps, scaleStepWidth and scaleStartValue

'scaleSteps' => 'null'

optional - only applicable if scaleOveride is set to true - the number of steps in the scale

'scaleStepWidth' => 'null'

optional - only applicable if scaleOveride is set to true - the value jump used in the scale

'scaleStartValue' => 'null'

optional - only applicable if scaleOveride is set to true - the center starting value for the scale

Example Usage with scale options

[wp_charts title="linechart" type="line" align="alignright" margin="5px 20px" datasets="40,43,61,50 next 33,15,40,22" labels="one,two,three,four" scaleoverride="true" scalesteps="5" scalestepwidth="10" scalestartvalue="0"]

Non Symmetrical Charts

To create responsive non symmetrical charts you will need to set the width, height,

canvaswidth, canvasheight and relativewidth properties for the shorcode. The relativewidth

propertty is the relationship between the heigth adn width, in the following example we have

a chart that is twice as wide as it is high.

[wp_charts title="linechart" type="line" align="alignleft" margin="5px 20px" datasets="40,43,61,50,20,40,20 next 33,15,40,32,38,57,46" labels="one,two,three,four,five,six,seven" scaleoverride="true" scalesteps="8" scalestepwidth="10" scalestartvalue="0" scaleFontSize="16" canvaswidth="920px" canvasheight="460px" relativewidth="2" width="920px" height="460px"]

WP Charts Widget

head on over the 'widgets' page in wp admin area (listed under the Appearance menu) and

look for the WP Charts widget, the widget is pretty self explanatory and only includes the

basic options for now, check the properties above if your not quite sure what each field

should be used for.