Chart Shortcode

[intense_content_section]
<h2>Introduction</h2>
Add professional charts to WordPress using the chart shortcode. There are several types to choose from:
[intense_icon_list]
[intense_icon_list_item type="ok"]Line - displays a series of data points connected by straight lines[/intense_icon_list_item]
[intense_icon_list_item type="ok"]Bar - a chart with rectangular bars representing values in a series[/intense_icon_list_item]
[intense_icon_list_item type="ok"]Radar - shows angular spokes (radii) representing the data values[/intense_icon_list_item]
[intense_icon_list_item type="ok"]Polar Area - similar to the pie chart except the sectors have equal angles and extend out to represent the value of the sector[/intense_icon_list_item]
[intense_icon_list_item type="ok"]Pie - a circular chart with sectors that vary in size depending on the value of the sector[/intense_icon_list_item]
[intense_icon_list_item type="ok"]Doughnut - a pie chart with a hollowed out center[/intense_icon_list_item]
[/intense_icon_list]

For each chart, you can control the width and height. The charts can also be animated when they come into view. There are also options to add text or an icon in the middle of the chart. This is most useful for the doughnut chart.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
[intense_row padding_top="0"]
[intense_column size="6"]
<h2>Line</h2>
[intense_chart width="450" height="200" labels="January,February,March,April,May,June,July" type="line"]
[intense_chart_data fill_color="rgba(220,220,220,0.5)" stroke_color="rgba(220,220,220,1)" point_color="rgba(220,220,220,1)" point_stroke_color="#fff" values="65,59,90,81,56,55,40" /]
[intense_chart_data fill_color="rgba(151,187,205,0.5)" stroke_color="rgba(151,187,205,1)" point_color="rgba(151,187,205,1)" point_stroke_color="#fff" values="28,48,40,19,96,27,100" /]
[/intense_chart]
[/intense_column]
[intense_column size="6"]
<h2>Bar</h2>
[intense_chart width="450" height="200" labels="January,February,March,April,May,June,July" type="bar"]
[intense_chart_data fill_color="rgba(220,220,220,0.5)" stroke_color="rgba(220,220,220,1)" point_color="rgba(220,220,220,1)" point_stroke_color="#fff" values="65,59,90,81,56,55,40" /]
[intense_chart_data fill_color="rgba(151,187,205,0.5)" stroke_color="rgba(151,187,205,1)" point_color="rgba(151,187,205,1)" point_stroke_color="#fff" values="28,48,40,19,96,27,100" /]
[/intense_chart]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section]
[intense_row padding_top="0"]
[intense_column size="6"]
<h2>Radar</h2>
[intense_chart width="450" height="300" labels="January,February,March,April,May,June,July" type="radar"]
[intense_chart_data fill_color="rgba(220,220,220,0.5)" stroke_color="rgba(220,220,220,1)" point_color="rgba(220,220,220,1)" point_stroke_color="#fff" values="65,59,90,81,56,55,40" /]
[intense_chart_data fill_color="rgba(151,187,205,0.5)" stroke_color="rgba(151,187,205,1)" point_color="rgba(151,187,205,1)" point_stroke_color="#fff" values="28,48,40,19,96,27,100" /]
[/intense_chart]
[/intense_column]
[intense_column size="6"]
<h2>Polar Area</h2>
[intense_chart width="450" height="300" type="polararea"]
[intense_chart_data values="30,90,24,58,82,8" colors="#D97041,#C7604C,#21323D,#9D9B7F,#7D4F6D,#584A5E" /]
[/intense_chart]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
[intense_row padding_top="0"]
[intense_column size="6"]
<h2>Pie</h2>
[intense_chart width="450" height="200" type="pie"]
[intense_chart_data values="30,50,100" colors="#F38630,#E0E4CC,#69D2E7,#949FB1,#4D5360,#584A5E" /]
[/intense_chart]
[/intense_column]
[intense_column size="6"]
<h2>Doughnut</h2>

[intense_chart width="450" height="200" type="doughnut" animation_easing="easeOutBounce"]
[intense_chart_data values="30,50,100,40,120" colors="#F7464A,#E2EAE9,#D4CCC5,#949FB1,#4D5360,#584A5E" /]
[/intense_chart]
You can control the size of the cutout in the middle of the doughnut chart. If a large cutout is used along with two values, the doughnut chart is good for showing some sort of status (ex. percent done, amount used, free space, etc.).
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section border_bottom="1px solid #ededed"]
<h2>Chart With Text or Icon</h2>

These examples show the doughnut chart with text or an icon in the middle.
[intense_row padding_top="0"]
[intense_column size="3"]
[intense_chart width="270" height="200" type="doughnut" animation_easing="easeInSine" animation_steps="100" percentage_inner_cutout="85" text="70%"]
[intense_chart_data values="70,30" colors="#1a8be2,#E2EAE9" /]
[/intense_chart]
[/intense_column]
[intense_column size="3"]
[intense_chart width="270" height="200" type="doughnut" animation_easing="easeInSine" animation_steps="100" percentage_inner_cutout="85" icon="heart" color="#F7464A"]
[intense_chart_data values="50,50" colors="#F7464A,pink" /]
[/intense_chart]
[/intense_column]
[intense_column size="3"]
[intense_chart width="270" height="200" type="doughnut" animation_easing="easeInSine" animation_steps="100" percentage_inner_cutout="85" text="1/4"]
[intense_chart_data values="25,75" colors="#1a8be2,#E2EAE9" /]
[/intense_chart]
[/intense_column]
[intense_column size="3"]
[intense_chart width="270" height="200" type="doughnut" animation_easing="easeInSine" animation_steps="100" percentage_inner_cutout="85" text="Power"]
[intense_chart_data values="90,10" colors="#40ba18,#E2EAE9" /]
[/intense_chart]
[/intense_column]
[/intense_row]
[/intense_content_section]

[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]