From 770ba5201f5c60b2bb36602ff9d359f641e33125 Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 23 Oct 2011 21:14:40 +0200 Subject: Charting with flask, rgraph and custom "timeseries database" --- schall/static/RGraph/examples/bar.html | 204 +++++++++++++++++++++++++ schall/static/RGraph/examples/basic.html | 63 ++++++++ schall/static/RGraph/examples/bipolar.html | 152 ++++++++++++++++++ schall/static/RGraph/examples/donut.html | 167 ++++++++++++++++++++ schall/static/RGraph/examples/fuel.html | 132 ++++++++++++++++ schall/static/RGraph/examples/funnel.html | 175 +++++++++++++++++++++ schall/static/RGraph/examples/gantt.html | 189 +++++++++++++++++++++++ schall/static/RGraph/examples/gauge.html | 146 ++++++++++++++++++ schall/static/RGraph/examples/hbar.html | 139 +++++++++++++++++ schall/static/RGraph/examples/hprogress.html | 133 ++++++++++++++++ schall/static/RGraph/examples/index.html | 182 ++++++++++++++++++++++ schall/static/RGraph/examples/led.html | 121 +++++++++++++++ schall/static/RGraph/examples/line.html | 175 +++++++++++++++++++++ schall/static/RGraph/examples/meter.html | 178 +++++++++++++++++++++ schall/static/RGraph/examples/odo.html | 173 +++++++++++++++++++++ schall/static/RGraph/examples/pie.html | 170 +++++++++++++++++++++ schall/static/RGraph/examples/radar.html | 193 +++++++++++++++++++++++ schall/static/RGraph/examples/rose.html | 145 ++++++++++++++++++ schall/static/RGraph/examples/rscatter.html | 144 +++++++++++++++++ schall/static/RGraph/examples/scatter.html | 161 +++++++++++++++++++ schall/static/RGraph/examples/showcase.html | 19 +++ schall/static/RGraph/examples/text.html | 133 ++++++++++++++++ schall/static/RGraph/examples/thermometer.html | 143 +++++++++++++++++ schall/static/RGraph/examples/vprogress.html | 162 ++++++++++++++++++++ schall/static/RGraph/examples/waterfall.html | 146 ++++++++++++++++++ 25 files changed, 3745 insertions(+) create mode 100644 schall/static/RGraph/examples/bar.html create mode 100644 schall/static/RGraph/examples/basic.html create mode 100644 schall/static/RGraph/examples/bipolar.html create mode 100644 schall/static/RGraph/examples/donut.html create mode 100644 schall/static/RGraph/examples/fuel.html create mode 100644 schall/static/RGraph/examples/funnel.html create mode 100644 schall/static/RGraph/examples/gantt.html create mode 100644 schall/static/RGraph/examples/gauge.html create mode 100644 schall/static/RGraph/examples/hbar.html create mode 100644 schall/static/RGraph/examples/hprogress.html create mode 100644 schall/static/RGraph/examples/index.html create mode 100644 schall/static/RGraph/examples/led.html create mode 100644 schall/static/RGraph/examples/line.html create mode 100644 schall/static/RGraph/examples/meter.html create mode 100644 schall/static/RGraph/examples/odo.html create mode 100644 schall/static/RGraph/examples/pie.html create mode 100644 schall/static/RGraph/examples/radar.html create mode 100644 schall/static/RGraph/examples/rose.html create mode 100644 schall/static/RGraph/examples/rscatter.html create mode 100644 schall/static/RGraph/examples/scatter.html create mode 100644 schall/static/RGraph/examples/showcase.html create mode 100644 schall/static/RGraph/examples/text.html create mode 100644 schall/static/RGraph/examples/thermometer.html create mode 100644 schall/static/RGraph/examples/vprogress.html create mode 100644 schall/static/RGraph/examples/waterfall.html (limited to 'schall/static/RGraph/examples') diff --git a/schall/static/RGraph/examples/bar.html b/schall/static/RGraph/examples/bar.html new file mode 100644 index 0000000..ca1355f --- /dev/null +++ b/schall/static/RGraph/examples/bar.html @@ -0,0 +1,204 @@ + + + + + + + RGraph: HTML5 Javascript charts library - bar charts + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - Bar charts

