JSFiddle

Rogério's public fiddles

• Pie Chart With Legend

  Pie chart can display titles and values of slices in the legend. Our legend has a great feature - if you click on legend entry, the slice will be hidden or shown. This might gives additional value for data analysis, as when hidden, slice is excluded when calculating percent values. The position of legend can be easily adjusted.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Simple Column Chart

  If you take a close look at this chart, you will notice that grid lines are above the columns - equally dividing them into segments. This is an optional feature, of course. It allows you creating the charts close to the ones described by famous data visualization guru, <a href="http://www.edwardtufte.com/">Edward Tufte</a>, in his book "The Visual Display of Quantitative Information". <h2>From columns to bars - one simple step</h2> Click EDIT button on top of the chart, and add this text to the source (anywhere within curly brackets): <strong>"rotate":true,</strong>. Run the script and... The columns should became bars, category axis should be vertical now and value axis - horizontal! This is the only property you change to make this trick. All our Serial charts can be rotated in the same way.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Simple Column Chart

  If you take a close look at this chart, you will notice that grid lines are above the columns - equally dividing them into segments. This is an optional feature, of course. It allows you creating the charts close to the ones described by famous data visualization guru, <a href="http://www.edwardtufte.com/">Edward Tufte</a>, in his book "The Visual Display of Quantitative Information". <h2>From columns to bars - one simple step</h2> Click EDIT button on top of the chart, and add this text to the source (anywhere within curly brackets): <strong>"rotate":true,</strong>. Run the script and... The columns should became bars, category axis should be vertical now and value axis - horizontal! This is the only property you change to make this trick. All our Serial charts can be rotated in the same way.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 9pdjgbu8

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Sebastian Bochan

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Logarithmic Scale

  For data, which grows exponentially you might need logarithmic scale axis. This is quite often used in financial charts, to show the grow of stocks over a long period. The use of the logarithms of the values rather than the actual values reduces a wide range to a more manageable size. <h2>Using guides for horizontal or vertical lines</h2> Both value and category axis can display guides - straight infinite lines, possibly with text annotations next to them. You can use this feature to show average values, mark events, color some value ranges to indicate a possible value fluctuation and more.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Step Line Chart

  The Step line chart type is similar to regular line chart, but it does not use the shortest distance to connect two data points. Instead, this chart type uses vertical and horizontal lines to connect the data points in a series forming a step-like progression. You can easily make Step-area chart by simply setting opacity of a fill to some bigger than zero value. <h2>Axis labels - both inside and outside</h2> Value /category labels of our axes can be displayed both outside and inside chart's plot area. This might save some expensive area, if you need it.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Stacked Column Chart

  Our Serial chart can stack any graphs of the same kind - columns, bars, lines, step lines. They can be stacked in a regular way or 100%, when values are recalculated to percent values. <h2>Themes - a real help for developer</h2> View the source of the chart by clicking EDIT button. You will notice, that not a single color is defined in it. Now, if you click themes buttons on top of the chart, you will see that the chart is changing colors, opacities and evem patterns. All the config of the chart is stored in the theme file which is applied when you click a button. This feature allows you to apply a theme for all your charts on a web site, and you will be sure that they will meet the same design. We offer several themes for your to choose, and you can easily modify and adjust them for your needs. And of course, you can still set any property as an exception in the chart config file.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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!

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 3D Funnel chart

  Funnel chart can have 3D look. To achieve this, you should set <code>depth3D</code> and <code>angle</code> properties to some bigger than 0 values. Note, if you do this <code>neckHeight</code> will automatically become 0 (neck won't be displayed).

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 095kc163

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• yp0xvez3

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

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• ◀︎
• 3
• 4
• 5
• ▶︎
• 6