/home/mip/mip/public/template/AdminLTE/plugins/RGraph/demos/line-dual-color.html
<!DOCTYPE html >
<html>
<head>
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<title>A different colored line above/below a threshold</title>
<link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
<meta name="robots" content="noindex,nofollow" />
<meta name="description" content="A regular Line chart that has been drawn in two passes so that it can be a different color above and below a particular threshold" />
</head>
<body>
<h1>A different colored line above/below a threshold</h1>
<p>
By using the clip() function the Line chart can be drawn in two passes so as to color it differently.
</p>
<canvas id="cvs" width="900" height="250">[No canvas support]</canvas>
<script>
window.onload = function ()
{
var data = [14,16,18,19,29,28,29,35,34,38,41,45,56,58,65];
var threshold = 40;
var color1 = 'red';
var color2 = 'green'
/**
* First draw a chart that will enable us to get the Y coordinate. This chart is not shown
*/
var line = new RGraph.Line({
id: 'cvs',
data: data,
options: {
gutterTop: 5,
gutterBottom: 45,
linewidth: 3,
tickmarks: 'endcircle',
hmargin: 10,
colors: [color1],
textAccessible: true
}
}).draw()
/**
* Now get the Y coord
*/
var y = line.getYCoord(threshold);
/**
* Clear the canvas
*/
RGraph.Clear(line.canvas);
/**
* Now draw the chart that will become the red half
*/
line.context.save();
line.context.beginPath();
line.context.rect(0,0,line.canvas.width, y);
line.context.clip();
// Draw the line again
line.Draw();
line.context.restore();
/**
* Now draw the chart that will become the green half
*/
line.context.save();
line.context.beginPath();
line.context.rect(0,y,line.canvas.width, line.canvas.height);
line.context.clip();
var line = new RGraph.Line({
id: 'cvs',
data: data,
options: {
gutterTop: 5,
gutterBottom: 45,
colors: [color2],
linewidth: 3,
tickmarks: 'endcircle',
hmargin: 10,
textAccessible: true,
labels: ['Alf','Bert','Charlie','Dave','Edgar','Fliss','Gary','Hoolio','Indigo','Jack','Kevin','Lou','Martha','Neil','Olga']
}
}).draw();
line.context.restore();
};
</script>
<p>
<a href="./">« Back</a>
</p>
<p>
<b>Update</b><br />
There's information <a href="http://www.rgraph.net/docs/howto-dynamic-line-chart.html">on this HOWTO page</a> about creating dual color line
charts using
gradients. It's <b>very</b> simple and can be done using either the
RGraph Gradient() shortcut or more directly with the canvas linear gradient functionality.
</p>
<p></p>
This goes in the documents header:
<pre class="code">
<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
</pre>
Put this where you want the chart to show up:
<pre class="code">
<canvas id="cvs" width="600" height="250" !style="border: 1px solid #ccc">
[No canvas support]
</canvas>
</pre>
This is the code that generates the chart:
<pre class="code">
<script>
window.onload = function ()
{
var data = [14,16,18,19,29,28,29,35,34,38,41,45,56,58,65];
var threshold = 40;
var color1 = 'red';
var color2 = 'green'
<span>/**
* First draw a chart that will enable us to get the Y coordinate. This chart is not shown
*/</span>
var line = new RGraph.Line({
id: 'cvs',
data: data,
options: {
gutterTop: 5,
gutterBottom: 45,
linewidth: 3,
tickmarks: 'endcircle',
hmargin: 10,
colors: [color1],
textAccessible: true
}
}).draw()
<span>/**
* Now get the Y coord
*/</span>
var y = line.getYCoord(threshold);
<span>/**
* Clear the canvas
*/</span>
RGraph.Clear(line.canvas);
<span>/**
* Now draw the chart that will become the red half
*/</span>
line.context.save();
line.context.beginPath();
line.context.rect(0,0,line.canvas.width, y);
line.context.clip();
// Draw the line again
line.Draw();
line.context.restore();
<span>/**
* Now draw the chart that will become the green half
*/</span>
line.context.save();
line.context.beginPath();
line.context.rect(0,y,line.canvas.width, line.canvas.height);
line.context.clip();
var line = new RGraph.Line({
id: 'cvs',
data: data,
options: {
gutterTop: 5,
gutterBottom: 45,
colors: [color2],
linewidth: 3,
tickmarks: 'endcircle',
hmargin: 10,
textAccessible: true,
labels: ['Alf','Bert','Charlie','Dave','Edgar','Fliss','Gary','Hoolio','Indigo','Jack','Kevin','Lou','Martha','Neil','Olga']
}
}).draw()
line.context.restore();
};
</script>
</pre>
<p>
<a href="https://www.facebook.com/sharer/sharer.php?u=http://www.rgraph.net" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://www.rgraph.net', null, 'top=50,left=50,width=600,height=368'); return false"><img src="../images/facebook-large.png" width="200" height="43" alt="Share on Facebook" border="0" title="Visit the RGraph Facebook page" /></a>
<a href="https://twitter.com/_rgraph" target="_blank" onclick="window.open('https://twitter.com/_rgraph', null, 'top=50,left=50,width=700,height=400'); return false"><img src="../images/twitter-large.png" width="200" height="43" alt="Share on Twitter" border="0" title="Mention RGraph on Twitter" /></a>
</p>
</body>
</html>