Mustafa's public fiddles
-
amCharts Comparison Micro Chart
No-Library (pure JS), HTML, CSS, JavaScript
-
rL49r4mm
amCharts Comparison Chart II
-
obrdaumc
amCharts Comparison Chart
-
Comparison Micro Chart
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
amChart Test
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
Delta Chart
Here is an excerpt from Wikipedia: A waterfall chart is a form of data visualization that helps in determining the cumulative effect of sequentially introduced positive or negative values. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge. <h2>Making Waterfall with amCharts</h2> Although we don't have a special dedicated waterfall chart, you can easily do it with a regular column chart. Besides a regular value, column graph can have open value specified, which defines at which value column should start. And for the horizontal lines we used another great feature we have - <a href="http://docs.amcharts.com/3/javascriptcharts/TrendLine">Trend Lines</a>.
-
Horizontal Bullet Micro Chart
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
Long Labels
No-Library (pure JS), HTML, CSS, JavaScript
-
Scatter Chart
A bubble chart is a type of chart that displays three dimensions of data by position and size of the bullet. The main difference of bubble chart from serial chart is that both x and y axes are numeric - serial chart usually has one axis with strings or dates. <h2>Main features</h2> Our Bubble or XY chart is extremely powerful. Users can <a href="/demos/zoomable-bubble-chart/">zoom and scroll</a> the chart, it does support any number of value axes. We offer a number of predefined bullets - circle, rectangle, triangle, bubble, diamond or you can use custom images as bullets. Our bubble chart supports <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a> and <a href="http://docs.amcharts.com/3/javascriptcharts/TrendLine">Trend Lines</a>. With special bullet types <strong>xError</strong> and <strong>yError</strong> you can build <a href="/demos/xy-error-chart/">XY Error chart</a>.
-
Bubble Chart
A bubble chart is a type of chart that displays three dimensions of data by position and size of the bullet. The main difference of bubble chart from serial chart is that both x and y axes are numeric - serial chart usually has one axis with strings or dates. <h2>Main features</h2> Our Bubble or XY chart is extremely powerful. Users can <a href="/demos/zoomable-bubble-chart/">zoom and scroll</a> the chart, it does support any number of value axes. We offer a number of predefined bullets - circle, rectangle, triangle, bubble, diamond or you can use custom images as bullets. Our bubble chart supports <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a> and <a href="http://docs.amcharts.com/3/javascriptcharts/TrendLine">Trend Lines</a>. With special bullet types <strong>xError</strong> and <strong>yError</strong> you can build <a href="/demos/xy-error-chart/">XY Error chart</a>.
-
Pie Chart
No-Library (pure JS), HTML, CSS, JavaScript
-
Lollipop Chart
Chart example for Hichert IBCS principles.
-
Donut Chart
No-Library (pure JS), HTML, CSS, JavaScript
-
Area Chart
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
100% Stacked Bar Chart
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
100% Stacked Column Chart
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
Stacked Bar Chart
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
Stacked Column Chart
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
Bar Combination
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.
-
Column Combination
With amCharts library you can easily produce layered column or bar chart with any number of layers. The trick is simple, you should set <strong>clustered</strong> property of a graph to <strong>false</strong>. Besides that you might want to make columns of the graph more narrow - set columnWidth to a smaller than default value, like 0.5.