Skip to content

Commit

Permalink
New demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@heyesr
heyesr committed Sep 15, 2023
1 parent edd5bb5 commit ba938ce
Show file tree
Hide file tree
Showing 3 changed files with 288 additions and 0 deletions.
92 changes: 92 additions & 0 deletions demos/bar-yellow-purple.html
View file
@@ -0,0 +1,92 @@
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="demos.css" type="text/css" media="screen" />

<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.key.js" ></script>
<script src="../libraries/RGraph.drawing.background.js" ></script>
<script src="../libraries/RGraph.bar.js" ></script>
<script src="demos.js" ></script>


<title>Demo: A Bar chart showing boys/girls eye colour</title>
<meta name="description" content="A Bar chart showing boys/girls eye colour" />

<meta name="robots" content="noindex, nofollow" />

</head>
<body>


<h1>A Bar chart showing boys/girls eye colour</h1>

<div style="text-align: center" id="canvas-container">
<canvas id="cvs" width="350" height="250" data-image-src="page-demos-bar-basic.png">[No canvas support]</canvas>
</div>

<br clear="both" />



<script id="rgraph-demo-source-code">
new RGraph.Drawing.Background({
id: 'cvs',
options: {
backgroundGridColor: 'gray',
backgroundGridVlinesCount: 18,
backgroundGridHlinesCount: 10,
backgroundGridHlinesCount: 14,
backgroundGridColor: 'gray',
backgroundGridLinewidth: 2
}
}).draw();

new RGraph.Bar({
id: 'cvs',
data: [[9,7],[4,4],[2,4]],
options: {
textBold: true,
keyLabelsBold: true,
marginInner: 10,
xaxisLinewidth: 5,
xaxisTickmarks: 0,
yaxisLinewidth: 5,
yaxisTickmarks: 0,
colorsStroke: 'black',
colors: ['#FFC000','#9842B0'],
linewidth: 5,
backgroundGrid: false,
xaxisLabels: ['Blue','Green','Brown'],
xaxisLabelsOffsety: 3,
key: ['Boys','Girls'],
keyPosition: 'margin'
}
}).draw();
</script>



<p></p>

This goes in the documents header:
<pre class="code">
&lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.key.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.dawing.background.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.bar.js"&gt;&lt;/script&gt;
</pre>

Put this where you want the chart to show up:
<pre class="code">
&lt;div&gt;
&lt;canvas id="cvs" width="350" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;/div&gt;
</pre>

This is the code that generates the chart - it should be placed AFTER the <code>canvas</code> tag(s):
<pre id="dynamic-source-code"></pre>
<script>showSource()</script>

</body>
</html>
121 changes: 121 additions & 0 deletions demos/radar-interactive-sliders.html
View file
@@ -0,0 +1,121 @@
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="demos.css" type="text/css" media="screen" />

<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.radar.js" ></script>
<script src="demos.js" ></script>

<title>RGraph demo: A Radar chart with interactive sliders</title>

<meta name="description" content="A Radar chart with interactive sliders" />

<meta name="robots" content="noindex, nofollow" />

</head>
<body>

<h1>A Radar chart with interactive sliders</h1>

<style>
input[type=range] {
width: 250px;
}
</style>

<table border="1" style="float: left" cellspacing="0">
<tr> <td>Skill 1</td> <td><input type="range" min="1" max="10" value="6" id="range_0" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 2</td> <td><input type="range" min="1" max="10" value="3" id="range_1" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 3</td> <td><input type="range" min="1" max="10" value="7" id="range_2" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 4</td> <td><input type="range" min="1" max="10" value="5" id="range_3" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 5</td> <td><input type="range" min="1" max="10" value="7" id="range_4" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 6</td> <td><input type="range" min="1" max="10" value="2" id="range_5" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 7</td> <td><input type="range" min="1" max="10" value="8" id="range_6" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 8</td> <td><input type="range" min="1" max="10" value="8" id="range_7" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 9</td> <td><input type="range" min="1" max="10" value="5" id="range_8" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 10</td> <td><input type="range" min="1" max="10" value="4" id="range_9" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 11</td> <td><input type="range" min="1" max="10" value="6" id="range_10" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 12</td> <td><input type="range" min="1" max="10" value="9" id="range_11" oninput="updateRadar(this)"/></td></tr>
</table>

