add JavaScript to w2ui panel - javascript

I am very new to JavaScript. I want to use w2ui panels to create a webpage for data visualization using D3.js.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: layout-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
padding: 4,
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
});
d3.select("body")
.append("svg")
.append("rect")
.attr("width",50)
.attr("height",200)
.style("fill","blue")
</script>
</body>
</html>
My question is how to specify D3js to draw a rectangular in left pane (or any specified pane) of the w2ui panel. Thank you!

First, you should probably check out the w2ui docs for layouts / panels and learn about the different methods to fill the panels (content(), set(), load(), html(), ...).
The below example will draw your blue box into the main panel.
It's not the best method to do what you want (check out onContent for an alternative to the timeout), but it should give you an idea how to achieve your goal.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: layout-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="layout" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
$(function () {
var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
padding: 4,
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: '<div style="height: 100%; width: 100%" id="my_div"></div>' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
]
});
});
setTimeout(function(){
d3.select("#my_div")
.append("svg")
.append("rect")
.attr("width",50)
.attr("height",200)
.style("fill","blue")
}, 100);
</script>
</body>
</html>

Related

jquery remove a div and re arrange the following ones with animation

I have a grid of cards with a button to remove each one of them with an animation. I chose to reduce the width to 0 so that the cards to the right (on the same row) slide to the left and occupy the removed card spot.
What I would like to achieve is to animate the first element of the following row into the last position of the row above (the one that had the card removed).
The best example I can provide is the home page of the Vivaldi browser, where you can remove a speed dial widget and the following ones animate to their new positions.
This example in CodePen is what I have so far.
$(document).ready(function() {
const content = $('#inner-content');
let listCourses = '';
let courses = [
{ title: 'html' },
{ title: 'css' },
{ title: 'javascript' },
{ title: 'python' },
{ title: 'react' },
{ title: 'node' },
{ title: 'angular' },
{ title: 'SEO' },
{ title: 'UX/UI' },
{ title: 'jQuery' },
{ title: 'SQL' },
{ title: 'noSql' }
]
courses.forEach((course) => {
let newCourse = `
<div class="course-container">
<div class="inner-container">
<h2>${course.title}</h2>
<button class="courses-control"> Remove </button>
</div>
</div>
`;
listCourses += newCourse;
});
content.html(listCourses);
$('.courses-control').on('click', function(e){
$(this)
.parents('.course-container').animate({
'width': '0px',
'padding': '12px 0px',
'opacity': '0'}, function() {
$(this).remove();
});
})
});
* {
box-sizing: border-box;
}
body { font-family: 'lato'; }
#inner-content {
display: flex;
flex-wrap: wrap;
}
.centered {
max-width: 960px;
margin: auto;
}
.course-container {
width: 25%;
padding: 12px;
overflow: hidden;
}
.inner-container {
overflow: hidden;
text-align: center;
border: 1px solid gray;
border-radius: 6px;
padding: 12px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Courses</h1>
<div id="inner-content" class="centered">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
change the forEach loop to have an index and give each button an id:
courses.forEach((course, index) => {
let newCourse = `
<div class="course-container">
<div class="inner-container">
<h2>${course.title}</h2>
<button id="${index}" class="courses-control"> Remove </button>
</div>
</div>
`;
listCourses += newCourse;
});
Then in the click function after this:
$(this)
.parents('.course-container').animate({
'width': '0px',
'padding': '12px 0px',
'opacity': '0'
}, function () {
$(this).remove();
});
add this:
$(`#${Number(this.id) + 4}`).parents('.course-container').animate({
'margin-top': '-100px',
'z-index': '1',
'opacity': '0'
}, 500, function () {
$(this).css({ 'margin': '0px', 'opacity': '1' });
});
Try it out and tell me what you think...

With mouse click zoom chart as popup fullscreen (highcharts)?

I have dynamically create charts on div class col-sm 4 which append on #container div, and now I am trying to zoom highchart as fullscreen when I click on it. Like is it on this fiddle below text. I done something similar but have no idea why is not working,Can someone help me pls ?
In my example when i click on chart everything disappears
I would like to have zoom method like is it from this example http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/
My example: https://codepen.io/anon/pen/rZjJbq
chart.blade.php
#extends('index.app')
#section('main')
<style type="text/css">
.col-sm-4 {
margin-bottom: 20px;
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
.modal{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.modal .col-sm-4 {
height: 90%;
width: 90%;
max-width: none;
}
</style>
<h2 class="text-center" >{{$user->first_name}} Charts </h2>
<div id="main2">
<div id="col-sm-4" id="col-sm-4"></div>
</div>
<script type="text/javascript">
$.getJSON( "http://localhost:8000/api/devices", function( res) {
var result = [];
var namesDev = new Array();
console.log(res);
$.each(res, function(c) {
var deviceNames = res[c].clientAllias;
var clientId = res[c].clientId;
clientNames.push(namesDev);
$.each(res[c].clientData, function(g) {
$.each(data[c].clientData[g], function(key, val) {
clientId2 = data[c].clientData[g].clientId;
var cpu = data[c].clientData[g].cpuUsage;
var time_usages = data[c].clientData[g].timestamp;
final= [];
final.push(time_usages, cpu, clientId2);
result.push(final);
});
});
});
result.sort();
console.log('result', result);console.log('result', result);
var mappedClientsAllias = _.map(_.uniqBy(data, "clientAllias"), "clientAllias");
var mappedClients = _.map(_.uniqBy(data, "clientId"), "clientId");
var clients = [];
_.forEach(mappedClients, function(clientId, clientAllias) {
var tempClient = {
Allias:mappedClientsAllias[clientAllias],
name: clientId,
data: []
};
_.forEach(data, function(tempData) {
if (clientId === tempData.clientId) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push(
[clientData.timestamp, clientData.cpuUsage, clientId]
);
})
}
});
clients.push(tempClient);
});
console.log("clients", clients);
var a =_.forEach(clients, function(client) {
$('<div class="col-sm-4">').css('position','relative')
.appendTo('#container')
.highcharts('StockChart',{
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -2 * 60
},
rangeSelector: {
y: 15,
buttons: [
{
count: 1,
type: "minute",
text: "Sec"
},
],
title: "sat",
inputEnabled: true,
_selected: 1
},
title: {
text: client.Allias
},
xAxis: {
title: {
enabled: true,
text: "Processor unit USAGE"
},
type: "datetime",
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%e. %b"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [
{
name: "Process unit USAGE",
data: client.data.sort()
}
],
chart: {
renderTo: "main"
},
events: {
}
});
})
});
$('#main').bind('mousedown', function () {
$(this).toggleClass('modal');
$('#main', this).highcharts().reflow();
});
</script>
#endsection
app.php.blade.
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash#4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
#include('file.hed')
#include('file.bar')
<div class="container ">
#include('file._info')
#yield('main')
</div> <!-- /container -->
#include('file.down')
</body>
</html>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
Add this to the CSS :
.col-sm-4.modal {
position: fixed !important;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display:block;
max-width: none;
padding:1%;
}
JS
$(".col-sm-4").bind("mousedown", function() {
$(this).toggleClass("modal");
$(this).highcharts().reflow();
});
Pen edited

