Demos (these demos are included in the download archive)

SVG chart types

There's a lot of examples here so I'd highly recommend that (if you're using Chrome) you install the LinkClump extension. This allows you to open many links at once by simply drawing a box around them.



Basic SVG demos

svg-basic-ajax-getcsv.html
svg-basic-ajax-getjson.html
svg-basic-ajax-getnumber.html
svg-basic-ajax-getstring.html
svg-basic-bar.html
svg-basic-bipolar.html
svg-basic-funnel.html
svg-basic-hbar.html
svg-basic-line.html
svg-basic-pie.html
svg-basic-radar.html
svg-basic-rose.html
svg-basic-scatter.html
svg-basic-scp.html
svg-basic-waterfall.html


SVG Bar chart demos

svg-bar-100pc-stacked.html
svg-bar-3d-grouped-negative.html
svg-bar-3d-grouped.html
svg-bar-3d-stacked.html
svg-bar-3d-standard.html
svg-bar-3d-vprogress.html
svg-bar-3d.html
svg-bar-animate-library.html
svg-bar-blue.html
svg-bar-colors-sequential.html
svg-bar-colors.html
svg-bar-combined.html
svg-bar-css3-animations.html
svg-bar-csv.html
svg-bar-csv2.html
svg-bar-dark-blue.html
svg-bar-dropbox-userbase.html
svg-bar-effect-grow.html
svg-bar-effect-wave.html
svg-bar-errorbars.html
svg-bar-gradients.html
svg-bar-grouped-stacked.html
svg-bar-grouped.html
svg-bar-highlight.html
svg-bar-in-bar.html
svg-bar-income-expenditure.html
svg-bar-inflation.html
svg-bar-json.html
svg-bar-line-combined.html
svg-bar-millionaire.html
svg-bar-min-grouped.html
svg-bar-min-regular.html
svg-bar-offset-defecit.html
svg-bar-offset.html
svg-bar-oscillation-index.html
svg-bar-pareto.html
svg-bar-pie-combined.html
svg-bar-range.html
svg-bar-rotating-background.html
svg-bar-segmented.html
svg-bar-sheets.html
svg-bar-stacked.html
svg-bar-stacked2.html
svg-bar-thin-blue.html
svg-bar-thin-grouped.html
svg-bar-tooltips.html
svg-bar-vprogress.html


SVG Bipolar demos

svg-bipolar-effect-grow.html
svg-bipolar-effect-wave.html
svg-bipolar-grouped.html
svg-bipolar-stacked-labelsabove.html
svg-bipolar-stacked.html
svg-bipolar-tooltips.html


SVG CSS effects demos

svg-fx-conceal.html
svg-fx-fadecircularininwards.html
svg-fx-fadecircularinoutwards.html
svg-fx-fadecircularoutinwards.html
svg-fx-fadecircularoutoutwards.html
svg-fx-fadein.html
svg-fx-fadeout.html
svg-fx-fadeslidein.html
svg-fx-fadeslideout.html
svg-fx-hblindsclose.html
svg-fx-hblindsopen.html
svg-fx-hscissorsclose.html
svg-fx-hscissorsopen.html
svg-fx-reveal.html
svg-fx-slidein.html
svg-fx-slideout.html
svg-fx-vblindsclose.html
svg-fx-vblindsopen.html
svg-fx-vscissorsclose.html
svg-fx-vscissorsopen.html


SVG Funnel chart demos

svg-funnel-key-stages.html


SVG HBar chart demos

svg-hbar-annual-revenue-for-star-tech.html
svg-hbar-basic-grouped.html
svg-hbar-basic-stacked.html
svg-hbar-black-orange.html
svg-hbar-blocky.html
svg-hbar-blue-and-yellow.html
svg-hbar-chrome-speeds.html
svg-hbar-cpi-contributions.html
svg-hbar-dark.html
svg-hbar-effect-grow.html
svg-hbar-excuses.html
svg-hbar-highlighted-bar.html
svg-hbar-hprogress.html
svg-hbar-min-grouped.html
svg-hbar-min-regular.html
svg-hbar-mirrored-scale.html
svg-hbar-property-prices.html
svg-hbar-yaxis-center.html


SVG Line chart demos

svg-line-coco.html
svg-line-csv.html
svg-line-dark.html
svg-line-dashboard.html
svg-line-dynamic.html
svg-line-effect-trace.html
svg-line-errorbars.html
svg-line-filled-accumulative.html
svg-line-filled-blue.html
svg-line-filled-dark.html
svg-line-filled.html
svg-line-front-page.html
svg-line-gradients.html
svg-line-gsc.html
svg-line-json.html
svg-line-labelsabove.html
svg-line-logarithmic.html
svg-line-multiple-lines.html
svg-line-range.html
svg-line-red-outlined.html
svg-line-sheets.html
svg-line-spline-filled.html
svg-line-spline.html
svg-line-stepped.html
svg-line-tooltips.html
svg-line-turquoise.html
svg-line-ufo-sightings.html


SVG Pie chart demos

svg-pie-csv.html
svg-pie-customised.html
svg-pie-dashboard.html
svg-pie-donut.html
svg-pie-effect-roundrobin.html
svg-pie-gradients.html
svg-pie-json.html
svg-pie-sheets.html
svg-pie-tooltips.html


SVG Radar chart demos

svg-radar-background-rings.html
svg-radar-circular-background.html
svg-radar-outline.html
svg-radar-stacked.html
svg-radar-stacked2.html
svg-radar-trace.html


SVG Rose chart demos

svg-rose-basic.html
svg-rose-non-equi-angular-stacked.html
svg-rose-non-equi-angular.html
svg-rose-pattern.html
svg-rose-stacked.html


SVG Scatter chart demos

svg-scatter-bubble.html
svg-scatter-datetime.html
svg-scatter-errorbars.html
svg-scatter-line.html
svg-scatter-sheets.html
svg-scatter-vertical-line.html
svg-scatter-xscale.html


SVG Semi-circular Progress chart demos

svg-scp-effect-grow.html
svg-scp-graduated.html
svg-scp-tooltips.html


SVG Waterfall chart demos

svg-waterfall-csv.html
svg-waterfall-grouped.html
svg-waterfall-negative-values.html
svg-waterfall-sheets.html
svg-waterfall-stacked.html

Canvas chart types

There's a lot of examples here so I'd highly recommend that (if you're using Chrome) you install the LinkClump extension. This allows you to open many links at once by simply drawing a box around them.



Animation and effects examples

effects-bar-color-wave.html
effects-bar-grow.html
effects-bar-wave.html
effects-bipolar-grow.html
effects-bipolar-wave.html
effects-css3-animations.html
effects-fuel-grow.html
effects-gantt-grow.html
effects-gauge-grow.html
effects-generic-conceal.html
effects-generic-contract.html
effects-generic-expand.html
effects-generic-fadecircularininwards.html
effects-generic-fadecircularinoutwards.html
effects-generic-fadecircularoutinwards.html
effects-generic-fadecircularoutoutwards.html
effects-generic-fadein.html
effects-generic-fadeout.html
effects-generic-fadeslidein.html
effects-generic-fadeslideout.html
effects-generic-hblindsclose.html
effects-generic-hblindsopen.html
effects-generic-hscissorsclose.html
effects-generic-hscissorsopen.html
effects-generic-reveal.html
effects-generic-revealcircular.html
effects-generic-slidein.html
effects-generic-slideout.html
effects-generic-vblindsclose.html
effects-generic-vblindsopen.html
effects-generic-vscissorsclose.html
effects-generic-vscissorsopen.html
effects-hbar-grow.html
effects-hbar-grow2.html
effects-hbar-wave.html
effects-hprogress-grow.html
effects-line-foldtocenter.html
effects-line-trace2.html
effects-line-unfold.html
effects-line-unfoldfromcenter.html
effects-line-unfoldfromcentertrace.html
effects-meter-grow.html
effects-odo-grow.html
effects-pie-explode.html
effects-pie-grow.html
effects-pie-implode.html
effects-pie-roundrobin.html
effects-radar-grow.html
effects-radar-trace.html
effects-rose-explode.html
effects-rose-grow.html
effects-rose-implode.html
effects-rose-roundrobin.html
effects-scatter-trace2.html
effects-semicircularprogress-grow.html
effects-thermometer-grow.html
effects-vprogress-grow.html
effects-waterfall-grow.html


Basic examples

basic-ajax-csv.html
basic-ajax-dynamic-updates.html
basic-ajax-json.html
basic-ajax-number.html
basic-ajax-string.html
basic-bar.html
basic-clear.html
basic-combined.html
basic-csv.html
basic-csv2.html
basic-dollar-bar.html
basic-dollar-line.html
basic-dollar-pie.html
basic-dual-charts.html
basic-events-bar.html
basic-events-line.html
basic-events-pie.html
basic-gauge.html
basic-gradients.html
basic-line.html
basic-pie.html
basic-tooltips.html
basic-web-workers.html


Bar chart demos

bar-3d-effect-multi-row.html
bar-3d-effect-xaxispos-center.html
bar-3d-effect.html
bar-adjustable-limited.html
bar-adjustable.html
bar-ajax.html
bar-animated-pie-chart.html
bar-annotatable.html
bar-axis-options.html
bar-background-grid-dotted.html
bar-background-hbars.html
bar-background-image.html
bar-bar-spline.html
bar-basic.html
bar-berlin.html
bar-combined-line.html
bar-combined-vprogress.html
bar-combined2-line.html
bar-css3-animations.html
bar-csv-reader.html
bar-dark-background.html
bar-defaults.html
bar-drawing-api-objects.html
bar-drawing-api.html
bar-drilldown.html
bar-errorbars.html
bar-front-page.html
bar-grouped-thin.html
bar-grouped-wave.html
bar-grouped.html
bar-grouped2.html
bar-grouped3.html
bar-grouped4.html
bar-horizontal-gradients.html
bar-html-key.html
bar-html5-3d-transformations.html
bar-i-love-my-dog-de-bordeax.html
bar-in-bar.html
bar-income-expenditure-stacked.html
bar-income-expenditure.html
bar-interactive-key.html
bar-line-combo.html
bar-line-switch-effect.html
bar-logarithmic-scale.html
bar-long-labels.html
bar-millionaire.html
bar-modaldialog.html
bar-mouseout.html
bar-multiple-y-axes.html
bar-negative-hmargin.html
bar-nested-grouped.html
bar-numlabels.html
bar-offset-defecit.html
bar-offset-x-axis.html
bar-onadjust.html
bar-onmodaldialog-event.html
bar-pie-charts-tooltips.html
bar-pie-combined.html
bar-post-processing.html
bar-resizable.html
bar-rotating-background-dual-canvas.html
bar-rotating-background.html
bar-seach-result-clickthru.html
bar-segmented.html
bar-sheets.html
bar-sketch-wedding.html
bar-sketch.html
bar-stacked-above-labels.html
bar-stacked-click.html
bar-stacked-labelsAbove.html
bar-stacked-range.html
bar-stacked.html
bar-tooltips.html
bar-vertical-margin.html
bar-vprogress-3d.html
bar-vprogress.html
bar-water-reflection-effect.html
bar-xonly.html


Bipolar chart demos

bipolar-3d.html
bipolar-basic.html
bipolar-combined-gauge.html
bipolar-csv-data.html
bipolar-csv-reader.html
bipolar-grouped.html
bipolar-inverted.html
bipolar-stacked.html
bipolar-tooltips.html
bipolar-world-population.html


Donut demos

donut-3d-shadow.html
donut-3d.html
donut-basic.html
donut-in-donut.html
donut-nested-progress.html
donut-nested.html
donut-nested2.html
donut-progress.html
donut-roundrobin.html
donut-segments.html


Fuel chart demos

fuel-ajax.html
fuel-basic.html
fuel-csv-reader.html
fuel-effect-interactive.html
fuel-grow.html
fuel-interactive.html


Funnel chart demos

funnel-basic.html
funnel-interactive-key.html
funnel-inverted.html


Gantt chart demos

gantt-adjustable-limited.html
gantt-adjustable.html
gantt-adjustable2.html
gantt-background-grid-dotted.html
gantt-basic.html
gantt-multiple-events.html
gantt-schedule-skeleton.html
gantt-schedule.html


Gauge chart demos

gauge-adjustable.html
gauge-ajax.html
gauge-bank.html
gauge-basic.html
gauge-csv-reader.html
gauge-customised.html
gauge-graduated-blue.html
gauge-sheets.html
gauge-skeleton.html
gauge-valuetext.html


HBar chart demos

hbar-3d-hprogress.html
hbar-3d-yaxispos-center.html
hbar-3d-yaxispos-right.html
hbar-3d.html
hbar-adjustable-limited.html
hbar-adjustable.html
hbar-ajax.html
hbar-background-grid-dotted.html
hbar-basic.html
hbar-chrome-speeds.html
hbar-cochlea-implants.html
hbar-countries-contributions.html
hbar-csv-reader.html
hbar-drawing-api-xaxis.html
hbar-effect-grow.html
hbar-finance.html
hbar-grouped.html
hbar-interactive-key.html
hbar-labels-above.html
hbar-referendum-results.html
hbar-right-axis.html
hbar-stacked.html
hbar-vscroll.html


HProgress chart demos

hprogress-basic.html
hprogress-bullet.html
hprogress-csv-reader.html
hprogress-custom-title.html
hprogress-grow.html
hprogress-interactive-key.html
hprogress-segmented.html
hprogress-tooltips.html


Line chart demos

line-adjustable-limited.html
line-adjustable-range.html
line-adjustable-touch-event.html
line-adjustable.html
line-aids-infections.html
line-airline-accidents.html
line-axis-options.html
line-axis-ymin.html
line-background-grid-dotted.html
line-background-hbars.html
line-banded.html
line-bar-clipped.html
line-basic.html
line-basic2.html
line-big-red.html
line-black-and-purple.html
line-black-and-white.html
line-black-red.html
line-black.html
line-blue-boxed.html
line-blue-green.html
line-blue.html
line-click-event.html
line-coco.html
line-crosshairs-snap.html
line-csv-reader.html
line-custom-labels.html
line-custom-tickmarks.html
line-dark-red.html
line-defaults.html
line-different-colors.html
line-dual-color-range.html
line-dual-color-scrolling.html
line-dual-color-threshold.html
line-dual-color.html
line-dual-range.html
line-dynamic-last-10-minutes.html
line-dynamic-scrolling-dual-canvas.html
line-dynamic-scrolling.html
line-dynamic-updates-range.html
line-dynamic-updates.html
line-effects-scrolling.html
line-effects-trace.html
line-employee-sales.html
line-errorbars.html
line-fan.html
line-filled-blue.html
line-filled-spline.html
line-filled-striped.html
line-filled-tech-sales.html
line-front-page-green-red.html
line-front-page.html
line-google-analytics.html
line-gradient-fill.html
line-green-filled.html
line-green.html
line-green2.html
line-hide-show.html
line-html-key.html
line-interactive-key.html
line-inverted.html
line-linestyle.html
line-logarithmic-scale.html
line-multiple-y-axes.html
line-null-values.html
line-offset-x-axis-inverted.html
line-offset-x-axis.html
line-offset-x-axis2.html
line-orange.html
line-out-of-bounds.html
line-overflow-clipped.html
line-pink-and-blue.html
line-range-clickable.html
line-range-clickable2.html
line-range-spline.html
line-range.html
line-range2.html
line-scrolling-image-background.html
line-sheets.html
line-spline-filled.html
line-spline-multiple-lines-array.html
line-spline-multiple-lines.html
line-stacked-filled.html
line-static-yaxis.html
line-stepped-trace.html
line-surpressed-alerts.html
line-transparency.html
line-us-prison-population.html
line-varied-linewidths.html
line-xonly.html
line-zerostart.html


Odometer demos

odo-adjustable.html
odo-background-image.html
odo-basic.html
odo-csv-reader.html


Meter chart demos

meter-adjustable.html
meter-basic.html
meter-basic2.html
meter-black.html
meter-circular.html
meter-circular2.html
meter-csv-reader.html
meter-google.html
meter-image1.html
meter-image2.html
meter-image3.html
meter-needle.html
meter-segmented.html
meter-specific-labels.html


Pie chart demos

pie-3d-html-key.html
pie-3d.html
pie-ajax-json.html
pie-basic.html
pie-black.html
pie-border.html
pie-csv-reader.html
pie-customised-and-animated.html
pie-customised.html
pie-defaults.html
pie-dollar-syntax.html
pie-east-axis-origin.html
pie-effects-3d.html
pie-effects-explode-onclick.html
pie-effects-explode-onmousemove.html
pie-effects-explode-onmouseover.html
pie-effects-roundrobin-then-explode.html
pie-effects-roundrobin-then-explode2.html
pie-effects-roundrobin.html
pie-explode-when-clicked.html
pie-front-page.html
pie-gradients.html
pie-gradients2.html
pie-gray.html
pie-halo.html
pie-interactive-key.html
pie-key-gutter.html
pie-movie-genre.html
pie-outline-highlighting.html
pie-pink.html
pie-pyramid.html
pie-rectangular.html
pie-tooltips.html


Rose chart chart demos

rose-3d.html
rose-basic.html
rose-csv-reader.html
rose-explode-implode-transition.html
rose-interactive-key.html
rose-mouseout.html
rose-non-equi-angular.html
rose-offset-start.html
rose-pie.html
rose-shadow.html
rose-stacked-csv.html
rose-stacked-tooltips.html
rose-stacked.html


Radar chart demos

radar-background-colors.html
radar-basic.html
radar-csv-reader.html
radar-effects-grow.html
radar-interactive-key.html
radar-non-filled.html
radar-stacked.html


RScatter chart demos

rscatter-basic.html
rscatter-csv-reader.html
rscatter-interactive-key.html
rscatter-line.html
rscatter-line2.html
rscatter-multiple-datasets-single-array.html


Scatter chart demos

scatter-add-markers.html
scatter-axis-options.html
scatter-background-grid-dotted.html
scatter-background-hbars.html
scatter-basic.html
scatter-bubble-chart.html
scatter-bubble-pie-chart.html
scatter-crosshairs-datetime.html
scatter-crosshairs-snap.html
scatter-csv-reader.html
scatter-date-time-values.html
scatter-financial.html
scatter-gwt.html
scatter-interactive-key.html
scatter-line-dash.html
scatter-multiple-datasets.html
scatter-negative-x-axis.html
scatter-offset.html
scatter-offset2.html
scatter-scale.html
scatter-sheets.html


SemiCircular Progress demos

semicircularprogress-adjustable.html
semicircularprogress-basic.html
semicircularprogress-offset.html
semicircularprogress-tooltips.html


Thermometer chart demos

thermometer-adjustable.html
thermometer-basic.html
thermometer-basic2.html
thermometer-csv-reader.html
thermometer-dual-scale.html
thermometer-dynamic.html
thermometer-tooltips.html


VProgress chart demos

vprogress-basic.html
vprogress-csv-reader.html
vprogress-grow.html
vprogress-interactive-key.html
vprogress-thin.html


Waterfall chart demos

waterfall-background-grid-dotted.html
waterfall-basic.html
waterfall-csv-reader.html
waterfall-grow-multiple-charts.html
waterfall-grow.html
waterfall-offset.html


Drawing API marker1 object demos

drawing-api-marker1-basic.html


Drawing API marker2 object demos

drawing-api-marker2-basic.html


Drawing API rect object demos

drawing-api-rect-basic.html
drawing-api-rect-heatmap.html


Drawing API circle object demos

drawing-api-circle-basic.html


Drawing API image object demos

drawing-api-image-basic.html
drawing-api-image-border.html


Drawing API X Axis object demos

drawing-api-xaxis-basic.html
drawing-api-xaxis-scale.html


Drawing API Y axis object demos

drawing-api-yaxis-basic.html
drawing-api-yaxis-specific-labels.html


Drawing API text object demos

drawing-api-text-button.html
drawing-api-text-link.html
drawing-api-text.html