If I draw a line chart there is no problem but I want to have this on a histogram graph.. (https://developers.google.com/chart/interactive/docs/gallery/histogram)
For LineChart;
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
For Histogram;
var chart = new google.visualization.Histogram(document.querySelector('#chart_div'));
Other Codes;
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
['Foo', null, 4],
['Bar', null, 3],
['Baz', null, 7],
['Bat', null, 9],
['Cad', 'Vertical line here', 9],
['Qud', null, 2],
['Piz', null, 6]
]);
var chart = new google.visualization.Histogram(document.querySelector('#chart_div'));
chart.draw(data, {
height: 300,
width: 400,
annotation: {
// index here is the index of the DataTable column providing the annotation
1: {
style: 'line'
}
}
});
}
Daniel LaLiberte answered my question on Google Groups, who is a Senior Software Engineer at Google..
https://groups.google.com/forum/#!msg/google-visualization-api/7y3LrKETEwY/fR4HoYwBu-EJ
So it is not possible on Google Charts..
But :) Google Charts uses SVG.. For exp. I want to draw a line to 30 x axis..
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttribute('id', 'lineId');
newLine.setAttribute('style', 'stroke:rgb(0,0,0); stroke-width:3;');
newLine.setAttribute('x1', chart.getChartLayoutInterface().getXLocation(30));
newLine.setAttribute('y1', chart.getChartLayoutInterface().getChartAreaBoundingBox().top);
newLine.setAttribute('x2', chart.getChartLayoutInterface().getXLocation(30));
newLine.setAttribute('y2', chart.getChartLayoutInterface().getChartAreaBoundingBox().height + chart.getChartLayoutInterface().getChartAreaBoundingBox().top);
$("svg").append(newLine);
Related
Graph: Number of Persons v DateTime
2004-12-23 15:25:01,8
2004-12-23 15:26:01,5
2004-12-23 15:27:01,5
2004-12-23 15:28:01,4
2004-12-23 15:29:01,4
2004-12-24 10:30:01,13
2004-12-24 10:31:01,12
2004-12-24 10:32:01,12
2004-12-24 10:33:01,13
2004-12-24 10:34:01,13
2004-12-24 10:35:01,13
As we can see there is no data between 2004-12-23 15:29:01 and 2004-12-24 10:30:01 but still the Google Chart shows me a gap and connects the two datapoints when using LineChart. Also I avoid making the dates string as then I would get no yaxis markings, because of the huge date-time.
I am new to using Google Charts, can this be avoided?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', ‘Available);
data.addRows(dataPoints);
console.log(data);
var options = {
title: ‘Availability',
legend: {position: 'bottom' },
hAxis: {
title: 'Time',
/*
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}*/
},
vAxis: {
title: 'Number of people available’
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
if you use string values, rather than date values, no gap will be displayed...
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
...
also, here, needed to add more room at the bottom of the chart for the labels,
as well as increase the default height...
chartArea: {
bottom: 128
},
height: 400
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawBasic);
function drawBasic() {
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
['2004-12-23 15:28:01', 4],
['2004-12-23 15:29:01', 4],
['2004-12-24 10:30:01', 13],
['2004-12-24 10:31:01', 12],
['2004-12-24 10:32:01', 12],
['2004-12-24 10:33:01', 13],
['2004-12-24 10:34:01', 13],
['2004-12-24 10:35:01', 13]
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', 'Available');
data.addRows(dataPoints);
var options = {
title: 'Availability',
legend: {position: 'bottom'},
hAxis: {
title: 'Time',
},
vAxis: {
title: 'Number of people available'
},
chartArea: {
bottom: 128
},
height: 400
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
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 google candlestick chart, but also trying to overlay multiple lines on the same chart.
I'm able to draw one line over the candlestick if I do something like the following:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');
data.addRow('Mon', 1, 1, 2, 2, 1.5]);
data.addRow('Tue', 2, 2, 3, 3, 2.5]);
data.addRow('Wed', 2, 2, 4, 4, 3.5]);
var options = {
legend:'none',
series: {1: {type: 'line'}}
};
But I can't seem to figure out how to add a second line.
To avoid confusion, I'll leave out all of the things I've attempted, but the goal is to just add another data column and specify whatever is necessary to tell the chart to overlay the new data as a second line.
Is there any way to make this work?
sure, just keep adding line series as you have, using the series option...
for the CandleStickChart, five columns are required,
those five columns count as one series,
in this example, series 0
which makes the 6th column series 1
which you've changed to 'line'
1: {type: 'line'}
adding another column would be series 2,
just add another column and change the type...
1: {type: 'line'},
2: {type: 'line'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');
data.addColumn('number', 'Average 2');
data.addRow(['Mon', 1, 1, 2, 2, 1.5, 2.5]);
data.addRow(['Tue', 2, 2, 3, 3, 2.5, 3.5]);
data.addRow(['Wed', 2, 2, 4, 4, 3.5, 4.5]);
var options = {
legend: 'none',
series: {
1: {type: 'line'},
2: {type: 'line'}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.CandlestickChart(container);
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am using Google Charts Line Charts, I am having some trouble binding it to a Chart Range Filter.
Here is what I have tried:
The containers:
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="control_div" style="width: 100%; height: 100%"></div>
<div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
</div>
The JS part:
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'daily_container_count_lineChart',
options: {
theme: 'maximized'
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);
I get the following error in place of the dashboard in the webpage. No error in the console.
One or more participants failed to draw()
You called the draw() method with the wrong type of data rather than a DataTable or DataView
You called the draw() method with the wrong type of data rather than a DataTable or DataView
If I try to just draw a line graph without the chart Range filter like below, it works just fine with out any errors:
Drawing just a line graph without ChartRangeFilter:
var dailyContainerChart = new google.charts.Line(document.getElementById('daily_container_count_lineChart'));
dailyContainerChart.draw(data, {allowHtml: true, width: '100%', height: '100%'});
Loading the data:
var getDailyContainerLineData = function (sourceData)
{
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'VIC - STH CRT');
data.addColumn('number', 'NSW - MINTO');
data.addColumn('number', 'QLD - PINKENBA');
data.addColumn('number', 'WA - HAZELMERE');
for(k =1;k< sourceData.getNumberOfColumns();k++)
{
var rowData = new Array();
var rowStart = sourceData.getColumnLabel(k);
rowData.push(new Date(rowStart));
for(l =0;l<sourceData.getNumberOfRows()-1;l++) // we don't want the 'total' row from the daily container table
{
var test = sourceData.getValue(l, k);
if(typeof test === 'string')
{
var date = Date.parse(test);
rowData.push(date);
}
else
{
rowData.push(test);
}
}
data.addRow(rowData);
}
return data;
}
The data that is returned from above is used to draw the dashboard and and the LineGraph.
My questions is:
Why am I getting a wrong data type error when I try to draw the line graph with the ChartRangeFilter, but not when I draw only the line graph
Can I get the ChartRangeFiler to filter 2 graphs(a table and line graph) with different data sources at the same time ?
Cheers.
A dashboard accepts the same data format as a regular chart.
Building a DataTable from the sample data provided seems to draw just fine.
Didn't see the load statement, check to see that all the necessary packages are being loaded when drawing the dashboard.
As for second question...
Although you cannot bind a single control to more than one data source, you can use the 'statechange' event to control other sources.
See following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'VIC - STH CRT');
data.addColumn('number', 'NSW - MINTO');
data.addColumn('number', 'QLD - PINKENBA');
data.addColumn('number', 'WA - HAZELMERE');
data.addRow([new Date('04/01/2001'), 3, 4, 7, 6]);
data.addRow([new Date('04/02/2001'), 0, 9, 8, 7]);
data.addRow([new Date('04/03/2001'), 9, 9, 0, 7]);
data.addRow([new Date('04/04/2001'), 5, 5, 5, 2]);
data.addRow([new Date('04/05/2001'), 6, 7, 1, 1]);
data.addRow([new Date('04/06/2001'), 4, 4, 1, 9]);
data.addRow([new Date('04/07/2001'), 4, 5, 9, 0]);
var dataOther = new google.visualization.DataTable();
dataOther.addColumn('date', 'Date');
dataOther.addColumn('number', 'HLS - FLORENCE');
dataOther.addColumn('number', 'FGT - GAY');
dataOther.addColumn('number', 'KNX - FULTON');
dataOther.addColumn('number', 'TN - VOLS');
dataOther.addRow([new Date('04/01/2001'), 1, 8, 5, 2]);
dataOther.addRow([new Date('04/02/2001'), 2, 9, 6, 3]);
dataOther.addRow([new Date('04/03/2001'), 3, 0, 7, 4]);
dataOther.addRow([new Date('04/04/2001'), 4, 1, 8, 5]);
dataOther.addRow([new Date('04/05/2001'), 5, 2, 9, 6]);
dataOther.addRow([new Date('04/06/2001'), 6, 3, 0, 7]);
dataOther.addRow([new Date('04/07/2001'), 7, 4, 1, 8]);
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'daily_container_count_lineChart',
options: {
theme: 'maximized'
}
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
dataTable: dataOther,
options: {
sortColumn: 1
}
});
google.visualization.events.addListener(control, 'statechange', function () {
var state = control.getState();
var view = new google.visualization.DataView(dataOther);
view.setRows(view.getFilteredRows([{column: 0, minValue: state.range.start, maxValue: state.range.end}]));
table.setDataTable(view);
table.draw();
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);
table.draw();
},
packages: ['controls', 'corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="control_div" style="width: 100%; height: 100%"></div>
<div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
</div>
<div id="table_div"></div>
I have to create a line chart where a few of the points have tooltips or other balloons/captions/texboxes with information about the point. They must always be displayed, not only on mouse over. Basically a google annotation chart, but with the data on the chart.
I tried the code below, which doesn't even show the tooltip as it should. Any thoughts, or should I choose a different technology? Thanks.
google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type: 'string', role: 'tooltip' });
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, options);
}
You would want to use role:'annotation' instead of role: 'tooltip'. Annotation allows you to display the text without any user interaction. See the documentation on annotationRole for more info.
Working Code: http://jsfiddle.net/wkyg2brg/
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data,options);
}
I have created a google line chart that has multiple values over time like this
The data refers to historical data and from a point in time is forecasted data. I want to divide (split) the chart to differentiate the historical information of forecast information.
And get a chart like this:
Is there a way to do that?
You can get a vertical line like that by adding an 'annotation' role column to your domain (x-axis) column in the DataTable, and setting the annotation.<annotation column index>.style option to 'line'. Here's an example:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
['Jun', null, 3],
['Jul', null, 5],
['Aug', null, 4],
['Sep', null, 4],
['Oct', null, 8],
['Nov', 'this month', 6],
['Dec', null, 2]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
annotation: {
1: {
style: 'line'
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
see it working here: http://jsfiddle.net/asgallant/pkwqt/