flaurite's public fiddles
-
7xntofec
No-Library (pure JS), HTML, CSS, JavaScript
-
u4z1La6k
No-Library (pure JS), HTML, CSS, JavaScript
-
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. <h2>Zoomable Value Axis</h2> Besides category axis, value axis can also be zoomable - both using vertical scrollbar and cursor. In this demo value-zooming with cursor is not enabled, as we recommend using it for one direction zooming only.
-
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.
-
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.
-
ta3ev0sh
No-Library (pure JS), HTML, CSS, JavaScript
-
duygnp6x
No-Library (pure JS), HTML, CSS, JavaScript
-
2Lwgkb5d
No-Library (pure JS), HTML, CSS, JavaScript
-
gp5c2rxv
No-Library (pure JS), HTML, CSS, JavaScript
-
dbg8Lw46
No-Library (pure JS), HTML, CSS, JavaScript
-
GANTT Chart
GANTT chart is a modification of a bar chart, showing several segments, not necessarily attached to each other. It can be used to mark spans of time, date or values. The most obvious and wide use for GANTT chart is to show person's or team's tasks span over time as well as relationships between those tasks. This particular demo uses hours as segment <code>duration</code> parameter. The units used in it are defined by <a href="http://docs.amcharts.com/3/javascriptcharts/AmGanttChart#period"><code>period</code></a> parameter. For a GANTT chart which uses absolute dates for segment start and end, check out <a href="https://www.amcharts.com/demos/gantt-chart-dates/">this demo</a>.
-
Simple markers
No-Library (pure JS), HTML, CSS, JavaScript
-
Simple Markers
No-Library (pure JS), HTML, CSS, JavaScript
-
usnty130
No-Library (pure JS), HTML, CSS, JavaScript