I want to plot a Google Graph to visualize the results of a query.
Can anyone please help me ? I have included my code below. Thanks
models.py
class InventoriesApplication(models.Model):
ROADMAPS = (
('R', 'Retire'),
('SU', 'Sustain'),
('ST', 'Strategic')
)
app_name = models.CharField(max_length=45)
roadmap = models.CharField(max_length=2, choices=ROADMAPS, null = True)
views.py
import json
I used the following code to serialize my query:
def render_chart(request):
total= InventoriesApplication.objects.values("roadmap").annotate(total=Count('id'))
return HttpResponse(json.dumps(list(total), cls=DjangoJSONEncoder),content_type='charts.html')
and now I have the following array:
charts.html
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = google.visualization.arrayToDataTable({{ total }});
// Set chart options
var options = {'title':'Roadmaps'};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
...
Related
I have a list of a few hundred Twitter oembed URLs but I don't know how to implement the GET requests of a list of ids in a view.
Edited - OP was using URLS, not ids.
<div class="tweets">
{% for id in ids %}
<script language="JavaScript" type="text/javascript">
$(".tweets").append(<div id="tweet" tweetID={{ id }}>)
</script>
<script sync src="https://platform.twitter.com/widgets.js"></script>
<script>
window.onload = (function(){
var tweet = document.getElementById("tweet");
var id = tweet.getAttribute("tweetID");
twttr.widgets.createTweet(
id, tweet,
{
conversation : 'none', // or all
cards : 'hidden', // or visible
linkColor : '#cc5443', // default is blue
theme : 'light' // or dark
})
.then (function (el) {
el.contentDocument.querySelector(".footer").style.display = "none";
});
});
</script>
{% endfor %}
</div>
I'm trying to loop through a list of tweet ids and embed them. How do I make the JQuery loop through to create a div for each list item?
RapydML and Rapydscript
are what I was looking for. First, I created a nodeenv env. Now, I'm rewriting the above code in pythonic javascript and pythonic html.
Earlier I used to use 'loadReport' from javascript which is not working with new PBI Premium, e.g. the below is not working anymore & it always says "This content isn't available". BTW this is still working for PBI embedded reports.
<html>
<body>
<iframe id="iFrameEmbedReport"></iframe>
</body>
<script type="text/javascript">
window.onload = function () {
var iframe = document.getElementById('iFrameEmbedReport');
iframe.src = 'https://app.powerbi.com/reportEmbed?reportId=******-088f-4967-***-279bd5a**df&groupId=*****-****-4033-862d-1cd4f4fa72c1';
iframe.onload = function()
{
var m = {
action: 'loadReport',
accessToken: 'H4s*****'
};
message = JSON.stringify(m);
iframe = document.getElementById('iFrameEmbedReport');
iframe.contentWindow.postMessage(message, "*");
};
};
</script>
</html>
But if we use powerbi.js with the same configs its working fine (below)
<html>
<body>
<div id="reportContainer"></div>
</body>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script type="text/javascript">
window.onload = function () {
var accessToken = '******************';
var embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=**********&groupId=**********';
var embedReportId = '*****-088f-****-aa2d-279bd5a662df';
var models = window['powerbi-client'].models;
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: models.Permissions.All,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
var reportContainer = $('#reportContainer')[0];
var report = powerbi.embed(reportContainer, config);
}
</script>
</html>
Not able to figure out what has changed. I really don't want to include powerbi.js in my application if not needed. I know I have a working copy but really need to understand what has changed and if there is any way I can avoid powerbi.js. End goal is to use the first approach in UWP App.
Thanks
The main thing that's changed in the 2 approaches is the property TokenType.Embed which is not available in the 'old way', i.e. 'loadReport' message format.
This is a deprecated way of communicating with embedded entities from Power BI, and all users are encouraged to write their code against the new and maintained Javascript SDK: https://microsoft.github.io/PowerBI-JavaScript/
The 'loadReport' way work for backward compatibility concerns but you won't be able to write new code in new methods using this way.
In this example google charts table is given a date of 1/1/16 and displays 12/31/15. Do I need to use some kind of timezone or something?
<div id="chart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart', 'table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'dt');
data.addRows([[new Date("2016-01-01")]]);
var view = new google.visualization.DataView(data);
var table = new google.visualization.Table(document.getElementById('chart'));
table.draw(data);
}
</script>
not related to google-visualization, the real answer is here...
Why does Date.parse give incorrect results?
use format such as '01/01/2016' to get expected results...
I'm trying to use google visualization api in jboss seam 2 project.
I have created a simple example which is actually taken from Google Quick Start page.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
When I open it as file in web browser it works nicely. But when I put it to my Jboss Seam 2 project and open in web browser, it generates an error message "b[c] is undefined" on red background.
And here what I see when I open page source in browser:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/MCMS/a4j/g/3_3_3.Final/org/ajax4jsf/framework.pack.js" type="text/javascript"></script>
<script src="/MCMS/a4j/g/3_3_3.Final/org/richfaces/ui.pack.js" type="text/javascript"></script>
<link class="component" href="/MCMS/a4j/s/3_3_3.Final/org/richfaces/skin.xcss/DATB/eAGTKJ8eErp8hjQADcsDKg__" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
As you can see Jboss Seam adds some other script srcs for a4j.
Is it possible that a4j javascript conflicts with google visualization api javascript?
Is there any idea how to resolve this?
Finally found the solution here
Google charts error:Cannot read property 'length' of undefined; Debugging error in Google Charts
and here
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=501 .
Adding the following hack in the beginning of the script:
Array.prototype.reduce = undefined;
or more gracefully:
Array.prototype.reduce=function(fun){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;if(len==0&&arguments.length==1)throw new TypeError;var i=0;if(arguments.length>=2)var rv=arguments[1];else{do{if(i in this){var rv=this[i++];break}if(++i>=len)throw new TypeError;}while(true)}for(;i<len;i++)if(i in this)rv=fun.call(undefined,rv,this[i],i,this);return rv};
solves the problem!
this is my code:
<html>
<title>report</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function soso(){
var data_flow = new google.visualization.DataTable();
data_flow.addColumn('string', 'Version');
data_flow.addColumn('number','flow');
data_flow.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options = {width: 2200, height: 540,title: ''};
var chart_flow= new google.visualization.LineChart(document.getElementById('checkin-column'));
chart_flow.draw(data_flow, options);
}
function loveu()
{
var data_flow_1 = new google.visualization.DataTable();
data_flow_1.addColumn('string', 'Version');
data_flow_1.addColumn('number','flow');
data_flow_1.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options5 = {width: 2200, height: 540,title: ''};
var chart_flow_1= new google.visualization.LineChart(document.getElementById('redemption-table'));
chart_flow_1.draw(data_flow_1, options5);
}
function drawChart() {
soso();
loveu();
}
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<h4>dfs</h4><br>
<br><br>
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
</body>
</HTML>
When I delete: "< h4 > dfs < / h4 >" I get the charts working fine in iexplorer, but when I don't delete it, the first chart work fine but the second one the axis of it doesn't appear!! Try it and you will see that (on Internet Explorer).
I need a help in solving this issued, I am facing strange behavior of these charts when there is more than one in the same page
Problem: I have 3 charts on a page but the axis for the 3rd chart are not showing in IE
Resolution: I have the 3 divs as separate rows in a table and all 3 charts are now showing their axis!
Hope this helps.
Cheers