There is a new Google Charts API released (https://developers.google.com/chart/interactive/docs/release_notes#april-30-2015) which disables the column header wrapping for table charts. How can I re-enable this?
Assign a css class name to headerCell, it can even be blank. This will cause the text to wrap...
Add this to your table chart options...
cssClassNames: {headerCell: 'googleHeaderCell'}
Add this css somewhere on your page...
.googleHeaderCell {}
The answer worked great, In terms of 'adding to chart options'
It can work like this:
table.draw(dataTable, {
showRowNumber: false,
width: "100%",
height: "100%",
cssClassNames: {headerCell: 'googleHeaderCell'}
});
Related
I want to figure out how to grab the title in a plugin in ChartJS I have the title in the configuration like so:
title: {
display: true,
fontSize: 10,
text: "This is my title",
padding: titlePadding,
}
I was just curious if I want to do some afterDraw work, how do I grab it and alter it? I want to do some manipulation later in the event sequence.
You can get the title text by calling chart.titleBlock.options.text, although even if you update it and call chart.update() it will render the updated title in the first draw tick but the other draw ticks it will use the normal defined title again, see fiddle: https://jsfiddle.net/Leelenaleee/kc8qua61/12/
You are better off using a scriptable option for the title as shown in de documentation sample of chart.js here: https://www.chartjs.org/docs/master/samples/line/stepped.html.
It takes a part of the config to show in the title as a dynamic part and internally chart.js handles it, you can also use external variables here.
Hello R Studio Community,
I've been developing an app in Shiny and it's be great. I have one simple question.
As different browsers have different widths, is there a way to set the rule on resizing the Shiny dashboard based on the following:
1) If browser width is more than x, limit to width to x and center the entire dashboard
2) If browser width is less than x, follow default autosizing
3) Not essential. But how do I set the blank space color to the left and right of the dashboard
The motivation is that I need a fixed width so that some pictures are scaled correctly. I hope my request can be done through some div tag on the dashboardPage.
This is the current behavior which I do NOT want.
Shiny dashboard stretches to fit window
Cheers,
Donny
Hi to achive what you are asking for just add the following code to the beginning of your dashboardBody. something like this
dashboardBody(
tags$head(
tags$style(
"body{
min-height: 611px;
height: auto;
max-width: 800px;
margin: auto;
}"
)
),
... #the rest of you ui code
hope this helps
I am new to foswiki, and have it spun up running on a vm at my companies datacenter.
I have most of the baseline config down, but am wondering about some more customization.
Specifically I am looking for some documentation on how to customize the sidebar. Any documentation or tips ya'll hit me back with would be appreciated!
Thanks!
I assume you are using the default theme 'PatternSkin'
One Example of modifying the Sidebar is to change the width:
to do this create a attachment 'SidebarCustomWidth.css' with the following css
#patternOuter {
margin-left: 8em;
}
#patternSideBar {
width: 8em;
margin-left: -8em;
/*background-color: rgb(200, 200, 255);*/
}
/* remove padding */
#patternSideBarContents {
padding-right: 0;
padding-left: 0;
}
then you can use it with
* Set USERSTYLEURL = %PUBURLPATH{topic="TheWebname.TopicWithAttachment" "SidebarCustomWidth.css"}%
you can find this example at
https://foswiki.org/Sandbox/StefanKr%C3%BCger/PatternSkinCssCookbookSidebarCustomWidth
and some more Documentation and Examples at
https://foswiki.org/System/PatternSkinCssCookbook
Other Options to customize the Content of the Sidebar can be found at
https://foswiki.org/System/PatternSkin#Top_44_Bottom_and_Left_Bar_customization
regarding the Sidebar you can look for WebLeftBar.
every web has its own Topic WebLeftBar. you can change this to your needs. If a Web has no WebLeftBar Topic and no WebLeftBarExample Topic (thats the fallback) the Sidebar does not render.
if you want to change the defaults for new webs you can do this in the _default web.
I have made a collapsible section for the portfolio (extensive) gallery on my one page website. The gallery has Isotope filters applied to it. On default only the header is shown, but when clicking on the header, the filter names and gallery should be unhidden (content hidden via CSS using display:none) as per JQuery code below:
$(document).ready(function () {
$('h5').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
}); //end toggle
}); //end ready
When I click the header, it expands the filter names, but gallery content isn't displayed. This only happens after clicking one of the filters. When toggling the collapsible section, the gallery remains shown as intended.
So the only problem is the initial unhiding of the gallery. I think by clicking the header, the "Show all" filter or other relevant div has to be reloaded/refreshed in order for the gallery to appear. I've tried multiple commands, but can't seem to find the correct one.
Thank you for the help and let me know if you need any more information.
Apologies for the delay, but please find setup via link below:
http://www.davidmaes.eu/#work
Thanks for the help.
I took a look at the site and isotope doesn't have time to calculate the image sizes, so it's giving the UL container a height of 0: <ul class="portfolio-wrap isotope" style="position: relative; overflow: hidden; height: 0px;"> which is why the images aren't showing up.
When the user clicks a filter, isotope recalculates the images sizes and applies it to the UL, and voila, the images reappear.
You can manage this by using the imagesloaded script, which will only call isotope once the images have finished loading.
Here's the isotope documentation on integrating isotope with imagesloaded.
I am looking to create a progress bar in Liferay, hopefully inside the Dynamic List Display plugin but not necessarily. The data for the progress bar will be coming from the List though.
Any suggestions?
You can do it easily with AlloyUI in Liferay 6.2. You need a placeholder for the progressbar - something like this:
<div id="myProgressBar" style="width:100%;height:20px;"></div>
And then you can create it with javascript like this:
<aui:script use="aui-base,aui-progressbar">
var progressBar = new A.ProgressBar({
boundingBox: '#myProgressBar',
label: '<%=percentage%>%',
orientation: 'horizontal',
value: '<%=percentage%>',
}).render();
</aui:script>
You can read more about the progress bar config options here:
http://alloyui.com/api/classes/A.ProgressBar.html
And some samples here:
http://alloyui.com/versions/2.0.x/tutorials/progress-bar/