+ + + +
+

+ The bar chart is probably one of the most widely used of charts, and also one of the most versatile. It's defined as a chart with + rectangular bars with lengths proportional to the values they represent. The bar chart can be used to represent two + or more values. With grouped and stacked bar charts, you can visualise two or more sets of data. For example two years + worth of sales figures. Doing this you will be able to easily see differences, for example a better year when it comes + to sales. You can also show negative values by having the X axis in the center, like the examples shown. If you use a + grouped or stacked bar chart, a key may be helpful to your users. +

+ +

+ By using the tooltips feature, you can provide more detail about what a particular bar represents. The tooltips in + RGraph can contain wide range of HTML, so you can use them to show photos or movies for example. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/basic.html b/schall/static/RGraph/examples/basic.html new file mode 100644 index 0000000..cbc5522 --- /dev/null +++ b/schall/static/RGraph/examples/basic.html @@ -0,0 +1,63 @@ + + + + + + + RGraph: HTML5 Javascript charts library - a basic example + + + + + + + + + + + + + +

RGraph: HTML5 Javascript charts library - A basic example

+ + + [No canvas support] + + + + +

+ This is a very basic example that does little more than display a chart. If you're trying to understand how RGraph + works, this should help as there is very little happening on this page. To see the source code of this + page simply view the source (Right click > View Source). +

+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/bipolar.html b/schall/static/RGraph/examples/bipolar.html new file mode 100644 index 0000000..22854c5 --- /dev/null +++ b/schall/static/RGraph/examples/bipolar.html @@ -0,0 +1,152 @@ + + + + + + + + RGraph: HTML5 Javascript charts library - bi-polar charts + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Bi-polar charts

+ + + +
+

+ The Bi-polar chart is also known as an age-frequency chart or a population pyramid. It allows you to very straight forwardly + compare two sets of data. For example two years worth of sales figues. Using this type of chart abnormalities will become + apparent. Other charts that would also be comparable, include a grouped bar chart, a stacked bar chart, and a multiple + line chart. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/donut.html b/schall/static/RGraph/examples/donut.html new file mode 100644 index 0000000..9f8506f --- /dev/null +++ b/schall/static/RGraph/examples/donut.html @@ -0,0 +1,167 @@ + + + + + + RGraph: HTML5 Javascript charts library - donut charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - Donut charts

+ + + +
+ +

+ Formerly the Donut chart was a separate class, though now it's a variant of the Pie chart. This means smaller downloads and + a much simpler implementation. Essentially it's a Pie chart with a big hole in the middle. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+
+ + + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/fuel.html b/schall/static/RGraph/examples/fuel.html new file mode 100644 index 0000000..9a7867c --- /dev/null +++ b/schall/static/RGraph/examples/fuel.html @@ -0,0 +1,132 @@ + + + + + + + RGraph: HTML5 Javascript charts library - fuel charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Fuel Gauge charts

+ + + +
+

+ The Fuel Gauge is a variation on the Meter that could be incorporated into a control panel or similar. The center image, + the colors and the text can all be customised as the two examples below show. The border on the second chart is simply + a CSS border on the canvas. The fuel icon is the default icon for the chart and uses a data: URL - ie there's no + external image necessary. +

+ +
+ +
+ +
+ [Please wait...] + [No canvas support] +
+
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/funnel.html b/schall/static/RGraph/examples/funnel.html new file mode 100644 index 0000000..943e905 --- /dev/null +++ b/schall/static/RGraph/examples/funnel.html @@ -0,0 +1,175 @@ + + + + + + RGraph: HTML5 Javascript charts library - funnel charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - Funnel chart