Json string without escape characters in highcharts

I am developing a pie chart using HighCharts. Using asp.net MVC.
I try to feed the java a data string using a ViewData like this:
data: (#ViewData["data"])
When I view this data in the JSON viewer, it looks like this:
[{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]
When I put it hardcoded behind the ' data: ' property, the pie is neatly shown.
However it failes when I try to feed it from the action method. In that case, it looks like this:
"[{\"name\":\"Bouwend\",\"y\":0},{\"name\":\"Failed\",\"y\":12},{\"name\":\"Succes\",\"y\":19}]"
How can I make the JSON data without all the escape strings, so the Highcharts accepts it?
#model SATS.Tools.Tfs.Extensions.ServiceApi.Controllers.CruiseControlChart
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="../../Scripts/jquery-1.10.2.min.js"></script>
<script src="../../scripts/highcharts.js"></script>
<meta name="viewport" content="width=device-width" />
<title>CruiseControlChart</title>
<script type="text/javascript">
$(document).ready(function () {
// Build the chart / configure the highcharts
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '#ViewData["charttitle"]'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
colorByPoint: true,
data: (#ViewData["data"])
data: [{'name':'Bouwend','y':0},{'name':'Failed','y':5},{'name':'Succes','y':16}]
//onderstaand is een setje statische test data
//data: [{
// name: "Bouwend",
// y: 3
//}, {
// name: "Build succesvol",
// y: 64,
// sliced: true,
// selected: true
//}, {
// name: "Build gefaald",
// y: 33
//}]
}]
});
});
</script>
<style type="text/css">
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="display: block">
<a href="http://vm-eli-007/ccnet/ViewFarmReport.aspx" target="_parent">
#*<div class="col-md-1" id="container" style=" min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>*#
<div class="col-md-1" id="container" style=" min-width: 90%; height: 90%; max-width: 600px; margin: 0 auto"></div>
</a>
<br/>
<div class="col-centered"><span> Oldest build time: #ViewData["eldestbuildtime"]</span></div>
</div>
</div>
</body>
</html>
Try updating code like this:
data: JSON.parse("#Html.Raw(#ViewData["data"])")

