I'm trying to change the font size for the main title and axis titles but I cannot with this code:
var options = {
title: 'Ratio de supervivencia de aerolíneas europeas',
chartArea:{
top: 20,
bottom: 50,
height: '75%'
},
width: 800,
height: 600,
hAxis: {title: 'Nº total de aerolíneas históricas', titleFontSize: 24},
vAxis: {title: 'Ratio de supervivencia', format: 'percent', maxValue: 0.7, titleFontSize: 24},
bubble: {textStyle: {fontSize: 11}}
};
Could someone help me?
Thanks in advance & regards,
Luis
there is no option for --> titleFontSize
instead, use the option for --> titleTextStyle
e.g.
hAxis: {
titleTextStyle: {
fontSize: 24
}
}
see configuration options for more...
Related
I am playing around with Google Chart to look a certain way. In this situation I have a combo chart a line and column chart.
I have stumble upon a view "layout" problems
How do replace the show2r legend with just some custom text? At
the moment says: y = 2.032E-4 * x - 8.203 r^2 = 7.005E-3 and I want
to replace it with "Trendline (Lineair)
2/ Also the legend gets a
1/2 and Arrows left and right. I like the legend to always be
visible?
3/ The x axis doesn't display all dates, how can I set that
as a default?
4/ How do I add vertical line in say month June??
Regards
to change the trendline label in the legend, use option --> labelInLegend
there are no standard options to change the value in the tooltip,
but it can be changed manually using event --> onmouseover
when the legend's position is top,
you can use option --> legend.maxLines
to increase the number of lines available and prevent the arrows...
to ensure all dates are shown on the x-axis,
allow enough room by using option --> chartArea.bottom
see following working snippet for examples of each...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1'],
[new Date(2017, 11, 28), 175, 10],
[new Date(2017, 11, 29), 159, 20],
[new Date(2017, 11, 30), 126, 35],
[new Date(2017, 11, 31), 129, 40],
[new Date(2018, 0, 1), 108, 60],
[new Date(2018, 0, 2), 92, 70]
]);
var options = {
chartArea: {
bottom: 72
},
hAxis: {
slantedText: true
},
height: 400,
legend: {
maxLines: 2,
position: 'top'
},
tooltip: {
isHtml: true
},
trendlines: {
0: {
labelInLegend: '0-Linear Trend',
showR2: true,
type: 'linear',
visibleInLegend: true
},
1: {
labelInLegend: '1-Linear Trend',
showR2: true,
type: 'linear',
visibleInLegend: true
}
},
width: 400
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'onmouseover', function (props) {
var tooltipLabels = container.getElementsByTagName('span');
for (var i = 0; i < tooltipLabels.length; i++) {
if (tooltipLabels[i].innerHTML.indexOf('y =') > -1) {
tooltipLabels[i].innerHTML = 'CUSTOM TEXT:';
}
}
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am using column google chart. I need to change the direction of column key which is highlighted into red circle in image below.
So what I want to achieve
Is there any property so I can change the direction like top, bottom or left side so it displayed properly (Revenue) as of now it display (R...).
If direction cannot be changed, then how can I remove this from charts
What you need is the property called chartArea
You can control how much area from top, right, bottom or left to be shown.
Here chart area is area of only the chart, excluding label, legend or any other value other than the chart itself. You can reduce the chart area so that label/legend can come completely.
chartArea: {
height: '500',
left: 0,
right: 0,
top: 30,
bottom: 0
},
Regarding the legend positioning, you can change place of legend using
legend: {
position: 'left'
}
To remove legends altogether use
legend:{position: 'none'}
See below snippet or this JSFIDDLE to see how it works.
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Submitter', 'Count'],
['Service', 168],
['NAME 1', 42],
['NAME 2', 36],
['NAME 3', 35],
['NAME 4', 34],
['NAME 5', 30],
['NAME 6', 24],
['NAME 7', 21],
['NAME 8', 18]
]);
var options = {
pieSliceText: 'percentage',
legend: {
position: 'none'
},
height: '500',
chartArea: {
height: '500',
left: 0,
right: 0,
top: 30,
bottom: 0
},
};
var chart = new google.visualization.PieChart(document.getElementById('chart6_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart6_div"></div>
Am new to PHP coding & have a few google charts working. All of these charts I've generated so far are based on (date,number of event occurrences) type of chart. I'm trying to plot a google chart whose data is the output of SQL query.
The output of SQL query looks as below
|SERIES|DATE_1|DATE_2|DATE_3|
|a|2|3|
|b|4|6|
|c|7|8|
Both SERIES & DATE_1 can vary. That is to say, based on various conditions in the SQL query, the number of DATE_ can be vary & so can the SERIES.
I would then have to pass this output to the google chart plot code.
Here is what i've tried coding so far
$link = mysql_connect("localhost", "user", "pass");
$dbcheck = mysql_select_db("database");
if ($dbcheck) {
$chart_array_1[] = "['MY_DATE','MY_NAME','#NUM_OCCURENCES']";
$result = mysql_query($sql);
if (mysql_num_rows($result) > 0) {
while ($row = mysql_fetch_assoc($result)) {
$my_date=$row["MY_DATE"];
$my_ins=$row["MY_NAME"];
$my_count=$row["MY_COUNT"];
$chart_array_1[]="['".$my_date."','".$my_ins."',".$my_count."]";
}
}
}
mysqli_close($link);
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data_1 = google.visualization.arrayToDataTable([<?php echo (implode(",", $chart_array_1)); ?>])
var options = {
bar: {groupWidth: "6%"},
trendlines: {
1: {
type: 'linear',
color: 'green',
lineWidth: 3,
opacity: 0.3,
showR2: true,
visibleInLegend: true
}
},
chartArea: {
left: 70,
top: 61,
width:'95%',
height:'70%'
},
curveType: 'function',
//width: 1600,
height: 400,
pointSize: 4,
lineWidth: 2,
visibleInLegend: false,
vAxis: {
//title: "GC#",
logScale: true,
titleTextStyle: {
color: 'black'
}
},
hAxis: {
title: "TIMELINE",
titleTextStyle: {
bold: false,
color: 'black'
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: 'blue'
}
}
};
var chart_1 = new google.visualization.LineChart(document.getElementById('plot1'));
chart_1.draw(data_1, options);
}
</script>
I'm unable to plot the graph. I get the error "Data column(s) for axis #0 cannot be of type string×". Could someone please help me here.
I'd like to see a,b,c etc as separate series each while the date goes on to the X-Axis. Please note am after generating data dynamically using SQL query & not a static array which most examples demonstrate. Could someone please help?
Managed to implement thing a different way. Hence this question can be ignored.
can you please help me hide the tooltip (equation) on the trendline on the google chart on this page ?
Thanks
Here are the chart options I am using :
var options = {
title: 'Weight of pro surfer vs. Volume of his pro model',
hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55
vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40}, //20
legend: 'none',
colors: ['#000000'],
series: {
1: { color: '#06b4c8' },
2: { color: '#575e6a' }
},
legend: {position: 'top right', textStyle: {fontSize: 8}},
chartArea: {width: '60%'},
//tooltip:{trigger:'none'}, //it hides all tooltips on the whole graph
trendlines: { 0: {//type: 'exponential',
visibleInLegend: true,
color: 'grey',
lineWidth: 2,
opacity: 0.2,
tooltip:{trigger:'none'}, //does nothing
labelInLegend: 'Linear trendline\n(Performance)'
}
} // Draw a trendline for data series 0.
};
If I add tooltip:{trigger:'none'}, before trendlines it hides the tooltips of the whole graph.
It has been implemented but not documented yet:
trendlines: {0: {tooltip: false}}
Only solution I was able to make is replacing the text of the tooltips from trendline. This example makes use of jquery, so if you are able to use jquery you can use:
google.visualization.events.addListener(chart, 'onmouseover', function(e){
$('svg *:contains("* x")').each(function(){
$(this).text('')
})
})
If not, it should be possible to replicate with pure js, but that´s the main idea: find the tooltips that have the formula attached, and replace the text with nothing
Here is a working example: http://jsfiddle.net/juvian/aapdjbpt/
I'm using ExtJS3 and i want to put this chart into a panel with a dynamic store
http://dev.sencha.com/deploy/ext-3.4.0/examples/chart/pie-chart.html
I tried to include this chart into my panel code but it didn't work.
Does anybody has a solution or an example for a chart included into a panel in ExtJS3
Thank you
I used your example to generate the chart using a dynamic store:
Ext.chart.Chart.CHART_URL = 'http://dev.sencha.com/deploy/ext-3.4.0/resources/charts.swf';
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
url: "sample_data.php",
root: 'results',
fields: [
{name: 'season'},
{name: 'total'}
]
});
new Ext.Panel({
width: 400,
height: 400,
title: 'Pie Chart with Legend - Favorite Season',
renderTo: 'container',
items: {
store: store,
xtype: 'piechart',
dataField: 'total',
categoryField: 'season',
//extra styles get applied to the chart defaults
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
}
}
});
});
where http://dev.sencha.com/deploy/ext-3.4.0/resources/charts.swf is the target where you can find the chart and sample_data.php returns the following json:
{"results":[
{"total":"150","season":"Summer"},
{"total":"245","season":"Fall"},
{"total":"117","season":"Winter"},
{"total":"184","season":"spring"}
]}
Note: This should normally be set to a local resource.
Hope this helps.