JSFiddle

HARUN's public fiddles

  • Clock

    author(s): Torstein Hønsi

  • Gauge with dual axes

    author(s): Torstein Hønsi

  • Highcharts Demo

    author(s): Torstein Hønsi

  • Highcharts Demo

    author(s): Torstein Hønsi

  • Highcharts Demo

    author(s): Torstein Hønsi

  • Highcharts Demo

    author(s): Torstein Hønsi

  • Multi-panel horizon chart

    This demo shows how you can utilize Stock Chart's multiple synced panels feature to implement a full-fledged Horizon Chart. It uses <a href="http://docs.amcharts.com/3/javascriptstockchart/AmCharts#addInitHandler"><code>addInitHandler()</code></a> function to execute custom code before chart initializes. The code takes raw data (Yahoo Finance) and creates related chart config based on it: <ul> <li>Calculates data for bands and updates the data provider</li> <li>Creates panels and graphs for each symbol</li> </ul>

  • Comparing stock indices (using external data)

    This demo simulates a life-like Stock market chart historical chart. The data displayed in this chart is very realistic to demonstrate the capabilities of the JavaScript Stock Chart. <h2>Comparison of the indices</h2> Showcased here is how the comparison of the two indices (coming from two separate data sources - data sets) works. The main selected data set (MSFT) is shown as a Cadlestick graph to depict Open, High, End and Close values. The compared data set (TXN) is displayed as a line graph to compare the dynamics of the two indices. The chart also contains an additional Volume indicator for main data set. <h2>Stock events</h2> Main data set also displays key events like Dividends or Analyst opinion updates as pins on the chart. Events can take various forms, display additional rollover information. Take a look at <a href="https://www.amcharts.com/demos/stock-events/">this demo</a> for more examples of Stock Event usage. <h2>External data</h2> All of the data for this chart, including stock market data and events, are loaded on chart load from CSV files resembling Yahoo Finance structure. The chart uses our own <a href="https://www.amcharts.com/tutorials/using-data-loader-plugin/">Data Loader</a> plugin to automatically load and parse external data. Click the below links to view the structure of those sample CSV files: <ul> <li><a href="https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT.csv">MSFT.csv</a></li> <li><a href="https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT_events.csv">MSFT_events.csv</a></li> <li><a href="https://www.amcharts.com/wp-content/uploads/assets/stock/TXN.csv">TXN.csv</a></li> </ul>

  • Animated gauge

    This demo shows how to implement dynamic, good-looking dashboards. The gradient fill of the GaugeBand is achieved via <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#gradientRatio"><code>gradientRatio</code></a> setting. The arrow and band angle is updated via <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeArrow#setValue"><code>setValue()</code></a> and <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#setStartValue"><code>setStartValue()</code></a> / <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#setEndValue"><code>setEndValue()</code></a> API functions respectively.

  • Clock With Two Faces

    This clock is made using our <a href="http://docs.amcharts.com/3/javascriptcharts/AmAngularGauge">AmAngularGauge</a> chart and it has two faces - one for hours/minutes and another for seconds. As you see the shape of the arrows can be easily adjusted to almost any you might need. You can have multiple faces (axes), and multiple arrows on one chart. The chart can be saved as an image using the download image in the bottom-right corner. Check CHALK theme (buttons above the chart) to see fun animation of the arrows.

  • Clock

    This clock is made using our <a href="http://docs.amcharts.com/3/javascriptcharts/AmAngularGauge">AmAngularGauge</a> chart. You can have <a href="/demos/clock-with-two-faces/">multiple faces (axes)</a>, and multiple arrows on one chart. The chart can be saved as an image using the download image in the bottom-right corner. Check CHALK theme (buttons above the chart) to see fun animation of the arrows.

  • Polar Chart

    Polar chart displays multivariate data in the form of a two-dimensional chart of more than three variables represented on axes starting from the same point. Polar chart is also called radar chart, spider chart, web chart, star chart or star plot. <h2>Polar chart using amCharts</h2> Our library supports polar chart, and there is a special chart type for it - <a href="http://docs.amcharts.com/3/javascriptcharts/AmRadarChart">AmRadarChart</a>. Our polar chart can have any number (more than three) of axes. The grid of radar chart can be made of circles, like in this example or of rectangles and this makes it <a href="/demos/radar-chart/">Radar chart</a> <h2>Angular Fills on polar chart</h2> Our radar chart uses regular <a href="http://docs.amcharts.com/3/javascriptcharts/ValueAxis">ValueAxis</a> so it also supports <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a> and <a href="http://docs.amcharts.com/3/javascriptcharts/TrendLine">Trend Lines</a>. The blue and red fill in the example above is made using guides.

  • Polar Chart

    Polar chart displays multivariate data in the form of a two-dimensional chart of more than three variables represented on axes starting from the same point. Polar chart is also called radar chart, spider chart, web chart, star chart or star plot. <h2>Polar chart using amCharts</h2> Our library supports polar chart, and there is a special chart type for it - <a href="http://docs.amcharts.com/3/javascriptcharts/AmRadarChart">AmRadarChart</a>. Our polar chart can have any number (more than three) of axes. The grid of radar chart can be made of circles, like in this example or of rectangles and this makes it <a href="/demos/radar-chart/">Radar chart</a> <h2>Angular Fills on polar chart</h2> Our radar chart uses regular <a href="http://docs.amcharts.com/3/javascriptcharts/ValueAxis">ValueAxis</a> so it also supports <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a> and <a href="http://docs.amcharts.com/3/javascriptcharts/TrendLine">Trend Lines</a>. The blue and red fill in the example above is made using guides.

  • CSS animations

    Since v 3.12.0 all elements of the chart can have class names set - all you need to do is setting <a href="http://docs.amcharts.com/3/javascriptcharts/AmSerialChart#addClassNames"><code>addClassNames</code></a> property of a chart to <code>true</code>. This feature allows you to control the look of a chart using CSS and even more - use CSS animation to highlight specific areas in your chart. Note, CSS animations are not available on all browsers - even modern IE doesn't support them. Be careful - CSS animations use a lot of CPU resources.

  • Using SVG Filters

    You can use SVG filters with our charts and maps. The background of this chart are real graphs (not just an images) with blur filter applied. This opens wide horizons for you, designers!

  • 3D Cylinder Chart

    Columns and bars in our charts can look like cylinders or even cones. To achieve this, you should set <code>topRadius</code>property of a graph to 0 - 1.5 value. 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.

  • 3D Cylinder Chart

    Columns and bars in our charts can look like cylinders or even cones. To achieve this, you should set <code>topRadius</code>property of a graph to 0 - 1.5 value. 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.

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

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

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