graph not displaying - html

When I run this in a blade.php file it return's a blank white page. I don't know my error can any one help me. or give any suggestion I am new to Laravel.
graph.blade.php
<html lang="en">
<head>
<title> Bar Chart | Laravel Code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
</head>
<body>
<div class="container-fluid p-5">
<div id="barchart_material" style="width: 100%; height: 500px;"></div>
</div>
<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>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product Id', 'Sales', 'Quantity'],
#php
foreach($products as $product) {
echo "['".$product->id."', ".$product->sales.", ".$product->quantity."],";
}
#endphp
]);
var options = {
chart: {
title: 'Bar Graph | Sales',
subtitle: 'Sales, and Quantity: #php echo $products[0]->created_at #endphp',
},
bars: 'vertical'
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</body>
</html>
Controller file
public function barChart(){
$data=Sql::all();
return view('graph',compact('data'));
}
}
any suggestions would be great!

Related

How to fix the disalignment of Show entries and Search of Datatables?

I'm really bad at css or designing and I'm struggling to fix this.
Here is the outcome:
<!-- Scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<!-- <script id=js-dispatcher src='scripts/scripts.js'></script> -->
<script type="text/javascript">
var SubjTable = $("#SubjTable").DataTable({
columnDefs: [ {
targets: 0
} ]
})
</script>

How to open div over sibling div with Jquery and CSS

Hello I'm trying to make a more friendly UI for user when they click on a point on a map. I want the popup button to open a popup vertically (Bottom to Top) from the bottom of the div map. This is on a mobile app and there is not much room to work with. So I've seen a few apps open up the pop-up info from the bottom of the map and cover 1/3 of the map with the pop-up info.
I created a JSfiddle here https://jsfiddle.net/5kdryesz/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap core JS-->
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<!-- Jquery JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<style>
#map {
height: 700px;
width: 500px;
background-color: rgb(52, 58, 64);
}
.popup {
display: none;
background-color: blueviolet;
width: 500px;
}
</style>
</head>
<body>
<div> Testing </div>
<button id='popupbtn'> popup</button>
<div class='container'>
<div id='map'></div>
<div id='popupdiv' class='popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>
</body>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function() {
$("#popupdiv").show("slide", {
direction: "down"
}, 600);
})
</script>
</html>
I'm having issues understanding the position css property. I've tried absolute but just couldn't figured it out and I'm curious if absolute will work with all different sizes of phones. Any help is appreciated. Thanks

Hope this may help you.
If you use position:absolute then you should have position relative to its parent div.
google map (.leaflet-bottom) has z-index value 1000 so put our popup on map we should have higher z-index value of popup hence i have put z-index value 1001 to our popup.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function(){
$("#popupdiv").show("slide", { direction: "down" }, 600);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap core JS-->
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<!-- Jquery JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<style>
#map {
height: 500px;
width: 300px;
background-color: rgb(52, 58, 64);
}
.popup{
display: none;
background-color: blueviolet;
width: 300px;
position:absolute;
bottom:0;
z-index:1001;
}
.container{
position:relative;
}
</style>
</head>
<body>
<div> Testing </div>
<button id = 'popupbtn'> popup</button>
<div class = 'container'>
<div id= 'map'></div>
<div id = 'popupdiv' class = 'popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>
</body>
<script>
</script>
</html>

I assume this is what you need. I used z-index to put the pop-up on top of the map and fixed positioning to put the pop-up at the bottom.
The height of the pop-up will be the same on each device: 30% of the screen. The with is fixed because the width of the map is fixed and therefore also the pop-up.
If the pop-up needs to be 30% of the height of the map, it can be an absolute value.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function() {
$("#popupdiv").show("slide", {
direction: "down"
}, 600);
})
#map {
height: 700px;
width: 500px;
background-color: rgb(52, 58, 64);
position: relative;
z-index: 10;
}
.popup {
display: none;
background-color: blueviolet;
width: 500px;
height: 30vw;
position: fixed;
bottom: 0;
z-index: 20;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div> Testing </div>
<button id='popupbtn'> popup</button>
<div class='container'>
<div id='map'></div>
<div id='popupdiv' class='popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>

How to convert Html5 bootstrap template to Vue app?

I have a good HTML 5 template and I want to convert it to the Laravel + Vue app.
How should I do then?
Thanks

Hope this will help you. Have integrated Vue + Bootstrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app" class="container">
<div class="alert alert-info">{{ message }}</div>
<p><input v-model="message" class="form-control"></p>
</div>
<script>
myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue.js!'}
})
</script>
</body>
</html>

jquery mobile collapse method not working

I have a collapsible that I mocked up on jsfiddle at https://jsfiddle.net/1gsqxo26/
It works fine there.
Same exact code on google apps script, nadda. What do I need to change to make this work properly there?
test4.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<base target="_top">
</head>
<body>
<div data-role="collapsible-set" id="set">
<div data-role="collapsible" data-collapsed="false" data-mini="true" class="stuff">
<h3>Stuff</h3>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<?!= include('test4JS'); ?>
</body>
</html>
test4JS:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$('#submit').on('click', collapse);
function collapse(sender) {
$("#set").children(":first").collapsible( "collapse" );
//$(".stuff").collapsible("collapse");
//$("#set").children(":first").trigger( "collapse" );
//$(".stuff").trigger("collapse");
//none of these work
}
</script>

Load polymer element inside bootbox

I'm trying to create a map inside a bootbox dialog. Here is the code.
bootBox.dialog({ title:"test", message = "<div><google-map latitude='37.77493' longitude='-122.41942'></google-map></div>" });
It creates the dialog, creates the maps box with Google logo at bottom but do not load the map. It remains gray.
I found that if I open or close Chrome Developer Tools after the dialog has displayed the map is rendered.
Any suggestion?
Edit after comments:
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/bootbox/bootbox.min.js"></script>
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<button onclick="ft()">Open Map</button>
<script>
var ft = function(){
bootbox.dialog({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'});
}
</script>
</body>

Set the height of google-map for it to appear:
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'})
</script>
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</head>
<body>
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({
title: 'test',
message: '<div><google-map latitude="37.77493" longitude="-122.41942"></google-map></div>'
})
</script>
</body>
codepen