Change tooltip data in Google Charts - charts

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"];

Related

Highcharts: how to align column and line chart x-axises

I have 2 Highchart charts: column chart and point chart.
They share same xAxis config:
{
type: 'datetime',
min: Date.UTC(2010, 01, 02),
max: Date.UTC(2010, 01, 14),
startOnTick: true,
}
I want to align their x axises so values on corresponding dates are located on same vertical line.
How can I modify charts so that their x axises are properly aligned?
jsFiddle:
http://jsfiddle.net/vmdLommk/1/
The difference is caused by automatically applied padding to the axis for a column series, to account for the width of the column itself.
There are probably multiple things that can be done, but I find it easiest to manage this way:
Add a dummy column series to your line chart. This will force the same kind of padding that is applied to the column chart.
Example:
{
name: 'dummy',
showInLegend: false,
type: 'column'
}
Fiddle:
http://jsfiddle.net/jlbriggs/vmdLommk/2/

Line not displaying on LineChart in Netbeans IDE

The JFreeChart I have created is a LineChart. the problem I am having is that the line on the graph is not showing.
Can anyone tell me why this is occuring.
Here is the coding for the button:
DefaultCategoryDataset dataset2 = new DefaultCategoryDataset();
dataset2.setValue(100, "John B","EMP0001");
dataset2.setValue(200, "John A","EMP0003");
JFreeChart chart2 = ChartFactory.createLineChart("Comission", "Employee", "Number of Sales", dataset2, PlotOrientation.VERTICAL, false, true, true);
chart2.setBackgroundPaint(Color.YELLOW);
chart2.getTitle().setPaint(Color.RED);
CategoryPlot p2 = chart2.getCategoryPlot();
p2.setRangeGridlinePaint(Color.BLUE);
ChartFrame frame2 = new ChartFrame("Employee Comission", chart2);
frame2.setVisible(true);
frame2.setSize(450,350);
This is what happens when the line chart is created:
Line chart without line displaying on chart
Please could someone help just indicate to me where the possible problem lies.
In order to show a line you need to have two data items that have the same value for the rowKey and different values for the column key.
if you change the data to:
dataset2.setValue(100, "John A","EMP0000");
dataset2.setValue(200, "John A","EMP0001");
dataset2.setValue(300, "John B","EMP0002");
dataset2.setValue(400, "John B","EMP0004");
then in plots :
Notice that the "John A" values are red and the "John B" values are blue and
the red and blue do not connect. The column values are printed along the bottom.

google charts annotations show right side of point

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}}
};

Large gaps in GFlot bar chart with value series

I use GFLot 2.4.3 with GWT 2.4 and have a problem regarding a series of values, NOT a time series. x-axis shows several IDs and y-axis shows the corresponding values as bars.
The problem is that these IDs have large gaps in their numbering, for example 1, 9, 47 or 128 and up to above 4000. In a bar chart this is plotted as seen on the following image:
Can I somehow deactivate these interpolation of points and get all bars aligned next to each other without gaps?
The only solution I could find is to use a TickFormatter.
Add your points to the model using constant gap as x-axis (1, 2, 3, 4, 5, etc.) and add a TickFormatter to the x-axis option :
plotOptions.addXAxisOptions( new AxisOptions().setTickFormatter( new TickFormatter() {
#Override
public String formatTickValue( double tickValue, Axis axis )
{
// return the label you want ("1", "9", "47", "128", "4000", etc.) for the tickValue (1, 2, 3, 4, 5, etc.)
}
} ) );

Google charts- changing orientation of bars in a bar chart

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