I have made a line chart with week numbers on the horizontal axis. It is meant to display a year and should therefore start at 1 and end at 52. I've tried using hAxis: {maxValue: 52} but it doesn't seem to work. Here are my settings:
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Ugenr.');
data.addColumn('number', 'Anbefalet pris');
data.addColumn('number', 'Nuværende pris');
data.addRows([
[1, 37.8, 41.8],
[2, 6.6, 32.4],
[3, 25.4, 25.7],
[4, 11.7, 10.5],
[5, 11.9, 6.6],
[6, 8.8, 7.7],
[7, 7.6, 9.6],
[8, 12.3, 10.6],
[9, 6.6, 14.8],
[10, 12.8, 11.6],
[11, 5.3, 4.7],
[12, 6.6, 5.2],
[13, 4.8, 3.6],
[14, 4.2, 3.4],
[15, 8.8, 31.8],
[16, 30.9, 6.6],
[17, 25.4, 25.7],
[18, 11.7, 10.5],
[19, 11.9, 10.4],
[20, 6.6, 7.7],
[21, 7.6, 9.6],
[22, 12.3, 10.6],
[23, 16.9, 14.8],
[24, 12.8, 11.6],
[25, 5.3, 4.7],
[26, 6.6, 5.2],
[27, 4.8, 3.6],
[28, 4.2, 6.6],
[29, 37.8, 41.8],
[30, 30.9, 32.4],
[31, 25.4, 25.7],
[32, 11.7, 10.5],
[33, 11.9, 10.4],
[34, 8.8, 7.7],
[35, 7.6, 9.6],
[36, 12.3, 10.6],
[37, 16.9, 14.8],
[38, 12.8, 11.6],
[39, 5.3, 4.7],
[40, 6.6, 5.2],
[41, 6.6, 3.6],
[42, 4.2, 6.6],
[43, 4.2, 3.4],
[44, 37.8, 41.8],
[45, 30.9, 32.4],
[46, 25.4, 25.7],
[47, 11.7, 10.5],
[48, 11.9, 6.6],
[49, 8.8, 7.7],
[50, 7.6, 9.6],
[51, 6.6, 10.6],
[52, 16.9, 14.8]
]);
var options = {
chart: {
title: 'Anbefalede og nuværende ugepriser',
subtitle: 'anbefalede priser = blå, nuværende priser = rød',
hAxis: {maxValue: 52}
},
legend: { position:'none' },
height: 500,
explorer: { actions: ['dragToZoom', 'rightClickToReset'] }
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
$(window).resize(function(){
drawChart();
});
</script>
It seems like many options of the Classic Charts are still not implemented in the Material Charts, including hAxis.minValue.
A possible workaround is to explicitly define your own labels, by using strings instead of numbers for your first column.
For instance (here with a label every 5 weeks):
data.addColumn('string', 'Ugenr.');
// ...
// the original data set is unchanged
var dataset = [
[1, 37.8, 41.8],
[2, 6.6, 32.4],
// ...
];
// convert the 1st column to string
dataset = dataset.map(function(r) {
return [!((r[0] - 1) % 5) ? r[0] + '' : '', r[1], r[2]];
});
data.addRows(dataset);
See a complete demo in this JSFiddle.
However, this version is not entirely satisfying because you won't get the week number when you put your mouse over a point for which it's not defined. So you may want to do return [r[0] + '', r[1], r[2]]; instead in the map() callback.
Related
I am trying to create a line chart using google visualization. So I copied the example from their web page chart example and it works.
The only change I wanted to make is for the x-axis to be dates rather than a number. So the first section of code below works fine, its from their site.
<!DOCTYPE html>
<html lang="en-US">
<body>
<div id="linechart_material"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</body>
</html>
However when I make the following changes nothing is displayed,
data.addColumn('number', 'Day'); to data.addColumn('date', 'Day');
And change the data.addRows bit to,
data.addRows([
[new date(2018,1, 1), 37.8, 80.8, 41.8],
[new date(2018,1, 2), 30.9, 69.5, 32.4],
[new date(2018,1, 3), 25.4, 57, 25.7],
[new date(2018,1, 4), 11.7, 18.8, 10.5],
[new date(2018,1, 5), 11.9, 17.6, 10.4],
[new date(2018,1, 6), 8.8, 13.6, 7.7],
[new date(2018,1, 7), 7.6, 12.3, 9.6],
[new date(2018,1, 8), 12.3, 29.2, 10.6],
[new date(2018,1, 9), 16.9, 42.9, 14.8],
[new date(2018,1, 10), 12.8, 30.9, 11.6],
[new date(2018,1, 11), 5.3, 7.9, 4.7],
[new date(2018,1, 12), 6.6, 8.4, 5.2],
[new date(2018,1, 13), 4.8, 6.3, 3.6],
[new date(2018,1, 14), 4.2, 6.2, 3.4]
]);
the D in new Date should be capitalized...
data.addRows([
[new Date(2018,1, 1), 37.8, 80.8, 41.8], // <-- be sure Date is capitalized
I'm trying to display this chart and sometimes there will be null values in each row. I've added the "interpolateNulls" to my options but it still isn't working. Is is probably an easy fix but I am stuck.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, null, 42.9, null],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
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, google.charts.Line.convertOptions(options));
}
interpolateNulls is one of many options not supported by Material charts
Material: google.charts.Line
see --> Tracking Issue for Material Chart Feature Parity
instead, recommend using a Classic chart, with the following option...
theme: 'material'
Classic: google.visualization.LineChart
I am trying to follow the Creating Material Line Charts example in the Google Docs but I am unable to determine the format of the JSON used by the Line Chart. How can I display the JSON of the DataTable object?
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
I was able to figure out the correct format of the JSON for the line chart for the example.
{
"cols":[
{"label":"Day","type":"number"},
{"label":"Guardians","type":"number"},
{"label":"Avengers","type":"number"},
{"label":"Transformers","type":"number"}
],
"rows":[
{"c":[{"v":1},{"v":37.8},{"v":80.8},{"v":41.8}]},
{"c":[{"v":2},{"v":30.9},{"v":69.5},{"v":32.4}]},
{"c":[{"v":3},{"v":25.4},{"v":57.0},{"v":25.7}]},
{"c":[{"v":4},{"v":11.7},{"v":18.8},{"v":10.5}]},
{"c":[{"v":5},{"v":11.9},{"v":17.6},{"v":10.4}]},
{"c":[{"v":6},{"v":8.8},{"v":13.6},{"v":7.7}]},
{"c":[{"v":7},{"v":7.6},{"v":12.3},{"v":9.6}]},
{"c":[{"v":8},{"v":12.3},{"v":29.2},{"v":10.6}]},
{"c":[{"v":9},{"v":16.9},{"v":42.9},{"v":14.8}]},
{"c":[{"v":10},{"v":12.8},{"v":30.9},{"v":11.6}]},
{"c":[{"v":11},{"v":5.3},{"v":7.9},{"v":4.7}]},
{"c":[{"v":12},{"v":6.6},{"v":8.4},{"v":5.2}]},
{"c":[{"v":13},{"v":4.8},{"v":6.3},{"v":3.6}]},
{"c":[{"v":14},{"v":4.2},{"v":6.2},{"v":3.4}]}
]}
I want to know if it's possible to add company name or company logo in Google charts. I have a chart like the one given below. I want to add logo or the company name to the right of the chart title as given below in the screenshot.
I am making my chart dowloadable. So i cannot add company name as an overlay. It would be great if i can add a watermark as well.
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
},
width: 900,
height: 500,
axes: {
x: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
i am using google charts for displaying some user stats.
How can I remove text on bottom of google line chart?
Check in red circle
http://i49.tinypic.com/se3cpj.jpg
hAxis: { textPosition: 'none' }
View the related documentation here (search for "textPosition"): https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
So a full, simple example would be this:
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var options = {
hAxis: {
textPosition: 'none'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Run the code yourself here: https://jsfiddle.net/p80uggL0/1/
Try changing x-axis label font color same as background color like this
chart.draw(daily, {
hAxis : {textColor: '#ffffff'},
[... your other options here ...]
});
if its not working use hAxis: {baselineColor: '#FFFFFF'} instead of textColor, anyone of these should work.
if it is PieChart, and then like this.
legend : { position : 'none' }
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',
fontSize: 10,
legend : { position : 'none' }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}