This has been something I've been working on for hours now and I can't seem to find a solution that works. I have a page (ASP.NET Core) that has bootstrap tabs on it. Each tab displays a different chart. I've read various answers and tried so many different things from this and other sites but I'm sure what I'm doing wrong.
This is a proof of concept page I'm making and from what I understand I need to stall the loading of the chart until the nav-tab is selected. That is what I am unsure of how to do.
My View:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
#Html.Partial("~/Views/Shared/Chart_ByMonth.cshtml")
#Html.Partial("~/Views/Shared/Chart_ByMonthAndQuarter.cshtml")
#Html.Partial("~/Views/Shared/Chart_ByLeaseAdmin.cshtml")
#Html.Partial("~/Views/Shared/Chart_Fourth.cshtml")
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawMonthChart);
google.charts.setOnLoadCallback(drawMonthAndQuarterChart);
google.charts.setOnLoadCallback(drawLeaseAdminChart);
google.charts.setOnLoadCallback(drawFourthChart);
</script>
<body>
<ul class="nav nav-tabs" id="tabs">
<li class="active" id="tab_1"><a data-toggle="tab" href="#home">By Month</a></li>
<li id="tab_2"><a data-toggle="tab" href="#menu1">By Month & Quarter</a></li>
<li id="tab_3"><a data-toggle="tab" href="#menu2">By Lease Admin</a></li>
<li id="tab_4"><a data-toggle="tab" href="#menu3">Fourth Chart</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>By Month</h3>
<select>
<option selected>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select>
<option>2016</option>
<option>2017</option>
</select>
<button type="submit" class="btn btn-success">Submit</button>
<div id="chart_month_div" style="padding-top: 20px;"></div>
</div>
.....
</div>
</body>
The partial view for that chart is just hard-coded data, again a proof of concept page:
<script type="text/javascript">
function drawMonthAndQuarterChart() {
// Create the data table.
var data = google.visualization.arrayToDataTable([
['Type', 'Cash', 'Credit', { role: 'annotation' }],
['January', 10, 24, ''],
['February', 16, 22, ''],
['March', 28, 19, '']
]);
// Set chart options
var options = {
width: 1200,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
hAxis: {
minValue: 0,
title: 'Approvals for the month & quarter'
}
};
// Instantiate and draw our chart, passing in some options.
var chartMonthandquarter = new google.visualization.BarChart(document.getElementById('chart_monthandquarter_div'));
chartMonthandquarter.draw(data, options);
}
The charts all load fine when tabs are selected. The legend is overlapped with itself on all but the initially shown chart. I've tried defaulting the chart divs to be hidden and having an onclick event for each tab that overrides the styling, I've tried doing events where a tab is active, nothing seems to work and I've just been banging my head against the wall.
I suspect it has something to do with the fact that I'm calling
google.charts.setOnLoadCallback(drawMonthAndQuarterChart);
google.charts.setOnLoadCallback(drawLeaseAdminChart);
google.charts.setOnLoadCallback(drawFourthChart);
and since the charts are already drawn right on page creation, there's no way to redraw them. What I am not sure how to do is successfully get the charts to draw only when a new tab is active or something similar.
as you've gathered,
the problem is a result of drawing the chart while the tab is hidden
need to wait until the tab is shown before drawing for the first time
as such, only draw the first chart using the callback...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawMonthChart);
once the callback fires, you don't have to call it again,
you can draw as many charts as needed afterwards
then wait for the tabs to be clicked before drawing the next chart...
here, a switch statement is used on the href attribute,
to determine which tab was clicked,
then draw its chart...
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).attr('href')) {
case '#home':
drawMonthChart();
break;
case '#menu1':
drawMonthAndQuarterChart();
break;
case '#menu2':
drawLeaseAdminChart();
break;
case '#menu3':
drawFourthChart();
break;
}
});
Related
Everyone I am a junior developer at NESAC(ISRO).
I am working on a project with vue JS and leaflet JS. So my task is:-
Using Leaflet JS, I have to render a map on the screen.
Set markers at "n" specific locations on the renderd map.
Create a sidebar with a checkbox of various entities such as cities, restaurants, parks etc.
Develop a Vue app such that, I create my different components on the components folder, so that all my components go through App.vue file and gets renderd at the index.html, i.e. my browser.
And, now I have to make a Layer control function such that each of my entities gets different reactions. Eg. If I click the restaurant checkbox at the sidebar, then all my restaurant leaflet markers should be shown on the screen, but each entity should have different reactivity.
Github Link.
You can use npm package for that - Vue2Leaflet
Here is docu: https://vue2-leaflet.netlify.app
And simple Map with Vue.js and leaflet:
<template>
<div style="height: 350px;">
<div class="info" style="height: 15%">
<span>Center: {{ center }}</span>
<span>Zoom: {{ zoom }}</span>
<span>Bounds: {{ bounds }}</span>
</div>
<l-map
style="height: 80%; width: 100%"
:zoom="zoom"
:center="center"
#update:zoom="zoomUpdated"
#update:center="centerUpdated"
#update:bounds="boundsUpdated"
>
<l-tile-layer :url="url"></l-tile-layer>
</l-map>
</div>
</template>
<script>
import {LMap, LTileLayer} from 'vue2-leaflet';
export default {
components: {
LMap,
LTileLayer,
},
data () {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
zoom: 3,
center: [47.413220, -1.219482],
bounds: null
};
},
methods: {
zoomUpdated (zoom) {
this.zoom = zoom;
},
centerUpdated (center) {
this.center = center;
},
boundsUpdated (bounds) {
this.bounds = bounds;
}
}
}
</script>
It's just a wrapper for a leaflet and you have complete access to all the leaflet functions through:
mounted() {
this.$nextTick(() => {
this.map = this.$refs.map.mapObject;
});
}
I think that can be a good start for you.
Good day, I have a google column chart and work perfectly but when I re size my browser the column chart overflowed and wont re size. my website is responsive and I dont want to put my bar chart like that. how to get my column chart responsive?
I got this column chart from developers.google.com/chart/interactive/docs/gallery/columnchart
here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title><?php echo $title;?></title>
<!-- Load Google chart api -->
<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([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
</head>
<body>
<div id="chart_div" style="width:100%;"></div>
<br/>
<div id="btn-group">
<button class="button button-blue" id="none">No Format</button>
<button class="button button-blue" id="scientific">Scientific Notation</button>
<button class="button button-blue" id="decimal">Decimal</button>
<button class="button button-blue" id="short">Short</button>
</div>
</body>
</html>
I tried also to add width="100%" from div but its doesn't work at all.
Currently, the problem with Google Charts is that it doesn't have a responsive feature.
From previous explorations over the web, the best solution that I found and implemented was:
$(window).resize(function () {
drawChart();
});
This piece of code calls the drawChart() function each time the browser window is resized. Therefore, this means that the Chart is redrawn each time. This may not be the best or efficient solution, but for me it did the job.
In order to allow the .resize() function, you will require the jQuery Library. More information for this is available here.
I'm having problem loading a google chart after clicking the submit button in a form. I came across many similar questions posted online but none solve my question, including this.
The structure of my code: I wrap the google chart code inside a submitHandler: function(form) , then wrap the whole submitHandler with a $("#timeuseform").validate({}), then the most outside is a $(document).ready(function(){}) .
When I remove the google chart code, everything worked fine. When I copy and paste the google chart code into submitHandler: function(form) , the whole page broke down.
here the HTML:
<head>
<meta charset="utf-8">
<title>Time Use Survey 2014</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Do you sleep, work and play more than fellow Americans?</h1>
<br>
<hr width="100%" size="3" noshade="noshade" color="#8A8A8A"/>
<br>
<form name="myForm" id="timeuseform" method="get" action="#">
1. On average, how much you sleep per day?<br>
<input type="text" name="sleep" value="" id="inputsleep"/><br><br>
<div id="sleepbox"></div><br><br>
2. On average, how much time you work on your workday (excludes travel related to work)?<br>
<input type="text" name="work" value="" id="inputwork"/><br> and you are working
<SELECT NAME="workstatus" SIZE="1" id="inputworkstatus">
<OPTION>full-time
<OPTION>part-time
</SELECT><br><br>
<div id="workbox"></div><br><br>
<input type="submit" value="Submit" id="button"/>
<INPUT TYPE="reset">
</form>
<br><br>
<div id="chart_div" style="width: 500px; height: 300px;"></div>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
and this is the JS:
$(document).ready(function(){
//form validation using jquery validation plugin
$("#timeuseform").validate({
rules: {
sleep: {
required: true,
number: true
},
work: {
required: true,
number: true
},
},
//messages to be displayed if input cannot be validated
messages: {
sleep: {
required: "Please answer this question",
number: "Your answer must be a number with maximum 1 decimal point"
},
work: {
required: "Please answer this question",
number: "Your answer must be a number with maximum 1 decimal point"
},
},
//display error messages style if input cannot be validated
errorPlacement: function(label, element) {
label.insertAfter(element);
},
wrapper: 'span',
submitHandler: function(form) {
//setting the input variables
var inputsleep = $('#inputsleep').val(),
inputwork = $('#inputwork').val();
//code for question 1 on sleep
if(inputsleep>8){
$("#sleepbox").text("You sleep too much!");
$("#sleepbox").addClass("more");
}
else{
$("#sleepbox").text("You sleep too little!");
$("#sleepbox").addClass("less");
}
//code for question 2 on work
if(inputwork>6){
$("#workbox").text("You work too much!");
$("#workbox").addClass("more");
}
else{
$("#workbox").text("You work too little!");
$("#workbox").addClass("less");
}
//code for google bar chart starts here
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data1, options);
}
}
});
});
I have uploaded both working (without google chart code) and broken (with google chart code) in my github.
Working without google chart: http://kuangkeng.github.io/keng-data-journalism/timeuseform/nochart.html
Broken with google chart: http://kuangkeng.github.io/keng-data-journalism/timeuseform/chart.html
Appreciate if anyone can guide me to fix this problem. Thanks.
Move the google.load and google.setOnLoadCallback calls outside your jQuery code. Use the callback to initialize your validator instead of using document ready:
function init () {
$("#timeuseform").validate({
// validator stuff
});
}
google.load("visualization", "1", {packages:["corechart"], callback: init});
i've been using Bootstrap 3 for a new project and it's being great so far.
The only issue i'm getting is that i need to make a few panels stick to the top of the browser when scrolling down.
I'm trying to use the Sticky-kit but it's not working for me.
HTML
<div class="row" data-sticky_parent>
<div class="col-sm-5" data-sticky_column>content 1...<div>
<div class="col-sm-7">content 2...<div>
</div>
Javascript
$(".col-sm-5").stick_in_parent();
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.sticky-kit.min.js"></script>
Does anybody know why is the script not working?
Cheers,
Thales Ribeiro
in Bootstrap 3 you can use the build in Affix plugin (http://getbootstrap.com/javascript/#affix) to stick any content you want.
Here an example http://bootply.com/103035.
You have to tell js which div (ex.:#alert) you want to stick, and the footer div (ex.:#footer).
$( document ).ready(function() {
$('#alert').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('#footer').outerHeight(true))
}
}
})
});
And create a custom css to .affix, which is the state when the div is sticked.
I'm trying to create a Dojo dialog in Zend Framework but I've run into some problems. My view code looks something like this:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true" dojoConfig = "parseOnLoad: true">
</script>
<script>
require(["dijit/registry", "dojo/ready", "dojo/dom", "dijit/Dialog", "dijit/form/Form"],
function(registry, ready, dom, Dialog){
ready(function() {
createDialog = function(titleText, contentText) {
var node = dojo.byId("foobar");
var myDialog = new Dialog({ title:"From Source Node" }, node);
myDialog.show();
};
});
});
</script>
<body class="claro">
<div data-dojo-type="dijit/Dialog" id="foobar" title="Foo!" style="display: none">
<p>I am some content</p>
</div>
</body>
The button code that loads the dialog looks as follows:
<button name="btnDialog" id="dialogbtn" type="button" onclick='createDialog();'>Open</button>
The first time the button is clicked the dialog opens as expected, but once the dialog is closed and the button is clicked again, the dialog doesn't open and I get the following error in the console.
Tried to register widget with id==foobar but that id is already registered.
What am I doing wrong?
Thanks
Figured it out. I think the form wasn't parsing correctly because the dojo-config was incorrect. Changed the javascript code as follows:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true, parseOnLoad:true">
</script>
<script>
require(["dijit/registry", "dijit/Dialog"], function (registry)
{
createDialog = function createDialog()
{
registry.byId("foobar").show();
}
});
</script>
and the div as follows:
<body class="claro">
<div class="dijitHidden">
<div data-dojo-type="dijit.Dialog" data-dojo-props="title:'Foo!'" id="foobar">
<p>I am some content</p>
</div>
</div>
</body>
and now the dialog dijit is saved to the registry and it's working as expected