I am struggling how I can combine line chart and column chart. I tried to
follow the example on playground but I failed. I am pretty sure that my
ChartWrapper constructor is wrong. (note) for testing purposes I am just
going to use same data for line chart and column chart. This is what I have
so far (made slight changes but a lot of this is copy paste from the
playground)
HTML:
<div class="stat_container"><div id="test_chart" ></div></div>
SCRIPT:
google.load('visualization', '1', { 'packages': ['controls'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$('div#test_chart').html("<div class='spinner'><img
src='/content/images/loadingicon.gif' alt='loading...' /></div>");
$.post('/metrics/UpChartData', {},
function (data) {
var dashboard = new
google.visualization.Dashboard(document.getElementById('test_chart'));
var controlOptions = {
'filterColumnIndex': 0,
'ui': {
'chartType': 'ComboChart',
'chartOptions': {
'hAxis': { 'baselineColor': 'none' }
},
'chartView': { 'columns': [0, 3] },
'minRangeSize': 86400000
}
};
var control = new google.visualization.ControlWrapper({
'controlTyp': 'ChartRangeFilter',
'containerId': 'control',
'chartOptions': controlOptions
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis
alignment.
'chartArea': { 'height': '80%', 'width': '90%' },
'hAxis': { 'slantedText': false },
'vAxis': { 'viewWindow': { 'min': 0, 'max': 2000} },
'legend': { 'position': 'none' }
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function (dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex,
0);
},
'type': 'string'
}, 1, 2, 3, 4]
}
});
var tdata = new google.visualization.DataTable();
tdata.addColumn('date', 'Date');
tdata.addColumn('number', 'Up Time %');
for (var i = 0; i < data.length; i++) {
var date = new Date(parseInt(data[i].Date.substr(6)));
var up_time = (data[i].SiteUptime / (data[i].SiteDowntime +
data[i].SiteUptime) * 100);
tdata.addRow([date, up_time]);
}
dashboard.bind(control, chart);
dashboard.draw(tdata);
});
}
On Mon, Jul 16, 2012 at 2:13 PM, asgallant <[email protected]>wrote:
> In that case, you can make a combo of line and column charts (see
> ComboCharts<https://developers.google.com/chart/interactive/docs/gallery/combochart>,
> column series are called "bars" here for some reason). When combined with
> DataTable columns with the "annotation" and "annotationText" data
> roles<https://developers.google.com/chart/interactive/docs/roles>and a
> ChartRangeFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter>control,
> you get 95% of the functionality of an annotatedTimeline chart
> added in.
>
>
> On Monday, July 16, 2012 4:28:29 PM UTC-4, SherCoder wrote:
>>
>> yeah I was thinking if I could make a combo chart using annotated
>> timeline chart and column chart.
>>
>> On Mon, Jul 16, 2012 at 1:06 PM, asgallant <[email protected]>wrote:
>>
>>> You can have them both on the same page, but you cannot combine them
>>> into one chart. The neither bar nor annotatedTimeline charts can be
>>> combined into a single chart with any other chart types (column charts can,
>>> though, if that is what you were thinking of).
>>>
>>>
>>> On Monday, July 16, 2012 1:41:45 PM UTC-4, SherCoder wrote:
>>>>
>>>> Is it possible to combine annotated timeline and bar/column chart into
>>>> one chart but separate axis? Any help would be great.
>>>
>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "Google Visualization API" group.
>>> To view this discussion on the web visit https://groups.google.com/d/**
>>> msg/google-visualization-api/-**/gnx1prwUPLAJ<https://groups.google.com/d/msg/google-visualization-api/-/gnx1prwUPLAJ>
>>> .
>>>
>>> To post to this group, send email to google-visualization-api@**
>>> googlegroups.com <[email protected]>.
>>> To unsubscribe from this group, send email to google-visualization-api+*
>>> *[email protected]<google-visualization-api%[email protected]>
>>> .
>>> For more options, visit this group at http://groups.google.com/**
>>> group/google-visualization-**api?hl=en<http://groups.google.com/group/google-visualization-api?hl=en>
>>> .
>>>
>>
>> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-visualization-api/-/WGZKOVgtB-IJ.
>
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/google-visualization-api?hl=en.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
