Charst & Graphs

Scatter Chart

A scatter chart that is rendered within the browser using SVG or VML. Displays tips when hovering over points. A scatter chart is used to map correlation between sets of numbers.

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]
[6]
[7]
[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.

Candlestick

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.

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"]
  });
  google.setOnLoadCallback(drawChart);

  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);
  }