+ + + +

+ The funnel chart can be used to show stages in a sales or order process, from initial lead/contact through to actual sale. + It works well if you have a diminishing process, like that shown below. It can show potential revenue in each stage, or + like below, it can show actual numbers. It can also highlight potential problems in an organisations sales and/or order fulfillment + processes. +

+ +
+
+ +
+ +
+ [No canvas support] +
+
+ +
+
Initial contact
All potential cutomers were contacted and
interest was established.
+
Established lead
Customers who were interested had their details
recorded and passed to the sales team.
+
Sales Call
Interested Customers were called by the
sales team.
+
Site visit
The Customers site was visited by a representative
of the sales core.
+
Sale finalised
A sale was finalised by the sales core.
+
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/gantt.html b/schall/static/RGraph/examples/gantt.html new file mode 100644 index 0000000..2e9bbaf --- /dev/null +++ b/schall/static/RGraph/examples/gantt.html @@ -0,0 +1,189 @@ + + + + + + RGraph: HTML5 Javascript charts library - gantt charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Gantt charts

+ + + +
+

+ Gantt charts are used to show scheduling information. It is commonly used in project management but can also be used, + for example, to show holiday schedule information. In this case it would be easy to see when someone is unavailable. + The Gantt chart can have clickable bars that can be used to provide more detail. It can also show vertical bars + that can be used to indicate events, or as in the cases below, can be decorative. +

+ +

+ The chart is made of "units", in this case 365. This represents days in a year. The labels are separate, being equally + spaced across the chart. This means you can use more meaningful labels, which are easier to comprehend. As in the + example charts. +

+
+ +
+ +
+ +
+ [No canvas support] +
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/gauge.html b/schall/static/RGraph/examples/gauge.html new file mode 100644 index 0000000..beb8659 --- /dev/null +++ b/schall/static/RGraph/examples/gauge.html @@ -0,0 +1,146 @@ + + + + + + RGraph: HTML5 Javascript charts library - Gauge charts + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + +

RGraph: HTML5 Javascript charts library - Gauge charts

+ + + + + + +
+

+ Gauges are another meter variant that may be more suited to your websites design. The Gauges below show how you + could hook them up to some AJAX to get constantly updated gauges. The Gauges below are simply on a timer along + with some random numbers. +

+ +

+
+ +
+ +
+ +
+
[No canvas support]
 +      +
[No canvas support]
 +      + [No canvas support] + +
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/hbar.html b/schall/static/RGraph/examples/hbar.html new file mode 100644 index 0000000..0e5bbaf --- /dev/null +++ b/schall/static/RGraph/examples/hbar.html @@ -0,0 +1,139 @@ + + + + + + RGraph: HTML5 Javascript charts library - horizontal bar charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Horizontal bar charts

+ + + +

+ A horizontal bar chart can be useful when your labels are too big for regular bar charts. +

+ + + + + [No canvas support] + + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/hprogress.html b/schall/static/RGraph/examples/hprogress.html new file mode 100644 index 0000000..ddef02c --- /dev/null +++ b/schall/static/RGraph/examples/hprogress.html @@ -0,0 +1,133 @@ + + + + + + RGraph: HTML5 Javascript charts library - horizontal progress bar + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Horizontal Progress bar

+ + + +

+ This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server, + or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information + from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call RGraph.Clear() + (which clears the canvas) and then call myProgress.Draw() again. +

+ +

+ The colours, title and scale are configurable, allowing you to represent a wide range of values. +

+ +
+ +
+ + +
+ Browser market share in September (custom highlight) + [No canvas support] +
+ + + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/index.html b/schall/static/RGraph/examples/index.html new file mode 100644 index 0000000..7543a9a --- /dev/null +++ b/schall/static/RGraph/examples/index.html @@ -0,0 +1,182 @@ + + + + + RGraph: HTML5 Javascript charts library - example charts + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Example charts

