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.
[im_messagebox title=”Google Charts” container=” 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. ” frame_color=”rgba(128,128,128,.2)” frame_width=”4″ animation=”bottom-to-top”]
[im_googlechart type=”PointsChart” title=”Point Charts” h_axis_title=”x Axis Title” v_axis_title=”y Axis Title” chart_h=”450″ multiplier=”20″ h_axis_marks=”2009, 2010, 2011, 2012, 2013″ indicator_name_1=”IBM” indicator_values_1=”10.5,50.5,32.5,24,33.5″ indicator_name_2=”Apple” indicator_values_2=”10,72,82,94,103″ indicator_name_3=”Google” indicator_values_3=”20,52,62,74,83″ indicator_name_4=”Facebook” indicator_values_4=”26,42,62,64,63″ indicator_name_5=”Microsoft” indicator_values_5=”10.5,12.5,32.5,24.5,33.5″ indicator_name_6=”Dell” indicator_values_6=”22,32,20.5,24.5,33.5″ indicator_name_7=”Intel” indicator_values_7=”40,42,42,44,53″ indicator_name_8=”HP” indicator_values_8=”30,32,22,24,23.5″ indicator_name_9=”Acer” indicator_values_9=”22,12.5,32,24.5,49″ indicator_name_10=”Asus” indicator_values_10=”20,42,22,54,45″ indicator_name_11=”AMD” indicator_values_11=”8,10,22,24,44.5″ indicator_name_12=”Samsung” indicator_values_12=”50,51,53,52,53″ indicator_name_13=”HTC” indicator_values_13=”11,12,42,24,43″ indicator_name_14=”Arena” indicator_values_14=”10,12,12,14,13″ indicator_name_15=”Cyrix” indicator_values_15=”25,25.5,25,26,26″ indicator_name_16=”Logic” indicator_values_16=”23,50,40,43,13″ indicator_name_17=”Envato” indicator_values_17=”32,48,23,43,40″ indicator_name_18=”TMI” indicator_values_18=”8,8,18,10,12″ indicator_name_19=”MSI” indicator_values_19=”12,8,32,48,56″ indicator_name_20=”DDI” indicator_values_20=”10,12,32,24,33″ animation=”bottom-to-top”]
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).
[im_googlechart type=”PieChart” title=”Linear Charts” h_axis_title=”x Axis Title” v_axis_title=”y Axis Title” chart_h=”420″ multiplier=”2″ h_axis_marks=”1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30″ indicator_name_1=”IBM” indicator_values_1=”10.5,50.5,32.5,24,33.5,10,10.6,11,20,21,10.5,50.5,32.5,24,33.5,10,10.6,11,20,21,10.5,50.5,32.5,24,33.5,10,10.6,11,20,21″ indicator_name_2=”Apple” indicator_values_2=”30.5,50.5,32.5,44,33.5,20,10.6,11,20,21,20.5,50.5,32.5,14,33.5,20,50.6,21,20,21,20.5,40.5,32.5,24,33.5,10,20.6,31,40,61″ indicator_name_3=”Google” indicator_values_3=”20,52,62,74,83″ indicator_name_4=”Facebook” indicator_values_4=”26,42,62,64,63″ indicator_name_5=”Microsoft” indicator_values_5=”10.5,12.5,32.5,24.5,33.5″ indicator_name_6=”Dell” indicator_values_6=”22,32,20.5,24.5,33.5″ indicator_name_7=”Intel” indicator_values_7=”40,42,42,44,53″ indicator_name_8=”HP” indicator_values_8=”30,32,22,24,23.5″ indicator_name_9=”Acer” indicator_values_9=”22,12.5,32,24.5,49″ indicator_name_10=”Asus” indicator_values_10=”20,42,22,54,45″ indicator_name_11=”AMD” indicator_values_11=”8,10,22,24,44.5″ indicator_name_12=”Samsung” indicator_values_12=”50,51,53,52,53″ indicator_name_13=”HTC” indicator_values_13=”11,12,42,24,43″ indicator_name_14=”Arena” indicator_values_14=”10,12,12,14,13″ indicator_name_15=”Cyrix” indicator_values_15=”25,25.5,25,26,26″ indicator_name_16=”Logic” indicator_values_16=”23,50,40,43,13″ indicator_name_17=”Envato” indicator_values_17=”32,48,23,43,40″ indicator_name_18=”TMI” indicator_values_18=”8,8,18,10,12″ indicator_name_19=”MSI” indicator_values_19=”12,8,32,48,56″ indicator_name_20=”DDI” indicator_values_20=”10,12,32,24,33″ animation=”left-to-right”]
[im_googlechart type=”PieChart” title=”Linear Charts” h_axis_title=”x Axis Title” v_axis_title=”y Axis Title” chart_h=”450″ multiplier=”20″ h_axis_marks=”2009, 2010, 2011, 2012, 2013″ indicator_name_1=”IBM” indicator_values_1=”10.5,50.5,32.5,24,33.5″ indicator_name_2=”Apple” indicator_values_2=”10,72,82,94,103″ indicator_name_3=”Google” indicator_values_3=”20,52,62,74,83″ indicator_name_4=”Facebook” indicator_values_4=”26,42,62,64,63″ indicator_name_5=”Microsoft” indicator_values_5=”10.5,12.5,32.5,24.5,33.5″ indicator_name_6=”Dell” indicator_values_6=”22,32,20.5,24.5,33.5″ indicator_name_7=”Intel” indicator_values_7=”40,42,42,44,53″ indicator_name_8=”HP” indicator_values_8=”30,32,22,24,23.5″ indicator_name_9=”Acer” indicator_values_9=”22,12.5,32,24.5,49″ indicator_name_10=”Asus” indicator_values_10=”20,42,22,54,45″ indicator_name_11=”AMD” indicator_values_11=”8,10,22,24,44.5″ indicator_name_12=”Samsung” indicator_values_12=”50,51,53,52,53″ indicator_name_13=”HTC” indicator_values_13=”11,12,42,24,43″ indicator_name_14=”Arena” indicator_values_14=”10,12,12,14,13″ indicator_name_15=”Cyrix” indicator_values_15=”25,25.5,25,26,26″ indicator_name_16=”Logic” indicator_values_16=”23,50,40,43,13″ indicator_name_17=”En
vato” indicator_values_17=”32,48,23,43,40″ indicator_name_18=”TMI” indicator_values_18=”8,8,18,10,12″ indicator_name_19=”MSI” indicator_values_19=”12,8,32,48,56″ indicator_name_20=”DDI” indicator_values_20=”10,12,32,24,33″ animation=”right-to-left”]
vato” indicator_values_17=”32,48,23,43,40″ indicator_name_18=”TMI” indicator_values_18=”8,8,18,10,12″ indicator_name_19=”MSI” indicator_values_19=”12,8,32,48,56″ indicator_name_20=”DDI” indicator_values_20=”10,12,32,24,33″ animation=”right-to-left”]
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.
[im_googlechart type=”CandlestickChart” title=”Finances” chart_h=”410″ h_axis_marks=”Mon, Tue, Wed, Thu, Fri” multiplier=”4″ indicator_values_1=”5,10,20,30,25″ indicator_values_2=”15,12,24,33,20″ indicator_values_3=”5,30,18,12,20″ indicator_values_4=”10,19,26,31,20″ indicator_values_5=”1,10,20,30,28″ disable_legend=”true” animation=”left-to-right”]
[im_googlechart type=”CandlestickChart” title=”Finances” chart_h=”410″ h_axis_marks=”Mon, Tue, Wed, Thu, Fri” multiplier=”4″ indicator_values_1=”5,10,20,30,25″ indicator_values_2=”15,12,24,33,20″ indicator_values_3=”5,30,18,12,20″ indicator_values_4=”10,19,26,31,20″ indicator_values_5=”1,10,20,30,28″ disable_legend=”true” animation=”right-to-left”]
Backend & UI
Take a look this short clip how to manage charts with our theme admin UI.
Engine
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"]
});
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);
}