<canvas id="cvs" width="800" height="450">[No canvas support]</canvas>

<script>
data = [6,3,7,5,7,2,8,8,5,4,6,9];

radar = new RGraph.Radar({
id: 'cvs',
data: data,
options: {
textSize: 24,
backgroundCirclesColor: 'gray',
colors: ['#f007'],
colorsStroke: 'black',
linewidth: 5,
labels: ['Skill 1',' Skill 2',' Skill 3',' Skill 4',' Skill 5',' Skill 6',' Skill 7',' Skill 8',' Skill 9',' Skill 10',' Skill 11',' Skill 12'],
labelsOffsetRadius: 10
}
}).draw();

function updateRadar(el)
{
var index = parseInt(el.id.replace(/range_/,''));
var value = parseInt(el.value);

radar.original_data[0][index] = value;

RGraph.redraw();
}
</script>





<p></p>

This goes in the documents header:
<pre class="code">
&lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.radar.js"&gt;&lt;/script&gt;
</pre>

Put this where you want the chart to show up:
<pre class="code">
&lt;style&gt;
input[type=range] {
width: 250px;
}
&lt;/style&gt;

&lt;table border="1" style="float: left" cellspacing="0"&gt;
&lt;tr&gt; &lt;td&gt;Skill 1&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="6" id="range_0" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 2&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="3" id="range_1" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 3&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="7" id="range_2" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 4&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="5" id="range_3" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 5&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="7" id="range_4" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 6&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="2" id="range_5" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 7&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="8" id="range_6" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 8&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="8" id="range_7" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 9&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="5" id="range_8" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 10&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="4" id="range_9" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 11&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="6" id="range_10" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Skill 12&lt;/td&gt; &lt;td&gt;&lt;input type="range" min="1" max="10" value="9" id="range_11" oninput="updateRadar(this)"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;canvas id="cvs" width="800" height="450"&gt;[No canvas support]&lt;/canvas&gt;&gt;
</pre>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
<div id="dynamic-source-code"></div>
<script>showSource()</script>





</body>
</html>
75 changes: 75 additions & 0 deletions demos/svg-line-tooltips-dataset.html
View file
@@ -0,0 +1,75 @@
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="demos.css" type="text/css" media="screen" />

<script src="../libraries/RGraph.svg.common.core.js" ></script>
<script src="../libraries/RGraph.svg.common.tooltips.js" ></script>
<script src="../libraries/RGraph.svg.line.js" ></script>
<script src="demos.js" ></script>


<title>RGraph demo: An SVG Line chart with dataset based tooltips</title>


<meta name="description" content="An SVG Line chart with dataset based tooltips" />

<meta name="robots" content="noindex, nofollow" />

</head>
<body>



<h1>An SVG Line chart with dataset based tooltips</h1>

<div style="width: 600px; height: 300px" id="cc"></div>

<script>
new RGraph.SVG.Line({
id: 'cc',
data: [
[8,9,8,9,8,9,8,9,8,9],
[5,6,5,6,5,6,5,6,5,6],
[2,3,2,3,2,3,2,3,2,3]
],
options: {
tooltipsEvent: 'mousemove',
linewidth: 5,
spline: true,
marginInner: 25,
tooltipsDataset: '%{property:names[%{dataset}]}',
names: ['Fred','Jemima','Wilson','Jerry'],
tooltipsCss: {
fontSize: '26pt'
},
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
textSize: 20
}
}).draw();
</script>



<div style="clear: both"></div>

This goes in the documents header:
<pre class="code">
&lt;script src="RGraph.svg.common.core.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.svg.line.js"&gt;&lt;/script&gt;
</pre>

Put this where you want the chart to show up:
<pre class="code">
&lt;div style="width: 600px; height: 300px" id="cc"&gt;&lt;/div&gt;
</pre>

This is the code that generates the chart - it should be placed AFTER the <code>&lt;div&gt;</code> tag:
<div id="dynamic-source-code"></div>
<script>showSource()</script>

</body>
</html>

0 comments on commit ba938ce

Please sign in to comment.