I have the following fading code which allows me to fade in the text from white to black, but on my website i have a back backround and need to fade this from black to white, can anyone help..
<html>
<head>
<title>Fading Text Example</title>
<script language="javascript">
var hcolor=255;
function Fade(direction) {
obj=document.getElementById("head1");
hcolor += direction;
if (hcolor >= 0 && hcolor < 256) {
hex=hcolor.toString(16);
if (hex.length==1) hex="0" + hex;
obj.style.color="#" + hex + hex + hex;
window.setTimeout("Fade(" + direction + ");",1);
}
}
</script>
</head>
<body onLoad="Fade(1);">
<h1 ID="head1" style="color:#FFFFFF;">
Fading Text Example</h1>
</body>
</html>
It seems the function already includes the ability to specify direction, just pass in -1 instead of 1, and set initial hColor to 0. Node that in the below I've also edited the formatting slightly to clean up variable names and make it marginally cleaner / more compliant.
<html>
<head>
<title>Fading Text Example</title>
<script language="text/javascript">
var hColor=0;
function fade(direction) {
obj=document.getElementById("head1");
hcolor += direction;
if ((hColor >= 0) && (hColor < 256)) {
hex=hColor.toString(16);
if (hex.length==1) hex="0" + hex;
obj.style.color="#" + hex + hex + hex;
window.setTimeout("fade(" + direction + ");",1);
}
}
</script>
</head>
<body onload="fade(-1);">
<h1 id="head1" style="color:#FFFFFF;">Fading Text Example</h1>
</body>
Related
I want to use HTML canvas fillRect() to make a block with a diagonal line from upper right to bottom left.
I managed to create a block with a line from upper left to bottom right.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
for(var i = 0; i < 300; ++i) {
ctx.fillRect(i, i, 1, 1);
}
</script>
</body>
</html>
How can I get what I want based on this code?
I managed it using lineTo.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(300, 0);
ctx.lineTo(0, 300);
ctx.moveTo(0, 300);
ctx.lineTo(300, 0);
ctx.stroke();
</script>
</body>
</html>
Below is the most simple code to drag an element, in this case a <DIALOG>.
Works fine in latest Chrome and the likes, but not in latest Firefox.
Here it looks like the event.screenY has a positiv offset. This value is used in the onmousedown
and the ondragend functions
I assume (never assume!!) it is the height of the header holding tabs, bookmarks and the like.
Is this a defect in Firefox or what am I doing wrong. Any Ideas ?
<!DOCTYPE html>
<html>
<head>
<title>screenY test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0
}
</style>
</head>
<body>
<dialog open id='alertDialog' >
<div class='handle'>drag me here</div>
<br>
<div id='out'>You should never see this</div>
<hr>
<button >Ok</button>
</dialog>
<script>
var obj, out = document.querySelector('#dout');
obj = document.querySelector('#alertDialog');
makedrag(obj);
function makedrag(obj) {
var han = obj.querySelector('.handle');
han.onmousedown = (e) => {// save positions at start
obj.draggable = true;
obj.hgsX = e.screenX;
obj.hgsY = e.screenY;
obj.querySelector('#out').innerText = e.screenY;
obj.hgsposX = obj.offsetLeft;
obj.hgsposY = obj.offsetTop;
};
obj.ondragend = (e) => {
var t, l;
t = e.target.offsetTop + (e.screenY - obj.hgsY);
l = e.target.offsetLeft + (e.screenX - obj.hgsX);
obj.draggable = false;
t = Math.max(0, t);
t = Math.min(t, window.innerHeight - obj.clientHeight);
l = Math.max(0, l);
l = Math.min(l, window.innerWidth - obj.clientWidth);
obj.style.top = t + 'px';
obj.style.left = l + 'px';
obj.style.position = 'fixed';
};
}
</script>
</body>
</html>
I am planning to migrate my candle bar timeseries visualization from Plotly to Lightweight Charts.
My dataset resides in a database and it includes 1. 2 millions of bar candle timeseries.
Can Lightweight Charts handle large datasets - like 1.2 millions bar candle timeseries?
There aren't any hard coded limits to size of the dataset you can pass into Lightweight Charts, however there is a limit to how many datapoints can be visible on the chart at any given time. This is dependent on the size of the chart (width) as each candle would need to be at least a single pixel wide.
Here is an example of a candlestick chart with infinite history: https://jsfiddle.net/TradingView/fg7yez2s/
Simple example which creates a candlestick chart with 1.2 million data points (just to prove that it works):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
/>
<title>Large Dataset</title>
<script
type="text/javascript"
src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"
></script>
</head>
<body style="padding: 0; margin: 0">
<div
id="container"
style="position: absolute; width: 100%; height: 100%"
></div>
<script type="text/javascript">
function generateData() {
var res = [];
var time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
for (var i = 0; i < 1200000; ++i) {
const sign = Math.random() < 0.5 ? -1 : 1;
const rand = Math.random();
res.push({
time: time.getTime() / 1000,
open: i,
close: i + sign * rand * 100,
high: i + rand * 200,
low: i - rand * 200,
});
time.setUTCDate(time.getUTCDate() + 1);
}
return res;
}
var chart = LightweightCharts.createChart(
document.getElementById("container")
);
var mainSeries = chart.addCandlestickSeries({
upColor: "#26a69a",
downColor: "#ef5350",
borderVisible: false,
wickUpColor: "#26a69a",
wickDownColor: "#ef5350",
});
mainSeries.setData(generateData());
</script>
</body>
</html>
Apparently this doesn't work, and since I'm new to HTML5 I'm unsure as to why. I should get some vertical lines on the canvas. The idea is to build a grid on the canvas screen to work from, but this doesn't seem to be creating the lines for some reason.
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<style>
body {
padding:0px;
margin:0px;
}
canvas {
border:1px solid #000000;
}
</style>
</head>
<body>
<canvas id="gc" width="800" height="600"></canvas>
<script>
function buildGrid() {
alert("Start!");
var gameCanvas = document.getElementById("gc");
var ctx = gameCanvas.getContext("2d");
for (x=5; x<gameCanvas.width; x+=5) {
console.log(x);
ctx.moveTo(x, 10);
ctx.lineTo(x, gameCanvas.length);
}
ctx.strokeStyle = "black";
ctx.stroke();
}
window.onload = buildGrid();
</script>
</body>
</html>
Instead of
ctx.lineTo(x, gameCanvas.length);
Try
ctx.lineTo(x, gameCanvas.height);
https://jsfiddle.net/9as7mwb6/6/
There’s no gameCanvas.length. It should be gameCanvas.height.
However, I think you should add 0.5 to each x value in order to make the edges sharp instead of blurry:
for (var x = 5; x < gameCanvas.width; x += 5) {
console.log(x);
ctx.moveTo(x + 0.5, 10);
ctx.lineTo(x + 0.5, gameCanvas.height);
}
How can I change the view area for a graph.
I have this example below se code an image
The left axes goes from 0 to 10 because there is data from 0 to 10 , but I still would like to show only 4 to 9, almost like its zoomed.
Is it possible ?
<title>Graf TEST </title>
</head>
<script src="http://127.0.0.1/charts/js/teechart.js" type="text/javascript"> </script>
<script src="http://127.0.0.1/charts/js/teechart-extras.js" type="text/javascript"></script>
<script language="JavaScript">
function draw() {
var Chart1=new Tee.Chart("canvas");
Chart1.title.text="test";
Chart1.applyTheme("minimal");
Chart1.palette.colors[0] ="green";
Chart1.addSeries(new Tee.Line([]) );
var Series1 = Chart1.series.items[0];
Series1.marks.style="value";
Series1.marks.visible=true;
Series1.colorEach="no";
Series1.format.stroke.size=3;
Series1.pointer.visible=true;
Series1.data.values[0]=6;
Series1.data.labels[0] ="Okt";
Series1.data.values[1]=9;
Series1.data.labels[1] ="Nov";
Series1.data.values[2]=10;
Series1.data.labels[2] ="Dec";
Series1.data.values[3]=0;
Series1.data.labels[3] ="Jan";
Chart1.draw();Chart1.toImage("img");canvas.style.display="none";
}
</script>
<p>
<BODY onload="draw()">
<img id="img"><canvas id="canvas" width="800" height="400"></canvas>
</html>
You should do that manually setting axis minimum and maximum values, for example:
Chart1.axes.left.setMinMax(4,9);