JSFiddle

pythk's public fiddles

  • Map with Data

    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.

  • Split string into chunks at space

    Splits a string into chunks, but at a space.

  • Pie of a Pie (exploding pie chart)

    Two pie charts, one showing the drill-down data of a selected slice. Click on a slice of a big pie to explode/expand the slice. This chart type is sometimes called exploding pie chart.

  • Donut chart

    Donut Chart (also known as Doughnut chart) is a variation on a <a href="https://www.amcharts.com/demos/simple-pie-chart/">Pie chart</a> except it has a round hole in the center which makes it look like a donut, hence the name. This empty space can be used to <a href="https://www.amcharts.com/demos/animated-time-line-pie-chart/">display additional data</a>. <h2>Configurable inner radius</h2> To make a donut chart out of a regular pie chart, we simply need to set <code>innerRadius</code> property of the chart. It can either take relative percent value, or fixed pixel radius.

  • Sorted bar chart

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

  • JSON Query Parser

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

  • Map with pulsating bullets

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

  • fcp43zbt

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

  • Tag cloud

    Tag cloud (or word cloud, or weighted list) is a visual representation of text data where tag size shows the frequency of the tag in some data set. Learn how to build Tag clouds with amCharts 4 in <a href="https://www.amcharts.com/docs/v4/chart-types/wordcloud/">this extensive article</a>.

  • Nested donut chart

    Nested donut chart (also known as Multi-level doughnut chart, Multi-series doughnut chart) allows you to display multiple series in a single visualization. The series are usually related but represent different categories or slices of data (like the distribution of some category values over different years, etc.) <h2>Support for multiple series</h2> You can add any number of pie series to the pie chart. The chart will automatically nest them dividing available radius between each series, creating nested donuts. [amb href="https://www.amcharts.com/docs/v4/chart-types/pie-chart/#Nested_donut_charts"]More about nested donut charts[/amb]

  • FAIR Solid Gauge - MINI

    Solid Gauge Chart is similar to the <a href="https://www.amcharts.com/demos/angular-gauge/">Angular Gauge Chart</a> and is most commonly used to mimic real-world gauges. The main difference from the Angular Gauge Chart is that the values are displayed by a filled portion of a gauge scale rather than a hand of a mechanical-like gauge.

  • FAIR Solid Gauge - MAXI

    Solid Gauge Chart is similar to the <a href="https://www.amcharts.com/demos/angular-gauge/">Angular Gauge Chart</a> and is most commonly used to mimic real-world gauges. The main difference from the Angular Gauge Chart is that the values are displayed by a filled portion of a gauge scale rather than a hand of a mechanical-like gauge.

  • Vertically stacked axes chart

    The chart above is a regular, single XY chart (although it might look like a multi-panel) chart with two value axes. We have a <a href="https://www.amcharts.com/demos/multiple-value-axes/">similar chart here</a>. The only real difference is that instead of arranging Y axes side by side we stack them one above another. So the result is quite the same as a multiple-panel chart with shared x-axis. And this is done by simply setting: <code>chart.leftAxesContainer.layout = "vertical"</code> We told you, amCharts 4 was awesome! For more gritty details about stacked, examples, and code visit <a href="https://www.amcharts.com/docs/v4/tutorials/stacked-axes/">this tutorial</a>.

  • Collapsible force-directed tree

    Force Directed Tree is a special kind of chart used to display of multi-item data related in hierarchical, linear or mixed way, as a series of linked bubbles. This demo shows how to implement collapsing and expanding of tree nodes in a force-directed tree. For a deep dive into force-directed tree charts check out the <a href="https://www.amcharts.com/docs/v4/chart-types/force-directed/">Anatomy of Force Directed Tree</a> in amCharts 4 documentation.

  • Waterfall Chart

    Waterfall Chart (also known as Flying bricks chart, Mario chart, Cascade chart) is most frequently used to display the effect of the series of consecutive positive or negative events on the initial value. <h2>Mixed series types</h2> amCharts 4 allows mixing a number of different series on the same chart. This particular Waterfall chart is enabled by combining a floating Column series and a no-riser Step series. Flexible line start and end location setting enables fine-tuning connector line position for perfect fit. [amcharts2_button href="https://www.amcharts.com/docs/v4/tutorials/building-a-waterfall-chart/"]More about making a waterfall chart[/amcharts2_button]

  • Flower chart

    Flower chart, Also known as filled radar chart.

  • Gauge with bands

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

  • Live data

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

  • Radar Chart

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

  • Radar Chart

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