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>
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'm trying to create a ComboChart including three columns types string, timeofday, number but I Facing an error "All series on a given axis must be of the same data type" even the column types is there, how to fix that ?
please check the link: https://jsfiddle.net/minamagdy666/2jfn1uec/3/
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time of Day');
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
['eee',[8, 30, 45], 5],
['eee',[9, 0, 0], 10],
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450,
series: {0:{type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
first, need to define the seriesType for the chart.
'line', 'area', 'bars', 'candlesticks', or 'steppedArea'
seriesType: 'bars'
next, if each series is not the same type,
(in this case one is number, the other timeofday)
then each series must be on its own y-axis...
1: {targetAxisIndex: 1}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time of Day');
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
['eee',[8, 30, 45], 5],
['eee',[9, 0, 0], 10],
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450,
seriesType: 'bars',
series: {
0:{
type: 'line'
},
1: {
targetAxisIndex: 1
}
}
};
var chart = new google.visualization.ComboChart(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 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 have been working on Google Line charts having a date axis. I have noticed that the axis labels ticks are determined by the number of gridlines and are not same to the data that I am passing. Could someone please tell me how I could force the axis labels to be in sync with the data I am passing.
Please find the link for the fiddle: https://jsfiddle.net/FarhanI/5ga6xu44/
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addRows([
[new Date(2015, 0, 1), 5],
[new Date(2015, 0, 7), 3],[new Date(2015, 0, 14), 3], [new Date(2015, 0, 21), 2],[new Date(2015, 0, 28), 8],
]);
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
width: 900,
height: 500,
hAxis: {
format: 'M/d/yy',
gridlines: {count: 9}
},
vAxis: {
gridlines: {color: 'none'},
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
Also I am trying to have the gridline appear as the y axis since I was unable to get the Y axis with line charts. I tried specifying gridline as 1, but I was able to get only 1 gridline that too in the middle of the X axis.
Could someone please let me know if I could get Y axis with the line chart.
Appreciate the assistance,
Farhan.
you can provide custom hAxis.ticks
to sync with the data, build an array with the dates from each row
// load custom ticks
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push(data.getValue(i, 0));
}
then use the array in the config options
hAxis: {
format: 'M/d/yy',
ticks: ticks
}
note: not following what is needed for the y-axis, could you please clarify...
--> get Y axis with the line chart
if you just simply want to see gridlines, remove the following from config options...
vAxis: {
gridlines: {color: 'none'}
}
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addRows([
[new Date(2015, 0, 1), 5],
[new Date(2015, 0, 7), 3],
[new Date(2015, 0, 14), 3],
[new Date(2015, 0, 21), 2],
[new Date(2015, 0, 28), 8]
]);
// load custom ticks
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push(data.getValue(i, 0));
}
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
width: 900,
height: 500,
hAxis: {
format: 'M/d/yy',
ticks: ticks
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" id="change" value="Change" />
<div id="chart_div"></div>
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>