(function () { |
(function () { |
|
|
Flotr.ExampleList.add({ |
Flotr.ExampleList.add({ |
key : 'test-background', |
key: 'test-background', |
name : 'Test Background', |
name: 'Test Background', |
callback : test_background, |
callback: test_background, |
timeout : 100, |
timeout: 100, |
tolerance : 10 |
tolerance: 10 |
}); |
}); |
|
|
function test_background (container) { |
function test_background(container) { |
|
|
var |
var |
d1 = [], |
d1 = [], |
d2 = [], |
d2 = [], |
d3 = [], |
d3 = [], |
d4 = [], |
d4 = [], |
d5 = [], // Data |
d5 = [], // Data |
ticks = [[ 0, "Lower"], 10, 20, 30, [40, "Upper"]], // Ticks for the Y-Axis |
ticks = [ |
graph; |
[ 0, "Lower"], |
|
10, |
for(var i = 0; i <= 10; i += 0.1){ |
20, |
d1.push([i, 4 + Math.pow(i,1.5)]); |
30, |
d2.push([i, Math.pow(i,3)]); |
[40, "Upper"] |
d3.push([i, i*5+3*Math.sin(i*4)]); |
], // Ticks for the Y-Axis |
d4.push([i, i]); |
graph; |
if( i.toFixed(1)%1 == 0 ){ |
|
d5.push([i, 2*i]); |
for (var i = 0; i <= 10; i += 0.1) { |
|
d1.push([i, 4 + Math.pow(i, 1.5)]); |
|
d2.push([i, Math.pow(i, 3)]); |
|
d3.push([i, i * 5 + 3 * Math.sin(i * 4)]); |
|
d4.push([i, i]); |
|
if (i.toFixed(1) % 1 == 0) { |
|
d5.push([i, 2 * i]); |
|
} |
|
} |
|
|
|
d3[30][1] = null; |
|
d3[31][1] = null; |
|
|
|
function ticksFn(n) { |
|
return '(' + n + ')'; |
|
} |
|
|
|
graph = Flotr.draw(container, [ |
|
{ data: d1, label: 'y = 4 + x^(1.5)', lines: { fill: true } }, |
|
{ data: d2, label: 'y = x^3'}, |
|
{ data: d3, label: 'y = 5x + 3sin(4x)'}, |
|
{ data: d4, label: 'y = x'}, |
|
{ data: d5, label: 'y = 2x', lines: { show: true }, points: { show: true } } |
|
], { |
|
xaxis: { |
|
noTicks: 7, // Display 7 ticks. |
|
tickFormatter: ticksFn, // Displays tick values between brackets. |
|
min: 1, // Part of the series is not displayed. |
|
max: 7.5 // Part of the series is not displayed. |
|
}, |
|
yaxis: { |
|
ticks: ticks, // Set Y-Axis ticks |
|
max: 40 // Maximum value along Y-Axis |
|
}, |
|
grid: { |
|
verticalLines: false, |
|
backgroundImage: { |
|
src: 'img/test-background.png?' + Math.random() |
|
} |
|
}, |
|
legend: { |
|
position: 'nw' |
|
}, |
|
title: 'Basic Axis example', |
|
subtitle: 'This is a subtitle' |
|
}); |
} |
} |
} |
|
|
|
d3[30][1] = null; |
|
d3[31][1] = null; |
|
|
|
function ticksFn (n) { return '('+n+')'; } |
|
|
|
graph = Flotr.draw(container, [ |
|
{ data : d1, label : 'y = 4 + x^(1.5)', lines : { fill : true } }, |
|
{ data : d2, label : 'y = x^3'}, |
|
{ data : d3, label : 'y = 5x + 3sin(4x)'}, |
|
{ data : d4, label : 'y = x'}, |
|
{ data : d5, label : 'y = 2x', lines : { show : true }, points : { show : true } } |
|
], { |
|
xaxis : { |
|
noTicks : 7, // Display 7 ticks. |
|
tickFormatter : ticksFn, // Displays tick values between brackets. |
|
min : 1, // Part of the series is not displayed. |
|
max : 7.5 // Part of the series is not displayed. |
|
}, |
|
yaxis : { |
|
ticks : ticks, // Set Y-Axis ticks |
|
max : 40 // Maximum value along Y-Axis |
|
}, |
|
grid : { |
|
verticalLines : false, |
|
backgroundImage : { |
|
src : 'img/test-background.png?' + Math.random() |
|
} |
|
}, |
|
legend : { |
|
position : 'nw' |
|
}, |
|
title : 'Basic Axis example', |
|
subtitle : 'This is a subtitle' |
|
}); |
|
} |
|
|
|
})(); |
})(); |
|
|