I edited a little bit more but still no luck. It says One or more
participants failed to draw()
HTML:
<div class="stat_container">
<div id="test_chart" >
<div id="chart"></div>
<div id="control"></div>
</div>
</div>
SCRIPT:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
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': {
'chartArea': { 'width': '90%' },
'hAxis': { 'baselineColor': 'none' }
},
'chartView': { 'columns': [0, 2] },
'minRangeSize': 86400000
},
'state': { 'range': { 'start': new Date(2012, 1, 9), 'end': new
Date(2012, 2, 20)} }
};
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' },
'seriesType': "bars",
'series': { 2: { type: "line"} }
},
// 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 %');
tdata.addColumn('number', 'UpTime');
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, up_time]);
}
dashboard.bind(control, chart);
dashboard.draw(tdata);
});
}
</script>
On Tue, Jul 17, 2012 at 11:04 AM, Pardeep Singh <[email protected]
> wrote:
> 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.