+ + + +
+
+ Need something that RGraph doesn't currently support? RGraph license holders can usually be accomodated - please + contact support to discuss your requirements. +
+
+ +

+ The following HTML5 examples are available. The charts are made with the HTML5 canvas tag so they're quick to load and interactive. +

+ +
+ A Rose chart of sales statistics + [No canvas support] +
+ + +
+
+

Bar, Line and Pie charts

+ + +

Planning and management charts

+ +
+
+

Meters and gauges

+ + +

Other chart types

+ +
+
+ +

Basic examples

+ + + +

More examples

+ +

+ There are more usage examples as well as a few general HTML5 examples in the documentation. +

+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/led.html b/schall/static/RGraph/examples/led.html new file mode 100644 index 0000000..c7b0311 --- /dev/null +++ b/schall/static/RGraph/examples/led.html @@ -0,0 +1,121 @@ + + + + + + RGraph: HTML5 Javascript charts library - LED grid + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - LED Grid

+ + + +

+ An LED grid, that could be used to show a multitude of things. Could be used as a website counter for example. + It supports the A-Z, 0-9 and space characters. As you can see the colors are also user-definable. It also + supports the context menu, and therefore the zoom. The first LED grid demonstrates this. +

+ +
+ +
+ +
+ [No canvas support] +
+ +











+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/line.html b/schall/static/RGraph/examples/line.html new file mode 100644 index 0000000..7899448 --- /dev/null +++ b/schall/static/RGraph/examples/line.html @@ -0,0 +1,175 @@ + + + + + + + RGraph: HTML5 Javascript charts library - line charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Line charts

+ + + +
+

+ Like Bar charts, Line charts are some of the most versatile chart types. It is similar, but can indicate chronological + data better. Line charts are good if, for example, you want to illustrate sales figures over a year (or any period of + time). You'll then be able to easily see whether sales are going up, down or are stagnant. It will also become apparent + which months are busier than others. By using a multiple line chart you can add multiple sets of data (eg two or more years + of figures) to your chart. You can customise the line chart by stipulating it as being filled, having drop shadows, keys, + having the X axis in the centre, different colors, different tickmark styles and tooltips etc. +

+ +
+ +
+ +
+ [Please wait...] + [Please wait...] +
+
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/meter.html b/schall/static/RGraph/examples/meter.html new file mode 100644 index 0000000..9c6f172 --- /dev/null +++ b/schall/static/RGraph/examples/meter.html @@ -0,0 +1,178 @@ + + + + + + RGraph: HTML5 Javascript charts library - meter charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + +

RGraph: HTML5 Javascript charts library - Meter charts

+ + + + + + +
+

+ Meter charts are similar to Odometer charts albeit only a semi-circle and not a full circle. It can be better when trying illustrate + a particular level, but only have a limited amount of space. It could also be quite effective as part of a control panel. +

+ +

+
+ +
+ +
+ +
+
[No canvas support]
 +      +
[No canvas support]
 +
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/odo.html b/schall/static/RGraph/examples/odo.html new file mode 100644 index 0000000..8c582d0 --- /dev/null +++ b/schall/static/RGraph/examples/odo.html @@ -0,0 +1,173 @@ + + + + + + RGraph: HTML5 Javascript charts library - odometer charts + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + +

RGraph: HTML5 Javascript charts library - Odometer charts

+ + + + + + +
+

+ Odometer charts can be used to provide an indication of a particular value. For example you could easily use them to + represent values for a control panel that shows information about a server. Odometer charts indicating how much disk + space is used for example, would be more visual than a simple number. +

+ +

+ The green, yellow and red areas are configurable, allowing you to add some level of urgency into your figures + (as are the colors). The + figures are also configurable, so it can go from 0-10, or from 0-100. +

