I'm trying to add event markers to my stock chart, but as soon as I add them I get this error:
anychart-stock.min.js:286 Uncaught TypeError: Cannot read properties of undefined (reading 'o')
I have added event markers on other pages of my application without an issue, and I have tried every single example I could find. Here is my current code to add the marker:
var eventMarkers = chart.plot(0).eventMarkers();
console.log(eventMarkers);
// set markers data
eventMarkers.data([
{ date: quotes[1].date, description: '9-11 attacks' },
{ date: quotes[1].date, description: 'Iraq War' },
{ date: quotes[1].date, description: 'Global financial collapse' },
{
date: quotes[1].date,
description: 'OPEC cuts production targets 4.2 mmbpd'
},
{ date: quotes[1].date, description: 'Greece\'s debt crisis' },
{ date: quotes[1].date, description: 'Japan earthquake' },
{ date: quotes[1].date, description: 'Russian financial crisis' },
{
date: quotes[1].date,
description: 'OPEC production quota unchanged'
}
]);
Here is what I am currently including:
<script src='https://code.jquery.com/jquery-3.5.1.js'></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<script src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" charset="utf-8"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-stock.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-annotations.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-ui.min.js"></script><!-- Data adapter -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
This is driving me crazy, should be something simple that I have already done but something is going on and I can't figure it out.
Figured it out after hours of trial and error. The code to create the event markers needed to be before I created the mapping. No idea why this mattered here since that was not required on any other pages in which I created event markers.
Related
I want to implement the Trustpilot javascript extension to my own webshop, to make it possible to get automated productreviews based on the people that visit my checkout page.
I managed in Google Tag Manager to set get a trigger, when someone is visiting my /checkout/thankyou page and send a invitation to Trustpilot. They gave me an example JS code to send the inventation to Trustpilot. I'm now only stuck on the actual code to send... I added the sample code below.
Question: They say... that I have to replace the 'VARIABLE_$EMAIL* with my own 'true variables'? But how on earth do I find my true variable names?
Thank you in advance,
Greetings, Jitske
<script>
document.addEventListener('DOMContentLoaded', function() {
const trustpilot_invitation = {
recipientEmail: 'VARIABLE_$EMAIL',
recipientName: 'VARIABLE_$NAME',
referenceId: 'VARIABLE_$ORDERID',
source: 'InvitationScript',
productSkus: 'VARIABLE_$SKU',
products: [{
sku: 'VARIABLE_$SKU',
productUrl: 'VARIABLE_$PRODUCTURL',
imageUrl: 'VARIABLE_$IMAGEURL',
name: 'VARIABLE_$PRODUCTNAME',
}],
};
tp('createInvitation', trustpilot_invitation);
});
</script>
From their support site I found this, which explains a bit more what is needed.
document.addEventListener('DOMContentLoaded', function() {
const trustpilot_invitation_data = {
recipientEmail: 'john#gmail.com',
recipientName: 'John',
referenceId: 'Order_123',
source: 'InvitationScript',
productSkus: ['sku_1', 'sku_2'],
products: [{
sku: 'sku_1',
productUrl: 'https://your_shop.com/product/1',
imageUrl: 'https://your_shop.com/product/images/1',
name: 'test_product_1',
},
{
sku: 'sku_2',
productUrl: 'https://your_shop.com/product/2',
imageUrl: 'https://your_shop.com/product/images/2',
name: 'test_product_2',
}
],
};
tp('createInvitation', trustpilot_invitation_data);
});
So you actually need to parse the email and other info from your page, and add it to this javascript snippet.
I am trying to use the Highcharts set of javascript libraries to create a page that displays both a stock prices chart and a gantt chart (using the Highstocks and Highcharts Gantt libraries)
I do not have problems creating and displaying either of these plots independently on separate pages.
However, I cannot get the two libraries to work together in order to display these two plots on the same webpage.
I would appreciate any help i can get on how to get these two libraries to work together.
Attempt 1. If I import the highstock script first
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
then the following happens:
the prices plot will display but the gantt plot does not.
It throws two error messages in the console:
Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
at m (highstock.src.js:463)
at Object.d.error (highstock.src.js:474)
at highcharts-gantt.src.js:21
at highcharts-gantt.src.js:9
and
Uncaught TypeError: Highcharts.ganttChart is not a function
at myExample.html:60
Attempt 2. If I import the gantt script first
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
then the following happens:
the gantt plot will display but the prices plot does not.
It throws two error messages in the console:
Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
at d (highcharts-gantt.src.js:463)
at Object.c.error (highcharts-gantt.src.js:474)
at highstock.src.js:21
at highstock.src.js:9 ```
and
Uncaught TypeError: Highcharts.stockChart is not a function
at myExample.html:28
Example Code
A minimum viable code for demonstrating the problem i am running into is below:
<html>
<head>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
</head>
<body>
<!-- ================================================================== -->
<!-- PRICES PLOT -->
<!-- ================================================================== -->
<div id="pricesChart" style="height: 500px; min-width: 310px"></div>
<script type="text/javascript">
var prices =
[[Date.parse("2019-06-01 00:00:00"), 0.081558],
[Date.parse("2019-06-02 00:00:00"), 0.081728],
[Date.parse("2019-06-03 00:00:00"), 0.081624],
[Date.parse("2019-06-04 00:00:00"), 0.08164500000000001]
];
var lineplotOptions = {
xAxis: { type: 'datetime' },
series: [{
type: "line",
data: prices,
yAxis: 0,
}],
};
Highcharts.stockChart('pricesChart', lineplotOptions);
</script>
<!-- ================================================================== -->
<!-- GANT CHART -->
<!-- ================================================================== -->
<div id="container"></div>
<script type="text/javascript">
var tasks =
[{
start: Date.parse("2019-06-01 06:00:00"),
end: Date.parse("2019-06-01 20:30:00"),
name: 'task1'
}, {
start: Date.parse("2019-06-01 09:20:00"),
end: Date.parse("2019-06-03 02:00:00"),
name: 'task2'
}, {
start: Date.parse("2019-06-02 11:00:00"),
end: Date.parse("2019-06-03 21:10:00"),
name: 'task1'
}];
var gant_options = {
yAxis: { uniqueNames: true },
scrollbar: {enabled: true },
series: [{
name: 'Project 1',
data: tasks
}]
}
var mychart = Highcharts.ganttChart('container', gant_options);
</script>
</body>
</html>
Similar questions on stackoverflow
The following are similar questions on stack overflow, but which don't quite deal with my specific case.
Using highcharts & highstock together on same page
use highchart and highstock on the same page
These two deal with highcharts and highstock libraries on the same page.
Highstock library extends on the functionality of highcharts, so there is no need to also import highcharts.
This does not help my case because the functionality i need is not included in either highstock or highcharts-gantt on their own.
You can load highstock and highcharts-gantt separately like that:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script>
var Highstock = window.Highcharts;
window.Highcharts = null;
</script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
initialization:
Highstock.stockChart('container1', {
series: [{
data: []
}]
});
Highcharts.ganttChart('container2', {
series: [{
data: []
}]
});
Demo:
https://jsfiddle.net/BlackLabel/Lxnjwsb9/1/
I am using the Fullcalendar library, scheduler module.
I use minTime properties and set it to: '06:00:00' inside of view definition (so that "day is not start with midnight").
But when I that, the calendar elements that starts before 6h has a class fc-not-start even when they are in the middle of the calendar...
How to handle this?
EDIT :
Some additional information:
Fullcalendar version: v3.9.0
fc-not-start : This class should have calendar (scheduled) elements that are not started in this view. (The start is invisible). This is needed because, if element has some rounded corners, border,... it should't have on the left side if start is not visible. (Or if you want to display icon, that you are not looking at full element)
Example:
Inside the red square, this is a right use of fc-not-start
This is the wrong use of the fc-not-start
The fc-not-start should calculate itself inside fullcalendar library and it is working, until I add the parameter minTime in view.
EDIT 2:
I create minimal code to see the problem
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel='stylesheet' href='css/fullcalendar.css' />
<link rel='stylesheet' href='css/scheduler.css' />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel='stylesheet' href='css/style.css' />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id='calendar'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src='js/moment.js'></script>
<script src='js/fullcalendar.js'></script>
<script src='js/scheduler.js'></script>
<script src='js/my_script.js'></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
JS
var resources = [
{
id: 'A',
title: 'A',
sortOrder: 1
},
{
id: 'B',
title: 'B',
sortOrder:2
},
{
id: 'C',
title: 'C',
sortOrder:3
}
];
$('#calendar').fullCalendar({
// height: 550,
// eventColor: '#428bca',
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'timelineFourDays',
views: {
timelineFourDays: {
type: 'timeline',
minTime: '07:00:00',
duration: { days: 4 }
},
},
resources: resourcesFunc,
nowIndicator: true,
events: [
{
id: '1',
resourceId: 'A',
title: 'Meeting',
start: '2019-07-13T00:20:00',
end: '2019-07-14T02:20:00',
},
{
id: '2',
resourceId: 'A',
title: 'Meeting2',
start: '2019-07-13T00:20:00',
end: '2019-07-14T02:20:00',
}
],
displayEventTime: true,
});
function resourcesFunc(callback) {
callback(resources);
}
The < should be only if the element is not whole visible on screen. In this case this class is wrongly calculated...
https://jsfiddle.net/Ly9rsoc1/2/
You said
"The < should be only if the element is not whole visible on screen"
However: Your events start before the specified minTime value. This means that the start point of the event can never be visible on your calendar. Therefore the < icon is displayed.
I think you have misunderstood the nature of this functionality. It's not about whether the start of the HTML element is visible, it's about whether the start of the event (which is represented by that HTML element) is visible. And since you removed some of the times covered by that event from your display, then it displays the icon so that this fact is clear to the user.
In conclusion: The calendar is behaving exactly as it should. There is no bug here.
As an aside, I would point out that if you routinely have events which cover these times of day, then in my opinion it's not very logical or very user-friendly to make those times invisible, because it hides what might be useful information. But if these particular events are an anomaly, and most of your events are after 7am then you might just have to tolerate these ones as an unusual case.
update: It appears that everything has been solved by including the bootstrap.min.js in the html file itself (even though the bootstrap file is extended from layout, it must have been included after the other dependent scripts are, as its components weren't being accessed by them). I'll post as an answer when I can unless someone else can do so (I may not understand the problem as well as you).
I'm trying to use Web2py to test a simple MetricsGraphics example, but no graph loads in the browser.
Current error preventing graph from being displayed:
TypeError: $(args.target+' h2.chart_title').popover is not a function. (In '$(args.target+' h2.chart_title').popover', '$(args.target+' h2.chart_title').popover' is undefined)
The error occurs in metricsgraphics.min.js
HTML file:
{{extend 'layout.html'}}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="{{=URL('static','js/d3/d3.min.js')}}"></script>
<link href="{{=URL('static','js/metric-graphics/css/metricsgraphics.css')}}" rel='stylesheet' type="text/css">
<script src="{{=URL('static','js/metric-graphics/js/metricsgraphics.min.js')}}"></script>
<h3>Graph</h3>
<div class="result text-center col-xs-5">
<script>
data_graphic({
title: "UFO Sightings",
description: "Yearly UFO sightings from 1945 to 2010.",
data: [{'year':1964, 'sightings':6}] // JSON.parse({{=sample}}), // also tried as JSON.parse([{"year":1945, "sightings":"6"}])
markers: [{'year': 1964, 'label': '"The Creeping Terror" released'}],
width: 600,
height: 250,
target: ".result",
x_accessor: "year",
y_accessor: "sightings",
});
</script>
{{#=BEAUTIFY(response._vars)}}
Python controller function:
def chart_view():
'''This will show the graph for a feed (axes)'''
# sample = [{"year": "1945", "count": 6}, {"year": "1950", "sightings": 35}, {"year": "1964", "sightings": 6}]
return dict()
To write a Python object into a view, it must be preceded by an equals sign:
{{=sample}}
There may be other errors, as it is not clear how you are getting sample to that view.
I'm a new developer and im trying the framework Dojo-Toolkit and especially d-grid .
So i follow the tutorial (http://dgrid.io/tutorials/1.0/hello_dgrid/) here is my index :
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" href="djgrid.css">
<link rel="stylesheet" href="claro.css">
</head>
<body class="claro">
<div id="grid"></div>
<!-- load Dojo -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="dojoconfig.js"></script>
<script>
require([ 'dgrid/Grid', 'dojo/domReady!' ], function (Grid) {
var data = [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
];
var grid = new Grid({
columns: {
first: 'First Name',
last: 'Last Name',
age: 'Age'
}
}, 'grid');
grid.renderArray(data);
});
</script>
</body>
</html>
So when i run on "localhost/DOJO/index.html" i get this error :
http://localhost/DOJO/dgrid/Grid.js Failed to load resource: the server responded with a status of 404 (Not Found)
I dont understand why it search on this location ... and also i get 2 :
Error: scriptError(…)
If someone can tell me how that work that ll be lovely :)
Even if the problem seems solved, this answer will clarify Ken's comments and help other people who try to integrate DGrid to Dojo.
Your code require a dgrid/Grid module the same way it require the dojo\domReady
require([ 'dgrid/Grid','dojo/domReady!'], ...);
so your dgrid folder have to be at the same level as your dojo folder.
DOJO
app
dgrid
dijit
dojo
dojox
In your dojoConfig.js, you should have a line like :
packages: ['dojo', 'dijit', 'dojox', 'app', 'dgrid'],