I am new to Google Line Chart. The chart which I try to draw is drawn properly but I want to animate it. I tried using animation section in code but seems it does not work at all on single line chart.
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Test');
data.addColumn('number', 'Test 2');
data.addRows([
[1, 37.8],
[2, 30.9],
[3, 25.4],
[4, 11.7]
]);
var options = {
animation: {
duration: 1000,
startup: true, //This is the new option
easing: 'out',
},
aggregationTarget: 'category',
chart: {
title: 'Test 1',
subtitle: 'Test 2'
},
width: '98%',
height: 300,
axes: {
x: {
0: {
side: 'top'
}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>
animation isn't supported on Material charts
in fact, there are several options Material charts do not support
see --> Tracking Issue for Material Chart Feature Parity #2143
Material charts --> google.charts.Line -- packages: ['line']
Core charts --> google.visualization.LineChart -- packages: ['corechart']
using a Core chart with the following option will display similar to Material
theme: 'material'
Related
I did not find any solution on how to achieve slantedText option in bar chart.
Is google removed the slantedText property from its latest version?
Here is my code:-
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart','bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['City', '2010 Population',],
['New York City, NY', 8175000],
['Los Angeles, CA', 3792000],
['Chicago, IL', 2695000],
['Houston, TX', 2099000],
['Philadelphia, PA', 1526000]
]);
var options = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
legend: { position: "bottom" },
hAxis: {
title: 'Total Population',
minValue: 0,
slantedText: true,
slantedTextAngle: 60
},
vAxis: {
title: 'City'
}
}
var chart = new google.charts.Bar(document.getElementById('BarChart'));
chart.draw(data, options);
}
</script>
google.charts.Bar is considered a material chart,
there are several options that are not supported by material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
see Tracking Issue for Material Chart Feature Parity
instead, you would need to use a classic chart.
google.visualization.ColumnChart
or
google.visualization.BarChart
I am using Google Column charts.
As of now I got my chart as shown in the below image.
Here I have two columns in each category. I want to differentiate them by their type(Type-1, Type-2) like shown in the below image. How can I do this, is there any possibility for this.
you can use a data column role for --> 'annotation'
the 'annotation' column should follow each value it represents in the data table
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category Type');
data.addColumn('number', 'Type-1');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'Type-2');
data.addColumn({role: 'annotation', type: 'string'});
data.addRows([
['Pri #1:', 4000, 'Type-1', 5000, 'Type-2'],
['Pri #2:', 6000, 'Type-1', 8000, 'Type-2'],
['Pri #3:', 1500, 'Type-1', 3000, 'Type-2'],
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, {
annotations: {
alwaysOutside: true
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
How is it possible to format the number values on a google bar chart with dual x-Axes?
The top axes with the label support should have at least four decimal places, like the value shown in the tooltip.
What I have tried is this approach, but it doesn't seem to work.
My code:
data.addColumn('string', 'RuleName');
data.addColumn('number', 'Lift');
data.addColumn('number', 'Support');
for (var i = 0; i < chartsdata.length; i++) {
data.addRow([rule, Lift,Support)]);
}
// format numbers in second column to 5 decimals
var formatter = new google.visualization.NumberFormat({
pattern: '#,##0.00000'
}); // This does work, but only for the value in the tooltip.
formatter.format(data, 2);
// Passing in some options
var chart = new google.charts.Bar(document.getElementById('barChart'));
var options = {
title: "Association Rules by lift and support",
bars: 'horizontal',
series: {
0: { axis: 'Lift', targetAxisIndex: 0, },
1: { axis: 'Support', targetAxisIndex: 1}
},
axes: {
x: {
Lift: { label: 'Lift', format: '0,000' //Doesn't work, }, // Bottom x-axis.
Support: { side: 'top', label: 'Support' } // Top x-axis.
}
}, ..........
What I also tried is this approach from the google doc:
series:{hAxes:{1:{title:'abc', format: '0,0000'}}
Any help would be greatly appreciated!
there are several options that are not supported by Material charts
see --> Tracking Issue for Material Chart Feature Parity
although format is not listed, there are several options not supported for --> {hAxis,vAxis,hAxes.*,vAxes.*}
so that could be the problem
note: the above options should stand alone and not be included in the series option,
as seen in the question (What I also tried...)
you can change both x-axis formats by using hAxis.format
but don't think you'll be able to change just one
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'RuleName');
data.addColumn('number', 'Lift');
data.addColumn('number', 'Support');
for (var i = 0; i < 10; i++) {
data.addRow([i.toString(), i+2, i+3]);
}
var formatter = new google.visualization.NumberFormat({
pattern: '#,##0.00000'
});
formatter.format(data, 2);
var chart = new google.charts.Bar(document.getElementById('barChart'));
var options = {
chart: {
title: 'Association Rules by lift and support'
},
bars: 'horizontal',
series: {
0: {axis: 'Lift'},
1: {axis: 'Support'}
},
axes: {
x: {
Lift: {label: 'Lift'},
Support: {side: 'top', label: 'Support'}
}
},
hAxis: {
format: '#,##0.00000'
},
height: 320
};
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barChart"></div>
I'm using google bar chart to represent set of issues into different categories like open, closed, in progress etc., I'm getting the count of different categories and storing it to a hashmap, and then I retrieve the data from hashmap and displaying it in the bar chart using the below code.
Edited below is the code that I'm using. I've included it in a jsp page
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawBarChart);
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
['Status', 'No. of Issues', { role: 'style' }],
<%for(String SC:StatusCount.keySet()){
%>
['<%=SC.toString()%>',<%=StatusCount.get(SC.toString())%>, 'blue'],
<%
}
%>
<%for(String EC:EscCount.keySet()){
%>
['<%=EC.toString()%>',<%=EscCount.get(EC.toString())%>, 'red' ],
<%
}
%>
]);
var options = {
chart: {
title: 'Performance',
},
is3D: true,
titleTextStyle: {
fontName: 'Arial',
fontSize: 20
},
'width':550,
'height':400,
backgroundColor: 'transparent',
bars: 'vertical' // Required for Material Bar Charts.
};
var barchart = new google.charts.Bar(document.getElementById('barchart_material'));
barchart.draw(data, google.charts.Bar.convertOptions(options));
}
StatusCount is used for the status count and EscCount for the no of escalations. I wanted to change the color of the Escalations bar. But when I specify the color, it's not getting changed. Used the same thing that Google itself has given to change the color.
Kindly help. Thanks in advance
Column Roles, including 'style' are only supported by Classic charts...
Classic --> google.visualization.BarChart & ColumnChart --> packages: ['corechart']
Material --> google.charts.Bar --> packages: ['bar']
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Status', 'No. of Issues', { role: 'style' }],
['Closed',14, 'blue'],
['On Hold',8, 'blue'],
['In Progress',20, 'blue'],
['Open',24, 'blue'],
['Escalations',4, 'red'],
]);
var chart = new google.visualization.BarChart(
document.getElementById('chart_div')
);
chart.draw(data, {
theme: 'material'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I've created a google chart and the data is pulled from a database and structured to meet the requirements of the chart, however, for some reason, whenever I try change the options for the chart it just wont work.
I need to move the legend to below the chart and make the point size on the chart 30 pixels.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility ', 11.5, 10, 11.5]]);
var options =
{
legend: { position: 'bottom' },
chart: {title: 'Student Results'},
legend:{position: 'bottom', textStyle: {color: 'black', fontSize: 16}},
pointSize:30,
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
<div id="line_chart" style='width:calc(100% - 80px); height:400px; margin:auto;'></div>
Any suggestions on why the legend wont move or point size wont change, the chart data can have many aspects (x axis value), I need to point-size to change so that it wont look blank with just a aspect (x axis value)
there are several options that simply don't work in Material charts
and it appears Line requires two data points per series before drawing anything
I would recommend using 'corechart' instead
there is an option for theme: 'material' to get the base look and feel close to a Material chart
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility 1', 11.5, 10, 11.5]]);
var options = {
chartArea: {
width: '90%'
},
height: 600,
legend: {
position: 'bottom',
textStyle: {
color: 'black',
fontSize: 16
}
},
pointSize: 30,
theme: 'material',
title: 'Student Results',
vAxis: {
viewWindow: {
min: 0,
max: 15
}
},
width: '100%'
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['line', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div"></div>
<div>Material Chart</div>
<div id="line_chart"></div>