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>
Related
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'
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 trying to display Google line chart with some values. My minimum value is 0 and my maximum value is 100. My graph has 2 lines, not only a single line.
I use curveType: 'function' for the graph options, and for some reason in the chart - the minimum is being set to -100 and the maximum value is being set to +200. Please run the script and look at the number to the left of the graph - these are the values I'm asking about and wishes to control them.
What am I doing wrong?
Here is my code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="LineChart"></div>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn('number', 'Value2');
data.addRows([
['5/21/2019',50,50],
['5/21/2019',100,0],
['5/21/2019',89,11],
['5/21/2019',90,10],
['5/21/2019',90,10],
['5/22/2019',90,10],
['5/22/2019',76,24],
['5/23/2019',76,24],
['5/23/2019',76,24]
]);
var Lineoptions = {
title: 'Overall success',
lineWidth: 4,
colors: ['#c9e3f4','#ea4c4c'],
curveType: 'function',
legend:{position:'none'},
fontSize:23,
hAxis : {
textStyle : {
fontSize: 16
}
},
vAxis : {
textStyle : {
fontSize: 16
},
minValue:0,
maxValue:100
},
annotations: {
textStyle: {
fontSize: 25,
bold: true,
italic: false,
color: '#000000',
opacity: 1
},
alwaysOutside: true
}
};
var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
Linechart.draw(data, Lineoptions);
google.visualization.events.addListener(chart7, 'ready', afterDraw);
}
</script>
</html>
not sure why minValue and maxValue do not work.
however, you can use viewWindow instead...
viewWindow: {
min:0,
max:100
}
see following working snippet...
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn('number', 'Value2');
data.addRows([
['5/21/2019',50,50],
['5/21/2019',100,0],
['5/21/2019',89,11],
['5/21/2019',90,10],
['5/21/2019',90,10],
['5/22/2019',90,10],
['5/22/2019',76,24],
['5/23/2019',76,24],
['5/23/2019',76,24]
]);
var Lineoptions = {
title: 'Overall success',
lineWidth: 4,
colors: ['#c9e3f4','#ea4c4c'],
curveType: 'function',
legend:{position:'none'},
fontSize:23,
hAxis : {
textStyle : {
fontSize: 16
}
},
vAxis : {
textStyle : {
fontSize: 16
},
viewWindow: {
min:0,
max:100
}
},
annotations: {
textStyle: {
fontSize: 25,
bold: true,
italic: false,
color: '#000000',
opacity: 1
},
alwaysOutside: true
}
};
var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
Linechart.draw(data, Lineoptions);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="LineChart"></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>
I have written a simple bar chart with Google Charts, one series, it works fine, all bars are blue:
Now I would like to manually set the colour of the every single bar (actually a green-to-red transition proportional to the value, to make it easier to understand what is good/bad).
How can I do this?
I have tried setting colors in options as described here but for some reason it does not work in my code below.
chco seems to be what I need, but it is an URL parameter... how to elegantly integrate it in JavaScript code?
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Score'],
['NemakiWare', 288],
['Nuxeo', 240],
['FileNet', 220],
['SharePoint', 98]
]);
var options = {
colors: ['green','blue','pink','red'],
legend: 'none',
hAxis: {
textPosition: 'none',
minValue: 0,
gridlines: {
color: 'transparent'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
There are different ways to do this but you can use the style role.
Source:
https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Score', { role: 'style' }],
['NemakiWare', 288, 'green'],
['Nuxeo', 240, 'blue'],
['FileNet', 220, 'pink'],
['SharePoint', 98, 'red']
]);
var options = {
legend: 'none',
hAxis: {
textPosition: 'none',
minValue: 0,
gridlines: {
color: 'transparent'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.clearChart();
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>