JSFiddle

Rogério's public fiddles

  • Adding chart title and subtitle

    No-Library (pure JS), HTML, CSS, JavaScript

  • Column and Line mix

    Our serial chart supports a lot of graph types: line, area, smoothed line, step, column, candlestick, OHLC. All these types can go together in one chart - line with columns, columns with smoothed lines and similar. The real difference of these graphs is one property - <strong>type</strong>, except candlestick and OHLC graphs, of course, as they require 4 data fields instead of one. <h2>Use dashed lines for forecasts</h2> It's quite common that a line or column outline changes to dashed line/outline for the date which is not available yet, but could be forecast. It's very easy to do this with our charts. You simply set <strong>dashLengthField</strong> for your graph and then set the dash length in your data, at a point where graph should become dashed.

  • Chart Line

    Sistemas Terral e Gente Mais. Chart em um bloco pequeno e forçando mostrar o valor na label text

  • Clustered Bar Chart

    Clustered bar chart is a chart when bars of a different graphs are placed next to each another, and not stacked one on another, so basically it's the most simple bar chart with two graphs in it. <h2>Bar chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our bar or column chart supports patterns. There are several pre-build patterns in our package or you can easily build your own fancy patterns and use them with our charts. <h2>Hand-drawn style</h2> Click on CHALK theme above the chart - the bars will gain hand-drawn style, with non-straight lines. This is a very special feature of amCharts!

  • 0jwe6zx9

    No-Library (pure JS), HTML, CSS, JavaScript

  • Custom HTML Elements as Map Markers

    This example demonstrates how you can use JavaScript Maps' API functions and events to easily add custom-styled HTML elements as map markers. Each map marker is a separate <code>&lt;div&gt;</code> element with two child elements. Styled using CSS. Markers are placed into map's container and globally-positioned using <code>top</code> and <code>left</code> style properties. The code uses JavaScript Maps' built-in API functions <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#longitudeToX"><code>longitudeToX()</code></a> and <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#latitudeToY"><code>latitudeToY()</code></a> to translate marker's longitude and latitude into screen coordinates.

  • Custom HTML Elements as Map Markers

    This example demonstrates how you can use JavaScript Maps' API functions and events to easily add custom-styled HTML elements as map markers. Each map marker is a separate <code>&lt;div&gt;</code> element with two child elements. Styled using CSS. Markers are placed into map's container and globally-positioned using <code>top</code> and <code>left</code> style properties. The code uses JavaScript Maps' built-in API functions <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#longitudeToX"><code>longitudeToX()</code></a> and <a href="http://docs.amcharts.com/3/javascriptmaps/AmMap#latitudeToY"><code>latitudeToY()</code></a> to translate marker's longitude and latitude into screen coordinates.

  • Updating balloon text with balloonFunction

    No-Library (pure JS), HTML, CSS, JavaScript

  • Duration on Value Axis

    As you can see, the chart supports multiple value axes. And in this particular case one of the axes (the right one) displays duration instead of regular numbers. If you check the data (click EDIT button) you will see that the duration is passed as a simple number. It's the axis which formats the duration in a easily readable string. <h2>Legend can sum and display total values</h2> The chart can accumulate the sum of the values and show it in the legend while the mouse is not hovering over any data point - total number of miles is displayed next to the distance marker in the legend. <h2>Different bullets sizes</h2> Bullets of the same line chart can have different sizes. You can define the size in your data file and add another dimension for your serial chart.

  • Duration on Value Axis

    As you can see, the chart supports multiple value axes. And in this particular case one of the axes (the right one) displays duration instead of regular numbers. If you check the data (click EDIT button) you will see that the duration is passed as a simple number. It's the axis which formats the duration in a easily readable string. <h2>Legend can sum and display total values</h2> The chart can accumulate the sum of the values and show it in the legend while the mouse is not hovering over any data point - total number of miles is displayed next to the distance marker in the legend. <h2>Different bullets sizes</h2> Bullets of the same line chart can have different sizes. You can define the size in your data file and add another dimension for your serial chart.

  • Sunburst chart

    Sunburst Chart or Diagram represents hierarchical relational data in a circular chart. It looks similar to <a href="https://www.amcharts.com/demos/nested-donut-chart/">nested donut charts</a>, however, the hierarchical nature of the Sunburst means that each level represents detalization of the previous one. In other words, children slices on each level comprise the whole of the parent slice.

  • Trend Lines

    Trend lines are straight lines from one given category / value axis point to another. Trend lines are used to indicate the general changes over time, also as technical indicators in financial charts. In case you need a possibility to allow your users draw the trend lines, check <a href="/demos/drawing-trend-lines/">this Stock Chart example</a>. <h2>Infinite fills or lines</h2> For infinite lines or fills, crossing all plot area without start/end horizontally or vertically (notice the horizontal fill from 10 to 16), you can use <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a>.

  • Line With Custom Bullets

    Besides a bunch of predefined bullets (our charts support round, square, triangle, bubble, diamond bullet shapes) you can use your own images as bullets of your graphs. You can set one bullet for all the graph and also use individual bullets for specific data points to indicate some difference of these plots.

  • Reversed Value Axis

    Values on value axis can be reversed - the smallest value will be on top and the biggest - in the bottom. This is mostly used to show the positions of sport events and similar. <h2>Smart legend markers</h2> Instead of displaying rectangle or some other shape, the legend can automatically create legend marker which would repeat the graph style - use it's line color/thickness and bullet style.

  • Line With Custom Bullets

    Besides a bunch of predefined bullets (our charts support round, square, triangle, bubble, diamond bullet shapes) you can use your own images as bullets of your graphs. You can set one bullet for all the graph and also use individual bullets for specific data points to indicate some difference of these plots.

  • Reversed Value Axis

    Values on value axis can be reversed - the smallest value will be on top and the biggest - in the bottom. This is mostly used to show the positions of sport events and similar. <h2>Smart legend markers</h2> Instead of displaying rectangle or some other shape, the legend can automatically create legend marker which would repeat the graph style - use it's line color/thickness and bullet style.

  • Column and Line mix

    Our serial chart supports a lot of graph types: line, area, smoothed line, step, column, candlestick, OHLC. All these types can go together in one chart - line with columns, columns with smoothed lines and similar. The real difference of these graphs is one property - <strong>type</strong>, except candlestick and OHLC graphs, of course, as they require 4 data fields instead of one. <h2>Use dashed lines for forecasts</h2> It's quite common that a line or column outline changes to dashed line/outline for the date which is not available yet, but could be forecast. It's very easy to do this with our charts. You simply set <strong>dashLengthField</strong> for your graph and then set the dash length in your data, at a point where graph should become dashed.

  • Line With Custom Bullets

    Besides a bunch of predefined bullets (our charts support round, square, triangle, bubble, diamond bullet shapes) you can use your own images as bullets of your graphs. You can set one bullet for all the graph and also use individual bullets for specific data points to indicate some difference of these plots.

  • Column and Line mix

    Our serial chart supports a lot of graph types: line, area, smoothed line, step, column, candlestick, OHLC. All these types can go together in one chart - line with columns, columns with smoothed lines and similar. The real difference of these graphs is one property - <strong>type</strong>, except candlestick and OHLC graphs, of course, as they require 4 data fields instead of one. <h2>Use dashed lines for forecasts</h2> It's quite common that a line or column outline changes to dashed line/outline for the date which is not available yet, but could be forecast. It's very easy to do this with our charts. You simply set <strong>dashLengthField</strong> for your graph and then set the dash length in your data, at a point where graph should become dashed.

  • Line With Custom Bullets

    Besides a bunch of predefined bullets (our charts support round, square, triangle, bubble, diamond bullet shapes) you can use your own images as bullets of your graphs. You can set one bullet for all the graph and also use individual bullets for specific data points to indicate some difference of these plots.