How can I execute a joint.js program? I have downloaded the required js files and have saved the below below code in an HTML file. I tried opening in IE and Chrome, but it resulted in a blank page instead:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="backbone.js"></script>
<script src="joint.js"></script>
</head>
<body>
<div id="myholder"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
You have to take care of the version of the decencies, check the versions in below image, or else use the below CDN.
<link rel="stylesheet" href="joint.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
Clone jointjs project from https://github.com/clientIO/joint.git. And Go to demo folder, open any html file in browser.
I think that will help you to start work with jointjs.
dependencies are
jquery.js
backbone.js
joint.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/joint.min.css" />
<link rel="stylesheet" type="text/css" href="css/paper.css" />
<script src="lib/jquery.min.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="lib/joint.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
Related
I want to create a chart using Highcharts. I know nothing about JS :) I code in Java
I have a map in controller class:
Map<Integer, Integer> surveyMap = new LinkedHashMap<>();
surveyMap.put(10, 21);
surveyMap.put(12, 23);
surveyMap.put(14, 25);
surveyMap.put(16, 17);
Ant it is my html file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
</head>
<body>
<div class="container">
<h2 align="center">Technology Line Graph</h2>
<div id="container"
style="width: 550px; height: 400px; margin: 0 auto"></div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script th:inline="javascript">
$(function(){
Highcharts.chart('container', {
xAxis: {
title: {
text: 'Dive time'
}
},
yAxis: {
title: {
text: 'Dive Depth'
}
},
series: [{
data: [${surveyMap.values()},${surveyMap.values()}]
}]
});
});
</script>
</body>
</html>
Of course it doesn't work. How to set data from a map for x and y axis??
Maybe it is just a syntax error.
Are there any better solutions?
i am working on to add jspanel plugin in my project, is there any way to open jspanel in minimized mode, i found some question related to, but could not find any right answer, here is sample code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jspanel3/3.10.0/jquery.jspanel.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspanel3/3.10.0/jquery.jspanel-compiled.js"></script>
</head>
<body>
<script type="text/javascript">
function clickToOpen() {
$.jsPanel({
position: "left",
size: {width: 120, height: 270},
overflow: {vertical: 'scroll'},
theme: "light",
});
}
</script>
<input type="button" value="click to open" onclick="clickToOpen()"></input>
</body>
</html>
Sample for version 4:
jsPanel.create({
content: "<p>minimized</p>",
theme: 'info',
position: "left-top",
setStatus: 'minimized'
});
Take a look at option.setStatus of jsPanel v3.x
$.jsPanel({
setstatus: "minimize"
});
I am new to web development and am trying to use patternFly Donut chart for my project. But when I try to check it by running as simple HTML it throws below error. Could someone help me with this?
Error image
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div id="donut-chart-6" class="example-donut-chart-utilization"></div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
utilizationDonutChartConfig.bindto = '#donut-chart-6';
utilizationDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
utilizationDonutChartConfig.size = {
width: 200,
height: 171
};
utilizationDonutChartConfig.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>
Your use of $() is confusing. Commenting out the lines that use it yields a donut chart. It seems like you're trying to load default configurations, but I didn't find any information on the c3 website indicating that it was a jQuery plugin. Perhaps you're misunderstanding what jQuery does? If you're trying to load some sort of default configurations from a form as JSON then you might need to get more creative.
For simplicity, in the example below I've reformatted your data as a single object.
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div id="donut-chart-6" class="example-donut-chart-utilization"></div>
<script>
//var c3ChartDefaults = $().c3ChartDefaults();
//var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
utilizationDonutChartConfig = {
bindto : '#donut-chart-6',
data : {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
},
size : {
width: 200,
height: 171
},
tooltip : {
//contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
}
}
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
//$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>
var c3ChartDefaults = (<any>$()).c3ChartDefaults();
This worked for me.
I created a highchart element on my page. Then I wanted to rewrite it as a highstock element. I had some errors with highstock and I could`t get rid of them. Finally i copy-pasted highstock code from documentation but it also gives an error.
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>avra</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/all.css">
<link rel="stylesheet" type="text/css" href="font/font-awesome/css/font-awesome.min.css">
<!-- HTML5 SHIV -->
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
<![endif]-->
</head>
<body>
<main>
POP-UP
</main>
<div class="container">
</div>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/highcharts/highstock.js"></script>
<!--<script type="text/javascript" src="node_modules/highcharts/modules/exporting.js"></script>-->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
My JS file:
$(document).ready(function(){
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var dataObject = {
rangeSelector: {
selected: 1,
inputEnabled: $('#container').width() > 480
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}],
chart: {
renderTo: 'container'
}
};
var chart = new Highcharts.StockChart(dataObject);
//var chart = $('#container').highcharts('StockChart', dataObject);
});
});
Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13
You would like to try this:
var chartingOptions = {
chart: {
renderTo: 'Container_ID', //**Observation**
defaultSeriesType: 'column'
},
chart = new Highcharts.Chart(chartingOptions)
}
Quite simply:
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="processing.pde"></canvas>
</script>
Is the canvas tag not properly escaped or something? I've tried the following as well, to no avail:
<canvas data-processing-sources="processing.pde"><{{!}}/canvas>
How can I include the canvas with a source in my handlebars.js template and get it to render?
Update:
All of the scripts in my header:
<!-- Materialize Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Typicons -->
<link rel='stylesheet' href='typicons.font-master/src/font/typicons.min.css' />
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
<!-- Materialize JS -->
<script src="js/materialize.min.js"></script>
<!-- Drop Down -->
<script>
$( document ).ready(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on click
alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
gutter: 0, // Spacing from edge
belowOrigin: false // Displays dropdown below the button
});
});
</script>
<script>
var data = {
width: 200,
height: 100,
background: "#000"
};
var template = Handlebars.compile($("#write-tpl").html());
document.body.innerHTML = template(data);
</script>
<!-- Style -->
<link href="css/materialize.css" rel="stylesheet"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
And my template:
<script id="write-tpl" type="text/x-handlebars-template">
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="js/processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
<{{!}}/script>
</script>
And scripts at the bottom of the page prior to :
<!-- Javascript -->
<script src="https://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
<script src="js/blog.js"></script>
<!-- Popup -->
<script src="view.min.js?auto"></script>
<!-- Processing -->
<script src="js/processing.js"></script>
Remove your inner script in your template:
<script id="write-tpl" type="text/x-handlebars-template">
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
<{{!}}/script>
</script>
Like this:
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
</script>
Here's a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.16/processing.min.js"></script>
</head>
<body>
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
</script>
<div id="content"></div>
<script>
$(document).ready(function(){
var data = {
width: 200,
height: 100,
background: "#000"
};
var template = Handlebars.compile($("#write-tpl").html());
$("#content").html(template(data));
});
</script>
</body>
Output: