Crop the area used for title in google's area chart - google-visualization

The area chart used for the title is too big. I see the area used for allow the tooltip when there is a high value, but if is possible to cut the area used for the title, maybe the tooltip will render from top to bottom.
Is it possible to crop the area used for title (and maybe something more), like:
I just want the "chart draw" area, the red part should be cropped.
Tried titlePosition: 'none', but it didn't work.
Thanks.

The part of your chart that you labeled "chart draw" is controlled by the chartArea option:
chartArea: {
top: 25,
height: '80%'
}
Each sub-option (height, width, top, left) can be either a number (pixels) or a string (percent of total chart height or width). Use these options to enlarge the chartArea's height and/or shrink the area devoted to the chart title.

Related

Is it possible to change the color of grid lines in a chart and can we add dots at the data points in line chart in power bi?

Is it possible to change the background gridline color of the line chart & can we dot at the data points of the line chart?
Can you add markers (or dots) to the line chart?
Yes, but the X axis must be of type "categorical".
navigate to "Shapes" > "Show Marker" (on/off)
Can you change the background grid line color?
Yes you can.
Expand "Y Axis" > navigate at the bottom until you find "Gridlines" (on/off) > here you have all the gridline settings

Change color of labels on x-axis of a Google Chart timeline view

I'm trying to change the color of the black labels on the x-axis. Now they're black, which don't go well with the background. In the documentation I only found: rowLabelStyle or barLabelStyle. How can I change the color of the labels on the x-axis?
By using this CSS:
#timeline text {
fill: #dddada;
}
The text appears light.

Overlapping MenuItems in Cocos2d CCMenu

I am trying to make a Menu that contains 13 MenuItemImages in two columns (the last one is in the middle).
The frame width/ design resolution width is 480 pixels. MenuItemImage width is 180 pixels.
here is my code :
CCMenu* testMenu = CCMenu::createWithArray(testMenuItems);
testMenu->alignItemsInColumns(2,2,2,2,2,2,1);
CCSize size1 = CCDirector::sharedDirector()->getWinSize();
testMenu->setPosition(ccp(size1.width / 2, size1.height/2));
but the two columns are slightly overlapping. (the right one is above the left one)
here is the result of my code:
I would like it to be properly spaced with some padding between the two columns.
Please help me out I am new to Cocos2d-x.
the alignItemsInColumns will align menu itens based on itens center, against menu width.
In your case, you have 2 options:
1) Increase your menu width (by default, their size will be based on screen size. Change the menu.contentSize.width)
2) Change the anchor point of left itens to ccp(.7,.5) and right itens to ccp(.3,.5) for example

Is there any way to add gridlines to a gRaphael line chart?

I have a line chart that I've created with gRaphael. It has axes and tick marks, but I'd like to have grid lines. Is there built-in way to achieve this or an add on library that can help me?
gRaphael does not have a built-in way to add grid lines, but it is pretty easy to draw them, either by editing the source code or manipulating your graph object after you create it.
I had found an extension called RaphAlytics and used its drawGrid() function in cases where I needed a bounding box with a grid.
You can adapt this function for any gRaphael graph as needed to draw gridlines. On a line chart, I needed to draw horizontal gridlines that were aligned with the left axis marks on a line chart, so I used the function as an example like this:
// Draw horizontal gridlines
for (var i = 0; i < g.axis[1].text.items.length; i++) {
r.path(['M', x, g.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({
stroke : '#EEE'
}).toBack();
}
Here's a working fiddle to illustrate that example: http://jsfiddle.net/KM3BB/1/
I tried doing this yesterday. Short answer: gRaphaël can't do this for you with any linechart options nor axis options, you have to do-it-yourself with Raphaël.
Something like:
var r = Raphael("holder"), txtattr = { font: "12px sans-serif" };
r.path('M 15 200.5 L 310 200.5 M 15 180.5 L 310 200.5');
r.linechart(10, 10, 300, 220, x, [y, y2, y3]);
This means under my linechart draw a path which starts from 15,200.5 and draws a straight line to 310,200.5 moves to 15,180.5 and draws a line to 310,180.5. Don't ask me why but the .5 is important for getting the stroke to actually be 1px wide and solid black. Otherwise it seems to get aliased to 2px wide at 50% opacity. You have to calculate the exact placement in regards to your linechart yourself.
You can also play with the path function in the playground by changing r to paper.
You might also consider looking at Google Chart Tools if your looking for things like defining the exact range of the axis (as opposed to just the min and max of the input).

Align child div to bottom of parent div with dynamic height and width

I don't know how to move ".buttons-box" to bottom of ".blog-item". I can set {position: relative;} for ".blog-item" and {position: absolute; bottom :0; right:0} for ".buttons-box", but it does not solve my problem, because change me width for ".buttons-box" and I need his width exactly as has ".content-box" and then I can't set width to 100%, because take width from relative parent, what is in this case "blog-item". I can't set specific width in pixels for "div.buttons-box" because is dynamic as ".content-box" and ".text". They have width according to image and this image can have different size in every single "blog-item".
What i need:
moved div ".buttons-box" to bottom of ".blog-item"
".buttons-box" must have same width as ".content.box"
".buttons-box" must be under ".text" and must have placeholder for
self, because if text will be too long, and if he had position
abolute will be over text
Thank you!
Image Sample: ttp://i.stack.imgur.com/6WfUm.jpg
JSFIDDLE Sample and Demonstration: http://jsfiddle.net/yjdEk/
Edit:
My idea on JSFIDDLE: http://jsfiddle.net/RhShT/
I created placeholder "buttons-box-placeholder" for buttons-box
I set position relative for ".content-box" and postion absolute for
".buttons-box"
I need now some script for set width and height, but only from his parrents not global, becouse every single .blog-item can be different:
.buttons-box width = .content-box width
.content-box heigh = .blog-item height
There is a CSS width property value called "inherit" which should make child's width equal to parent's.