padding top in bar chart

I am using c3.js to generate a graph. I want to put an image on top of each bar, on the label. So that the image is shown well I would like the graphic to have a space in the top that gives me the possibility of having the image without leaving the svg
https://jsfiddle.net/ao2xojnx/
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels:true,
type:'bar'
},
axis: {
}
});
There are two ways for doing this. Both have the same result and both need hardcoded values.
First way: set the y axis maximum:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
max: 700
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<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>
<div id="chart"></div>
Second way: set the padding.top:
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
labels: true,
type: 'bar'
},
axis: {
y: {
padding: {top:200, bottom:0}
}
}
});
#catImage {
width: 40px;
height: 40px;
position: absolute;
left: 40px;
top: 0px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<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>
<div id="chart"></div>
Pay attention to the fact that, in both ways, you'll have extra ticks in the y axis.

highcharts bubble won't load

I use Highcharts Bubble as example from its official website and try to modified it using Framework CodeIgniter.
I run it in GoogleChrome and Firefox but not show anything.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>STATISTIK</title>
</head>
<link href="http://10.16.107.77/statistik/public/css/main.css" rel="stylesheet">
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-1.9.1.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery.validate.js"></script>
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 10px;
}
</style>
<body>
<div id="content">
</div>
<!--link rel="stylesheet" type="text/css" href="http://10.16.107.77/statistik/public/css/CreativeCSS3AnimationMenus/css/demo.css" /-->
<script src="http://10.16.107.77/statistik/public/jquery/highcharts.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/highcharts-more.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: 'Formasi Tenaga Kerja'
},
series: [{
data: [[97,36,1000]],
name: 'Area Medan'
}, {
data: [[25,10,1000]],
name: 'Area Lubuk Pakam'
}, {
data: [[47,47,1000]],
name: 'Area Binjai'
}, {
data: [[75,80,1000]],
name: 'Area Sibolga'
}, {
data: [[60,25,1000]],
name: 'Area Rantau Prapat'
}, {
data: [[100,80,1000]],
name: 'Area Padang Sidempuan'
}, {
data: [[80,55,1000]],
name: 'Area Nias'
}, {
data: [[75,80,1000]],
name: 'Area Pematang Siantar'
}]
});
});
</script></body>
</html>
Thnks for every reply.
regards
try importing highcharts-more.js file.
Look at the working example here :
DEMO
code:
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

Categories

Resources