+
+ +
+ +
+ + [No canvas support] + [No canvas support] + [No canvas support] + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/pie.html b/schall/static/RGraph/examples/pie.html new file mode 100644 index 0000000..e8bf4bf --- /dev/null +++ b/schall/static/RGraph/examples/pie.html @@ -0,0 +1,170 @@ + + + + + + RGraph: HTML5 Javascript charts library - pie charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Pie charts

+ + + +
+ +

+ Pie charts can be used when you need to represent a value as part of a whole. It is commonly used to represent percentages, + relative magnitudes or relative frequencies. If your intent is to compare a particular value (slice) against the whole of + the Pie chart, then it can be quite effective. If however you want to compare two seperate segments, then it can get + more difficult. If this is the case, you may want to consider a bar chart for example. +

+ +

+ The colours can be customised, as can the borders (using the same color as the background and a line width of + about 5 gives the effect of segment separation. The chart can also have a drop shadow if you want one, but this shouldn't + be used in conjunction with segment seperation. +

+
+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/radar.html b/schall/static/RGraph/examples/radar.html new file mode 100644 index 0000000..7b0a8a0 --- /dev/null +++ b/schall/static/RGraph/examples/radar.html @@ -0,0 +1,193 @@ + + + + + + + RGraph: HTML5 Javascript charts library - Radar charts + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Radar charts

+ +
+ This chart used to be called the Tradar chart (T standing for "Traditional" - there used to be two Radar charts in RGraph), + however now (July 2011), it has been renamed to the "Radar" chart to make it easier for people to identify. If you use it + you will need to update your code accordingly. Keep in mind that if you use the .type property - this has been updated too + (to radar). +
+ + + +
+
+ +

+ Radar charts, that are similar to Rose charts. Each of the data points is + arranged equally in terms of angle, whilst the magnitude of each point is shown by the distance from the centre. Thus, + data points of a higher magnitude can be seen as they are more distant from the centre. +

+ +

+ Suitable for many datasets, but not all. If not, then Rose charts may be more apt. +

+ +

+ The circle, as can be seen in the second example, could be used to indicate a threshold of sorts. In the example, + it could be minimum sales required for a particular month. Months that fall below this threshold can be clearly seen. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+ + + + + + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/rose.html b/schall/static/RGraph/examples/rose.html new file mode 100644 index 0000000..3726b19 --- /dev/null +++ b/schall/static/RGraph/examples/rose.html @@ -0,0 +1,145 @@ + + + + + + RGraph: HTML5 Javascript charts library - rose charts + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Rose charts

+ + + +

+ The Rose chart was formally called the Pseudo-Radar chart. +

+ + +
+ A stacked Rose chart
+ [No canvas support] +
+ +
+ A "non-equi-angular" Rose chart
+ [No canvas support] +
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/rscatter.html b/schall/static/RGraph/examples/rscatter.html new file mode 100644 index 0000000..416e4c1 --- /dev/null +++ b/schall/static/RGraph/examples/rscatter.html @@ -0,0 +1,144 @@ + + + + + + + RGraph: HTML5 Javascript charts library - Radial scatter charts + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Radial scatter charts

+ + + +

+ Radial scatter charts are a circular variant of regular Scatter charts, and as the name suggests, circular. They + may be more suited to your dataset than regular scatter charts. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] +
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/scatter.html b/schall/static/RGraph/examples/scatter.html new file mode 100644 index 0000000..301837b --- /dev/null +++ b/schall/static/RGraph/examples/scatter.html @@ -0,0 +1,161 @@ + + + + + + + RGraph: HTML5 Javascript charts library - scatter charts + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Scatter charts

+ + + +

+ Scatter charts use two variables to plot points and makes it clear where there are congregations. The data points + make up the X and Y coordinates. The labels on the X axis are separate from the X units, allowing you to "group" them. For + example, like the example, you could set the maxium X value to be 365, but only have four labels. That way you would + have a granularity of a day, but the X axis would only have four labels. Like the example. +

