I'm using google charts for my project and I have requirement of a chart both x-axis and y-axis labels should start from up to bottom , So In the below code x-axis points are moved to top , And now also i want to start the Y-axis point begin from top to bottom and not bottom to top. Here I written the code below, Can any one help us.
<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('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 1, 80.8, 41.8],
[2, 1, 69.5, 32.4],
[3, 1, 57, 25.7],
[4, 1, 18.8, 10.5],
[5, 1, 17.6, 10.4],
[6, 1, 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,
axes: {
x: {
0: {side: 'top'}
},
y: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
`
there is an axis configuration option for: direction
The direction in which the values along the axis grow. Specify -1 to reverse the order of the values.
the problem here is that Material charts do not support this option,
see Tracking Issue for Material Chart Feature Parity...
and Classic charts do not have an option to present the x-axis on top.
however, we can manually modify the chart on the 'ready' event.
to resolve, we use a Classic chart, and reverse the order of the y-axis labels.
then manually move the x-axis labels to the top.
vAxis: {
direction: -1
}
but first, we must use the following option to create room at the top.
chartArea: {
top: 72
},
we must also move the title up slightly, to make room for the labels.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
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, 1, 80.8, 41.8],
[2, 1, 69.5, 32.4],
[3, 1, 57, 25.7],
[4, 1, 18.8, 10.5],
[5, 1, 17.6, 10.4],
[6, 1, 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 = {
title: 'Box Office Earnings in First Two Weeks of Opening\nin millions of dollars (USD)',
width: 900,
height: 500,
chartArea: {
top: 72
},
vAxis: {
direction: -1
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = chart.getContainer().getElementsByTagName('text');
var fontSize;
var yCoord;
Array.prototype.forEach.call(labels, function(label) {
fontSize = parseFloat(label.getAttribute('font-size'));
switch (label.getAttribute('text-anchor')) {
// chart title
case 'start':
yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord - fontSize);
break;
// x-axis labels
case 'middle':
label.setAttribute('y', chartBounds.top - (fontSize / 2));
break;
// y-axis labels
default:
// ignore
}
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>
Related
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 want to make a google line chart with a clickable lines but I seem to only be able to make the data points clickable. Is it possible to also make the line between the data points clickable?
use config option focusTarget: 'category'
when the line is clicked, the closest point will be selected.
although, in my current browser, I have to hold the point of the mouse,
~ 2px above the line before it will let me click.
but it does work versus focusTarget: 'datum',
which only allows the point to be clicked
see following, working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[0, 0],
[6, 11],
[12, 30],
[18, 52],
[24, 60],
[30, 55],
[36, 62],
[42, 63],
[48, 72],
[54, 71],
[60, 64],
[66, 70]
]);
// clickable line
new google.visualization.LineChart(document.getElementById('chart_div0')).draw(data, {
focusTarget: 'category'
});
// point only
new google.visualization.LineChart(document.getElementById('chart_div1')).draw(data, {
focusTarget: 'datum'
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>click line</div>
<div id="chart_div0"></div>
<div>point only</div>
<div id="chart_div1"></div>
EDIT
if focusTarget: 'category' doesn't work out,
another option would be to use the 'click' event
although, nothing is focused nor is a tooltip displayed, the line is still clickable.
but the location of the click needs to be fairly precise.
you can use targetID to determine what / which line was clicked...
see following snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X0');
data.addColumn('number', 'Y0');
data.addColumn('number', 'Y1');
data.addRows([
[0, 0, 0],
[6, 11, 7],
[12, 30, 13],
[18, 52, 19],
[24, 60, 25],
[30, 55, 31],
[36, 62, 37],
[42, 63, 43],
[48, 72, 49],
[54, 71, 55],
[60, 64, 61],
[66, 70, 67]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div1'));
google.visualization.events.addListener(chart, 'click', function (props) {
if (props.targetID.indexOf('line') > -1) {
var hAxis = chart.getChartLayoutInterface().getHAxisValue(props.x);
var vAxis = chart.getChartLayoutInterface().getVAxisValue(props.y);
document.getElementById('chart_div0').innerHTML = props.targetID + ' clicked at [' + hAxis + ', ' + vAxis + ']';
}
});
chart.draw(data, {
lineSize: 3,
pointSize: 5
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0">line click result shown here</div>
<div id="chart_div1"></div>
I am using Gooble Material ScatterChart (since I need dual-Y chart). So I load it with:
google.load('visualization', '1.1', {packages: ['scatter']});
But now it seems that it is impossible to set lineWidth and PointSize options of such charts. Seems that it does not affect anything:
var options = {
width: 900,
height: 500,
}
What am I doing wrong? Documentation (https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options) says there are these properties for ScatterChart. No refinement is given for Material chart. But I do not see any affect and no errors are thrown.
Here is the full code of JS function and a piece of HTML. I have commented out non-Material test portion of code, which is working fine.
1: https://github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html "link to GitHub".
Indeed, it seems pointSize & lineWidth properties could not be applied to google.charts.Scatter object.
But you could consider the following approach for adjusting the chart.
As an alternative for pointSize property,the point size could be specified via CSS:
#chart_div circle {
r: 3;
}
Regarding lineWidth property, points could be connected using line element once the chart is generated as demonstrated below.
Complete example
google.load('visualization', '1.1', { packages: ['scatter'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Student ID');
data.addColumn('number', 'Hours Studied');
data.addColumn('number', 'Final');
data.addRows([
[0, 0, 67], [1, 1, 88], [2, 2, 77],
[3, 3, 93], [4, 4, 85], [5, 5, 91],
[6, 6, 71], [7, 7, 78], [8, 8, 93],
[9, 9, 80], [10, 10, 82], [11, 0, 75],
[12, 5, 80], [13, 3, 90], [14, 1, 72],
[15, 5, 75], [16, 6, 68], [17, 7, 98],
[18, 3, 82], [19, 9, 94], [20, 2, 79],
[21, 2, 95], [22, 2, 86], [23, 3, 67],
[24, 4, 60], [25, 2, 80], [26, 6, 92],
[27, 2, 81], [28, 8, 79], [29, 9, 83]
]);
var options = {
chart: {
title: 'Students\' Final Grades',
subtitle: 'based on hours studied'
},
width: 900,
height: 500,
axes: {
y: {
'hours studied': { label: 'Hours Studied' },
'final grade': { label: 'Final Exam Grade' }
}
},
series: {
0: { axis: 'hours studied' },
1: { axis: 'final grade' }
},
//pointSize: 10,
//lineWidth: 1
};
var chart = new google.charts.Scatter(document.getElementById('chart_div'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
google.visualization.events.addListener(chart, 'ready', configureChart);
}
function configureChart()
{
var chartContainer = document.getElementById('chart_div');
var options = {
pointSize: 3,
lineWidth: 1
};
drawLines(chartContainer,options);
}
function drawLines(chartContainer,options)
{
var points = chartContainer.getElementsByTagName('circle');
var area = {};
for(var i = 0; i < points.length;i++){
if(i > 0){
area.start = {'x': points[i-1].getAttribute('cx'), 'y': points[i-1].getAttribute('cy')};
area.end = {'x': points[i].getAttribute('cx'), 'y': points[i].getAttribute('cy')};
if(points[i].getAttribute('fill') == points[i-1].getAttribute('fill'))
drawLine(chartContainer,area,points[i].getAttribute('fill'),'1');
}
}
}
function drawLine(chartContainer,area,color,width)
{
var line = document.createElementNS('http://www.w3.org/2000/svg','line');
line.setAttribute('x1',area.start.x);
line.setAttribute('y1',area.start.y);
line.setAttribute('x2',area.end.x);
line.setAttribute('y2',area.end.y);
line.setAttribute('stroke-width',width);
line.setAttribute('stroke',color);
var svg = chartContainer.getElementsByTagName('svg')[0];
svg.appendChild(line);
}
#chart_div circle {
r: 3;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>