How can I guarantee a fixed horizontal location for the vertical axis in terms of pixel from the edge of the screen? The photo shows how the axis location varies depending on number of digits in the scale labels. (I need the X in the photo to be constant so the plot will line up with other elements on the page.)
I've tried adjusting:
Options > layout > padding > left; and that shifts everything to the right but the location of the vertical axis still depends on the number of digits in the y-axis scale labels.
Options > scales > yAxes > ticks > padding; that changes the space between the label and the axis but it doesn't guarantee a location for the vertical axis.
(I'm using options > responsive = false.)
Maybe there's a better way, but this worked for me.
In the chart options I set: options > layout > padding > left to a default pixel amount that works for my situation when the scale label has only two digit number labels.
Then I set an ID for the yAxes so that I can access it later: options > scales > yAxes > id.
Then in my JavaScript, after the code that defines the chart, I added the following code which adjusts the left padding if the scale label has three digits (in my case I set it to 1):
var axis = myLineChart.scales.<id of my y axis>;
var max_tick_label = axis.ticks[0];
if (max_tick_label >= 100) {
myLineChart.options.layout.padding['left'] = 1;
myLineChart.update();
}
Related
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
Hi,
Is there any way to limit the Y-axis character in google visulaization combo graph to given limit and then ...
By Default it is doing when more then 22 character. But I want to reduce it to given character.
Attached is the screen shot
I assume you meant X-axis, not Y-axis, given your screen shot. There is a quick-and-dirty approach that truncates the displayed strings to 22 characters, but this will affect the tooltips as well as the axis labels:
for (var i = 0; i < data.getNumberOfRows(); i++) {
// assumes column 0 is your labels
var label = data.getValue(i, 0);
label = label.substring(0, 22);
data.setFormattedValue(i, 0, label);
}
If you just want to affect the axis labels, there are different approaches you can take, and which one you take depends on what you want to achieve by truncating the labels. What is it that you want to achieve?
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
In VS2010 VB I am using MSChart (.Net 4) and I have a FastLine chart with values from -2000 to 2000 for X axis and -20 to 20 on Y axis.
The interval for the gridlines in X axix is 250 and I need the gridlines to be "mirrored" from origin (i.e. -250, 250; -500, 500;...) but when I execute the applications always the first gridlines are -200, 50 and then -450, 300...
I tried using StartFromZero = True in the axes properties without success. Is there any way to force the gridlines to be symetric from the origin (zero) ?
Thank you for your comments.
I solved this issue by setting the IntervalOffset of the Axis. This offset represents the offset of the first gridline from left of the chart (in the case of X axix) . By calculating the displacement required (myChart.ChartAreas(0).AxisX.IntervalOffset = myChart.ChartAreas(0).AxisX.Maximum Mod yourIntervalValue) to reach 0 from left most value with the interval used, I was able to make the gridline in the middle of the chart to match the zero line.
I hope it helps others.
I am using the setViewBox() function in Raphael 2. The width and height is multiplied by a value like (1.2, 1.3 ...). This changes the magnification/ zooming properly but the x and y which I have given as 0,0 makes the paper display its contents after some offset. If i modify the x and y to some positive value after the rendering( using firebug!!) then the top left of the paper moves back and above to its right position. I want to know how will the value be calculated. I have no idea about how the x,y affect the viewbox. If anybody can give me any pointers for this it will be a real help.
I have tried giving the difference between the width/ height divided by 2. Also I must mention that I am not rendering an image but various raphael shapes e.g. rects, paths text etc. in my paper.
Looking forward to some help!
Kavita
this is an example showing how to calculate the setViewBox values, I included jquery (to get my SVG cocntainer X and Y : $("#"+map_name).offset().left and $("#"+map_name).offset().top) and after that I calculated how much zoom I need :
var original_width = 777;
var original_height = 667;
var zoom_width = map_width*100/original_width/100;
var zoom_height = map_height*100/original_height/100;
if(zoom_width<=zoom_height)
zoom = zoom_width;
else
zoom = zoom_height;
rsr.setViewBox($("#"+map_name).offset().left, $("#"+map_name).offset().top, (map_width/zoom), (map_height/zoom));
did you put the center of your scaling to 0,0 like:
element.scale(1.2,1.2,0,0);
this can scale your element without moving the coordinates of the top left corner.