I am trying to implement Highcharts with this tutorial https://www.highcharts.com/docs/getting-started/your-first-chart but get this error:
Uncaught (in promise) Error: Highcharts error #13: www.highcharts.com/errors/13
It means the div does to render to doesn't exist, but I am pretty sure I have a div with the right class in my code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/babel" src="/js/dashboard.js"></script>
<!--link custom css file-->
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<div class="container">
<h1 class="text-center">Your Dashboard</h1>
<div class="row">
<div class="col-xs-7">
<h3 class="text-center">Calories Today</h3>
<div class="top-left" id="cal-line">
</div>
</div>
<div class="col-xs-5">
<h3 class="text-center">Calories Over Time</h3>
<div class="top-right" id="cal-today" style="width:100% height:400px;">
</div>
</div>
</div>
</div>
</body>
</html>
And here is my JS in /js/dashboard.js:
/*global React*/
/*global ReactBootstrap*/
/*global ReactDOM*/
/*global fetch*/
/*global location*/
/*global Highcharts*/
/*global $*/
//variable to hold user data from API fetch
let user = {};
const fb_id = location.pathname.replace("/users/","");
$(document).ready(function() {
fetch("https://www.url.com/usersdata/" + fb_id)
.then(rsp => rsp.json())
.then(json => {
//we fetched the user data
if(json.error && json.error.message){
throw new Error(json.error.message);
}
user = json;
console.log(json);
$(function(){
const myChart = Highcharts.chart('top-right',{
chart:{
type: 'bar'
},
title:{
text: 'Calories Over Time'
},
xAxis:{
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis:{
title:{
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1,0,4]
},{
name: 'John',
data: [5,7,3]
}]
});
});
});
});
Anyone can help me what I am doing wrong?
Inside the <div> tag you should refer your chart using "id" not "class".
Also, when you give reference to your external js which contains the highchart, add it in the body tag not in the head.
This is from my working code.
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<link rel="stylesheet" type="text/css" href="sytlels.css">
</head>
<body>
<div id="container"></div>
<script src="highChart.js"></script>
</body>
</html>
Related
I wanted to get an image editor so that I can edit my pictures and add text over them so that I tried Toast UI image editor, I did as the documentation of Toast UI Image Editor says but Toast UI Image Editor isn't showing anything on my browser I'm attaching my code below. Please tell me if I did something wrong while implementing the image editor.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<!--Toast UI stylesheet-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.min.css" integrity="sha512-WEhPru82cOhEAThEMrYXgrHXc0eR69oZF0vGzXwhNf2hSbNc/q4/fb9qeDexgrIyBU6TKfhXC/DKwxYHx5CmLA==" crossorigin="anonymous" />
</head>
<body>
<div id="tui-image-editor"></div>
<!--jQuery File-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--Toast UI js file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.js" integrity="sha512-n85VUN94xSJstXJvMxHC968reNaBOSy9+LRA0slHiqYzsa6sAX3ok0cupK6HTg1sIlWXncBcCVzg7YGPJ70T0w==" crossorigin="anonymous"></script>
<script>
var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
loadImage: {
path: '/media/profile-images/20/09/23/Koala_iaIdqm5.jpg',
name: 'SampleImage'
},
locale: locale_ru_RU,
theme: whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});
</script>
</body>
Below I'm attaching the error my browser's console is throwing
Browser's console
util.js:89 Uncaught TypeError: Cannot read property 'forEach' of undefined
at keyMirror (util.js:89)
at eval (consts.js:48)
at Object../src/js/consts.js (tui-image-editor.js:1579)
at __webpack_require__ (tui-image-editor.js:36)
at eval (util.js:38)
at Object../src/js/util.js (tui-image-editor.js:2203)
at __webpack_require__ (tui-image-editor.js:36)
at eval (invoker.js:17)
at Object../src/js/invoker.js (tui-image-editor.js:1843)
at __webpack_require__ (tui-image-editor.js:36)
You have a typo in your code
theme: whiteTheme -> theme: whiteTheme,
Here is the working example.
Reference: https://github.com/nhn/tui.image-editor/blob/master/examples/example01-includeUi.html
<html>
<head>
<meta charset="UTF-8">
<title>0. Design</title>
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
<style>
#import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="tui-image-editor-container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
<!-- <script type="text/javascript" src="./js/theme/white-theme.js"></script>
<script type="text/javascript" src="./js/theme/black-theme.js"></script> -->
<script>
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage'
},
// theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
</script>
</body>
</html>
I am trying to load an owl-carousel slider in an angularJs partial template but it does not display the slides. It works fine when loaded in a HTML page but does not work in the template. Any suggestion on how I can solve this:
HTML PAGE:
<!DOCTYPE html>
<html ng-app="main">
<head>
<title>Woodworld</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/animate.css">
<link rel="stylesheet" href="data/images/css/all.css">
<link rel="stylesheet" href="styles/layoutstyle.css">
<link rel="stylesheet" media="screen and (min-width:500px)" href="styles/medium-screens.css">
<link rel="stylesheet" media="screen and (min-width:1050px)" href="styles/large-screens.css">
<link rel="stylesheet" href="styles/owl.theme.default.min.css">
<link rel="stylesheet" href="styles/owl.carousel.min.css">
<link rel="stylesheet" href="styles/owl.theme.green.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-messages.min.js"></script>
<script src="scripts/modules.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/wow.min.js"></script>
<script src="scripts/owl.carousel.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ng-view>
</div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/owl.carousel.min.js"></script>
<script src="scripts/stylescript.js"></script>
</body>
</html>
Template code:
<div owl-carousel class="owl-carousel">
<div class="item"><h2>Slide 1</h2></div>
<div class="item"><h2>Slide 2</h2></div>
<div class="item"><h2>Slide 3</h2></div>
<div class="item"><h2>Slide 4</h2>Slide </div>
</div>
OWL Carousel directive code:
app.directive("owlCarousel", owlCarouselDirective);
function owlCarouselDirective() {
return {
restrict : "A",
transclude: false,
link : function ($scope, element, attributes) {
$scope.initCarousel = function () {
$(element).owlCarousel($scope.HomeVM.owlDefaultOpts);
};
}
};
}
function owlCarouselItemDirective() {
return {
restrict : "A",
transclude: false,
link : function ($scope, element, attributes) {
if ( $scope.$last )
$scope.initCarousel();
}
};
}
I have a very simple index.html file that I am using to learn Vue. I have attached a click event on a button and it is supposed to alert the user.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello Visitor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="app">
{{ message }}
</div>
<input type="text"> </br> </br>
<button v-on:click="greet" class="btn btn-primary">Greet Me!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
message: 'What is your name?'
},
methods: {
greet: function(){
alert("Hello to you too.");
},
}
});
I thought that the function needed the event param in the function but that did not help. Is there something that I am missing?
Your Vue app is bound to #app.
Stuff that happens outside that div, Vue doesn't parse or know about.
Move your button inside the #app div and it should function. You may also want to give your <button> a type="button" - that'll prevent it from trying to submit a form, which is the default behavior. (You can also do <button #click.prevent="greet"> to accomplish the same thing. The .prevent prevents the default behavior.)
I have been looking for a simple basic example of using a Mustache template where the Mustache markup and templating stays in the HTML document (separation of concerns).
Here is where I am at:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
</head>
<body>
<div class="container">
<h2>Here is a person</h2>
<template id="theTemplate">
{{name}}
</template>
</div>
<script>
$(function() {
template = $('#theTemplate').html();
data = {
name: 'billy'
};
Mustache.render(template, data);
});
</script>
</body>
</html>
No errors are being thrown but it is not working!
Mustache.render returns a string which is the amalgamation of the template and the data from the provided object. It does not do anything else with that string, so if you want to update the DOM you will still need to do that manually. As you're using jQuery you can use append() to do that:
$('h2').append(Mustache.render(template, data));
However, it would make more sense to include the whole h2 text value in the template to at least make its use worthwhile:
$(function() {
template = $('#theTemplate').html();
data = { name: 'billy' };
$('h2').text(Mustache.render(template, data));
});
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<div class="container">
<h2></h2>
<template id="theTemplate">
Here is a person named {{name}}
</template>
</div>
I've just downloaded the trial version of Ext JS 5 and I'm wondering how to use a single component instead of the whole framework. The Ext's guide doesn't seem to have a guide on this. I'm trying to use this http://dev.sencha.com/deploy/ext-4.0.0/examples/form/combos.html
Can I just include a JS and some images like jQuery UI?
Looking at sencha fiddle you could add the following cdn files (or pull them local) and it'll load the extjs framework. Then you could add Ext.onReady and create extjs elements on your page:
Js Files Required:
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
CSS Files Required:
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
And here is an example index.html file that loads a message box when Ext is ready:
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
});
</script>
</head>
<body>
<p>TEST SITE</p>
</body>
</html>
Edit 1 (Adding Combobox):
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
Ext.create('Ext.panel.Panel', {
renderTo:'testDiv',
width: 500,
height: 500,
title: 'This is another test',
items: [{
html: 'Another test here too.'
},{
xtype:'combobox',
width:400,
displayField: 'descr',
valueField: 'descr',
store: Ext.create('Ext.data.Store',{
fields:['descr'],
data: [{
descr: 'Example 1'
},{
descr: 'Example 2'
}]
})
}]
})
});
</script>
</head>
<body>
<p>TEST SITE</p>
<div id="testDiv"></div>
</body>
</html>