A list of guides and tutorials that accomplish specific tasks

Share RGraph:  

Summary
These guides that take you through doing common tasks step-by-step. Think of them as mini-tutorials that accomplish a specific job.

  • How to turn a label into a link
    This document shows you how, when using the textAccessible option, to turn one of your labels into a functioning link that you can click.

  • How to create a Bar chart that's capable of multiple select
    This HOWTO demonstrates how to add multiple select capability to a Bar chart. You could, for example, use this together with some AJAX code to pass information back and forth to the server about which bars are currently highlighted.

  • How to create one-touch Line chart adjusting that's usable on touch devices
    This HOWTO demonstrates how to go about creating an adjustable Line chart that doesn't use the built in adjusting functionality. This is so that the adjusting can be made to use a single touch - so it works well on touch based devices as well as mouse based computers.

  • How to use repeating canvas patterns on your chart
    This HOWTO shows you how you can use repeating seamless fill patterns in your chart(s) instead of solid colors or gradients. Patterns can enable you in place of solid colours.

  • How to create a multichart scrolling effect with CSS transitions
    Create a single large canvas to show multiple charts and scroll between them using CSS3 transitions. This can be an effective way of showing multiple charts but in a limited space.

  • How to create a CSS3 transistions based switch effect
    Create a CSS3 based switch effect for showing two charts in the same place. Using CSS transitions can also be a good way of using a smaller space and show multiple charts.

  • How to use CSS3 transitions to save space
    This HOWTO document shows you how to display four canvas tags using space of one and use CSS3 transitions to switch between them. Because it uses CSS to switch between the charts the scrolling is smooth.

  • How to use repeating canvas patterns on your chart
    You can use repeating seamless fill patterns in your chart(s) instead of solid colors or gradients. You can get small images that create these patterns from the Internet on a variety of websites. Or make them yourself!

  • How to create a multichart scrolling effect with CSS transitions
    Create a single large canvas to show multiple charts and scroll between them using CSS3 transitions. This changes the CSS top/left properties and uses CSS transitions to do the animation, but you just as easily use the jQuery animate() function to do the animating.

  • How to create a CSS3 transistions based switch effect
    Create a CSS3 based switch effect for showing two charts in the same place. This use a folding switch effect (using CSS properties) to alternate between two different charts.

  • How to make a dynamic scrolling Line chart
    Create a dynamically scrolling and updating Line chart. Scrolling Line charts can be used to great effect when monitoring a value (such as an attached device).

  • How to use CSS3 transitions to save space
    Show four canvas tags in the space of one and use CSS3 transitions to switch between them. The transitions are used to animate the growing and shrinking of the tags. This does not use click events (ie JavaScript) but instead uses the CSS :focus pseudo-class to emulates it.

  • How to use CSS3 transitions with your canvas tag
    Use CSS3 transitions to create a zooming switch effect between two charts. As one chart zooms out, another then zooms in. This is another way of showing multiple charts in the space of one.

  • How to use CSS3 gradients with your canvas tag
    How you can use CSS3 gradients as the background on your canvas tag. This HOWTO document illustrates various different gradients that CSS can produce, some repeating and some not.

  • How to make your line clickable using the isPointInStroke function
    Make whole lines clickable instead of just certain points along that line. This could be used to allow you to provide more information (via a popup for example) about a particular dataset.

  • How to make your line clickable and then highlight the key
    Make whole lines clickable and highlight the key at the same time. This uses the coodinates from a Line chart object to draw a drawing API Poly object over the lines and then, when the poly objects are clicked, highlights the key.

  • Use images as labels
    How to use images instead of text as labels. In the case illustrated here there are two face images used to illustrate which bar belongs to who. You may find them easier to work with than textual labels.

  • How to use the new RGraph.text2() function
    Use the RGraph.text2 function to add custom text to your charts. You can use two methods - the RGraph.text2() function as shown here or the drawing API text object. The RGraph.text2() function is the underlying function that's used by the drawing API text object.

  • How to use the drawing API X axis object
    Use the drawing API X axis object to add extra X axes to your chart. Multiple X axes can be used to great effect when yo're grouping your data elements.

  • How to use the drawing API Y axis object
    Use the drawing API Y axis object to add extra Y axes to your chart. This is useful when you're showing multiple datasets on your chart but which have differing scales.

  • How to create a Pie chart explode effect
    Create a 3D explode style effect that can be used to highlight segments on your Pie chart. The exploded effect can be both static or animated (as shown here) so that it responds to a click.

  • How to create 3D Pie charts
    Create a 3D effect for your Pie chart. This HOWTO shows you an example of an animated 3D Pie chart.

  • How to hide tooltips using the mouseout event
    How to hide tooltips when the mouse cursor is moved away from the canvas tag. It's an easy affair using the events that are recognised by the RGraph libraries.

  • How to make a Contract/Expand transition effect
    Create a switch effect between two canvas tags. Note that CSS3 transitions are smoother (example above). This is useful when you have multiple charts to display in a limited space.

  • How to show a custom static Y axis
    Create a Y axis that remains static whilst the canvas scrolls left and right. This can be used when you have a wide dataset that you still need to correlate closely with the scale.

  • How to use CSS3 animations
    How you can use, and examples of, CSS3 animations. The animations library here is an external one with a few new animations added. CSS animations are very smooth in appearance.

  • How to use the new gradient syntax
    Use the RGraph custom (and much simplified) gradient syntax. Gradients are an easy way to pretty up your charts. The gradient syntax that's shown here is far simpler to use than the standard canvas syntax.

  • How to combine the ModalDialog with dollar events
    Use the ModalDialog that comes with RGraph to show content that's linked to areas or triggered by events on your charts. The ModalDialog can be customised and used on your page for flow control or as a way of prompting the user for some input.

  • How to custom tickmarks using the drawing API
    Use the drawing API image object to show customised tickmarks. Because the drawing API image object is being used things such as events and tooltips can be added too.

  • How to use the new dollar syntax for events
    Use the new dollar syntax to add clickable areas to your chart. The dollar syntax makes adding the clickable areas to your charts very easy. The are mousemove, mouseover and click events.

  • How to add a watermark to your charts
    Add a watermark image to your charts in order to identify them or just add your company logo to the chart. The drawing API image object is used in this example so tooltips and events are available if required.

  • How to show customised Y labels
    Show customised Y labels on your chart instead of the standard ones. This is a Line chart that has the customised Y labels but it could just as easily be another type of chart.

  • How to make a scissors transition effect
    Create a scissors switch effect when showing multiple charts. This HOWTO switches between three charts using buttons, but you can alter it so it switches between more charts or uses another switching method other than buttons.

  • How to display a Date/Time chart
    Show a date/time chart line chart (but using the Scatter chart). This is actually an XY chart so for each point you will need an X value and a Y value. The X value is usually the date/time and the Y value is the numerical value.

  • How to create Bubble charts
    Create Bubble charts (making use of the Scatter chart and the Bubble class). Bubble charts are useful for showing XYZ values where the X and Y values control the position on the chart and the Z value controls the size of the Bubble.

  • How to create a mix effect
    Create a fade/mix effect. This effect actually uses two canvas tags - so that one can be faded out and the other faded in at the sme time (instead of sequentially) so the two mix in to each other whilst fading.

  • How to highlight a bar on your chart
    How to highlight a bar on your chart using empty tooltips (so no tooltip is shown). This HOWTO guide also shows you how you can use the eventsClick option to highlight the bar.

  • How to debug your charts with Chrome
    Make use of the Chrome developer tools to debug your charts and a video that shows you how to use them. This page also details some of the debug functions in RGraph that can help you if have trouble getting your charts working.

  • How to get the original value from a click
    How to get the original value from a click (in this case a Bar, Line and Pie chart). The code consists of an event listener that queries the data of the Pie chart object.

  • How to create a combo Bar, Line and Pie chart
    Use the CombinedChart class to make a combined Bar, Line and Pie chart. The full code is given on this page for the combined chart.

  • How to get thin bars
    Use the Bar chart hmargin setting to manipulate the width of your bars. Indirectly though, as increasing the hmargin setting decreases the width of the bars.

  • How to use DOM1-style RGraph custom events
    Use DOM1 style custom RGraph events (eg ontooltip). This example uses the ondraw event in order to add highlighting to each bar on the chart.

  • How to get the X/Y value from a Scatter chart
    Get the original X/Y values when using the Scatter chart. This HOWTO shows you how to get the X and the Y values from a Scatter chart using the Scatter chart API functions.

  • How to create a Gauge that updates a form
    How to, using differing methods, update a form element when altering the Gauge chart. A number of different methods are shown and the value represented on the Gauge chart is used to update the form text element.

  • How to using CSS 3D transforms
    Use CSS 3D transformations in conjunction with your canvas tag to get a 3D effect. Remember that the 3D transformations are applied to your whole canvas tag. This example allows you to update the XYZ angles that are used.

  • How to use images as tickmarks
    Use images as your tickmarks when using the Line or Scatter charts. A custom function is used to load and position the image and the canvas.

  • How to get crisp lines with no antialias
    Achieve crisp lines on your canvas by appling a small antialiasing fix. This gives the single pixel width lines and it can also be used on any canvas - not just RGraph.

  • How to create a bank of Gauge charts
    Make a set of three adjustable or animated Gauge charts (using just one canvas). The Gauge charts can be animated, adjustable or just static. You can also use seperate canvas tags for each Gauge, but this example uses just one larger canvas tag.

  • How to use AJAX to update your charts
    Make AJAX requests using RGraph. By using AJAX to update your charts you can reduce bandwidth used, create faster pages and have those pages use less bandwidth (only the new chart data is transferred from the server to your browser instead of the whole page).

  • How to create a floating progress bar
    Create a progress bar that doesn't begin at zero - a floating progress bar. This is done by using a multi-segment progress bar with the first segments color set as transparent.

  • How to create a plus/minus chart and Sparklines
    Use RGraph to create small sparkline style inline charts. This can be done quite easily using the line/bar chart properties and this page show you two examples of such charts that are embedded in large blocks of text.

  • How to create a combined Bar and VProgress chart
    Combine a Bar chart and the VProgress bar to create a Bar chart with VProgress bars instead of regular bars. This is a novel use of the Bar chart and the VProgress Bar and can be used when you have a set of data where each entry has its own "child value".

  • How to make a transition effect
    Create a transition between two charts occupying the same space. This transition uses one of CSS based effects that comes with RGraph.

  • How to add events to your charts
    Add events to your charts such as the click or mousemove events. This HOWTO takes you through step-by-step adding the event listeners to the chart using the eventsClick and the eventsMousemove properties.

  • How to add images to your charts
    Add images to your chart using a variety of methods. This HOWTO demonstrates (and provides you with example code) the various methods from tooltips to CSS positioning.

  • How to add links to your charts.
    Add links to your charts using a variety of methods. This HOWTO demonstrates (and provides you with example code) the various methods from tooltips, event listeners to a simple link around the canvas tag.

  • How to use the ModalDialog with events
    Use the bundled ModalDialog with RGraph events. The ModalDialog can be used to show something (eg photos) or as a way to get input from the user thats triggered by clicking on the chart.

  • How to draw a vertical line chart using the Scatter
    Create a vertical line chart using the Scatter chart (not the Line chart). There's no vertical line chart class in RGraph so the Scatter chart (an XY chart is used instead.