please find my code to have google column chart is here:
<html>
<head>
<title>Test</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
</head>
<body>
<!-- detail section start -->
<section class='section-padding'>
<div class='container'>
<div class='row'>
<div class='col-12'>
<div>
<h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
</div>
</div>
</div>
<div class='row'>
<div class='col-lg-12'>
<!-- start:: Chart card -->
<div class='card-blk chart-card d-flex flex-column'>
<div class='card flex-grow-3'>
<div class='card-title'>
<h6 class='text-center'>
Customers
</h6>
</div>
<div class='card-content text-center'>
<div id='chartElement3'>
<script type='text/javascript'>
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawElement3Dashboard);
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9%', 18.2, '18.2%'],['A',5.5, '5.5%', 5.4, '5.4%'],['B',2.4, '2.4%', 2.3, '2.3%'],['C',1.0, '1.0%', 1.0, '1.0%'],['C-',0.3, '0.3%', 0.3, '0.3%']]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
'height': 150,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'#,###%','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
</script>
<div id='dashboard_div_3'>
<div id='filter_div_3' style='display: none;'></div>
<div id='chart_div_3'>
</div>
</div>
</div>
</div>
</div>
<h6 class='card-subtitle'>
User: Company name
</h6>
</div>
<!-- end:: Chart card -->
</div>
</div>
<!-- Start:: Copyright and page text -->
<div class='row mt-auto pt-3'>
<div class='col-12'>
<div class='copyright-text d-flex justify-content-between'>
<span>Company Name</span>
<span>Page 1</span>
</div>
</div>
</div>
<!-- End:: Copyright and page text -->
</div>
</section>
<!-- detail section end -->
</body>
</html>
my working HTML chart is here
I want to display labels on vAxis as 0%, 5%, 10% up to 20%. So as per Google visualization documentation, I specified vAxis:{format:'#,###%'}
but now it started showing labels like 0%, 500%, 1000%, 1500% and 2000% as you can see in my code above.
Can anyone suggest me the correct way?
the format option assumes the number is already a percent
19.9 = 1,990%
if you want to use the format option,
the values will need to be divided by 100
0.199 = 19.9%
otherwise, you can use custom ticks for the y-axis.
we can provide the value and the formatted value of the tick using object notation.
{v: 20, f: '20%'}
we can also build them dynamically, using data table method --> getColumnRange(colIndex)
// build y-axis ticks
var formatPercent = new google.visualization.NumberFormat({
pattern: '#,##0%'
});
var range = data.getColumnRange(1);
var ticks = [];
for (var i = Math.floor(range.min); i <= Math.ceil(range.max); i = i + 5) {
addTick(i);
}
function addTick(y) {
ticks.push({v: y, f: formatPercent.formatValue(y / 100)});
}
see following working snippet...
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawElement3Dashboard);
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9%', 18.2, '18.2%'],['A',5.5, '5.5%', 5.4, '5.4%'],['B',2.4, '2.4%', 2.3, '2.3%'],['C',1.0, '1.0%', 1.0, '1.0%'],['C-',0.3, '0.3%', 0.3, '0.3%']]);
// build y-axis ticks
var formatPercent = new google.visualization.NumberFormat({
pattern: '#,##0%'
});
var range = data.getColumnRange(1);
var ticks = [];
for (var i = Math.floor(range.min); i <= Math.ceil(range.max); i = i + 5) {
addTick(i);
}
function addTick(y) {
ticks.push({v: y, f: formatPercent.formatValue(y / 100)});
}
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div_3',
'options': {
'height': 150,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','ticks' :ticks,'gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div_3">
<div id="filter_div_3"></div>
<div id="chart_div_3"></div>
</div>
Related
Hi I have Date picker on select Date Month & Year it will show all Date in that Moth it working Fine
Now I want to add a Slider On that so that i used Owl Curasol after adding Curasol Date picker Stopped Working.
My Full code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.css">
<script type="text/javascript">
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
html='';
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
html += '<div class="datediv">div-'+i+'<br>'+n+'</div>';
}
$('#datecontent').html(html);
}
});
$(document).ready(function() {
$(document).live('click', '.datediv', function() { alert("hello"); });});
});
</script>
Html Code
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" id="owl-demo">
</div>
Owl Script
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/assets/js/jquery-1.9.1.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
</script>
I got This error TypeError: $(...).datepicker is not a function
How to fix this issue. I think because of Jquery Conflict Only
How to over come on this??
Hope this helps!
You should use the add method in carousel to append items inside carousel.Also use refresh to run the slider after appending.
owl.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>']).trigger('refresh.owl.carousel');
use remove method to remove items from carousel before appending new items.
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
$(document).ready(function() {
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
owl
.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>'])
.trigger('refresh.owl.carousel');
}
}
});
$(document).on('click', '.datediv', function() { alert("hello"); });
var owl = $(".owl-demo");
owl.owlCarousel({
margin: 20,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
.owl-item {
-webkit-tap-highlight-color: transparent;
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" class="owl-demo">
</div>
I setup a project using scala.js.
At the web part (playframework) I added a static library bxslider.
With scala.js I add a complete new slider (div, ul and li). Without scala.js all works fine, with scala.js the inserted code is not going to be a slider.
I tried to pass a script part with bxSlider() to the correct id. No effect. I get the error bxSlider() is no function.
It seemed to me, that their is no access to bxSlider. Where is the error?
object WidgetSingleArticleSlider {
def articleEntry(x: SharedArticle, addToCartText: String) = {
li(
`class`:="wgsp-item",
a(
href:="#",
figure(
img(src:=x.articleDescription.pictureSeq.headOption.getOrElse(Pictures.emptyPath))
)
),
p(
`class`:="wgsp-title",
a(
href:="#",
x.articleDescription.title
)
),
p(
`class`:="wgsp-price",
(if(x.price.articlePrice(1).specialSubTotal.isDefined)
x.price.articlePrice(1).specialSubTotal.get.formatted("%,.2f ")
else x.price.articlePrice(1).subTotal.formatted("%,.2f ")) + x.price.articlePrice(1).currency
),
div(
`class`:="row no-gutter",
div(
`class`:="col-xs-12 text-center",
a(
`class`:="btn btn-third-col",
href:="#",
addToCartText
),
div(`class`:="gap-30")
)
)
)
}
def toHtml(title: String, articleSeq: Seq[SharedArticle], addToCartText: String) = {
div(
`class`:="widget wg-specials store-alt box-with-pager mobile-collapse",
h3(
`class`:="wg-title mobile-collapse-header store-alt",
title
),
div(
`class`:="wg-body mobile-collapse-body",
ul(
id := "tium",
`class`:="vertical-bx-1",
articleSeq.map(e => articleEntry(e,addToCartText))
)
)
)
}
}
In main.scala.html this is added at the end:
<script src="#routes.Assets.versioned("js/jquery-1.11.0.min.js")"></script>
<script src="#routes.Assets.versioned("js/jquery-ui-1.10.4.custom.min.js")"></script>
#*<script src="#routes.Assets.versioned("plugins/jquery.bxslider.min.js")"></script>*#
<script src="#routes.WebJarAssets.at(webJarAssets.locate("js/jquery.bxslider.js"))"></script>
<script src="#routes.Assets.versioned("js/bootstrap.min.js")"></script>
<script src="#routes.Assets.versioned("js/jquery-accessibleMegaMenu.js")"></script>
<script src="#routes.Assets.versioned("js/jquery.validationEngine.js")"></script>
<script src="#routes.Assets.versioned("js/jquery.validationEngine-en.js")"></script>
<script src="#routes.Assets.versioned("js/fastclick.js")"></script> <!-- Eliminating the 300ms click delay on mobile browsers -->
<script src="#routes.Assets.versioned("js/plugins.js")"></script>
<script src="#routes.Assets.versioned("js/scripts.js")"></script>
#scalajs.html.scripts("client", routes.Assets.versioned(_).toString, name => getClass.getResource(s"/public/$name") != null)
After this their is a request (which works) to scala.js which add the code above to the html structur at main.scala.html.
Now the adding sequence of my scala.js
val child = place.appendChild(Waiting.spinner.render)
Ajax.get(url(s"list/article/random?size=$size"),withCredentials = true).map{ xhr =>
place.removeChild(child)
val articleSeq = upickle.default.read[Seq[SharedArticle]](xhr.responseText)
val box = WidgetSingleArticleSlider.toHtml( title, articleSeq, addToCartText )
place.appendChild( box.render )
}
The problem is, that this added code is not transformed to a bxSlider. Also I try to restart it again as a bxSlider added as a script at WidgetSingleArticleSlider with:
$('.vertical-bx-1').bxSlider({
minSlides: 3,
slideMargin:0,
nextText: '<i class="arrow_carrot-right"></i>',
prevText: '<i class="arrow_carrot-left"></i>',
pager: false,
}));
The result is still only html. Asking for the loaded plugin results in undefined.
This is the code which was added after call:
<div class="widget wg-specials store-alt box-with-pager mobile-collapse"><h3
class="wg-title mobile-collapse-header store-alt">specials</h3>
<div class="wg-body mobile-collapse-body">
<ul id="tium" class="vertical-bx-1">
<li class="wgsp-item"><a href="#">
<figure><img src="/thumbnail/width/200/nothing"></figure>
</a>
<p class="wgsp-title">Wiesenkerbel Saatgut</p>
<p class="wgsp-price">2.34 EUR</p>
<div class="row no-gutter">
<div class="col-xs-12 text-center"><a class="btn btn-third-col" href="#">addToCart</a>
<div class="gap-30"></div>
</div>
</div>
</li>
<li class="wgsp-item"><a href="#">
<figure><img src="/thumbnail/width/200/nothing"></figure>
</a>
<p class="wgsp-title">Vogelmiere Saatgut</p>
<p class="wgsp-price">2.34 EUR</p>
<div class="row no-gutter">
<div class="col-xs-12 text-center"><a class="btn btn-third-col" href="#">addToCart</a>
<div class="gap-30"></div>
</div>
</div>
</li>
</ul>
</div>
<script>
jQuery('#tium').bxSlider();
if (window.jQuery === undefined) window.$ = window.jQuery = jQuery;
$(document).ready(function () {
$('.vertical-bx-1').bxSlider().reloadSlider();
$('#tium').bxSlider().reloadSlider();
$('.vertical-bx').bxSlider({
minSlides: 3,
slideMargin: 0,
nextText: '<i class="arrow_carrot-right"></i>',
prevText: '<i class="arrow_carrot-left"></i>',
pager: false
});
});
</script>
</div>
Solution found. No problem with scala.js it was jquery.
https://github.com/stevenwanderski/bxslider-4/issues/605
var j = jQuery.noConflict();
I added this line to my code and all worked fine.
I have read helpful answered given By #ghybs Page: “update properties of geojson to use it with leaflet”
but I am stuck to make it wok using a bootstrap popup window too collect data from user and hold it on feature.properties later I will collect multiple data from multiple marker, polygon polyline convert to geojson.
I can collect data form popup but data is showing same for every marker I am creating. feature.properties should different for each markers.
pelase review my code :
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
map = L.map('map', {
layers: [osm],
center: [31.9500, 35.9333],
zoom: 15
});
var editableLayers = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: editableLayers
}
}));
map.on('draw:created', function (e) {
var layer = e.layer,
feature = layer.feature = layer.feature || {};
feature.type = feature.type || "Feature";
var props = feature.properties = feature.properties || {};
//layer.feature = {properties: {}}; // No need to convert to GeoJSON.
//var props = layer.feature.properties;
props.action = null;
editableLayers.addLayer(layer);
addPopup(layer);
});
function addPopup(layer) {
var content = document.getElementById('action');
layer.feature.properties.action = content;
/* content.addEventListener("keyup", function () {
layer.feature.properties.action = content;
});*/
/* layer.on("popupopen", function () {
content.value = layer.feature.properties.desc;
content.focus();
});
layer.bindPopup(content).openPopup();*/
layer.on('click', function() {
$('#action').val(layer.feature.properties.action);
//content.value = layer.feature.properties.action;
$('#attributes').modal({'show' : true, backdrop:'static', keyboard:false});
$('#action').val(layer.feature.properties.action);
});
}
document.getElementById("convert").addEventListener("click", function () {
console.log(JSON.stringify(editableLayers.toGeoJSON(), null, 2));
});
#map {
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://unpkg.com/leaflet#0.7.7/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#0.7.7/dist/leaflet.css" type="text/css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Leaflet/Leaflet.draw/v0.3.0/dist/leaflet.draw.css" type="text/css">
<!--js-->
<script type="text/javascript" src="https://cdn.rawgit.com/Leaflet/Leaflet.draw/v0.3.0/dist/leaflet.draw-src.js"></script>
<body>
<div id="map"></div>
<button id="convert">
Get all features to GeoJSON string
</button>
<div class="modal" id="attributes">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Attribute Data</h4>
</div>
<div class="modal-body">
<div class="content-scroll5">
<div class="col-xs-2">
<label for="ex1">ACTION</label>
<input class="form-control" name="action" id="actin" type="text">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
I have a google spreadsheet with with 5 columns in it. column 0 is the title column and the other four have the values.
I want to do a different column chart (using google charts API) for each of the four value columns, but I can't hide the other columns. When I use
chartview1.setColumns([ 0, 1 ]);
it works fine! But when I do
chartview2.setColumns([0, 2 ]);
I get the error:
Invalid column index 2. Should be an integer in the range [0-1]
Similarly, when I do tableview2.setColumns([ 0, 2]); and then implement the dataView as a table (rather than a columnChart)
it works fine and hides the other columns.
Can anyone tell me what I am doing wrong? I can provide the full code if necessary.
I tried using the method outlined here :
how to hide column in google charts table
but this doesn't work for me.
Thanks
UPDATE: Here is the full code:
<html>
<head>
<meta charset="UTF-8">
<title>Service Desk Performance (Weekly)</title>
<style>
h2 {
font-family:"helvetica",arial, sans-serif;
}
.tableHeader {
background:transparent;
}
.tableHeader th {
background-image:none !important;
background:#ccc !important;
color:#fff !important;
border-bottom:2px solid #222 !important;
}
.tableRow {
background:#e9e9e9;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart", "table"]});
function initialize() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1c6r2xi4eY4iGcgWCRQcPce8A79OhDN4v5khkkC2WFVM/edit?usp=sharing', opts);
-
// Optional request to return only column C and the sum of column B, grouped by C members.
//query.setQuery('select C, sum(B) group by C');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chartview1 = new google.visualization.DataView(data);
var tableview1 = new google.visualization.DataView(data);
var chartview2 = new google.visualization.DataView(data);
var tableview2 = new google.visualization.DataView(data);
var chartview3 = new google.visualization.DataView(data);
var tableview3 = new google.visualization.DataView(data);
var chartview4 = new google.visualization.DataView(data);
var tableview4 = new google.visualization.DataView(data);
chartview1.setColumns([ 0, 1 ]);
tableview1.setColumns([ 0, 1 ]);
chartview2.setColumns([ 0, 2 ]);
tableview2.setColumns([ 0, 2 ]);
chartview3.setColumns([ 0, 3 ]);
tableview3.setColumns([ 0, 3 ]);
chartview4.setColumns([ 0, 4 ]);
tableview4.setColumns([ 0, 4 ]);
var test= chartview2.getNumberOfColumns();
console.log(test);
var chartOptions = {
vAxis: {
title: 'Requests',
gridlines: {color: 'transparent'},
baseline:0
},
chartArea: {
left:100,
top:40,
width:"100%"
},
hAxis: { title: 'Assignee Group' },
colors: [ '#00ccff', '#afafaf' ],
animation: {
startup: true,
duration: 500,
easing: 'in'
},
legend: {position:'none'}
};
var tableOptions = {
showRowNumber: false,
right:100,
top:40,
width: '100%',
alternatingRowStyle: false,
cssClassNames: {
headerRow: 'tableHeader',
tableRow: 'tableRow',
tableCell: 'tableCell'
}
};
var chart1 = new google.visualization.ColumnChart(document.getElementById('chart1'));
var table1 = new google.visualization.Table(document.getElementById('table1'));
chart1.draw(chartview1, chartOptions);
table1.draw(tableview1, tableOptions);
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
var table2 = new google.visualization.Table(document.getElementById('table2'));
chart2.draw(chartview2, chartOptions);
table2.draw(tableview2, tableOptions);
var chart3 = new google.visualization.ColumnChart(document.getElementById('chart3'));
var table3 = new google.visualization.Table(document.getElementById('table3'));
chart3.draw(chartview3, chartOptions);
table3.draw(tableview3, tableOptions);
var chart4 = new google.visualization.ColumnChart(document.getElementById('chart4'));
var table4 = new google.visualization.Table(document.getElementById('table4'));
chart4.draw(chartview4, chartOptions);
table4.draw(tableview4, tableOptions);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<h2>Week 1</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart1" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table1" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<hr>
<h2>Week 2</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart2" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table2" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<h2>Week 3</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart3" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table3" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<hr>
<h2>Week 4</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart4" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table4" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
I have had very similar issues to this - I create a 5 column DataTable from an array of analytic data and then dynamically construct a DataView in order to hide different sets of columns as and when the user chooses options on the page and finally display as an AreaChart. I found that hiding the last 2 columns using either view.hideColumns([3,4]) or view.setColumns([0,1,2]) works ok, but any attempt to hide a column that results in a non-contiguous set of column indices results in a failure of the AreaChart to display the result - it sounds like your ColumnChart has exactly the same issue.
The only solution I've discovered thus far is to make a copy of the view after the columns have been hidden. This creates a new view which has contiguous column indices and which will correctly populate the chart. It shouldn't be necessary, but I can't find any other way around the issue so far.
So in your case:
// create view and hide unwanted columns as before
var chartview2 = new google.visualization.DataView(data);
chartview2.setColumns([ 0, 2 ]);
// make a copy of the view to create contiguous index set
var chartview2_copy = new google.visualization.DataView(chartview2);
// use the view copy with the ColumnChart
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart2.draw(chartview2_copy, chartOptions);
This isn't pretty, but it worked for me, so perhaps the same will solve your issues also.
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.