I can't get lightweight-charts to display when I'm using my javascript file. I see some folks put the JS code into their .html files but I would like my code inside my .js file. I must be missing something or have coded something incorrectly.
Thank you...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<!-- <link rel="stylesheet" type="text/css" href="charts.css"> -->
<script src="https://unpkg.com/lightweight-charts#3.4.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="charts.js" type="javascript"></script>
</head>
<body>
<div id="" class="">Test</div>
<div id="container"></div>
</body>
</html>
chart = LightweightCharts.createChart(document.getElementById('container'), {width: 900, height: 900,});
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
Try it just moving your <script> tag inside <body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
<!-- <link rel="stylesheet" type="text/css" href="charts.css"> -->
<script src="https://unpkg.com/lightweight-charts#3.4.0/dist/lightweight-charts.standalone.production.js"></script>
</head>
<body>
<div id="" class="">Test</div>
<div id="container"></div>
<script src="charts.js"></script>
</body>
</html>
Result I am suing live server VS code.
I had this problem too.
The chart displays here when I resize the window.
So I put an
`window.dispatchEvent(new Event('resize'));`
in my javascript file.
Found this somewhere here on SO.
Related
I use the nice FormBuilder from Kevin Chappell
https://formbuilder.online/docs/
Several types can be defined for the 'text' field. I have integrated the new control 'time'. I now want if this new control is clicked, 'time' should be preset in the 'Type' field.
How can i adjust that?
PS: The code example does not run here but only locally (sessionStorage topic)
jQuery(function($) {
var fbTemplate = document.getElementById('fb-editor');
var options = {
fields : [{
label: 'Time',
attrs: {
type: 'text'
},
icon: '🕑'
}],
subtypes: {
text: ['datetime-local','time']
},
disabledSubtypes: {
text: ['password','email','color','tel'],
}
};
$(fbTemplate).formBuilder(options);
});
body {
background: lightgrey;
font-family: sans-serif;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - formBuilder: Options -> subtypes</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="fb-editor"></div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://formbuilder.online/assets/js/form-builder.min.js'></script><script src="./script.js"></script>
</body>
</html>
I didn't find out, but i took a different path for it. :-)
Enter the new element as type time in the field definition.
A new subtype time has also been defined.
Then add the time in the controls register.
jQuery(function($) {
var fbTemplate = document.getElementById('fb-editor');
var options = {
fields : [{
label: 'Time',
attrs: {
type: 'time'
},
icon: '🕑'
}],
subtypes: {
time: ['time']
}
};
$(fbTemplate).formBuilder(options);
});
// src/js/control/text.js
// register this control for the following types & text subtypes
control.register(['text', 'file', 'date', 'number', 'time'], controlText)
control.register(['text', 'password', 'email', 'color', 'tel'], controlText, 'text')
body {
background: lightgrey;
font-family: sans-serif;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>formBuilder</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="fb-editor"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://formbuilder.online/assets/js/form-builder.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
I use vuetify for text fields.
using v-model I display the text given from a object.
For example:
I have object named "distance" and the value of object is "50", in front-end I used v-model to display the data of "distance".
The problem: I want to have "/km" after the text/data display from the text field w/o affecting real data of "distance".
The display of text field is "50" I want to make it "50/km"
You can format it with computed, here is an example:
<template>
<input v-model="test" />
</template>
<script>
export default {
computed: {
test() {
return this.yourdata + '/km'
}
}
}
</script>
Here is a complete example, just put it in an html file and open it in any browser:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<title>Test-Vue</title>
</head>
<body>
<div id="app">
<input v-model="distance">/km<br/>
{{distanceWithKm}}
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
distance: '50'
},
computed: {
distanceWithKm() {
return this.distance + "/km"
}
}
})
</script>
</html>
I'm looking everywhere to find out how to translate dynamic content loaded with js ajax (or innerHTML).
I expect that h2 paragraph is translated but not happens.
Am I mistaken?
Thanks.
I write here because I can't find any doc.
Link to JSFiddle
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>language test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate-loader-url/2.0.0/angular-translate-loader-url.js"></script>
<script>
angular.module('languageTest', ['pascalprecht.translate'])
.config(function($translateProvider) {
$translateProvider.preferredLanguage('en');
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_DE: 'german'
});
$translateProvider.translations('de', {
TITLE: 'Hallo',
FOO: 'Dies ist ein Paragraph.',
BUTTON_LANG_EN: 'englisch',
BUTTON_LANG_DE: 'deutsch'
});
});
</script>
</head>
<body ng-app="languageTest">
<h1><span>{{'FOO'|translate}}</span></h1>
<h2 id="h2load"></h2>
<button onclick="loadh2()">load h2</button>
<script>
function loadh2(){
document.getElementById("h2load").innerText = "{{'TITLE'|translate}}";
}
</script>
</body>
</html>
Am trying to implement JQuery Counter Plugin but I'm getting an error:
dashboard:694 Uncaught TypeError: $(...).counterUp is not a function
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
</head>
<body>
<div class="task-stat"><i class="icon-tasks"></i>Total tasks today<br><h2><span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">{{$tasks->count()}}</span></h2></div>
<script>
$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});
</script>
</body>
</html>
Please check this
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
</head>
<body>
<div class="task-stat"><i class="icon-tasks"></i>Total tasks today<br><h2><span class="counter">1000</span></h2></div>
<script>
$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});
</script>
</body>
</html>
Update your waypoints.min.js library version
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
If you have two calling of jquery.waypoints.min.js or jquery.counterup.min.js comment one of them in other's file's.
i have some trouble using NeoVis.js to visualize my Neo4j-graph.
I use the Movie-Tutorial-Database in which i established relationships "ACTED_WITH" between everone who acted in a movie together. All of my stuff is local.
I made a test.html file in which is following code:
<head>
<meta charset="utf-8">
<title>DataViz</title>
<style type="text/css">
#viz {
width: 900px;
height: 700px;
}
</style>
<script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
<script type="text/javascript">
var viz;
function draw() {
var config = {
container_id: "viz",
server_url: "bolt://localhost:7687",
server_user: "Neo4j",
server_password: "123",
labels: {
},
relationships: {
},
initial_cypher: "match (tom:Person{name:"Tom Hanks"})-[r:ACTED_WITH]->(coWorkers)
return tom, r, coWorkers"
},
viz = new NeoVis.default(config);
viz.render();
};
</script>
</head>
<body onload="draw()">
<div id="viz"></div>
</body>
And when i open the file in my browser it shows the title inside the tab an thats it. Investigating it with the browser tools it shows the following:
test.html:30 Uncaught SyntaxError: Unexpected identifier
test.html:41 Uncaught ReferenceError: draw is not defined
at onload (test.html:41)
I dont get it. draw() is defined, isnt it? And the query works fine within the Neo4j-browser too.
Can you figure out whats wrong? Thanks in advance.
Greetings
Please check the below code..
The cypher works for me, First test with some simple cypher to test whether you are connecting to neo4j using bolt.
Then add your cypher check proper syntax too.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
<script type="text/javascript">
function draw() {
alert("inside method");
var viz;
var config = {
container_id: "viz",
server_url: "bolt://127.0.0.1:7687",
server_user: "Neo4j",
server_password: "password",
labels: {
},
relationships: {
},
initial_cypher: "MATCH (n:Movie) RETURN n LIMIT 1"
},
viz = new NeoVis.default(config);
console.log(JSON.stringify(viz));
viz.render();
};
</script>
</head>
<body>
<div>
<div id="row2">
<input type="button" value="click" onclick="draw()">
<div id="viz"></div>
</div>
</form>
</div>
</body>
</html>