JSFiddle

Rogério's public fiddles

  • 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.

  • Funnel chart

    Funnel charts are often used to represent stages in a sales process and show the amount of potential revenue for each stage. By default, the height of a slice represents it's value. However you might want the area of a slice to represent value. In this case you should add <code>"valueRepresents":"area"</code> property to the chart's config. The height and width of a neck is controlled by <code>neckWidth</code> and <code>neckHeight</code> properties. <h2>Funnel chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our Funnel chart supports patterns. There are several pre-built patterns in our package or you can easily build your own fancy patterns and use them with our charts.

  • Stacked Area

    Our Serial chart supports stacked or <a href="/demos/100-stacked-area-chart/">100% stacked</a> areas. Technically, area graph is just a regular line graph with fill opacity set to some bigger than 0 value. This means you can easily switch from area to line only by modifying this property. And even more - you can simply change this area to smoothed-area or step-area chart by changing a single <strong>type</strong> property of <a href="http://docs.amcharts.com/3/javascriptcharts/AmGraph">AmGraph</a>. <h2>Hidden graphs</h2> Legend of our charts allows showing/hiding graphs by clicking on the legend item you want to hide or show. You can also define which of the graphs are hidden by default - notice, the "cars" graph is hidden at the moment the chart is loaded and you can show it if you click it's legend marker. <h2>Vertical lines and fills</h2> You can fill the area between two categories with some color, add annotation to it using Guides. The same guides are used to create a single-lines to mark some event. Guides can be added to both category and value axes.

  • 100% Stacked Column Chart

    You might noticed that data labels of smallest columns are not displayed. This is done automatically - chart checks if there is enough space for the label and does not display it if it's not. <h2>Hiding graphs with a legend</h2> The legend of the chart has a build-in feature (you can disable it, of course), which allows hiding graphs. Simply click on any legend entry and the chart will be redrawn, but without the graph you just clicked on. This is especially handy feature if you have a lot of graphs on your chart. To show this graph again, just click on the marker one more time.

  • Flexbox

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

  • AMChrats Mostrar valores pequenos

    author(s): Rogério Saraceni

  • Highcharts (Link Categoria Popup)

    author(s): Rogério Saraceni

  • Highcharts (Link Categoria target_blank)

    author(s): Rogério Saraceni

  • Highcharts (Link Categoria)

    author(s): Rogério Saraceni