I am new to both Vue and Python Flask. I have been searching for some charts that Vue provides. One of them is the FunnelGraph.js. I am however not quite sure how to integrate them together.
I tried to follow the documentation https://github.com/greghub/funnel-graph-js#usage but I'm not quite sure where to use the graph variable. I have chosen to use its CDN.
In python's Flask's app.py I have,
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
#app.route('/about')
def about():
return render_template('about.html')
if __name__ == "__main__":
app.run(debug=True)
In the about.html, I have
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js#1.3.9/dist/css/main.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js#1.3.9/dist/css/theme.min.css">
<title></title>
</head>
<body>
<div id="graph">
<h1>graph</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/funnel-graph-js#1.3.9/dist/js/funnel-graph.min.js"></script>
<script>
var graph = new FunnelGraph({
container: '.funnel',
gradientDirection: 'horizontal',
data: [12000, 5700, 360],
displayPercent: true,
direction: 'horizontal'
});
graph.draw();
</script>
</body>
</html>
With the current setup I get the error from the chrome inspector console:
funnel-graph.min.js:1 Uncaught TypeError: Invalid attempt to spread non-iterable instance
at funnel-graph.min.js:1
at g (funnel-graph.min.js:1)
at e.value (funnel-graph.min.js:1)
at new e (funnel-graph.min.js:1)
at about:21
Looks like a problem with FunnelGraph: it appears to throw this error when you define data as an array, although they have this example in their documentation. To work around it, define your data as an object:
var graph = new FunnelGraph({
container: '#graph',
gradientDirection: 'horizontal',
displayPercent: true,
direction: 'horizontal',
data: {
values: [12000, 5700, 360]
},
});
graph.draw();
I also had to adjust your container selector to be #graph since that is what you have in the markup.
Related
I am new in vue. i tried to render a vue component. but i got error.
i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
</div>
<script src="components/app.js"></script>
</body>
</html>
app.js
import Index from "./Index.vue"
new Vue({
el: '#head',
render: h => h(Index)
});
both app.js and Index.vue are in same folder.
Please healp me to solve this..
The error occurs because browser do not recognize import statement.
Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.
Vue.component('Index', {
data() {
return {
value: 'Index component'
}
},
template: `<h2>{{ value }}</h2>`
})
new Vue({
el: '#head'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
<index />
</div>
<script src="components/app.js"></script>
</body>
</html>
hi I'm trying to autocomplete/typeahead component for Vue 2 and Bootstrap 4
This is my code.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css" rel="stylesheet">
</head>
<body>
<div id="container">
<vue-bootstrap-typeahead
v-model="query"
:data="['Canada', 'USA', 'Mexico']" />
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>
<script>
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead';
Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead);
new Vue({
el: '#container',
data: {
value: '',
},
});
</script>
</body>
</html>
Unfortunately this is not working due to following errors.
SyntaxError: import declarations may only appear at top level of a module
Source map error: request failed with status 404 Resource URL:
https://unpkg.com/vue-bootstrap-typeahead Source Map URL:
VueBootstrapTypeahead.umd.min.js.map
It would be great if someone can help me on this.
The code <script src="https://unpkg.com/vue-bootstrap-typeahead"></script> has imported the VueBootstrapTypeahead, and became a property of window.You don't need import again. when we talk about import, often the module concert come to us too. import declarations was often used in an app which need be transformed by tools, such as babel,webpack or rollup.
Please add this to the <head> of your document before the <link> tags:
<meta charset="UTF-8">
I am new to polymer framework. I am using polymer 2.0.0-rc.3 and latest version of chrome. But below code is not displaying menus.Only "Hello World" is printed in browser. The developer tools console does not show any error.
Below is the code
test-app.html
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<!-- Since 'home' is the default route, eagerly load it. -->
<!-- <link rel="import" href="shop-home.html"> -->
<dom-module id="test-app">
<template>
<H1>Hello World</H1>
<paper-toolbar>
<div class="horizontal-section">
<paper-menu>
<paper-item>Inbox</paper-item>
<paper-item>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-menu>
</div>
</paper-toolbar>
</template>
<script>
class testApp extends Polymer.Element {
static get is() { return 'test-app'; }
}
customElements.define(testApp.is, testApp);
</script>
</dom-module>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>test</title>
<link rel="import" href="src/test-app.html" async>
</head>
<body>
<test-app unresolved>test</test-app>
<script>
window.performance && performance.mark && performance.mark('index.html');
Polymer = {lazyRegister: true, dom: 'shadow'};
(function() {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// platform is good!
} else {
// polyfill the platform!
var e = document.createElement('script');
e.src = 'bower_components/webcomponentsjs/webcomponents-lite.js';
document.body.appendChild(e);
}
})();
</script>
</body>
</html>
bower.json
"polymer": "polymer/polymer#^2.0.0-rc.3",
"app-layout": "polymerelements/app-layout#^0.10.7",
"app-route": "polymerelements/app-route#^0.9.3",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.3.2",
"iron-form": "polymerelements/iron-form#^1.1.4",
"iron-icon": "polymerelements/iron-icon#^1.0.12",
"iron-pages": "polymerelements/iron-pages#^1.0.8",
"iron-selector": "polymerelements/iron-selector#^1.5.2",
"paper-icon-button": "polymerelements/paper-icon-button#^1.1.4",
"paper-spinner": "polymerelements/paper-spinner#^1.2.1",
"iron-media-query": "polymerelements/iron-media-query#^1.0.8",
"paper-menu": "polymerelements/paper-menu#^1.2.2",
"paper-item": "polymerelements/paper-item#^1.2.1",
"paper-toolbar": "polymerelements/paper-toolbar#^1.1.7"
Does any body have any idea about error? Any guide as how can I debug it to find error?
paper-menu has been deprecated in Polymer 2. As this comment says:
This element is deprecated in favor of paper-listbox, which has been ported already to Polymer 2.0.
I wrote the following code in my test.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#item {
background:blue;
color:yellow;
}
</style>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var logo = document.getElementById("item");
TweenLite.to(logo, 2, {left:"542px", backgroundColor:"red", borderBottomColor:"#90e500", color:"white",ease:Expo.easeOut});
}
</script>
</head>
<body>
<p id="item">thsi is a para</p>
</body>
</html>
But when I run it, I get the error message in console
Uncaught ReferenceError: Expo is not defined
at window.onload (test.html:16)
How can I use Expo.easeOut?
To do easing, you have to include EasePack too:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
(Or use TweenMax instead, wich includes CSSPlugin and EasePack among other features.)
We are trying to load both Ext 3 and Ext 4 with the use of ext-all-sandbox.js to be able to use GeoExt in Ext 4.
Looking in our DOM it seems we have succeeded with loading Ext 3, Ext 4, GeoExt and OpenLayers but are still getting errors like:
"Ext.functionFactory() is not a function" and "Ext.supports is
undefined" .
Is there anyone out there that have tried a similar thing?
This is the index.jsp where we are loading the js files.
<!DOCTYPE HTML>
<%# page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- Ext 4 with sandbox mode -->
<script type="text/javascript" src="../gt-static/extjs/ext-all.js"></script>
<script type="text/javascript" src="../gt-static/extjs/builds/ext-all-sandbox.js">
</script>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-all-gray.css"/>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-sandbox.css">
<!-- Ext 3 -->
<script src="../gt-static/ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"> </script>
<script src="../gt-static/ext-3.2.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/ext-3.2.1/resources/css/ext-all.css"></link>
<!-- OpenLayers -->
<script src="../gt-static/OpenLayers/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
// Start app on ready
Ext4.Loader.onReady(function(){
Ext4.Loader.setConfig({enabled: true});
Ext4.require(['Ext4.picker.Date']);
var head = Ext4.fly(document.getElementsByTagName('head')[0]);
// GeoExt
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : '../gt-static/GeoExt/lib/GeoExt.js'
});
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : '../gt-static/GeoExt/resources/css/geoext-all-debug.css'
});
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : 'app.js'
});
},this,true);
</script>
</head>
<body></body>
</html>
and where we use GeoExt together with Ext 3 and Ext 4:
Ext4.define('GT.controller.Authenticated', {
extend : 'Ext4.app.Controller',
views : [ 'Authenticated' ],
init : function () {
"use strict";
this.control({
'authenticated' : {
render : function () {
var panel = new Ext.Panel({
title : 'EXT3'
});
Ext4.getCmp('mappanel').add(panel);
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS("Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{
layers : "bluemarble"
});
map.addLayer(layer);
new GeoExt.MapPanel({
renderTo : 'mappanel',
height : 400,
width : 600,
map : map,
title : 'A Simple GeoExt Map'
});
}
}
});
}
});
Screenshots
FireBug - DOM
http://img842.imageshack.us/img842/492/dommq.png
FireBug - Errors - Console
http://img33.imageshack.us/img33/3703/errorsp.png
We managed after alot of problems to solve it:
<script type="text/javascript" src="../gt-static/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script src="../gt-static/ext-3.3.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/ext-3.3.1/resources/css/ext-all.css"></link>
<script src="../gt-static/OpenLayers/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="../gt-static/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/GeoExt/resources/css/geoext-all.css"></link>
<script type="text/javascript" src="../gt-static/extjs/builds/ext-all-sandbox.js"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-sandbox.css"/>
Now it is possible to load a GeoExt MapPanel into a Ext 4 container.
Now our problem is that the CSS files dosent seem to work as the ext-all-gray.css
If u guys out there have thoughts about that it would be very appreciated