Adjustable charts
- The adjustable events
- Adjustable chart types:
- Activity meter
- Bar chart
- Fuel chart
- Gantt chart
- Gauge chart
- Horizontal Bar chart
- Horizontal Progress bar
- Horseshoe meter
- Line chart
- Meter chart
- Odometer chart
- Scatter chart
- Segmented donut chart
- Semi-circular Progress bar
- Thermometer chart
- Vertical Progress bar
You have the ability with some chart types to adjust your charts interactively. Currently, the charts listed here have this ability. Some chart types use multiple event listeners and as such are unlikely to work well with other dynamic features. The Line chart is an example of this, and whilst it does work with the context menu, it is unlikely to work with other dynamic features.
The adjustable events
- adjustbegin
- adjust
- adjustend
These three RGraph events are associated with adjusting. The adjustbegin event fires when adjusting begins. Much like the mousedown event. The adjust event fires during adjusting, much like the mousemove event. The adjustend event fires when adjusting is finished, much like the mouseup event.
Activity meter
The Activity meter adjusting can be seen in the activity-adjustable.html demo in the download archive.
<script>
adjusting = new RGraph.Activity ({
id: 'cvs',
min: 0,
max: 100,
value: [23,45,55],
options: {
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Bar chart
The Bar chart adjusting can be seen in the activity-adjustable.html and bar-adjustable-limited.html demos in the download archive.
<script>
new RGraph.Bar({
id: 'cvs_bar',
data: [5,14,12,13,10,16],
options: {
marginLeft: 55,
marginInner: 25,
yaxisScaleunitsPost: '%',
title: 'An adjustable Bar chart',
textSize: 16,
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Fuel chart
The Fuel chart adjusting can be seen in the fuel-interactive.html demo in the download archive.
<script>
fuel = new RGraph.Fuel({
id: 'cvs',
min: 0,
max: 100,
value: 78,
options: {
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Gantt chart
The Gantt chart can be adjusted by dragging the bars left or right, or the events can be resized if you place the cursor at the right edge of the event. To get the details of the bar being dragged you can use the adjust or adjustend events and inside the event handler, you can look at the RGraph registry - RGraph.Registry.get('adjusting.gantt') The returned array consists of:
- index - The numerical index of the event being adjusted (corresponding to the data array that you set in the constructor).
- object - The Gantt chart object
- shape - The pertinent shape information
- mousex - The mouse X coordinate when adjusting began
- mousey - The mouse Y coordinate when adjusting began
- event_duration - The size of the event (when adjusting was commenced)
- mode - This can be either move or resize indicating what was done to the bar.
When adjusting is complete the obj.data array is updated. So you can use the numerical index that you find in the registry (as above) with the obj.data array to get up-to-date event information.
The Gantt chart adjusting can be seen in the gantt-adjustable.html gantt-adjustable2.html gantt-adjustable-limited.html demos in the download archive.
<script>
gantt_events = [
{start: 31, duration: 28, label:'Richard'},
{start: 0, duration: 120, label:'Bob'},
{start: 84, duration: 16, label:'Fred'},
{start: 35, duration: 45, label:'Charles'},
{start: 0, duration: 35, label:'Kev'},
{start: 0, duration: 28, label:'Wayne'},
{start: 31, duration: 28, label:'John'}
];
gantt = new RGraph.Gantt({
id: 'cvs',
data: gantt_events,
options: {
xaxisScaleMax: 120,
borders: false,
colorsDefault: '#0c0',
xaxisLabels: ['January', 'February', 'March', 'April'],
title: 'An adjustable Gantt chart',
adjustable: true,
backgroundVbars: [
[0, 31, 'rgba(230,230,230,0.6)'],
[59, 31, 'rgba(230,230,230,0.6)']
],
events: {
adjustbegin: function (obj) {},
adjust: function (obj)
{
var events = obj.data;
var conf = RGraph.Registry.get('adjusting.gantt');
if (conf) {
var index = conf.dataset;
document.getElementById("eventID").value = index;
document.getElementById("eventStart").value = events[index].start;
document.getElementById("eventDuration").value = events[index].duration;
console.log('Event ID: ' + index + ', Event start: ' + events[index].start + ' Event duration: ' + events[index].duration);
}
},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Gauge chart
The Gauge chart adjusting can be seen in the gauge-adjustable.html demo in the download archive.
<script>
gauge = new RGraph.Gauge({
id: 'cvs',
min:0,
max:100,
value:78,
options: {,
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Horizontal bar chart
The Horizontal bar chart adjusting can be seen in the hbar-adjustable.html hbar-adjustable-limited.html demos in the download archive.
<script>
new RGraph.HBar({
id: 'cvs',
data: [4,8,6,3,5,2,6],
options: {
yaxisLabels: ['Richard','Ben','Larry','Pete','Luis','John','Fred'],
marginInner: 10,
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Horizontal progress bar
The Horizontal progress bar adjusting can be seen in the hprogress-grow.html demo in the download archive.
<script>
hprogress = new RGraph.HProgress({
id: 'cvs',
min: 0,
max: 100,
value: 83,
options: {
marginBottom: 30,
colors: ['Gradient(#c00:red)'],
margin: 10,
scaleUnitsPost: '%'
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Horseshoe meter
The Horseshoe meter adjusting can be seen in the horseshoe-adjustable.html demo in the download archive.
<script>
horseshoe = new RGraph.Horseshoe({
id: 'cvs',
min: 0,
max: 100,
value: 78,
options: {
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Line chart
The Line chart can be adjusted by dragging the line(s) up and down. When you click on a line to adjust it (and hold the mouse button down) you can then retrieve the relevant details of that point from the registry:
RGraph.Registry.get('adjusting.shape');
The Line chart adjusting can be seen in the line-adjustable-limited.html line-adjustable-onetouch.html line-adjustable-range.html line-adjustable-touch-event.html line-adjustable.html demos in the download archive.
<script>
line = new RGraph.Line({
id: 'cvs',
data: [
[45,74,84,85,45,35,65,68,87,97,45,34,12],
[15,14,12,16,18,19,14,12,74,84,95,65,35]
],
options: {
xaxisLabels: ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob'],
linewidth: 2,
marginInner: 10,
title: 'An adjustable line chart',
outofbounds: true,
spline: true,
tickmarksStyle: 'circle',
tickmarksSize: 5,
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Meter chart
The Meter chart adjusting can be seen in the meter-adjustable.html demos in the download archive.
<script>
meter = new RGraph.Meter({
id: 'cvs',
min: 0,
max: 100,
value: 78,
options: {
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Odometer chart
The Odometer chart adjusting can be seen in the odo-adjustable.html demos in the download archive.
<script>
odo = new RGraph.Odometer({
id: 'cvs',
min: 0,
max: 100,
value: 78,
options: {
border: false,
needleTail: false,
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Scatter chart
The Scatter chart adjusting can be seen in the scatter-adjustable.html demo in the download archive.
<script>
data = [
[21,0], [13,16],[8,10], [10,8], [18,18],[15,19],
[13,16],[15,12],[16,13],[12,11],[10,18],[11,19],
[7,17], [11,18],[9,13], [11,12],[12,10],[10,9],
[19,10],[15,15]
];
new RGraph.Scatter({
id: 'cvs',
data: data,
options: {
colorsDefault: 'red',
tickmarksStyle: 'circle',
tickmarksSize: 15,
xaxisScaleMax: 31,
xaxisLabelsOffsety: 3,
xaxisLabels: [
'M','T','W','T','F','S','S',
'M','T','W','T','F','S','S',
'M','T','W','T','F','S','S',
'M','T','W','T','F','S','S'
],
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Segmented donut chart
The Segmented donut chart adjusting can be seen in the segmented-adjustable.html demo in the download archive.
<script>
segmented = new RGraph.Segmented({
id: 'cvs',
min: 0,
max: 100,
value: 78,
options: {
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Semi-circular progress bar
The Semi-circular Progress bar adjusting can be seen in the semicircularprogress-adjustable.html demos in the download archive.
<script>
scp = new RGraph.SemiCircularProgress({
id: 'cvs',
min: 0,
max: 100,
value: 83,
options: {
marginTop: 10,
marginLeft: 10,
marginRight: 10,
scaleUnitsPost: '%',
colors: ['#0c0'],
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Thermometer chart
The Thermometer chart adjusting can be seen in the thermometer-adjustable.html demos in the download archive.
<script>
new RGraph.Thermometer({
id: 'cvs',
min: 0,
max: 100,
value: 78,
options: {
marginBottom: 20,
colors: ['red'],
titleSide: 'An adj. thermometer',
adjustable: true,
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>
Vertical progress bar
The Vertical Progress bar adjusting can be seen in the vprogress-grow.html demos in the download archive.
<script>
new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 100,
value: 83,
options: {
colors: ['red'],
marginInner: 15,
scaleUnitsPost: '%',
marginRight: 55,
adjustable: true,
events: {
adjustbegin: function (obj) {},
adjust: function (obj) {},
adjustend: function (obj) {}
}
}
}).draw();
</script>