Вы находитесь на странице: 1из 3

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.

'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.

Вам также может понравиться