+ +
+ +
+ + [No canvas support] + [No canvas support] + + + + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/showcase.html b/schall/static/RGraph/examples/showcase.html new file mode 100644 index 0000000..0a9342b --- /dev/null +++ b/schall/static/RGraph/examples/showcase.html @@ -0,0 +1,19 @@ + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ \ No newline at end of file diff --git a/schall/static/RGraph/examples/text.html b/schall/static/RGraph/examples/text.html new file mode 100644 index 0000000..c334d2f --- /dev/null +++ b/schall/static/RGraph/examples/text.html @@ -0,0 +1,133 @@ + + + + + + RGraph: Javascript charts & HTML5 canvas charts library - Animated rotating text with the RGraph software + + + + + + + + + + + + + + +

RGraph: Javascript charts & HTML5 canvas charts - A text function that does horizontal and vertical alignment (and spins)

+ + + + + + + + + + + +
The fallback HTML
+   +   + +
+ +

+ RGraph.Text() is a text drawing function that allows vertical and horizontal alignment, and allows you to specify the angle of the + text too. The animation is done by a simple gobal variable, setTimeout() and redrawing the entire + canvas every frame. Perhaps not the most efficient of methods, but remember that your Javascript will likely be + running on computers that have more processing power than + some small countries... Reset the page +

+ +

+ In a similar vein you could easily make some text that bounces from one side of the screen to the other, + hurrah - the return of <marquee>! +

+ +
+ More examples can be found on the individual example pages, and a more complete + reference to the Text() function can be found in the API docs. +
+ + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ \ No newline at end of file diff --git a/schall/static/RGraph/examples/thermometer.html b/schall/static/RGraph/examples/thermometer.html new file mode 100644 index 0000000..ee0fe87 --- /dev/null +++ b/schall/static/RGraph/examples/thermometer.html @@ -0,0 +1,143 @@ + + + + + + + RGraph: HTML5 Javascript charts library - Thermometer charts + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Thermometer charts

+ + + + +

+ The thermometer chart/gauge is a variation on the Vertical Progress Bar, that may suit your + design better than a regular progress bar. The thermometer is only available in a vertical orientation. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] + [No canvas support] +
+ + + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/vprogress.html b/schall/static/RGraph/examples/vprogress.html new file mode 100644 index 0000000..9195199 --- /dev/null +++ b/schall/static/RGraph/examples/vprogress.html @@ -0,0 +1,162 @@ + + + + + + RGraph: HTML5 Javascript charts library - vertical progress bar + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Vertical Progress bar

+ + + +

+ This is a Progress Bar for showing state. You can show anything with it - use it to show load on your server, + or percentage space free on your servers disk drive. You could even incorporate it with some AJAX to retrieve status information + from your webserver dynamically, making the Progress Bar realtime. To redraw the progress bar simply call RGraph.Clear() + (which clears the canvas) and then call myProgress.Draw() again. +

+ +

+ The colours, title and scale are configurable, allowing you to represent a wide range of values. +

+ +
+ +
+ +
+ [No canvas support] + [No canvas support] + [No canvas support] +
+ + + \ No newline at end of file diff --git a/schall/static/RGraph/examples/waterfall.html b/schall/static/RGraph/examples/waterfall.html new file mode 100644 index 0000000..3459615 --- /dev/null +++ b/schall/static/RGraph/examples/waterfall.html @@ -0,0 +1,146 @@ + + + + + + RGraph: HTML5 Javascript charts library - waterfall charts + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Waterfall charts

+ + + +

+ Waterfall charts can be used to represent sales and expenditure for an entity. More information can be found here: + http://en.wikipedia.org/wiki/Waterfall_chart +

+ +
+ +
+ +
+ [No canvas support] +
+ + + \ No newline at end of file -- cgit v1.2.1