I'm trying to create a bar chart with two series of data. I want one series to be drawn to the right, and one series to be drawn to the left.
If I put negative values in for Austria, then it will draw those values oriented towards the left. Is there any way that I can have the data series for Austria oriented towards the left, and the data series for Bulgaria pointed towards the right, without making values negative?
I was playing with one of the examples from Google's Vizualization API, and here's what I came up with (It's probably easiest to paste the code below into http://code.google.com/apis/ajax/playground/?type=visualization#bar_chart):
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var raw_data = [['Austria', -1336060, -1538156, -1576579, -1600652, -1968113, 1901067],
['Bulgaria', 400361, 366849, 440514, 434552, 393032, 517206],
//['Denmark', 1001582, 1119450, 993360, 1004163, 979198, 916965],
//['Greece', 997974, 941795, 930593, 897127, 1080887, 1056036]
];
var years = [2003, 2004, 2005, 2006, 2007, 2008];
data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
data.addRows(years.length);
for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
isStacked: 'true',
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
Thanks a bunch, let me know if I can clarify anything.
Use the series option to define two separate horizontal axes for the chart. Set the direction option on the second horizontal axis to -1 to make the values extend from the right side of the chart.
series:{1:{targetAxisIndex:1}}, hAxes:{1:{direction:-1}}
You can use Column Chart instead of Bar Chart, they seems to resemble each other.
https://developers.google.com/chart/interactive/docs/gallery/columnchart
Related
How can i hide text of small slices in pie chart without to remove the text from the legend in the bottom?
I tried to remove the text like this:
if ((yVal < 5F) {
name = "";
} else {
//Add to y values
}
But then the legent text is empty also. so the users can't really know who is this slice.
My solution is to separate the legend texts and the pie chart slices text.
I set the legend (bottom map for each color) text and colors in this way
- In loop for all the contacts:
List<Integer> colors = new ArrayList<>();
List<String> labels = new ArrayList<>();
labels.add(fullName);
colors.add(METRIC_COLORS[index]);
Legend l = chart.getLegend();
l.setCustom(colors, labels);
In addition I added the text of pie-slices:
PieDataSet dataSet = new PieDataSet(yVals1, "");
dataSet.setColors(METRIC_COLORS);
I have a situation like this:
for (PieEntry pieEntry : leastPieEntries){
if(pieEntry.getValue() < 10)
{
pieEntry.setLabel("");
}
}
Tried to loop through all PieEntries but getValue returns the float value instead of percentage value...how did you do it?
I am using google charts for plotting a graph
How can I show annotation of the point at right-hand-side of the point but it showing on the top of point
http://i.stack.imgur.com/UHhQH.png
I want it like as follow
http://i.stack.imgur.com/lUBcq.png
Please any one help me out
You can actually change the position of the annotations, by using css tranform.
You should first get a handle to the anntation text, if you want to change all the text, then you can use the text tag name in css
text {
transform: translate(10px, 30px);
}
I was able to adjust annotations to the right by doing 2 things:
1) Entered some white spaces (\u00A0 is white space) and a long dash (—) on the left side of the desired annotation.
2) Added stem length of -3.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Model');
dataTable.addColumn('number', 'T');
dataTable.addColumn({type:'string', role:'annotation'});
dataTable.addRows([
['ABC',30,'\u00A0\u00A0\u00A0\u00A0 — X'],
['DEF',20,'\u00A0\u00A0\u00A0\u00A0 — Y'],
['GHI',10,'\u00A0\u00A0\u00A0\u00A0 — Z'],
]);
var options = {
1: {annotations: {stem: {length: -3}}
};
suppose I have 4 slices having 20%, 30%, 30% and 20%. If I make 4th slice(20%) inactive, the other slices should adjust themselves and occupy 100 %. how to do this in highcharts? Thank you.
I don't think it's possible to alter this behavior. Instead you need to remove the point all together for the other slices to add up to 100. Here is an example that shows the difference between legend-toggle and point remove: jsfiddle
I think this should be the standard behavior :)
opts.plotOptions.pie.point.events.legendItemClick = function() {
if (this.visible) {
this['y_old'] = this.y;
this.update(0);
}
else {
this.update(this.y_old);
}
};
now when you click on a legend item the pie chart slice will disappear
If you want to show the percentage (100% without the now missing slice) you have to define your tooltip (or legend) as:
opts.tooltip.formatter = function() {
var s = '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + '%';
return s;
};
This feature is now available out of the box as plotOptions.pie.ignoreHiddenPoint
series: [{
ignoreHiddenPoint: true,
type: 'pie',
...
}]
Auto Redraw/Recalculate Pie on Legend | Highchart & Highstock # jsFiddle
I have a pie chart and I need to change the size of the symbols in the legend, but there's only setSymbolWidth. How do I change the height of the symbol?
I'm using Moxie Group's GWT highchart, but if there's a way in solving this with the javascript highcharts I'm probably able to do it in the GWT version.
I tried this solution http://jsfiddle.net/MEr2n/ but the series property is returning null (don't know why) even after I add a series to the chart. I'm also not sure this would work because it seems this solution gets the SVG element of the legend from the serie and set its property directly, in my case there is one serie and a symbol for each point in the serie.
I solved it. Unfortunately I needed to create a very ugly workaround for this. At least it worked.
My solution was:
NodeList<Element> gElements = chart.getElement().getElementsByTagName('g');
for (int i = 0; i < gElements.getLength(); i++) {
Element gel = gElements.getItem(i);
if (gel.getAttribute("class").equals("highcharts-legend")) {
NodeList<Element> elements = gel.getElementsByTagName("rect");
for (int j = 0; j < elements.getLength(); j++) {
elements.getItem(j).setAttribute("height", "8");
}
break;
}
}
I guess I could have used gwt-jquery to get the g element with the highcharts-legend class, but I don't want to add another API just for this.
I have column google charts. (using https://www.google.com/jsapi)
Vertical axis for count of bananas(for example)
Horizontal axis for dates
so, each my column tooltip looks like:
20.02.2011
Bananas: 3
I need to replace 20.02.2011 on some my text on each column.
Is it possible?
UPD
I need to replace 20.02.2011 on some my text on each column.
But dates on Horizontal axis should stay as they are.
The best way to do it without changing your actual data points is via the tooltip option. As an example copy the following code to google's visualization playground.
function drawVisualization() {
data = new google.visualization.DataTable()
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn({type:'string',role:'tooltip'});
data.addRow();
base = 10;
data.setValue(0, 0, 'Datapoint1');
data.setValue(0, 1, base++);
data.setValue(0, 2, " This is my tooltip1 ");
data.addRow();
data.setValue(1, 0, 'Datapoint2');
data.setValue(1, 1, base++);
data.setValue(1, 2, "This is my second tooltip2");
// Draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}
One option is to change the horizontal axis with the text that you want.
For ex.
In this sample code http://code.google.com/apis/ajax/playground/?type=visualization#bar_chart
Chart URL
If you want to replace year with your custom text then change
var years = [2003, 2004, 2005, 2006, 2007, 2008];
to either
var years = ["a", "b", "c", "d", "e", "f"];
or
var years = ["2003:a", "2004:b", "2005:c", "2006:d", "2007:e", "2008:f"];