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>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
<div id="container" style="width:100%; height:400px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const chart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>
Does anybody know how I can integrate highcharts into a dojo front end? The error message I receive with this code is...
Uncaught ReferenceError: Highcharts is not defined at HTMLDocument.<anonymous> dojo.html:24:27
Eventually I will have to get this working for the ESRI web app builder which is built on dojo so I am hoping the dojo versions are the same. Would somebody let me know how to check that as well? I know an adaptor was made for this in 2014 (https://github.com/ben8p/highcharts.com-dojo-adapter) however I could not find documentation on how to use it and the owner of this repo was unable to offer further assistance as they have not worked on this project for some time.
Cheers and thanks in advance
Using dojo with Highcharts is not officially supported. It seems to work with Highcharts 5, but It is always recommended to use the latest version.
<script src="https://code.highcharts.com/5/highcharts.js"></script>
Demo:
https://jsfiddle.net/BlackLabel/wy3mu4pt/
Dojo adapter for highcharts is one of our community wrappers. As I noticed in the github project it is tested with Highcharts 3.0.7 version, so it might not be compatible with our latest highcharts version as well. The only possibility to get the answers to the specific dojo adapter's questions is to contact the author.
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.
I would like to be able to generate graphs with the x-axis of the form year-month-day hour:minute:second.
I saw in the documentation that you had to use tickMarkFormatter and that you had to define the constant TickMarkType.TimeWithSeconds but I don't understand where!
I don't use Typescript, just an html page with the .js library imported in a script tag, could someone help me ?
Once that's done, I'll just have to add the time on my data this way?
lineSeries.setData([
{ time: '2020-04-11 20:10:00', value: 80.01 },
{ time: '2020-04-12 20:10:10', value: 96.63 },
{ time: '2020-04-13 20:10:20', value: 76.64 },
{ time: '2020-04-14 20:10:30', value: 81.89 },
{ time: '2020-04-15 20:10:40', value: 74.43 },
{ time: '2020-04-16 20:10:50', value: 80.01 },
]);
Ok, juste need to use timestamp instead of date format.
I am trying to find out why my chart is not showing up in my WPF WebBrowser.
When I load my html file, I have the following error:
I think that IE might be blocking Highchart(Javascript from external Source) in the WPF WebBrowser because when I try to load it with IE my page got restricted from running script or ActiveX Control :
I know how to allow IE to run script or ActiveX Control but I don't know how to allow it in my WPF WebBrowser.
I have tried with a Mark Of The Web but I'm not sure if i am using it properly ?
<!-- saved from url=(0016)http://localhost -->
I have also tried some desperate method like adding my program in :
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\MyProgram.exe and MyProgram.vshost.exe with Value 0x00002af9
I would really appreciate some help.
I don't have find any answer that fix this problem so far.
My html file :
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'spline',
inverted: true
},
title: {
text: 'Atmosphere Temperature by Altitude'
},
subtitle: {
text: 'According to the Standard Atmosphere Model'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
labels: {
formatter: function () {
return this.value + 'km';
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
UPDATE
Request : alert(navigator.userAgent);
Result :
Signification
SOLUTION
Without any change in my PC Security Configuration i fixed this problem by adding this in the header of my html file :
<meta http-equiv="x-ua-compatible" content="IE=11">
See Alexander Ryan Baggett Answer for more information or this link.
Okay, this works fine for me.
I added <meta http-equiv="x-ua-compatible" content="IE=11">. I also loaded the HTML file locally in visual studio by adding it to the project and setting it to copy always. I did not end up having to make any registry adjustments on my machine either.
C# file
using System;
using System.IO;
using System.Windows;
namespace Stackoverflow_question
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
string curDir = Directory.GetCurrentDirectory();
webbrowser1.Navigate(new Uri(String.Format("file:///{0}/test.html", curDir))) ;
}
}
}
HTML file
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart("container", {
chart: {
type: "spline",
inverted: true
},
title: {
text: "Atmosphere Temperature by Altitude"
},
subtitle: {
text: "According to the Standard Atmosphere Model"
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: "Altitude"
},
labels: {
formatter: function () {
return this.value + "km";
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: "Temperature"
},
labels: {
formatter: function () {
return this.value + "°";
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x} km: {point.y}°C"
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: "Temperature",
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
It gives a nice result too.
If this code doesn't resolve your issue. I would suspect something needs to be changed about your Local Intranet Security Zone settings.
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