JSFiddle

Dug's public fiddles

  • Step Line Without Risers

    <h2>Step start and end position control</h2> You can control exactly where within category/date each step starts and ends using series' <code>startLocation</code> and <code>endLocation</code>. [amb href="https://www.amcharts.com/docs/v4/tutorials/taming-the-step-line-series/"]More information about step series[/amb] <h2>Step series without risers</h2> Step line series can display just horizontal lines, without vertical connectors. For that just set its <code>noRisers</code> property to <code>false</code>. <h2>Series in a scrollbar</h2> The scrollbar used for zooming of the chart can depict a "small version" of chart's actual series. More than one series can be added to the scrollbar. [amb href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Scrollbar_with_preview"]More information about XY chart scrollbar[/amb]

  • 5nem3aox

    Sheet view With Sidebar

  • wsmedrt8

    Sheet view With Sidebar

  • 49f0trnh

    Sheet view With Sidebar

  • njb4og9y

    Sheet view With Sidebar

  • s0uLt7g6

    Sheet view With Sidebar

  • h5ejz1ua

    Sheet view With Sidebar

  • 2r9vkjy3

    Sheet view With Sidebar

  • yxn890b3

    Sheet view With Sidebar

  • gscor3zj

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

  • 8hconL7v

    Bootstrap 3 Jquery Yakabox

  • 9qrs0omc

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

  • L3z4j1oc

    Current Trends

  • Line Chart with Scroll and Zoom

    All our serial charts (and actually XY chart too) can be zoomed-in, scrolled and panned. All you have to do is add a scrollbar to the chart. This is one of the most important features of charts, especially when dealing with large data sets. <h2>Right approach to zooming</h2> When displaying a zoomed-in chart we do recalculate min/max of the selected period (although you can disable this if you want) and we draw a graph of only selected period. This feature allows you to understand the data of selected period easily, solves performance issues. A lot of charting libraries simply draw one big image and then the scrolling is done by simply moving this image. This is very wrong approach in most cases, as a) performance is poor b) imagine - you have daily data of let's say 5 years and your values increased a lot during this time. If min/max of zoomed-in period is not recalculated, when zoomed to early periods, you will only see some smooth line close to the axis and a lot of empty space above it. This graph won't tell a lot for your users. <h2>Intelligent date-placing algorithm</h2> Try to zoom out this chart - you will see that the grid lines are placed at the beginning of the months (they will always show the first day of the month), at the place where new year started, the date format is different - instead of the month name you can see the year number. You can modify date formats in any way you need and set a different date format for each period. Try to scroll the chart - you will see that the dates are always kept the same, they do not fluctuate and scrolling is done smoothly. Now, go to our competitors, find a date based chart (if they have one) and try to perform all these tricks. We bet you will notice the difference. <h2><span style="line-height: 1.42857143;">Zooming or scrolling chart with mouse wheel</span></h2> You can zoom in and out the chart with mouse wheel. If you press shift while rotating it, the chart will be scrolled. You can make it opposite - zoom if shift is pressed and scroll if it isn't. <strong>mouseWheelZoomEnabled</strong> and <strong>mouseWheelScrollEnabled</strong> properties are responsible for this. &nbsp; Our charts also supports zooming of value axis. Check<a href="http://www.amcharts.com/demos/date-based-data/"> this demo</a> to see this in action.

  • Line Chart with Scroll and Zoom

    All our serial charts (and actually XY chart too) can be zoomed-in, scrolled and panned. All you have to do is add a scrollbar to the chart. This is one of the most important features of charts, especially when dealing with large data sets. <h2>Right approach to zooming</h2> When displaying a zoomed-in chart we do recalculate min/max of the selected period (although you can disable this if you want) and we draw a graph of only selected period. This feature allows you to understand the data of selected period easily, solves performance issues. A lot of charting libraries simply draw one big image and then the scrolling is done by simply moving this image. This is very wrong approach in most cases, as a) performance is poor b) imagine - you have daily data of let's say 5 years and your values increased a lot during this time. If min/max of zoomed-in period is not recalculated, when zoomed to early periods, you will only see some smooth line close to the axis and a lot of empty space above it. This graph won't tell a lot for your users. <h2>Intelligent date-placing algorithm</h2> Try to zoom out this chart - you will see that the grid lines are placed at the beginning of the months (they will always show the first day of the month), at the place where new year started, the date format is different - instead of the month name you can see the year number. You can modify date formats in any way you need and set a different date format for each period. Try to scroll the chart - you will see that the dates are always kept the same, they do not fluctuate and scrolling is done smoothly. Now, go to our competitors, find a date based chart (if they have one) and try to perform all these tricks. We bet you will notice the difference. <h2><span style="line-height: 1.42857143;">Zooming or scrolling chart with mouse wheel</span></h2> You can zoom in and out the chart with mouse wheel. If you press shift while rotating it, the chart will be scrolled. You can make it opposite - zoom if shift is pressed and scroll if it isn't. <strong>mouseWheelZoomEnabled</strong> and <strong>mouseWheelScrollEnabled</strong> properties are responsible for this. &nbsp; Our charts also supports zooming of value axis. Check<a href="http://www.amcharts.com/demos/date-based-data/"> this demo</a> to see this in action.

  • v05dje7c

    Current Trends

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

  • 5yhurbv8

    buttons

  • 76k8vet1

    buttons

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