Showing an average line across a Bar chart
Posted by Kelly at 14:39 on Thursday 16th June 2022 [link]
Two things:
1. To show a horizontal line across a bar chart to indicate the average percent that is being shown. I used a line chart to show the average but it overflows into the Y-axis labels (see image) and I don't want that.
2. To show some 'floating' text that sits upon the line to indicate the percentage.
-- begin code --
<script src="./rgraph/libraries/RGraph.common.core.js" ></script>
<script src="./rgraph/libraries/RGraph.common.dynamic.js" ></script>
<script src="./rgraph/libraries/RGraph.common.tooltips.js" ></script>
<script src="./rgraph/libraries/RGraph.bar.js" ></script>
<script src="./rgraph/libraries/RGraph.hbar.js" ></script>
<script src="./rgraph/libraries/RGraph.drawing.rect.js" ></script>
<script src="./rgraph/libraries/RGraph.line.js" ></script>
<canvas id="cc" width="700" height="560" style [No canvas support]</canvas>
<script>
new RGraph.Bar({
id: 'cc',
data: [54.6,47.1,89.6,90.9,100,59.6,80.7],
options: {
backgroundGridBorder: false,
backgroundGridHlines: false,
backgroundGridVlines: false,
colors: ['#bcd27f','#e0df85','#38976f','#38976f','#05876b','#9bc478','#5ca673'],
colorsSequential: true,
marginBottom: 70,
marginLeft: 70,
marginTop: 90,
regions: ['One','Two','Three','Four','Five','Six','Seven'],
score2: ['159 / 291','98 / 208','146 / 163','90 / 99','28 / 28','31 / 52','46 / 57'],
scores: [54.6,47.1,89.6,90.9,100,59.6,80.7],
textSize: 14,
title: 'Trying to create an Average line',
titleBold: true,
titleSize: 18,
tooltips:'%{property:regions[%{group}]}: %{property:scores[%{group}]}%<br>%{property:score2[%{group}]}',
tooltipsEffect: 'fade',
tooltipsEvent: 'mousemove',
tooltipsHighlight: false,
tooltipsHotspotXonly: true,
xaxisLabels: ['One','Two','Three','Four','Five','Six','Seven'],
xaxisLabelsAngle: 45,
xaxisLabelsOffsety: 3,
yaxisLabelsCount: 10,
yaxisLabelsOffsetx: -5,
yaxisScaleMax: 100,
yaxisScaleMin: 0,
yaxisScaleUnitsPost: '%',
yaxisTickmarks: true,
yaxisTickmarksCount: 10,
}
/* }).draw(); */
}).grow();
setInterval(function ()
{
var data = RGraph.arrayRandom(7, 0, 10);
bar.grow({data: data});
}, 3000);
data = [66.59,66.59];
new RGraph.Line({
id: 'cc',
data: data,
options: {
backgroundGridBorder: false,
backgroundGridHlines: false,
backgroundGridVlines: false,
colors: ['#aaaaaa'],
linewidth: 5,
spline: false,
xaxis: false,
yaxis: false,
marginLeft: 40,
shadow: false,
labelsAbove: false,
textAccessible: false,
yaxisLabelsCount: 0,
yaxisScaleMax: 100,
yaxisScaleMin: 0,
xaxisPosition: 55,
yaxisLabelsColor: 'white',
}
}).draw();
</script>
-- end code --
Attached image:1. To show a horizontal line across a bar chart to indicate the average percent that is being shown. I used a line chart to show the average but it overflows into the Y-axis labels (see image) and I don't want that.
2. To show some 'floating' text that sits upon the line to indicate the percentage.
-- begin code --
<script src="./rgraph/libraries/RGraph.common.core.js" ></script>
<script src="./rgraph/libraries/RGraph.common.dynamic.js" ></script>
<script src="./rgraph/libraries/RGraph.common.tooltips.js" ></script>
<script src="./rgraph/libraries/RGraph.bar.js" ></script>
<script src="./rgraph/libraries/RGraph.hbar.js" ></script>
<script src="./rgraph/libraries/RGraph.drawing.rect.js" ></script>
<script src="./rgraph/libraries/RGraph.line.js" ></script>
<canvas id="cc" width="700" height="560" style [No canvas support]</canvas>
<script>
new RGraph.Bar({
id: 'cc',
data: [54.6,47.1,89.6,90.9,100,59.6,80.7],
options: {
backgroundGridBorder: false,
backgroundGridHlines: false,
backgroundGridVlines: false,
colors: ['#bcd27f','#e0df85','#38976f','#38976f','#05876b','#9bc478','#5ca673'],
colorsSequential: true,
marginBottom: 70,
marginLeft: 70,
marginTop: 90,
regions: ['One','Two','Three','Four','Five','Six','Seven'],
score2: ['159 / 291','98 / 208','146 / 163','90 / 99','28 / 28','31 / 52','46 / 57'],
scores: [54.6,47.1,89.6,90.9,100,59.6,80.7],
textSize: 14,
title: 'Trying to create an Average line',
titleBold: true,
titleSize: 18,
tooltips:'%{property:regions[%{group}]}: %{property:scores[%{group}]}%<br>%{property:score2[%{group}]}',
tooltipsEffect: 'fade',
tooltipsEvent: 'mousemove',
tooltipsHighlight: false,
tooltipsHotspotXonly: true,
xaxisLabels: ['One','Two','Three','Four','Five','Six','Seven'],
xaxisLabelsAngle: 45,
xaxisLabelsOffsety: 3,
yaxisLabelsCount: 10,
yaxisLabelsOffsetx: -5,
yaxisScaleMax: 100,
yaxisScaleMin: 0,
yaxisScaleUnitsPost: '%',
yaxisTickmarks: true,
yaxisTickmarksCount: 10,
}
/* }).draw(); */
}).grow();
setInterval(function ()
{
var data = RGraph.arrayRandom(7, 0, 10);
bar.grow({data: data});
}, 3000);
data = [66.59,66.59];
new RGraph.Line({
id: 'cc',
data: data,
options: {
backgroundGridBorder: false,
backgroundGridHlines: false,
backgroundGridVlines: false,
colors: ['#aaaaaa'],
linewidth: 5,
spline: false,
xaxis: false,
yaxis: false,
marginLeft: 40,
shadow: false,
labelsAbove: false,
textAccessible: false,
yaxisLabelsCount: 0,
yaxisScaleMax: 100,
yaxisScaleMin: 0,
xaxisPosition: 55,
yaxisLabelsColor: 'white',
}
}).draw();
</script>
-- end code --
Posted by Richard at 16:00 on Thursday 16th June 2022 [link]
I think a better way would be to use the draw event to do the custom drawing - I'm presuming that you don't have any other reason for using the Line chart.
Here's an example for you:
https://codepen.io/rgraph/pen/zYRbwdY
Here's an example for you:
https://codepen.io/rgraph/pen/zYRbwdY
[Replies are now closed]