I am using gooogle charts. When I include constant values in the third & fourth column in my chart it shows me as horizontal lines. Please suggest how to draw it as vertical lines as shown in the image belows
I found this,
Hereby a complete working fiddle to show you how it can be done:
http://jsfiddle.net/NC37X/1345/
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// example copied from Google Visualization API playground,
// modified for category axis annotations
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addRow(["A", null, null, 1, 1, ]);
data.addRow(["B", null, null, 2, 0.5]);
data.addRow(["C", null, null, 4, 1]);
data.addRow(["D", null, null, 8, 0.5]);
data.addRow(["E", null, null, 7, 1]);
data.addRow(["F", null, null, 7, 0.5]);
data.addRow(["G", 'Foo', 'Foo annotation', 8, 1]);
data.addRow(["H", null, null, 4, 0.5]);
data.addRow(["I", null, null, 2, 1]);
data.addRow(["J", null, null, 3.5, 0.5]);
data.addRow(["K", 'Bar', 'Bar annotation', 3, 1]);
data.addRow(["L", null, null, 3.5, 0.5]);
data.addRow(["M", null, null, 1, 1]);
data.addRow(["N", null, null, 1, 0.5]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
curveType: 'function',
width: 500,
height: 400,
vAxis: {
maxValue: 10
},
annotations: {
style: 'line'
}
});
}
Related
I hope this question can be understood as I find this topic rather tricky to explain. What I am looking for is a solution for a Google (Column) Chart, in which the chart shows both, X-Axis and legend with values, like a pie chart sometimes does. Most examples I found simply turned off the legend, though.
Here is what I got so far: First example of the fitting x axis:
The legend just shows 'Density', which makes sense, but I am looking for all the metals in the legend as well. So I switched the order of the dataset, to end up with this one:
And here the x axis shows density instead of the metals. So what I am looking for is something like this:
Either way, be it the manipulation of the legend or the manipulation of the axis works for me. Any ideas how to proceed?
Sources
First version
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
My Fiddle: https://jsfiddle.net/927pjLvb/2/
Second version:
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Copper", "Silver", "Gold", "Platinum"],
["Density", 8.94, 10.49, 19.30, 21.45],
]);
var view = new google.visualization.DataView(data);
view.setColumns([
0,
1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
3,
{ calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation" },
4,
{ calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation" }
]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
bar: {groupWidth: "95%"},
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
My fiddle: https://jsfiddle.net/8jaL9kf3/
starting with the second version, leave the x-axis label blank.
var data = google.visualization.arrayToDataTable([
['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
['', 8.94, 10.49, 19.30, 21.45]
]);
on the chart's 'ready' event,
copy the labels from the legend,
and place them under the bars,
using chart method --> getChartLayoutInterface()
the layout interface has method --> getBoundingBox(id)
this method returns the coordinates of chart elements,
by passing the id of the element.
in this case, we want to know the coordinates of the bars.
the id of each bar is structured as follows.
'bar#0#0' // <-- first bar
where the first 0 is the series number, and the second row number.
once we know the coordinates of the bars,
we can place the copied labels under them.
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
['', 8.94, 10.49, 19.30, 21.45]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, 4, {
calc: 'stringify',
sourceColumn: 4,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Density of Precious Metals, in g/cm^3',
width: 600,
height: 400,
colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
bar: {groupWidth: '95%'},
};
var container = document.getElementById('columnchart_values');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function (gglClick) {
// chart svg
var svg = container.getElementsByTagName('svg')[0];
// chart layout
var chartLayout = chart.getChartLayoutInterface();
// get all chart labels, chart title will be first, legend labels next
var labels = container.getElementsByTagName('text');
// process each series in the data table
for (var series = 1; series < data.getNumberOfColumns(); series++) {
// get bar bounds
var barBounds = chartLayout.getBoundingBox('bar#' + (series - 1) + '#0');
// copy legend label
var barLabel = labels[series].cloneNode(true);
// padding above label
var labelPadding = 4;
// center align label
barLabel.setAttribute('text-anchor', 'middle');
// set label x,y coordinates
barLabel.setAttribute('x', barBounds.left + (barBounds.width / 2));
barLabel.setAttribute('y', barBounds.top + barBounds.height + parseFloat(barLabel.getAttribute('font-size')) + labelPadding);
// add label to chart svg
svg.appendChild(barLabel);
}
});
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
note: the above example assumes the chart will have a title option.
See here: https://jsfiddle.net/1cLpukxx/1/
As you can see, the legend is the Density value. I think that's because all I'm doing is this:
legend: { position: "right" }
I'd like the legend to be the elements, with the colour that they are in the charts.
I feel like this should be easy, however I haven't found it in any examples (using the x-axis legend as the side-legend). I feel like this is because I don't know what to search for but I digress...
The style column used in the example overrides the legend, which is why the position is set to --> 'none'
One option would be to change the rows to columns, as in the following example.
This creates separate series and allows setting an array for colors in the configuration options.
However, this causes other issues, such as the spacing of the columns.
google.charts.load("current", {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Metal", "Copper", "Silver", "Gold", "Platinum"],
["Copper", 8.94, null, null, null],
["Silver", null, 10.49, null, null],
["Gold", null, null, 19.30, null],
["Platinum", null, null, null, 21.45]
]);
var view = new google.visualization.DataView(data);
view.setColumns([
0,
1, {calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"},
2, {calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"},
3, {calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"},
4, {calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"},
]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
legend: {alignment: "right"},
colors: ['#b87333', 'silver', 'gold', '#e5e4e2']
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
If I draw a line chart there is no problem but I want to have this on a histogram graph.. (https://developers.google.com/chart/interactive/docs/gallery/histogram)
For LineChart;
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
For Histogram;
var chart = new google.visualization.Histogram(document.querySelector('#chart_div'));
Other Codes;
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
['Foo', null, 4],
['Bar', null, 3],
['Baz', null, 7],
['Bat', null, 9],
['Cad', 'Vertical line here', 9],
['Qud', null, 2],
['Piz', null, 6]
]);
var chart = new google.visualization.Histogram(document.querySelector('#chart_div'));
chart.draw(data, {
height: 300,
width: 400,
annotation: {
// index here is the index of the DataTable column providing the annotation
1: {
style: 'line'
}
}
});
}
Daniel LaLiberte answered my question on Google Groups, who is a Senior Software Engineer at Google..
https://groups.google.com/forum/#!msg/google-visualization-api/7y3LrKETEwY/fR4HoYwBu-EJ
So it is not possible on Google Charts..
But :) Google Charts uses SVG.. For exp. I want to draw a line to 30 x axis..
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttribute('id', 'lineId');
newLine.setAttribute('style', 'stroke:rgb(0,0,0); stroke-width:3;');
newLine.setAttribute('x1', chart.getChartLayoutInterface().getXLocation(30));
newLine.setAttribute('y1', chart.getChartLayoutInterface().getChartAreaBoundingBox().top);
newLine.setAttribute('x2', chart.getChartLayoutInterface().getXLocation(30));
newLine.setAttribute('y2', chart.getChartLayoutInterface().getChartAreaBoundingBox().height + chart.getChartLayoutInterface().getChartAreaBoundingBox().top);
$("svg").append(newLine);
I have created a google line chart that has multiple values over time like this
The data refers to historical data and from a point in time is forecasted data. I want to divide (split) the chart to differentiate the historical information of forecast information.
And get a chart like this:
Is there a way to do that?
You can get a vertical line like that by adding an 'annotation' role column to your domain (x-axis) column in the DataTable, and setting the annotation.<annotation column index>.style option to 'line'. Here's an example:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
['Jun', null, 3],
['Jul', null, 5],
['Aug', null, 4],
['Sep', null, 4],
['Oct', null, 8],
['Nov', 'this month', 6],
['Dec', null, 2]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
annotation: {
1: {
style: 'line'
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
see it working here: http://jsfiddle.net/asgallant/pkwqt/
I have a google scatter, and I would like when mouse is over on circle then open a info window containing a custom string.
for example in tutorial https://developers.google.com/chart/interactive/docs/events#Event_Listeners
when click on circle open a info window with a custom string.
Thanks
EDIT:
I try this code:
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', 'SVD1');
dataTable.addColumn('number', 'SVD2');
dataTable.addColumn('number', 'SVD3');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
[2010, 600, null ,'test1'],
[2011, 1500, null , 'test2'],
[2012, null, 800, 'test3'],
[2013, null, 1000, 'test4']
]);
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
Using tooltip the Strings "test 3" and "test4" appear right. The string "test1" and " "test2" disappear. Why???
I found it!!! Î’elow give a solution to the problem.
Sample Code:
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', 'SVD1');
dataTable.addColumn('number', 'SVD2');
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addColumn('number', 'SVD3');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
[2010, 600, 'test1' ,null, null],
[2011, 1500, 'test2' ,null, null ],
[2012, null, null, 800, 'test3'],
[2013, null, null, 1000, 'test4']
]);
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}