JSFiddle

amcharts's public fiddles

  • Live search demo

    jQuery (edge), HTML, CSS, JavaScript

  • Flight routes map

    You can create animated, interactive flight routes map showing destinations of flights. You can add icons, bullets, texts on top of the map and connect them with lines. Each icon or area can be clickable and can contain more information inside.

  • Date Based Data

    Our serial chart can accept data as date strings, date objects or time stamps. Dates on category axis are placed at logical intervals using any <a href="/tutorials/formatting-dates/">date format</a> you want. Period beginning can be marked as bold and use a different date format. Your data can be yearly, monthly, daily, hourly, up to milliseconds - the chart will handle any time span. The chart can be zoomed-in or panned, Chart scrollbar can shows a rough graph of all your data and you can use it both to scroll or to zoom the chart to desired position. <h2>Hidden bullets</h2> If you zoom-in the chart to a smaller time span, you will notice that the bullets are displayed. When zooming-out at some point bullets are hidden. This is done to avoid a messy look. You can configure this using <strong>hideBulletsCount</strong> property of the graph. <h2>Chart Scrollbar with a graph inside</h2> In the bottom (it can also be on the top) of the chart you have a chart scrollbar which can be used to zoom-in or zoom-out the chart. This scrollbar can be just a simple one or have a graph inside it to show a rough view of how data changed over the whole period of the data available.

  • Automatically handling negative values in pie chart

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

  • Drawing Trend Lines

    A trend line is formed when a straight line can be drawn between two or more price points. Trend lines are used to judge entry and exit investment timing when trading securities. Our Stock chart allows users drawing trend lines - click on a pencil icon on top-right corner and start drawing. User can draw, then delete the trend lines one by one or all at once. After a trend line is drawn, it stays there even if user zooms the chart to a different time period. Using events, fired when drawing, you can save the trend lines and then display them later.

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

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

  • Drill-down Map

    Click on any continent - the map will be zoomed-in and then a country-level map will be displayed. You can easily create drill-down maps using our product.

  • set initial zoom

    You can create animated, interactive flight routes map showing destinations of flights. You can add icons, bullets, texts on top of the map and connect them with lines. Each icon or area can be clickable and can contain more information inside.

  • date-based value axis

    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.

  • Multiple Data Sets

    Stock chart is a great tool which will save your time. It is designed to work mostly with financial data, but can be used for other purposes as well. Our Stock chart supports multiple data sets and has a ready to use data set selector (at the left, although you can adjust position to your needs). Data sets might be compared one to another. You can compare absolute values or percent values, as this is quite an often practice when dealing with prices of securities or stocks. <h2>Data grouping into longer periods</h2> If you roll-over the chart so that chart cursor would appear, you will notice that each data point represents one day. This is quite expected, as we provided daily data for this chart. Now, zoom-out to "year" view by clicking on the 1 year button at the bottom and roll over the chart again – now, data points jump at 7 days (one week) interval. Again, zoom-out to the max so that all the data is visible. One data point represents one month now! Did we had to provide data for the different periods? No, the chart did all the grouping itself. We recommend reading <a href="/tutorials/understanding-data-grouping-of-stock-chart/">Understanding data grouping tutorial</a> to get more information about this great feature.

  • Updating balloon text with balloonFunction

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

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

  • V3: Pie 3D

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

  • V3: Line with weekends marked

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

  • overlaying two charts

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

  • XY detecting mouse value

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

  • Using column chart to create background fills

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

  • bullets and description at desired point

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

  • V3: Save as image

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