I am trying to use the Embed API to make a custom dashboard from my Google Analytics account.
Below, you will see the code that is used to render the chart on the screen. Inside of the chart object, there is a property called type which is set to LINE in the example below.
Where can I find a list of these values? It's really annoying having to arbitrarily guess what the string values are. The documentation doesn't show what the possible values are or how many there are.
I tried going to the Goolge Charts page and look for a list, but I couldn't find it either. Any help is appreciated.
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions,ga:uniquePageviews',
dimensions: 'ga:date',
'start-date': '10daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-container',
type: 'LINE',
options: {
width: '100%'
}
}
});
You can check Built-in Components Reference of Embed API and checkout the Datachart Options.
Following are the chart types:
LINE
COLUMN
BAR
TABLE
GEO
There is an additional chart type of PIE. This is not mentioned in the official documentation. Here is a demo of the PIE type.
Related
I want to get display EventCategory and pageViews in a Google DataChart Bar chart. My trouble is that I want to sort the bar chart so by pageTitle. When I ask for the sort I get the error saying the dimension or metric ga:pageTitle is not in the query.
If I add the dimension to the query I get an error saying everything on an axis must be the same Type.
So I cant find a way to get the data in the query and not display it in the chart. Here is where I build the chart
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:eventLabel;ga:pageTitle' ,
'metrics' : 'ga:pageviews',
'start-date': '30daysAgo',
'end-date': 'today',
'filters': "ga:dimension1=="+userid,
'sort' : 'ga:pageTitle',
},
chart: {
type: 'BAR',
container: 'timeline',
options: {
title:'Page Views',
height:'800',
width: '500',
hAxis: {
title:'Views',
minValue:0,
gridlines:{count:7}
},
vAxis:{title:'Page'}
}
}
});
You've asked a few different questions in your question, so I'll try to address each of them:
1) Is is possible to sort by a dimension not queried?
No, and if you think about it, that makes sense. If you don't include a dimension in the query, you won't get any results back for that data set, and so how could you sort on something that isn't in the result set?
2) Why do I get the error "everything on an axis must be the same Type"?
This is because the Embed API DataChart component uses Google Charts under the hood, and Google Charts requires all data along the same axis to be of the same type.
But again, this makes sense because how would you even draw a chart where the x-axis had two different datatypes?
3) So how can I visualize the results of this query?
If you want to query for both ga:eventCategory and ga:pageTitle at the same time, then your only option for visualization is a table chart.
I have a question regarding the Google Analytics Core Reporting API and displaying the result Data within a Chart. I´ve managed to make a query to Analytics, which works just fine. I can choose a start and end-date, the Property and some Dimensions and Metrics in a Web-Formular. Then in return I´m getting all the data, I think in a dataTable Format,because of the Query-Option 'output': 'datatable'
Now i want to display the Data (the DataTable) within a Google Chart. There is the problem. Something is drawn on the screen, but none of the data is being displayed. So I think the drawn Graph is just empty. Logically i tried to create a new dataTable and fill it up with the Data from the Query-Response and then draw it. Somewhere there must be a problem, maybe with the format? I´ve tried many things, but none lead to a proper Chart.
By the Way: If I try to draw a chart with given data, like in the example of the Google Chart Documentation (https://developers.google.com/chart/interactive/docs/quick_start) the graph is drawn without any problem. So I´m guessing its a format-problem.
Here is the Code (a little shorten):
function queryCoreReportingApi(profileId) {
gapi.client.analytics.data.ga.get({
'ids': 'ga:' + profileId,
'start-date': startDate, //Startdate Datepicker
'end-date': endDate, //Enddate Datepicker
'metrics': 'ga:sessions',
'dimensions': dimension,
'filters': 'ga:landingPagePath=#'+service+';'+'ga:deviceCategory=='+device,
'output': 'datatable'
})
.then(function(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
//Output Data in Text-Area
document.getElementById('query-output').value = formattedJson;
document.getElementById('query-output-obj').value = response.result.dataTable;
//Load Chart Lib
google.load('visualization', '1.0', {'packages':['corechart']});
//Create Data-Table and fill up
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Sessions');
response.result.dataTable.rows.forEach(function pushNumericColumn(row) {
data.addRow([row[0], parseInt(row[1])]);
});
var options = {
title: 'Custom Chart',
};
//Draw Chart
var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
Output for formattedJson: all the data from the query |
Output for response.result.dataTable: [Object Object] |
Errors: No Errors in the Console
The Authentication process (which is not shown in the code sample) works fine too.
I was able to draw the chart by accessing the "v" property of the row object, like so:
data.addRow([row.c[0].v, parseInt(row.c[1].v)]);
In Google visualization ChartWrapper class, the code to draw a chart (bar chart, pie chart, etc) is as follows:
wrapper = new google.visualization.ChartWrapper({
dataTable: dataTable.toJSON(),
chartType: chartType,
options: options
});
console.log("Wrapper: " + wrapper.toJSON());
console.log(" ");
wrapper.draw(result[0]);
I am curious if there's an equivalent way of doing this using Highcharts where instead of calling new google.visualization.chartWrapper(...), we can just call something like new highcharts.chartWrapper(...). The options can include the container div id where the chart will be drawn.
Even if there is no way to do, any suggestions how I should be go about doing something similar to this?
As far as I know, in dataTable I can specify my data series in JSON format. In chartType, I can specify bar, column, pie, etc. Based on the highcharts example I saw, I can even write a service that generates a HTML file on the server side as shown here -> http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/ and send back a response.
But what I don't know is how do I tell Highcharts to insert the chart right at container id specified in my options on the same page.
In this example, for instance, wrapper is just a json representation of the chart (which I can generate). What I am not sure is how do I convert that json representation to a highcharts map that gets inserted where I want on the same page.
Sorry, if this question seems complicated. I can clarify if you need additional information.
I'm trying to create a pie chart with javascript that will allow users to click on a slice and "view what makes up that slice." If you've ever used mint.com you'll know what I mean - say you're viewing an expenses pie chart and you click the "Automobile" slice, then you see the slice expand into a new chart of Gas, Maintenance, etc.
To take this a step further, I'm dealing with a large amount of data, so being able to fetch (ajax) the new data when the slice is clicked would be a useful option as well (though I can probably get away without it).
Perhaps "nested", "multi-level" and "drill-down" are not the right terms because I've been searching all day and cannot seem to find a solution.
Does anyone know of a library for this? Thanks in advance!
I've implemented similar drilldown systems using the HighCharts point click event. Here's the rough syntax:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
series: [{
data: myInitialDataArray, // make sure each data point has an id
point: {
events: {
click: function () {
$.post('/get/data/by/id/' + this.id, function(data) {
// you may need to format your data here
chart.series[0].setData(data);
});
}
}
}
}]
});
In this example, you define a click event that uses the point's id value (this.id) to perform an Ajax post to a URL. You then use the data from your post to re-bind the chart series.
Please note that each time you use the setData function to update the chart, each data point needs to have an id value in order for the drilldown to continue.
Hope this helps!
Try psd3 pie chart library
Demo - https://pshivale.github.io/psd3
Source - https://github.com/pshivale/psd3
It supports multi-level pie charts, donut charts and sunburst charts. It also supports drilling down a pie slice by double clicking it.
I believe what I am trying to accomplish should be a fairly common task, yet I'm having difficulty getting it to work. I simply wish to create a multi-series plot from a data set containing (for each record) an ISO8601 timestamp along with multiple data points. The data is in JSON format and I'm using dojox.charting.chart "Lines" type.
I'm already aware that the Dojo charts cannot directly handle time-based axis data, let alone ISO8601. So I've already dealt with converting the x-axis to milliseconds-since-T0 server-side.
Here is a distilled example excerpt of my JSON:
[{"Offset_ms":0,"CP":250.58368,"TP":181.88211},
{"Offset_ms":360000,"CP":233.18443,"TP":119.94824},
{"Offset_ms":540000,"CP":227.15465,"TP":117.99422},
{"Offset_ms":720000,"CP":222.87495,"TP":117.55895},
{"Offset_ms":896000,"CP":218.19876,"TP":117.64221},
{"Offset_ms":900000,"CP":219.77487,"TP":117.93475}]
And the distilled JavaScript (assume the above JSON is in the variable 'sequenceData'):
var chart = new dojox.charting.Chart("sequenceDataGraph");
chart.addPlot("default", {
type: "Lines",
tension: "X"
});
chart.addAxis("x", { labelFunc: labelTimeAxis });
chart.addAxis("y", { vertical: true });
var sequenceDataStore = new dojo.store.Observable(new dojo.store.Memory({
data: {
label: "Sequence",
items: sequenceData
}
}));
addSequenceDataSeries(chart, sequenceDataStore, "TP");
addSequenceDataSeries(chart, sequenceDataStore, "CP");
chart.render();
function addSequenceDataSeries(chart, sequenceDataStore, sColumnName) {
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
sColumnName));
}
What appears to be happening, is that Dojo Chart is not using the x-axis data at all, but instead plotting each point at a fixed interval based on the number of data points. That is, each data point seems to be assigned an ordinal, such as if Offset_ms was merely 1, 2, 3... Since my data points are not always at fixed intervals, the resulting graph is distorted.
How do I instruct Dojo Chart to use the "Offset_ms" field in the JSON data for the x-axis component?
I've scoured the tutorials, the API docs and performed numerous Google & SO searches to no avail. I've even browsed portions of the Dojo source, particularly StoreSeries.js.uncompressed.js, but I'm not finding any answers. Surely this is possible, and hopefully trivial!
Unfortunately, the official dojo documentation is seriously lacking, and I only figured out how to do something similar by browsing the dojo source. Specifically, line 135 of the StoreSeries test, http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_StoreSeries.html
The StoreSeries constructor's third argument accepts an object that maps the X and Y axis to specific fields in your data store.
Change the following line in your code from this:
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
sColumnName));
to this:
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
{ x: "Offset_ms", y: sColumnName }));
sColumnName becomes { x: "Offset_ms", y: sColumnName }