i'm trying to use a chart on my webpage using Lightweight-charts-library but the chart won't show.
This is my HTMl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type = "module" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<title>Socket Streams</title>
</head>
<body>
<h1>Trades</h1>
<div id ="chart"></div>
<div id ="trades"></div>
<script>
var binanceSockets = new WebSocket("wss://stream.binance.com:9443/ws/dogebtc#trade")
var tradeDiv = document.getElementById('trades');
binanceSockets.onmessage = function (event){
console.log(event.data);
var object = JSON.parse(event.data);
tradeDiv.append(object.p);
}
</script>
<script src="chart.js" type="module"></script>
</body>
</html>
My goal is to show a chart on the "chart" div, so I basically copy-pasted this code from the Lightweight-charts library making it to point to chart.
import { createChart } from 'lightweight-charts';
const chart = createChart(document.getElementById("chart"), { width: 400, height: 300 });
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 },
]);
if i remove type = module from <script src="chart.js"></script>i get Uncaught SyntaxError: Cannot use import statement outside a module.
The javascript's file name is charts.js
Im assuming you're not using webpack or any bundler.
For the module to be considered you'd need to import the library differently and as follow import 'https://unpkg.com/lightweight-charts#latest/dist/lightweight-charts.standalone.production.js'; in your chart.js script and then use it as advised in the doc.
make sure put https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js in your header, it has to be in the header, otherwise won't work.
Related
I am trying to setup a cytoscape.js graph, which includes links in node labels and also expandable/collapsable parent nodes. After some research I decided to use the cytoscape-node-html-label extension in combination with the expand-collapse extension.
I played around with both extensions separately and they do what I want. However, when trying to combine them, HTML links are not clickable any more. It seems like the expand/collapse extension adds a layer, which does not propagate mouse events to the HTML extension.
{
enablePointerEvents: true
}
is already set for the HTML label extension but does not solve the problem. Please find a minimum working example below.
I am happy to get your support on
how to propagate clicks to the HTML label or
how to move the HTML labels "on top" of the expand/collapse layer.
Thank you in advance :-)
code.js
document.addEventListener('DOMContentLoaded', function() {
var cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'fcose'
},
elements: {
nodes: [
{ data: { id: 'node1', type: 2 } },
{ data: { id: 'node1.1', parent: 'node1' } },
{ data: { id: 'node2' } },
],
edges: [
{ data: { source: 'node1', target: 'node2' } },
]
},
});
cy.nodeHtmlLabel([{
query: 'node[type=2]',
valign: "top",
valignBox: "top",
tpl: function() {
return '<p>Test label 1. link</p>'
}
}], {
enablePointerEvents: true
});
// If the following block is commented, the HTML link above works
var api = cy.expandCollapse({
layoutBy: {
name: "fcose",
animate: true,
randomize: false,
fit: true
},
fisheye: true,
animate: true,
undoable: false,
});
});
demo.html
<!DOCTYPE>
<html>
<head>
<title>cytoscape-expand-collapse.js demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>
<script src="https://unpkg.com/cytoscape-expand-collapse/cytoscape-expand-collapse.js"></script>
<script src="src/cytoscape-node-html-label.js"></script>
</head>
<body>
<h1>cytoscape-expand-collapse demo</h1>
<script src="code.js"></script>
<div style="float: right; height: 95%; width: calc(80% - 4px);" id="cy"></div>
</body>
</html>
Was following the documentation for lightweight charts and tried creating my first chart in Node.js on repl. I have the package.json with lightweight charts and ran npm install lightweight-charts in the repl shell and downloaded lightweight charts. Yet when I run the code I get this error:
SyntaxError: Named export 'createChart' not found. The requested module 'lightweight-charts' is a CommonJS module, which may not support all module.exports as named exports.
I don't know where to go from here.
Give a try to LightweightCharts.createChart(...) instead
Here's an entire test page.
Pay attention to the 1st script that loads the library (once compiled with npm run build)
<!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>Debug page</title>
<script type="text/javascript" src="./dist/lightweight-charts.standalone.development.js"></script>
</head>
<body style="padding: 0; margin: 0;">
<div id="container1"></div>
<script type="text/javascript">
const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
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 },
]);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highstock Example</title>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
}
</style>
</head>
<body>
<script src="../../code/highstock.js"></script>
<script src="../../code/modules/data.js"></script>
<script src="../../code/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'ohlc',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
</script>
</body>
</html>
Hi,
this is my first post on stack so plz correct if wrong. I wish to know how do I access the properties of highstock chart in the above example. eg. if i want to set the 'selected' property of 'rangeselector' externally through code how to do it. Any help will be highly appreciated.
Thanks
You can:
Store a chart in a variable:
const chart = Highcharts.stockChart('container', {...});
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Use load event:
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
this.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
}
}
},
...
});
Use a callback function:
Highcharts.stockChart('container', {
...
}, function(chart) {
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
Live demo: http://jsfiddle.net/BlackLabel/3L7uvm4n/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.chart
https://api.highcharts.com/highcharts/chart.events.load
I have successfully created a chart and configured it using charts.js, but now I want to make the X Axis represent time. When I try to do this using the code below, I get the following console error: Uncaught ReferenceError: moment is not defined. I am using the chart.bundle.min.js because the documentation specifies the bundle comes with moment.js in it so I shouldn't need to download and link moment.js as well.
Here is the code, I got this from a stack member that was answering a question about time axis.
JavaScript:
function newDate(days)
{
return moment().add(days, 'd'); //THIS IS WHERE THE PROBLEM IS ACCORDING TO CONSOLE.
};
var config =
{
type: 'line',
data:
{
//Calling the function here, so also shows as error in console.
labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)],
datasets:
[{
label: "My First dataset",
data: [4, 3, 1, 4],
}]
},
options:
{
scales:
{
xAxes:
[{
type: 'time',
unit: 'month',
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
<link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/chart.bundle.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
It looks to me like Moment for some reason is not available in the bundle I have tried your code in JSFiddle and there is an error, however is load in Moment.js serpatley it works great.
Maybe use Chart.js and Moment.js and not the bundle, if you are worried about http requests you could always compress and bundle them yourself?
I looked at the documentation of charts.js :
When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See Moment.js docs for details.
So, you should use Chart.js api like this :
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}]
}
}
})
not moment().add()
I'm trying to declare through a JSON declaration the options for a markup-declared dijit.form.Select widget. Based on what i've read through in the API documentation, it appears that you could pass a new store using setStore() and then it should update, but that has not produced any useful results besides an empty Select widget with a full store. I am wondering if there's some declaration missing from my object, if i'm using the wrong methods, or if there are any other ways to declare these options.
The test markup I've been using is printed below:
<!DOCTYPE HTML>
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
dojo.require("dijit.form.Select");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
</head>
<body class=" claro ">
<div class="option" id="option" dojoType="dijit.form.Select"></div>
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
var selectOptions = {
name:'selection',
identifier: 'label',
options: [{
label: 'this',
value: '01'
},
{
label: 'that',
value: '02'
},
{
label: 'the other',
value: '03'
},
{
label: 'banana',
value: '04',
},
]};
var aStore = dojo.data.ItemFileReadStore({data: selectOptions});
dijit.byId("option").setStore(aStore, 01);
dijit.byId("option").startup();
});
</script>
</body>
</html>
As #missingno mentioned, using a store for this is probably overkill. You can just use
dijit.form.select.addOption(/*array of options*/).
From your example it would be:
var listOfOptions = [{
label: 'this',
value: '01'
},
{
label: 'that',
value: '02'
},
{
label: 'the other',
value: '03'
},
{
label: 'banana',
value: '04',
},
];
dijit.byId("option").addOption(listOfOptions);
I think you are miss-initializing your store. The options look like the ones used to initialize the plain select instead. Try doing something like:
http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html
var store_options = {
identifier: 'label',
label: 'label',
items: [
{label: 'this', value:'01'},
//...
]
}
var store = dojo.data.ItemFileWriteStore({data: store_options})
OTOH, are you sure you need to use a store for this? Unless you want to use a particular store feature (like notification) you can just pass the data directly when you create a select programatically: http://dojotoolkit.org/reference-guide/dijit/form/Select.html