take for example I have the below chart which includes a trendline depicting the trend for an employee's progress over the course of a week.employee progress chart
the values for each day are brought in from a database as an INT datatype and the trendline acts accordingly. However, if an employees progress value is 0, how do I stop the trendline from acknowledging this and trending only to values above 0?
trendlines will ignore null values,
use null in place of zero.
see following working snippets...
with zero 0
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataTable = google.visualization.arrayToDataTable([
['Day', 'Amount'],
[1, 100],
[2, 4000],
[3, 250],
[4, 2400],
[5, 0]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, {
trendlines: {0: {}}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
with null null
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataTable = google.visualization.arrayToDataTable([
['Day', 'Amount'],
[1, 100],
[2, 4000],
[3, 250],
[4, 2400],
[5, null]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, {
trendlines: {0: {}}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I'd like to create column chart with X axis numeric values 1, 2, 3, 4 ... N and Y value of course different on every column.
I can't find out how to change labels on X line under bars, to string. For example - 1 could be marked as Elephant, 2 as Horse etc.
I could use string as X values, but then there is no way to get zoom working. At least, I didn't find any way to get it working.
simple example with strings, I'd like to achieve same appearance as this one, but with numeric values on X axis.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'animal');
data.addColumn('number', 'count');
data.addRows([
['Elephant', 5],
['Horse', 2],
['Dog', 7],
['Cat', 4],
]);
var options = {
explorer: {
axis: 'horizontal',
keepInBounds: true,
},
title: 'Testing',
hAxis: {
title: 'Animal',
},
vAxis: {
title: 'number'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
Chart should look like this, but with working zoom:
Chart example
to use string labels on a continuous axis,
you will need to provide your own ticks
using object notation, provide the value (v:) and formatted value (f:)
{v: 1, f: 'Elephant'}
see following working snippet...
google.charts.load('current', {
callback: drawBasic,
packages: ['corechart']
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'animal');
data.addColumn('number', 'count');
data.addRows([
[1, 5],
[2, 2],
[3, 7],
[4, 4]
]);
var options = {
explorer: {
axis: 'horizontal'
},
title: 'Testing',
hAxis: {
ticks: [
{v: 1, f: 'Elephant'},
{v: 2, f: 'Horse'},
{v: 3, f: 'Dog'},
{v: 4, f: 'Cat'}
],
title: 'Animal',
},
vAxis: {
title: 'number'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have two series/columns fileSize and output Target.
Is it possible two display only output Target in the legend and hide fileSize?
you can use the visibleInLegend configuration option
just assign to the series number
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['File', 'fileSize', 'output Target'],
['a', 10, 15],
['b', 12, 18],
['c', 14, 21],
['d', 16, 24]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, {
legend: {
position: 'bottom'
},
series: {
0: {
visibleInLegend: false
}
}
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to use the chartArea.backgroundColor option of Google Charts, but it doesn't seem to work, although this option is clearly described in the doc : https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Configuration_Options
JSfiddle
HTML :
<div id="piechart1" style="width: 900px; height: 500px;"></div>
JS :
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
chartArea: {'backgroundColor':'red'}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
Any clue ?
Thanks a lot.
Referring to the official documentation
https://developers.google.com/chart/interactive/docs/gallery/piechart#exploding-a-slice
Use the slices attribute to change color of individual slice.
updated code from fiddle
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
slices: {
0: {color:'red' },
1: {color:'blue' },
2: {color:'green'},
3: {color:'black'},
4: {color:'teal'}
},
chartArea: {'backgroundColor':'red'}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
Try this:
chart.draw(data, google.charts.PieChart.convertOptions(options));
i am new to google charts i want to make a graph for cricket rate rate and wicket that should look something like this
i have searched google and found out that i might do it with the help of annotations and i have written this code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Overs');
data.addColumn('number', 'Run-rate');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn({type: 'string', role:'annotationText'});
data.addRows([
[1, 6, null, null],
[2, 6, null, null],
[10, 2, null, null],
[20, 3.2, null, 'Shoaib Malik'],
[21, 3, '2', 'Shahid Afridi'],
[30, 4, null, null],
[40, 5, 'B', 'This is Point B'],
[50, 6, null, null],
]);
var options = {
title: 'Run Rate',
pointSize:0,
hAxis: {
gridlines: {
color: 'transparent'
}
},
};
new google.visualization.LineChart(document.getElementById('chart_div')).
draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
and this is the output of the code:
now the problem is that i want to show circle like the first image instead of text 2,B
i cant do it using pointSize because i want circle where wicket falls, not where the over ends...
can any1 tell me how to do this ? either i can replace text with circle or any other way out
You can't replace the text if you want to use the annotation functionality (as the text is what is generated by the annotations). You could use an overlapping data series to show only certain points. Here's an example that shows an overlapping series (I removed the annotations for simplicity, but you can still use them if you want to):
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Overs');
data.addColumn('number', 'Run-rate');
data.addColumn('boolean', 'Wicket falls');
data.addRows([
[1, 6, false],
[2, 6, false],
[10, 2, true],
[20, 3.2, false],
[21, 3, true],
[30, 4, true],
[40, 5, false],
[50, 6, false]
]);
// create a DataView that duplicates points on the "Run Rate" series where "Wicket falls" is true
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'number',
label: data.getColumnLabel(2),
calc: function (dt, row) {
// return the value in column 1 when column 2 is true
return (dt.getValue(row, 2)) ? dt.getValue(row, 1) : null;
}
}]);
var options = {
title: 'Run Rate',
pointSize:0,
hAxis: {
gridlines: {
color: 'transparent'
}
},
series: {
0: {
// put any options pertaining to series 0 ("Run-rate") here
},
1: {
// put any options pertaining to series 1 ("Wicket Falls") here
pointSize: 6,
lineWidth: 0
}
}
};
new google.visualization.LineChart(document.getElementById('chart_div')).
// use the view instead of the DataTable to draw the chart
draw(view, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});
See working example here: http://jsfiddle.net/asgallant/saTWj/
I am using the Following show the Column Chart for my records, i want to give spaces between the bars that are generating, please help.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', '11-02-2013', '11-02-2013','11-02-2013','11-02-2013'],
['Weeks', 10,20,30,5],
]);
var options = {
title: 'Weekly Average Weight Loss Performance Chart For All Users',
is3D: true,
//isStacked: true,
isHtml: false,
// colors: ['d2ac2c', 'ff0000', '029748'],
bar: { groupWidth: '10%' },
legend:{position: 'bottom'},
//chbh:'0,10,0',
//hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
var options = {
bar: { groupWidth: '100%' },
The usual format for a column chart is that each series has its own column, grouped by rows. Since you have all 4 data points in the same row, you will end up having them all clumped together in the same group. If you change your data, you will get separation as each will be in a separate group:
var data = google.visualization.arrayToDataTable([
['Date', 'Data'],
['11-02-2013', 10],
['11-02-2013', 20],
['11-02-2013', 30],
['11-02-2013', 5]
]);
If you want to show multiple people, grouped by weeks, then you would do something like this:
var data = google.visualization.arrayToDataTable([
['Date', 'Alan', 'Beatrice', 'Charlie', 'Diana'],
['11-02-2013', 10, 5, 15, 20],
['11-02-2013', 20, 1, 2, 3],
['11-02-2013', 30, 25, 20, 15],
['11-02-2013', 5, 7, 9, 11]
]);
This will group your data by week (so all 4 people would be shown in the same week as a single group) with gaps between the weeks (between each 'group' of data).