I'm using google geochart to display data.
My code:
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
var options = {region: 'world', resolution: 'continents', width: 556, height: 347};
var data = google.visualization.arrayToDataTable([
['continents', 'Aircrafts'],
['Asia', 700]
]);
geochart.draw(data, options);
};
</script>
<div id="visualization" style="width: 800px; height: 400px;"></div>
In chart it doesn't show asia as data.
Although the 'continents' resolution option isn't in the official docs it does work. You need to change your data table to include a column of continent region codes, e.g.:
var data = google.visualization.arrayToDataTable([
['Region code', 'Continent', 'Aircraft'],
['142', 'Asia', 700]
]);
geochart.draw(data, options);
The region codes are required but don't get rendered in the tooltips. The codes matching each continent are explained here, beneath the options in the section called 'Continent Hierarchy and Codes'. It doesn't actually say you need to use them in your data table (that would be too easy...)
The only caveat is that I haven't yet found a way to get it to recognise the subregion codes that will allow separating 'Americas' into North & South. If you stick to using the continent codes then they should work - they do for me. Note that the codes need to be in the data table as strings.
See here for a working example : http://jsfiddle.net/6hrhj9qs/
You are using undocumented options described in this post
There it was also said that this bug would be fixed soon... and date was 5/25/11!
I didn't find other update.
Try using VectorWorkz' GeoChart, it supports Asia as a Continent and you have full control of the regions and add/modify the underlying maps to your needs. We can help create custom maps for you too.
Related
I am using GV-API to publish a piechart with information on my website. De items published are not clickable by default, but I thought I found a way in their documentation (https://developers.google.com/chart/interactive/docs/reference#numberformatter)
Implementation as follows:
<div id="chart_{!! $id !!}"></div>
<script type="text/javascript">
google.charts.setOnLoadCallback(function() {
var data = google.visualization.arrayToDataTable({!!json_encode($data)!!});
var options = {!! json_encode($options) !!};
var formatter = new google.visualization.PatternFormat('{0}');
formatter.format(data, [0, 1]);
var material = new google.visualization.PieChart(document.getElementById('chart_{!! $id !!}'));
material.draw(data, options);
});
And indeed this enforces a kind of formatting, but unfortunately the information is shown as plain text, not as a clickable URL. It is a bit weird, since this is almost the same as the example in the documentation.
I searched the web for solutions, but most of them refer to deprecated API's.
Any help appreciated
Microsoft have announced it is possible to turn off the loading image shown when a report is loading.
Loading Image
Use the Power BI Embedded JavaScript SDK to hide the flickering Power
BI logo that appears when a report is loaded. - power-bi-embedded-feature-hide-the-power-bi-logo-during-visualization-load
However I cannot find any mention of this in any of the JS SDK documentation or any examples online.
Has anyone achieved this yet?
First add a gif which you want instead of the Power BI logo. You can add it in a div element. This element will overlap the div element containing the report. The HTML code looks like below:
<div id="container">
<div id="overlay">
<img id="spinner" alt="Alternate Text" src="image/giphy.gif"/>
</div>
<div id="embedContainer" style="height: 600px; width: 100%; max-width: 1400px;">
</div>
</div>
Once you have added your gif. Now, make changes in the JavaScript Code. So you final JavaScript embedding code will be:
<script type="text/javascript">
// Read embed token
var embedToken = "<% =this.embedToken %>";
// Read embed URL
var embedUrl = "<% = this.embedUrl %>";
// Read report Id
var reportId = "<% = this.reportId %>";
// Get models (models contains enums)
var models = window['powerbi-client'].models;
// Embed configuration is used to describe what and how to embed
// This object is used when calling powerbi.embed
// It can also include settings and options such as filters
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: embedToken,
embedUrl: embedUrl,
id: reportId,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: false
}
};
$("#embedContainer").css("visibility", "hidden");
// Get a reference to the embedded report HTML element
var reportContainer = $('#embedContainer')[0];
// Embed the report within the div element
var report = powerbi.embed(reportContainer, config);
report.on("loaded", function (event) {
$("#overlay").hide();
$("#embedContainer").css("visibility", "visible");
report.off("loaded");
})
</script>
You can also add CSS to align you gif with your report:
<style>
#container{
position:absolute;
width: 1400px;
height:600px;
}
#overlay{
position:absolute;
width:inherit;
height:inherit;
}
#spinner{
display: block;
margin-top:10%;
margin-left: auto;
margin-right: auto;
width:10%;
height: 10%;
}
</style>
Further, you can refer to the following youtube link: https://www.youtube.com/watch?v=YhjtunTmnbw. This video is by the Power BI official YouTube account. In this video, you can learn how to get white-labelled embedded analytics in your application with Power BI Embedded. Discover how to hide the Power BI logo until the loaded or the rendered event, and how to use a personalized logo for the loading phase.
What the recommended way to do this, even in the article you referenced, is -
1. Hide the iframe (or the div containing it)
2. Listen to either the loaded event when using (phased loading)[https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API] or rendered otherwise
3. Show the div you hid before and voila - the embedded power bi is already loaded..
It is not currently possible to remove the PowerBI loading symbol. It would be great idea to suggest to input your own custom logo though
I just got finished implementing the solution from this question on a similar topic, but the solution is not working for me.
I'm trying to create a dashboard that uses data from a google spreadsheet but I can't seem to get it to load correctly.
I routinely get the following error message whenever I load the web page:
One or more participants failed to draw()
Here's the code I'm using right now:
<html>
<head>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(initialize);
function initialize() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/edit#gid=0');
query.send(drawDashboard)
}
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard(response) {
// Create our data table.
var data = response.getDataTable();
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, pieChart);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
</head>
<body>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
</body>
</html>
Link to the spreadsheet can be seen here: https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/edit#gid=420659822
The dashboard I'm trying to draw is taken directly from the source documentation listed here: https://developers.google.com/chart/interactive/docs/gallery/controls
I'm trying to follow the example about loading external spreadsheets here: https://developers.google.com/chart/interactive/docs/spreadsheets
The link to the working file I'm using for this project can be seen here: https://s3-us-west-2.amazonaws.com/example-server/index.html
I've tried removing all header links and styling in the previous link to verify nothing else was interfering with the visualization API and this did not solve the problem either.
Also:
Privacy for the spreadsheet is set to 'Public on the web'
The link being used in the query is taken directly from the address bar, but I also used the 'sharing link' provided by google when you prompt for it.
I'm using data that's exactly the same as the examples in the google documentation to make implementation as easily as possible.
Edit
Due to an answerer's prompt, I experiemented with different modifications of my query URL, which so far have not worked.
Here's the URL in my address bar:
URL
It's a single sheet document.
In response to the first answer, I've tried the following query URL's, but without success.
First:
https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?sheet=Sheet1
Second:
https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=0
Third:
https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws
The idea behind this last URL is that in the new google sheets the gid is the string after d/ and before /edit.
Your help is greatly appreciated.
Find your dataSourceURL at:
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/edit#gid=0');
Replace:
edit#gid=0
with:
gviz/tq?sheet=Sheet1
If that doesn't work, then you'll need to use the gid which is a unique 9 to 10 digit number. (ex. gid=1104711743). Open your sheet and look at the address bar, you should see it at the end of the url.
Your line should look like this:
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=1234567890');
I'm using the Google visualization chart in my application for drawing a line chart. It works great except one thing in the hAxis the entered number converts itself to thousands like below. I know this is happening because im trying to display huge numbers but still i would like to know if there is way to get around this?
Code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Degree Level');
data.addColumn('number', 'Graduate or professional degree');
data.addColumn('number', "Bachelor's degree");
data.addColumn('number', "Associate's degree");
data.addColumn('number', "High school or vocational training");
data.addRows([
[2, 39758,93179, 78578,49141],
[3, 100747, 300646, 220982,100456],
[4, 49964, 68022, 21092,6943],
[5, 150370, 124868, 27120,8204]
]);
var options = {
chart: {
title: 'Education Report',
subtitle: 'distributed by experience'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material"></div>
</body>
</html>
Output
Can someone let me know how can i make the hAxis to display in number?
There are two solutions to get the format that you want.
Either you use version 1 of the corecharts package :
so load the package like this :
// instead of : google.load('visualization', '1.1', {packages: ['line']});
google.load('visualization', '1', { packages: ['corechart'] });
and call your chart like this :
// instead of : var chart = new google.charts.Line(document.getElementById('linechart_material'));
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
And you'll get what you want.
See a demo jsfiddle here.
Or alternatively,
Use version 1.1 of the package (you already do in your example) like this :
google.load('visualization', '1.1', {packages: ['line']});
and then specify in your chart options the vAxis format like this :
vAxis: { format: '###,###,###' },
and load the chart this way, so that the vAxis settings are taken into account :
chart.draw(data, google.charts.Line.convertOptions(options));
That'll work too.
See a demo jsfiddle here.
The problem here is that the way options are defined has changed from v.1 to v.1.1. So if you want to use the v.1.1 package you have to call google.charts.Line.convertOptions() for your options to be interpreted correctly.
I am trying to add the column headings to the legend in this line graph, they should be the first row within the data table. The graph works fine if I remove the headings, however when I try load it with the headings I am getting nothing. Below is the output of the code that creates the input table it looks correct based on the google api example. Thanks
['Date','Species A', 'Species B'],['2013-08-27',3,1], ['2013-09-17',4,1], ['2013-08-23',1,1], ['2013-08-10',2,8]
The relevant bits of code
$result = mysqli_query($con,"SELECT * FROM Species");
while($row1 = mysqli_fetch_array($result))
{
$data1[]= "['" . $row1['Date'] . "'," . $row1['SpeciesA'] . "," . $row1['SpeciesB'] . "]";
}
$headings = "['Date','Species A', 'Species B'],";
$headingdata = $headings . implode(",\n",$data1);
echo $headingdata;
?>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart()
{
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Species A');
data.addColumn('number', 'Species B');
data.addRows([
<?php echo $headingdata;?>
]);
If you are creating the DataTable like that, you don't want to include the $headings data in the data you are passing to the DataTable's #addRows method. Those should only be included if you are using the arrayToDataTable constructor.
Most of the charts will include the column labels as the series labels in the legend by default.
If you use the solution I posted in your other question, you shouldn't have any problems with this.