Here's a google chart I've made:
I want the legend paging gone. On page 2 there are only 2 items, and obviously these 2 items could easily fit without paging.
After spending some time researching and playing around, it seems my only options are:
Make the chart area higher - It's already too big
Make the text smaller - It's already too small
Hide the legend and make my own - This is my last resort
Does anyone know how I can modify the legend height to fit the other 2 items?
Paging is gone only when legend.position is 'top' and give legend.maxLines:
legend:{ position:'top',maxLines:4}
https://developers.google.com/chart/interactive/docs/gallery/piechart?csw=1#Configuration_Options
It looks like you have extra vertical space at the bottom of the chart that you could use to expand the chartArea into:
chartArea: {
height: '85%',
top: '13%'
}
If that is not a viable solution, your only choice is to build a custom legend, as the API does not support altering the dimensions of the legend directly.
Related
I have an Amcharts in a tab but when it is created on page load, it is compressed with an incorrect (too small and sometimes to 0px) height. When I switch tab and come back to the chart tab, then I can clearly see that it is resized and looks perfectly after some visible height changes.
I have seen a bunch of similar topics, but they all complain about the chart having a small size only when arriving on a tab and not on page load directly.
I have tried to call invalidateSize(), validateNow(), etc. after the chart is built on page load (even with a timeout) but it doesn't do the job.
Is it because of the container that wouldn't give enough info to Amcharts to process the correct size? How come Amcharts is able to recalculate the size of the charts when changing the tab and back to the chart one?
Would you please have any hints for me? Thank you very much
I use Bootstrap tabs system.
I have finally solved it by setting a fixed height
.amcharts-chart-div{
height: 436px !important;
}
Using the Visualization API, I am drawing a very simple ColumnChart, with no legend.
I don't know why, but the chart is not centered in its container, as if the space for the legend on the right was kept, although the legend is not displayed.
But if I change the legend position to bottom, for example, that space is still present. So I am not sure if this is related to the legend.
Please check my JSFiddle. Notice the big padding on the right (around 55px).
Any way to fix this? Thanks in advance!
The chartArea is centered in the chart (the axis labels are not considered part of the chartArea, it is easier to see that it is centered if you turn them off: http://jsfiddle.net/xyqF7/9/), what you want to do is move it off-center, which you can do via the chartArea options:
chartArea: {
width: '80%',
left: '15%'
}
http://jsfiddle.net/xyqF7/8/
Short version - I want to modify the width/height of a google.visualization.PieChart object after construction, but I can't find any documentation pointing out how it's done.
Context - I'm building a visualization that overlays a bunch of data on a Google Map. At certain lat/long coordinates I want to render a pie chart marker detailing certain statistics that are relevant to that place.
To avoid cluttering up the screen, I want to vary the dimensions of the pie chart markers based on the current zoom level. This requires me to either re-render all markers that are currently visible or, preferably, change the width/height attributes of all markers.
I currently use the following settings to render my charts:
legend: {position: "none"},
width: 200,
height: 200,
backgroundColor: "transparent",
pieSliceText: "none",
colors: ["#C10001", "#F79647", "#92D051", "#558ED5", "#7F7F7F"],
tooltip: {textStyle: {fontSize: 14}}
Is there a way to alter the dimensions of the chart after it's created?
I do not think there's something in the API; nevertheless with a tiny bit of Javascript you should be able to modify the attribute of the SVG tag containing the chart. One possible way is to add a viewBox attribute that will scale up or down the pie chart.
The only working solution I have so far is to redraw the entire chart with changed width/height settings. This snippet uses jQuery.
for (var i = 0; i < dataPoints.length; ++i) {
var drawingOptions = $.extend({}, defaultDrawOptions);
drawingOptions.width = defaultDrawOptions.width*(currentZoom/defaultZoom);
drawingOptions.height = defaultDrawOptions.height*(currentZoom/defaultZoom);
dataPoints[i].chart.draw(dataPoints[i].dataSource, drawingOptions);
}
As you can see, this half-baked solution is rather clumsy and might needlessly deteriorate performance.
Other than using the Column chart and naming appropriately is it possible to create histograms in google chart api?
To add to mattedgod's answer,
The column chart can now be created with the bars spaced tightly together, use the option:
bar: {groupWidth:"100%"};
Google introduced a couple of days ago an histogram chart : link
Google Charts does not have a histogram chart, since it is just a visualization library you will have to modify the Column Chart to suit your needs. However, I suspect the reason you are not satisfied with column chart is because of the column spacing, which doesn't look very histogram-like. So I will answer this question first:
Can you control the spacing between columns in a Column Chart?
No, not at this time. See this quote from the Google Charts Community
There's no support in the API for controlling the spacing between bars. You might be able to hack it if you're willing to dig into the chart's SVG.
So it is do-able but will take some extra work from you. You can also play around with the chartArea configuration option which will have some influence on the column spacing.
However, the original question may have a different answer actually.
Can you create a histogram-like chart using a Column Chart?
While you cannot control the spacing between sets of columns in a Column Chart, you can get the columns pressed up almost to one another by specifying them as different columns, and then setting each column's color to the same color in the configuration options.
Here is a simple 3-column histogram:
var data = google.visualization.arrayToDataTable([
['x', '1-10', '11-20', '21-30'],
['', 3, 5, 4]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"My Histogram",
width:600, height:400,
hAxis: {title: null},
colors: ['red','red','red'],
legend: {position: 'none'}
}
);
Notice you have 1 row with 3 columns that are each colored 'red'. The downside to this is that you lose out on the labels along the x-axis telling you which column represents what. Again, you will have to have some sort of logic to construct this histogram and populate the data the way you want as well.
So the long story short is Google Charts doesn't have a Histogram and while it is possible with a Column Chart, you might consider looking into a different library.
Is there a way to show more than 1 panel at a time with the coda slider? I want to keep its original scrolling logic the same. The only difference, to show more than one panel at a time. Such as 2 or 3 or 4 panels in view.
How would we go about doing that?
Thanks
Here is a sample that heads in the direction of a working example of what you'd like. I'll explain why it seems to be more trouble than it's worth (Assuming you want flexible content in both panels) and tell you how I did it.
Here is the jsFiddle.
So, the initial issue is that the current slide is taken into account for height. Well, what if the next slide contains more content and requires a higher slider height? I suppose you'd need to compare the height of both for each height calculation. That's not so difficult, but it may lead you to more trouble if you had to fight with Niall's code.
The second issue is that you have to set a static width for two elements, which is normal in most cases for this slider, but potentially a drag depending on what your content is.
Anyhow:
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 230px }
.coda-slider { float: left; overflow: hidden; position: relative; width: 460px !important }
You should be able to locate these selectors using find in your editor. The !important is a drag, but required if you don't want to rework much code. Basically, you want to set .coda-slider .panel to the width you want each panel, then double the width of .coda-slider.
Let me know if I've missed anything here or failed to explain something properly. I'd be happy to go over this more! I've worked with this slider a lot due to inheriting a project at work that made extremely heavy use of it. I've since moved on to something custom.