JSFiddle

Rohit's public fiddles

  • pe2h42ex

    jQuery 3.3.1, HTML, CSS, JavaScript

  • x2r9fdxn

    jQuery 3.3.1, HTML, CSS, JavaScript

  • uw9b7rkf

    jQuery 3.3.1, HTML, CSS, JavaScript

  • ab9bjwt6

    jQuery 3.3.1, HTML, CSS, JavaScript

  • Multiselect dropdown

    Multiselect dropdown items

  • Column With Rotated Series

    As you might have a lot of series on the axis, labels can be rotated so that they would all fit. You can rotate them by any degree you want. In case you don't want rotated labels, they can wrap or some of the labels might be omitted. <h2>Animated columns</h2> The columns can be animated, we offer several animation effects to choose. Animation can be sequenced (one column appears after another) or they can all grow together. Besides the height, opacity can also be animated - the columns can fade-in.

  • w5chqn1n

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

  • Multiselect dropdown

    Multiselect dropdown items

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

  • 68mrLn4h

    jQuery 3.2.1, HTML, CSS, JavaScript

  • Header Fade while scroll

    Fade the header while scrolling

  • or4kzuaf

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

  • 3D Column Chart

    Columns and bars in our charts can have a 3D look. You can adjust depth and angle to make them more deep - click EDIT button and play with <code>depth3D</code> and <code>angle</code> properties. <h2>Hidden Chart Cursor adds a better user experience</h2> If you check the source of this sample, you will notice that it has a <a href="http://docs.amcharts.com/3/javascriptcharts/ChartCursor">ChartCursor</a> added. Although it is invisible and zooming is disabled (as we don't need to zoom this chart). We added it for another reason - when you move the mouse over the plot area, the balloon is displayed next to the most close column, even if you are not hovering directly over it. This makes it easier for your users to check real value of the column. We especially recommend using this trick with line graphs - without cursor, you would need to roll-over relatively small bullet to see the balloon, and with cursor you just move the mouse over plot area.

  • Tree in html

    Tree structure in html

  • Tree in html

    Tree structure in html

  • 25rwey8h

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

  • 9fsk0bsh

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

  • ef9ob916

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

  • 2pnp53wt

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

  • Tree in html

    Tree structure in html