I have a simple Chart Region: with
Static ID: Chart_Region
Attribute Type: Pie
Chart Serie: Salary Chart
Sql Query: Select Department_id, Sum(Salary) Sum_Sal From Employees Group by Department_Id;
Column Mapping: Label: Department_ID , Value: Sum_Sal and Static ID: Chart_ID
Simply I want to enable the end user to change the Chart Type: Pie to Type: Bar at the runtime (using toggle buttons that I have added).
Any Idea please !.
Thank you in advance.
I found it with Javascript like so:
apex.region('Chart_Region').widget.ojChart({type:'bar'});
and
apex.region('Chart_Region').widget.ojChart({type:'pie'});
available values for type are:
area, bar, boxPlot, bubble, combo, funnel, line, lineWithArea, pie, pyramid, scatter, stock
Here is my data:
dataToDisplay=[[156,"2013-12-01","note one"],
[206,"2013-12-02","note two"],
[280,"2013-12-03","note three"],
[320,"2013-12-04","note four"],
[0,"2013-12-05",""]]
Here is the code to make a line chart:
chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'Miles');
chartData.addColumn('string', 'Date');
chartData.addColumn({type:'string', role:'annotationText'});
chartData.addRows(dataToDisplay);
graphTitle = 'Mileage'
var options = {
title: graphTitle,
height:600
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(chartData, options);
and the error:
"Data column(s) for axis #0 cannot be of type string"
I'm at a loss as to what's going on. Which column is axis #0?
Also, is there a way to build a line graph with annotations using something like:
var chartData = google.visualization.arrayToDataTable(dataArray);
If so, how would dataArray have to be constructed?
LineChart's accept strings only as annotation columns or domain columns. The first column is the domain column, and annotation columns have to be specified as such. In your case, the "date" column is causing the problem, as it is the second column, and therefore is expected to be either a data ("number" type) column or an annotation column. You did not specify it as an annotation column, which is why you get the error.
Is your intent to have the dates be annotations or values? if they are intended to be values, you must put them in the first column:
chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Date');
chartData.addColumn('number', 'Miles');
chartData.addColumn({type:'string', role:'annotation'});
In order to use the "annotationText" data role, the preceeding column must be an "annotation" role column. The "annotation" role creates a text label on the chart at the associated data point, and the "annotationText" role creates a tooltip to show when the user hovers over the label.
I am using geoChart to display following data in country Map
I have plotted the map using State cloumn and TotalSales($) as value Column
Now ,the tooltip displays like this : ID
TotalSales($_113607.00)
I have following summary data in datatable
this is my actual data
Now I have added more columns(City,Brandname) to break data from summary data from first table
The tooltip displays like this : VA
Totalsales($_:34943(City Fairfax(BrandName sony)))- this is wrong
But I want to display the tooltip like this : VA
Totalsales($_:7768(City Fairfax(BrandName sony))) - this is correct
this is my data to display tooltip
From these, what I got is , Geochart takes only last row for display tooltip,but I want to display particular brand's Totalsales i.e sony -7768$
How do I do this?
You can group the data in geo chart using the CategoryFilter Control. You can group data in this way.
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'BrandName',
options: {
filterColumnIndex: 3, // filter by brand name
ui: {
caption: 'Choose a brand',
sortValues: true,
allowNone: true,
allowMultiple: false,
allowTyping: true
}
},
state:
{
selectedValues: ['Samsung']
}
});
Here is the working sample jqfaq.com. Hope this will help you.
I am using google spreadsheet to feed to my Column chart. To get the single columns to be a different color I used sort of a hack by setting values to 0 on opposite columns in the spreadsheet for each column in the chart. This gave me the the difference in color I needed for each column in the chart. The issue I am now having is the tooltips do not work for each column and was wondering how I can implement to work correctly in my code.
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
var query = new google.visualization.Query(
'http://spreadsheets.google.com/tq?key=0AjlSK7_zXoNHdDhrU2xiaHVIQmR1WldYZm1yMTNkM3c&pub=1');
// Apply query language statement.
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// set the 3rd column to the "tooltip" role
data.setColumnProperty(3, 'role', 'tooltip');
visualization = new google.visualization.ColumnChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'none', colors:['blue','red'],is3D:'True', isStacked:'true'});
}
google.setOnLoadCallback(drawVisualization);
Option A:
Adjust your underlying data so that you have 4 columns instead of 3, with the same values in column 2 (after the first set of data) as you have in your current column 3 (with the tooltip). Use the setColumnProperty() on the new columns 2 and 4 as tooltip.
Option B:
Copy your tooltip column 3 in Javascript to Column 2 (after the first data set) using insertColumn(), this should have the same effect as Option A. You will have to loop through to copy over the values, or otherwise add the same data via javascript.
I am looking to create a Google charts API dashboard with filtering but I would like to chart the data based on grouped data. For example, I can create a datatable such as this:
salesman cust_age cust_sex quantity
Joe 21 Male 3
Joe 30 Female 10
Suzie 40 Female 2
Dave 15 Female 5
Dave 30 Male 10
I can appropriately create a dashboard that creates two controls (for cust_age and cust_sex) and any number of output graphs and tables all pulling from an external data source - this is pretty stock stuff, see http://code.google.com/apis/chart/interactive/docs/gallery/controls.html
The problem that I am having is how to show all charts by grouped values. Using a pie chart as an example, without any filters there are 5 slices of the pie (Joe, Joe, Suzie, Dave, Dave) - I would like to see only three (Joe, Suzie Dave). Of course, when a control is applied everything should update.
In other words, the filters should act on the original datatable, but the charts should be based on a grouped datatable.
I would guess that we could use the grouping function:
http://code.google.com/apis/ajax/playground/?type=visualization#group
however I cannot seem to bind the filters to the larger datatable, update the grouped table, and then draw the charts based on the grouped table.
Any thoughts?
I found a workaround, you should use the chartWrapper without the dashboard, so you can pass a dataTable as parameter:
var $pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'pie_chart',
'options': {
'width': 300,
'height': 300,
},
//group the data for the pie chart
'dataTable' : google.visualization.data.group($dataTable, [0],
[{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
});
$pieChart.draw();
$tableWrapper = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_data'
});
var $genderPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'gender_filter',
'options': {
'filterColumnIndex': '2',
'useFormattedValue' : true,
'ui': {
'allowTyping': false,
'allowMultiple': false,
'labelStacking': 'vertical'
}
}
});
new google.visualization.Dashboard(document.getElementById('table_dashboard')).
bind([$genderPicker], [ $tableWrapper]).
draw($dataTable);
Then, you should add a callback to your controls so whenever the control changes the charts outside of the dashboard will be updated, like a manual binding, let's assume that the control for cust_sex is $genderPicker and the ChartWrapper table object is $tableWrapper:
google.visualization.events.addListener($genderPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
$pieChart.setDataTable( google.visualization.data.group(
// get the filtered results
$tableWrapper.getDataTable(),
[0],
[{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
$pieChart.draw();
});
The result: whenever you chose male, female or both the pie chart will reflect the filtered results grouped by name. Hope it helps someone and sorry for my broken english.
another way to do it, is to use the 'ready' event of the dashboard object, then create a chart or table in there based on a grouping done to the main table of the dashboard.
eg:
//create datatable, filter elements and chart elements for the the dashboard then:
dash=new google.visualization.Dashboard(document.getElementById(elId));
google.visualization.events.addListener(dash, 'ready', function() {
//redraw the barchart with grouped data
//console.log("redraw grouped");
var dt=mainTable.getDataTable();
var grouped_dt = google.visualization.data.group(
dt, [0],
[{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}]);
var mainChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'barChart',
'options': {
'height':500,
'chartArea':{'left':200}
},
//view columns from the grouped datatable
'view': {'columns': [0, 1]},
'dataTable':grouped_dt
});
mainChart2.draw();
});
dash.bind(
[lots,of,filter,elements],
[lots,of,chart,elements]
);
dash.draw(data)
After a long R&D, I found the solution fot this problem. For the fix, I used two event listeners in which one is ready event and other is statechange event as,
google.visualization.events.addListener(subdivPicker, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable( google.visualization.data.group(
// get the filtered results
table.getDataTable(),
[0],
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
google.visualization.events.addListener(subdivPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable( google.visualization.data.group(
// get the filtered results
table.getDataTable(),
[0],
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
Find my initial (problematic) sample here and fixed (solved) sample here
Read this thread: How to not display the data table (read at least the first two posts - the rest are really only important if you are dealing with large data sets).
Basically, you have to use an intermediary chart (tables are a good choice, because they are relatively fast to write and render, with a lower memory footprint than most charts) that is completely hidden from the users. You bind the category picker to this chart in the dashboard. Then you set up an event handler for the picker's "statechange" event that takes the data, groups it into a new DataTable, and draws the PieChart based on the grouped data.