February 21st, 2017

Charts and Graphs

Google Charts

Theme comes with Google Charts and Raphael JS Graphs with friendly UI. Create chart and put it in a place everywhere you need it with Visual Composer. Our gallery provides a variety of charts that are optimized to address your data visualization needs. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required. Adding these charts to your page can be done easy with Visual Composer.

Large Data

Create incredibly difficult charts with unlimited number of indexes (x & y).

Line Chart

A line chart that is rendered within the browser using SVG or VML. Displays tips when hovering over points.

Long Data

Create incredibly difficult charts with unlimited number of indexes (x & y).

3D Pie Chart

A pie chart (or a circle graph) is a circular chart divided into sectors, illustrating numerical proportion. In a pie chart, the arc length of each sector (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair’s Statistical Breviary of 1801.

Pie charts are very widely used in the business world and the mass media.[3] However, they have been criticized,[4] and many experts recommend avoiding them,[5]
[8] pointing out that research has shown it is difficult to compare different sections of a given pie chart, or to compare data across different pie charts. Pie charts can be replaced in most cases by other plots such as the bar chart.

Smooth Line Chart

Line charts can reflect anything. However to display it more dynamically and elegance you might need to use Smooth Line Chart.


A candlestick chart is used to show an opening and closing value overlaid on top of a total variance. Candlestick charts are often used to show stock value behavior. In this chart, items where the opening value is less than the closing value (a gain) are drawn as filled boxes, and items where the opening value is more than the closing value (a loss) are drawn as hollow boxes.

Five or more columns, where the first column defines X-axis values or group labels, and each multiple of four data columns after that defines a different series.

  • Col 0: String (discrete) used as a group label on the X axis, or number, date, datetime or timeofday (continuous) used as a value on the X axis.
  • Col 1: Number specifying the low/minimum value of this marker. This is the base of the candle’s center line. The column label is used as the series label in the legend (while the labels of the other columns are ignored).
  • Col 2: Number specifying the opening/initial value of this marker. This is one vertical border of the candle. If less than the column 3 value, the candle will be filled; otherwise it will be hollow.
  • Col 3: Number specifying the closing/final value of this marker. This is the second vertical border of the candle. If less than the column 2 value, the candle will be hollow; otherwise it will be filled.
  • Col 4: Number specifying the high/maximum value of this marker. This is the top of the candle’s center line.
  • Col 5 [Optional]: A tooltip for the candlestick.

Backend & UI

Take a look this short clip how to manage charts with our theme admin UI.

Backend & UI


You don’t need more add large code to reach required results. Our shortcode will create it for you with unique ID. Unique ID means that you may use unlimited count of charts, mixing it on a single page.

Need some proofs?

  jQuery(document).ready(function () {
      var chart_12_width = jQuery("#chart_12").parent().width();
      jQuery("#chart_12").css("width", chart_12_width + "px");
  google.load("visualization", "1", {
      packages: ["corechart"]

  function drawChart() {
      var data = google.visualization.arrayToDataTable([
          ["", "", "", "", ""],
          ["Mon", 5, 15, 5, 10],
          ["Tue", 10, 12, 30, 19],
          ["Wed", 20, 24, 18, 26],
          ["Thu", 30, 33, 12, 31],
          ["Fri", 25, 20, 20, 20]
      var options = {
          title: "Finances",
          vAxis: {
              title: ""
          hAxis: {
              title: ""
          is3D: true,
          backgroundColor: "transparent",
          pointSize: 4,
          legend: "none",

      var chart = new google.visualization.CandlestickChart(document.getElementById("chart_12"));
      chart.draw(data, options);
© 2014 IrishMiss Limited
Proudly powered by IrishMiss Wordpress Themes

5 Cromac Avenue, Belfast, Northern Ireland
Phone: (305) 555-4446 Fax: (305) 555-4447

Layout style

Light Presets
Full Width Images
Light Patterns
Dark Patterns
Dark Presets

Click here to preview Admin UI

Note: demo page showing only basic features which may help you imagine your website with our theme.

Style Switcher