assert.deepEqual([255,0,0,38], sampler.colorAtCoordinate(6.5, 0.5));
});
+it('testPerSeriesAlpha', function() {
+ var opts = {
+ width: 480,
+ height: 320,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
+ series: {
+ Y: { fillGraph: true, fillAlpha: 0.25 },
+ Z: { fillGraph: true, fillAlpha: 0.75 }
+ },
+ colors: [ '#FF0000', '#0000FF' ]
+ };
+ var data = "X,Y,Z\n" +
+ "1,0,0\n" +
+ "2,0,1\n" +
+ "3,0,1\n" +
+ "4,0,0\n" +
+ "5,0,0\n" +
+ "6,1,0\n" +
+ "7,1,0\n" +
+ "8,0,0\n"
+ ;
+
+ var graph = document.getElementById("graph");
+ var g = new Dygraph(graph, data, opts);
+
+ var sampler = new PixelSampler(g);
+
+ // Inside of the "Y" bump -- 5% alpha.
+ assert.deepEqual([255,0,0,63], sampler.colorAtCoordinate(6.5, 0.5));
+
+ // Inside of the "Z" bump -- 95% alpha.
+ assert.deepEqual([0,0,255,191], sampler.colorAtCoordinate(2.5, 0.5));
+});
+
it('testNewStyleSeries', function() {
var opts = {
pointSize : 5,
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>fillGraph with per series fillAlpha</title>
+ <!--
+ For production (minified) code, use:
+ <script type="text/javascript" src="dygraph-combined.js"></script>
+ -->
+ <script type="text/javascript" src="../dygraph-dev.js"></script>
+
+ </head>
+ <body>
+ <p>Filled, using default value</p>
+ <div id="div_g0" style="width:600px; height:300px;"></div>
+
+ <p>Filled, using global alpha value</p>
+ <div id="div_g1" style="width:600px; height:300px;"></div>
+
+ <p>Filled, using per series alpha values</p>
+ <div id="div_g2" style="width:600px; height:300px;"></div>
+
+ <p>Filled, using a mix of global and per series values</p>
+ <div id="div_g3" style="width:600px; height:300px;"></div>
+
+ <script type="text/javascript">
+ // Create some data for the charts
+ var gdata = "X,Y1,Y2\n";
+ for (var i = 0; i < 100; i++) {
+ gdata += i + "," + i + "," + (i * (100-i) * 100/(50*50)) + "\n";
+ }
+
+ // Just use the default values
+ var g0 = new Dygraph(
+ document.getElementById("div_g0"),
+ gdata,
+ {
+ fillGraph: true
+ }
+ );
+
+ var g1 = new Dygraph(
+ document.getElementById("div_g1"),
+ gdata,
+ {
+ fillGraph: true,
+ fillAlpha: 0.8
+ }
+ );
+
+ var g2 = new Dygraph(
+ document.getElementById("div_g2"),
+ gdata,
+ {
+ fillGraph: true,
+ series: {
+ Y1: { fillAlpha: 0.9 },
+ Y2: { fillAlpha: 0.1 }
+ }
+ }
+ );
+
+ var g3 = new Dygraph(
+ document.getElementById("div_g3"),
+ gdata,
+ {
+ fillGraph: true,
+ fillAlpha: 0.9,
+ series: {
+ Y2: { fillAlpha: 0.1 }
+ }
+ }
+ );
+
+
+ </script>
+ </body>
+</html>
projects / dygraphs.git / commitdiff