JSFiddle

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.