Demos (these demos are included in the download zip file)

Lots and lots of demos of what RGraph can do and the types of charts that it can produce. From basic demonstrations of functionality to full examples of better looking charts.

Recently added or updated demo pages

There a lot of demo pages here so here's some of the latest demo pages that have been added or demo pages that have been updated.

Get new demo notifications

You can get notifications of when new demos are added (there's no set schedule but new ones are usually added at least once every fortnight) by using the demos RSS feed.

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-csv-reader-standalone.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-100.html
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-background-bars.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-reader.html
svg-bar-csv.html
svg-bar-csv2.html
svg-bar-dark-background.html
svg-bar-dark-blue.html
svg-bar-dark-pink.html
svg-bar-dashboard.html
svg-bar-dropbox-userbase.html
svg-bar-dynamic.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-deficit.html
svg-bar-offset.html
svg-bar-oscillation-index.html
svg-bar-pareto.html
svg-bar-php-integration.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-dashboard.html
svg-hbar-effect-grow.html
svg-hbar-excuses.html
svg-hbar-highlighted-bar.html
svg-hbar-hprogress.html
svg-hbar-infographic.html
svg-hbar-labels-segments.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-analytics.html
svg-line-black-and-white.html
svg-line-clipped.html
svg-line-coco.html
svg-line-csv.html
svg-line-dark.html
svg-line-dashboard-dark.html
svg-line-dynamic.html
svg-line-dynamic2.html
svg-line-dynamic3.html
svg-line-dynamic4.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-formidable.html
svg-line-front-page.html
svg-line-gradients.html
svg-line-gsc.html
svg-line-highlighted-section.html
svg-line-json.html
svg-line-labelsabove.html
svg-line-logarithmic.html
svg-line-multiple-lines.html
svg-line-nvd.html
svg-line-orange.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-trading.html
svg-line-turquoise.html
svg-line-ufo-sightings.html


SVG Gauge chart demos

svg-gauge-adjustable.html
svg-gauge-basic.html
svg-gauge-single-scale.html


SVG Pie chart demos

svg-pie-banded.html
svg-pie-csv.html
svg-pie-customised.html
svg-pie-dashboard.html
svg-pie-donut-activity-meter.html
svg-pie-donut.html
svg-pie-effect-roundrobin.html
svg-pie-gradients.html
svg-pie-json.html
svg-pie-meter.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-effect-grow.html
svg-rose-effect-roundrobin-grow-combined.html
svg-rose-effect-roundrobin.html
svg-rose-grouped.html
svg-rose-non-equi-angular-stacked.html
svg-rose-non-equi-angular.html
svg-rose-pattern.html
svg-rose-stacked.html
svg-rose-wind.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-trace-sequential.html
effects-line-trace2.html
effects-line-tracecenter.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-reader-standalone.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-bars.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-facebook-revenue.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-new-car-registrations.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-rounded-corners.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-updated-gradient-syntax.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-dual-color.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-max-min.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-internet-users.html
hbar-labels-above.html
hbar-labels-segments.html
hbar-onadjust.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-dark-trace-sequential.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-gradients.html
line-green-filled.html
line-green.html
line-green2.html
line-hide-show.html
line-html-key.html
line-interactive-key.html
line-inverse-gradient.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-product-revenue.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-students.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-dual-scale.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-horseshoe.html
pie-interactive-key.html
pie-key-gutter.html
pie-movie-genre.html
pie-outline-highlighting.html
pie-pink.html
pie-progress.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-drilldown.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-dual-dataset.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