I am using Google Line Charts(Material) and want to specify the Y-Axis and X-Axis with fix intervals(increment of 1). Referring to the diagram, I want my Y-Axis values to be 1,2,3. I am unable to figure out what are the options to be set for the chart. Appreciate any help on this - Thanks
I think Material LineCharts don't yet support ticks.
But you can try insert in options - vAxis and try with changing value max:
var options = {
vAxis: {
viewWindow: {
max: 5
},
...
and call convertOptions:
chart.draw(data, google.charts.Line.convertOptions(options));
Like in this example on JSFiddle.
First of all, the Material Charts are still in beta and the material charts don't yet support many of the options supported by the
corecharts.
Regarding explicit setting ticks option, looks like it is not supported yet. If you want the material style (at least the fonts and colors) with the corecharts, you can add this:
option: { theme: 'material' }
Example
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addRows([
[1, 7.8],
[2, 3.9],
[3, 2.4],
[4, 1.7],
[5, 1.9],
[6, 8.8],
[7, 7.6],
[8, 2.3],
[9, 6.9],
[10, 2.8],
[11, 5.3],
[12, 6.6],
[13, 4.8],
[14, 4.2]
]);
var options = {
title: 'Box Office Earnings in First Two Weeks of Opening',
width: 900,
height: 500,
vAxis: {
viewWindow: {
min: 0,
max: 10
},
ticks: [0,1,2,3,4,5,6,7,8,9,10]
},
hAxis: {
viewWindow: {
min: 1,
max: 14
},
ticks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
},
theme: 'material'
};
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="linechart_material"></div>
Related
I'm creating a SteppedArea chart in Google Visualization to display queue length at various times of the day. My problem is that the steps in the chart don't align with the associated times. They are always one data point out. In the example below, my dataTable has 9:00 = 0, 12:00 = 3 and 14:00 = 6, but the resultant chart offsets the values, so it appears the queue between 9 and 12 is 3 when it really should be 0.
Is this a bug in the Chart rendering or am misunderstanding something ?
I guess my workaround is to offset my initial dataTable.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Queue Length');
// DataTable of Time and Queue length
data.addRows([
[[9,0,0], 0],
[[12,0,0], 3],
[[14,0,0], 6],
]);
var options = {
width: 500,
height: 500,
legend: {position: 'top'},
enableInteractivity: false,
chartArea: {
width: '85%'
},
hAxis: {
viewWindow: {
min: [8,0,0],
max: [15,0,0]
},
gridlines: {
count: -1,
units: {hours: {format: ['h a']}}
},
minorGridlines: {count: 0},
}
};
var chart = new google.visualization.SteppedAreaChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I've shifted the data via a view which seems to give me the right looking chart. See the example which shows before and after. Note I had to add a dummy point at the end of the dataset otherwise the last point gets missed off. I also had to assume the first point would be zero which is acceptable in my case. Unless another idea surfaces I'll go with this.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Queue Length');
data.addRows([
[[9,0,0], 2],
[[11,30,0], 1],
[[12,0,0], 2],
[[13,0,0], 3],
[[14,0,0], 2],
]);
var options = {
width: 500,
height: 500,
legend: {position: 'top'},
enableInteractivity: false,
chartArea: {
width: '85%'
},
hAxis: {
viewWindow: {
min: [8,0,0],
max: [15,0,0]
},
gridlines: {
count: -1,
units: {hours: {format: ['h a']}}
},
minorGridlines: {count: 0},
}
};
var chart = new google.visualization.SteppedAreaChart(
document.getElementById('chart_div'));
chart.draw(data, options);
// need to add dummy point to end.
data.addRows([
[[23,59,0], 0]
]);
// use a view to shift the data so that it returns the value from previous row.
var data2 = new google.visualization.DataView(data);
data2.setColumns([0,
{calc: function (dt, row) {
if (row === 0) {return 0}
else {return dt.getValue(row-1,1)}
},
label: 'Queue Moved',type: 'number'}
]);
var chart2 = new google.visualization.SteppedAreaChart(
document.getElementById('chart2_div'));
chart2.draw(data2, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Has Wrong transition times</h1>
<div id="chart_div"></div>
<h1>Looks Correct : Has transition shifted via view</h1>
<div id="chart2_div"></div>
I am using Google Chart Calendar and I would like to modify the gradient values - min and max. From the official documentation I can do it by modifying colorAxis:
{minValue: 0, maxValue: 5, colors: ['#FF0000', '#00FF00']}
But it supports only type number and I would prefer to indicate it by using string, something like "Lowest value" for minValue and "Highest value" for maxValue.
Any suggestions how can I do it?
in order to calculate the gradient on the 'Activity' column,
options for minValue and maxValue can only be numbers...
but if you just want to change the label that is displayed on the legend,
that can be done manually on the chart's 'ready' event
see following working snippet...
google.charts.load('current', {
packages: ['calendar']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'date', id: 'Date'});
dataTable.addColumn({type: 'number', id: 'Activity'});
dataTable.addRows([
[new Date(2018, 0, 3), 1],
[new Date(2018, 0, 16), 2],
[new Date(2018, 1, 6), 3],
[new Date(2018, 1, 15), 4],
[new Date(2018, 1, 25), 5]
]);
var chart = new google.visualization.Calendar(document.getElementById('chart_div'));
var options = {
colorAxis: {minValue: 0, maxValue: 5, colors: ['#FF0000', '#00FF00']},
width: 1000
};
google.visualization.events.addListener(chart, 'ready', function () {
if ($('#chart_div text').length > 1) {
$($('#chart_div text').get(0)).text('Lowest');
$($('#chart_div text').get(1)).text('Highest');
}
});
chart.draw(dataTable, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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'm trying to create a basic Google Charts line chart to show percentages for 3 values over time. The chart is displaying but I'm struggling to get the vAxis to show 0 - 100%, the top value is just the highest value from my dataset (45%).
This is the code I'm using:
<html>
<head>
<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('date', 'date');
data.addColumn('number', 'tool1');
data.addColumn('number', 'tool2');
data.addColumn('number', 'tool3');
data.addRows([
[new Date(2000, 8, 5), 10, 20, 30],
[new Date(2001, 8, 5), 20, 30, 40],
[new Date(2002, 8, 5), 25, 35, 45],
]);
var options = {
chart: {
title: 'Tool rollout'
},
vAxis: {minValue: 0,
maxValue: 100,
format: "percent"
},
width: 900,
height: 500,
};
var chart = new google.charts.Line(document.getElementById('line'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="line"></div>
</body>
</html>
But this is how it's rendering:
The docs suggest that setting vAxis.maxValue "Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data." but I'm obviously missing something as this doesn't seem to get used.
You´re using material chart Google api, try using:
vAxis: {
format: "#.#%",
viewWindow: {
max:1.0,
min:0.2
}
}
I copied this code from Google Line Chart reference and made some small changes:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Dag');
data.addColumn('number', 'Målvikt');
data.addColumn('number', 'Uppmätt vikt');
data.addRows([
[1, 37.8, 55.0],
[2, null, 69.5],
[3, null, 57],
[4, null, 18.8],
[5, null, 17.6],
[6, null, 13.6],
[7, null, 12.3],
[8, null, 29.2],
[9, null, 42.9],
[10, null, 30.9],
[11, null, 7.9],
[12, null, 8.4],
[13, null, 6.3],
[14, 30.8, 6.2]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)',
interpolateNulls: true
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
My first line is not generated at all.
As you see, I want to just give the first and last value for the curve named "Målvikt" and draw a straight line between them. I found this related question and added interpolateNulls: true but actually it did not solve my problem.
I then changed all nulls except one to some value, but there still was no line between its neighbors. What am I doing wrong?
It seems that google.charts.Line component does not support interpolateNulls option.
Secondly, there is typo in specifying interpolateNulls option.
Since interpolateNulls property does not belong to chart property according to Configuration Options, the line:
var options = {
chart: {
interpolateNulls: true
}
};
should be replaced with:
var options = {
interpolateNulls: true
};
Having said that, i would recommend to utilize google.visualization.LineChart from corechart package instead of google.charts.Line component from line package. In that case interpolateNulls option could applied as demonstrated below:
Working example
google.load('visualization', '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Dag');
data.addColumn('number', 'Målvikt');
data.addColumn('number', 'Uppmätt vikt');
data.addRows([
[1, 37.8, 55.0],
[2, null, 69.5],
[3, null, 57],
[4, null, 18.8],
[5, null, 17.6],
[6, null, 13.6],
[7, null, 12.3],
[8, null, 29.2],
[9, null, 42.9],
[10, null, 30.9],
[11, null, 7.9],
[12, null, 8.4],
[13, null, 6.3],
[14, 30.8, 6.2]
]);
var options = {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)',
interpolateNulls: true,
width: 900,
height: 500
};
//var chart = new google.charts.Line(document.getElementById('linechart_material'));
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="linechart_material" style="width: 640px; height: 480px"></div>