My values in the vertical axis are not visible as shown in the image:
.
What could be the problem with my code?
function drawVisualization() {
google.visualization.drawChart({
containerId: 'visualization',
dataSourceUrl: 'http://www.google.com/fusiontables/gvizdata?tq=',
query: 'SELECT Environment, GirlPupils, BoyPupils, FemaleTeachers, MaleTeachers FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s',
chartType: 'BarChart',
options: {
title: 'Number of Students and Teachers',
vAxis: {
title: 'Environment'
},
hAxis: {
title: 'Number'
}
}
});
}
As I can tell from the image the vertical values is actually shown! The issues is
You have a very little height set for the chart-container, trying to show a lot of bars
The fontSize for vAxis is to the opposit relatively large
There can often be problems with lack of space to the left
Change the height of the <div>-container to something that actually can hold the many bars :
<div id="visualization" style="height:1000px;"></div>
Change fontSize for the vAxis and add some space to the left by chartArea
options: {
title: 'Number of Students and Teachers',
vAxis: {
title: 'Environment',
textStyle : { fontSize : 7 }
},
hAxis: {
title: 'Number'
},
chartArea: {left: "150",top: 0 }
}
Edit :
In order to only select columns where Environment is Rural, Urban or Peri Urban, change your query to
SELECT Environment, GirlPupils, BoyPupils, FemaleTeachers, MaleTeachers
FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s
WHERE Environment IN ('Rural', 'Urban','Peri Urban')
note that normal SQL syntax OR is not supported by FusionTables, you must use IN. Also strings must be in single quotes ''.
Related
I am developing a layered column chart using ComboChart on Angular google charts. Although I've separated two series of bar charts in two different axis, being able to find a bar in front of the other, like needed, I can't change the width of one of the series only. I want a result like the amCharts Layered Column Chart:
Layered Column Chart example
Right now, the chart looks like:
Current chart - Angular google charts
Also, if there is a way to share the same y axis while keeping one bar in front of the other, instead of staking then, it would be great.
The code I've been using for options of the angular google chart:
this.options =
{
colors: ['#1E90FF', '#f39800'],
hAxis: {
title: 'haxisTitle',
type: 'category'
},
vAxis:{
title: 'Value',
minValue: 0,
format: this.numberFormat
},
seriesType: 'bars',
bar: {1: {groupWidth: "30"}},
series:
{
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1,
}
},
vAxes: {
0: {
title: 'Altered Value',
label:'Altered Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue, // Sets the maximun value of altered or real value to the window size (both axis)
},
format: this.numberFormat,
type: 'bars'
},
1: {
title: 'Real Value',
label:'Real Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue,
},
format: this.numberFormat,
type: 'bars'
}
},
aggregationTarget: 'auto',
stackSeries: true,
isStacked : true,
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
maxZoomIn: 4.0
}
};
}
The chart shows the data correctly, the only problem is the layout.
Some reference that might help:
Google Developers - Visualization: Combo Chart
amCharts Layered Column chart
Overlapped bars - Stack overflow quote - Here the result was a stacked bar chart (something I don't want)
I have a problem with Google Charts.
I have a bar chart with some big and small values. The bars also have a value label. If I hover the bars, the tooltip will be shown. But when I hover the value label (inside or outside the bar), no tooltip is shown. So i have no possibility to show the tooltip on very small bars.
Simplified Example:
https://jsfiddle.net/2d0kbLnm/40/
Do you know how to tell Google Charts to show the tooltip on hover the value labels?.
A focusTarget: 'category' enforces further informations on the tooltip, that i don't want. The x-Axis value (with a blue dot) and the y-Axis title are inserted in the tooltip. Can I prevent this? I want only show my html value. Furthermore the tooltip also hides on hovering the value label.
Thank you for any help and ideas.
heiwil
there is another column role that will show additional text on hover of the annotation,
it is --> role: 'annotationText'
it is not necessarily a tooltip, and will not display html,
but does appear when the annotation is hovered.
this is the only "standard" option available.
see following working snippet,
the 'annotationText' is added in a data view calculated column,
so the content may be built dynamically.
hover the annotation to see the result.
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Element', 'Saldo', {role: 'style', type: 'string'}, {role: 'annotation', type: 'string'}],
['Element 1', 60000.15, '#3949AB', '60,000.15 CHF'],
['Element 2', 14.87, '#3D5AFE', '14.87 EUR'],
['Element 3', -13451.31, '#cc0000', '-13,451.31 EUR'],
['Element 4', 0, '#42A5F5', '0 CHF']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, {
calc: function (dt, row) {
return dt.getValue(row, 0) + ' - ' + dt.getColumnLabel(1) + ': ' + dt.getFormattedValue(row, 1);
},
role: 'annotationText',
type: 'string'
}]);
var options = {
legend: {
position: 'none'
},
hAxis: {
logscale: true
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: 'none'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(view, options); // <-- use view to draw chart
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
i am using highchart to create a sample chart which will have two panes and also with two axes(one primary and other secondary axis).
For reference i found this high chart candlestick and pane
Here is a fiddle .For setting up multiple axes i have done something like this...
//yAxis: chartYAxis,
yAxis: [{
title: {
text: 'Temp'
},
min:40,
lineWidth: 2,
opposite: true
}
, {
title: {
text: 'Status'
},
top: '65%',
height: '35%',
offset: 1,
lineWidth: 2
}],
Here is the output that i want to have with primary axis haiving KW and secondary axis with temperature.
If anyone knows how to get around this,please help! Any idea and pointer will be much appreciated!!
I am using google bar chart and using following code.
var options = {
backgroundColor:'',
title: '',
chartArea: {width: '100%'},
bar: { groupWidth:15},
colors: ['#fff', '#fff'],
hAxis: {
title: '',
minValue: 0,
gridlines: {
color: '#fff'
},
baselineColor:'#fff',
textStyle:{
color:"#000"
}
},
legend: { position: 'none' },
vAxis: {
title: '',
textPosition:'none'
}
};
I am getting following output
First case:when number of bars are more.
Second case: when number of bars are less.
Third case: when there is only one bar, it is showing in center. I want to start bar from bottom means near x-axis. Following you can see screen shot.
I want to show constant space between 2 bars irrespective of number of bars.
any advice or suggestion in this case?
I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});