我的app.js文件包含这样的代码
App = Ember.Application.create();
App.Router.map(function() {
this.resource('about');
this.resource('posts');
});
App.PostsRoute = Ember.Route.extend({
model: function() {
timeLineData(posts);
//return posts;
}
});
function timeLineData(posts) {
var flag = 0;
var itemarray = [];
var jsonarray = posts;
if($.isArray(jsonarray)) {
for (var i = 0; i < jsonarray.length; i += 1) {
var count = 1;
var startDate = jsonarray[i].date;
var s_date = startDate.split(" ");
var start_date = s_date[0].split("-");
for(var j = i+1; j < jsonarray.length; j+=1) {
var endDate = jsonarray[j].date;
var e_date = endDate.split(" ");
var end_date = e_date[0].split("-");
if((start_date[0] <= end_date[0]) || (start_date[1] <= end_date[1]) || (start_date[2] <= end_date[2]) ) {
if($.inArray(s_date[0], itemarray) < 0) {
itemarray[i] = s_date[0];
}
if($.inArray(e_date[0], itemarray) < 0) {
itemarray[i+1] = e_date[0];
}
flag = 1;
break;
}
break;
}
if(flag == 0) {
// itemarray[0] = startDate
}
}
for (item = 0; item < itemarray.length; item++) {
var filtered_json_array = [];
if (itemarray[item] != null) {
listDate = itemarray[item].split("-");
for (var i = 0; i < jsonarray.length; i += 1) {
var startDate = jsonarray[i].date;
var s_date = startDate.split(" ");
var start_date = s_date[0].split("-");
if((start_date[0] == listDate[0]) && (start_date[1] == listDate[1]) && (start_date[2] == listDate[2])) {
filtered_json_array[i] = jsonarray[i];
}
}
drawChart(filtered_json_array, listDate, "example3.1");
}
}
}
}
function drawChart(jsonarray, listDate, containerId) {
var container = document.getElementById(containerId);
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
var defaultDateFormat = new google.visualization.DateFormat({pattern: "HH:mm"});
var timearr = [];
var k = 0;
for (var i = 0; i < jsonarray.length; i += 1) {
if (jsonarray[i] != null) {
k = k+1;
var count = 1;
var startDate = jsonarray[i].date;
var s_date = startDate.split(" ");
var start_date = s_date[0].split("-");
for(var j = i+1; j < jsonarray.length; j+=1) {
var endDate = jsonarray[j].date;
var e_date = endDate.split(" ");
var end_date = e_date[0].split("-");
if(((start_date[0] == listDate[0]) && (start_date[1] == listDate[1]) && (start_date[2] == listDate[2]))) {
if(jsonarray[i].emailId == jsonarray[j].emailId) {
dataTable.addRow([jsonarray[i].emailId,jsonarray[i].pageId, new Date(startDate), new Date(endDate)]);
timearr[k-1] = "UserId:-" + jsonarray[i].userId + "\n"+ "target:-" + jsonarray[i].target + "\n" + "SectionName:- " + jsonarray[i].sectionName + "\n" + "assignmentName:-" + jsonarray[i].assignmentName
+ "\n" + "ISBN:-" + jsonarray[i].isbn + "\n" + "CourseName:-" + jsonarray[i].courseName + "\n" + "Ip Address:-" + jsonarray[i].ipaddress;
count = 2;
break;
}
}
}
if(count ==1) {
timearr[k-1] = "UserId:-" + jsonarray[i].userId + "\n"+ "target:-" + jsonarray[i].target + "\n" + "SectionName:- " + jsonarray[i].sectionName + "\n" + "assignmentName:-" + jsonarray[i].assignmentName
+ "\n" + "ISBN:-" + jsonarray[i].isbn + "\n" + "CourseName:-" + jsonarray[i].courseName + "\n" + "Ip Address:-" + jsonarray[i].ipaddress;
dataTable.addRow([jsonarray[i].emailId, jsonarray[i].pageId, new Date(startDate), addMinutes(new Date(startDate),5)]);
}
}
}
defaultDateFormat.format(dataTable,2);
defaultDateFormat.format(dataTable,3);
var colors = [];
var colorMap = {
LibraryHome: "Yellow",
loginPage: "Blue",
StudentSectionHome: "Red",
StudentPerformanceReport: "Purple",
TimeSpentReport: "Grey",
CourseFileList: "Pink",
Ebook: "Brown",
GroupAssignment: "Orange",
Logout: "Green"
};
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var options = {
//scaleType: 'maximized',
tooltip: {
trigger: 'none'
},
timeline: {
colorByRowLabel: colors,
},
hAxis: {
format: 'HH:mm',
title: 'Time',
},
// avoidOverlappingGridLines: true,
chartArea:{left:0,top:0,width:"100%",height:"100%"},
width: "1200",
};
chart.draw(dataTable, options);
//google.visualization.events.addListener(chart,'onmouseover', usefulHandler);
google.visualization.events.addListener(chart, 'onmouseover', function(event) {
//$('#example3.1').prop('title',timearr[event.row]);
document.getElementById(containerId).title = timearr[event.row];
// alert(event.row);
});
}
var posts =[
{
"userId": 0,
"emailId": "student1@tricon.com",
"date": "2014-09-20 7:37:08 AM",
"target": "Logintrack",
"sectionId": 0,
"assignmentId": 0,
"courseId": 0,
"ipaddress": "192.168.1.112",
"pageId": "loginPage"
},
{
"userId": 8213,
"emailId": "student1@tricon.com",
"role": "Nil",
"date": "2014-09-20 7:43:39 AM",
"target": "Anilsection11",
"sectionId": 686086,
"sectionName": "Anilsection11",
"assignmentId": 0,
"assignmentName": "Nil",
"isbn": "16598927",
"courseId": 536101,
"courseName": "MG1",
"ipaddress": "192.168.1.112",
"pageId": "StudentSectionHome"
},
{
"userId": 8213,
"emailId": "student1@tricon.com",
"role": "Nil",
"date": "2014-09-20 7:48:39 AM",
"target": "LibraryHome",
"sectionId": 686086,
"sectionName": "Anilsection11",
"assignmentId": 0,
"assignmentName": "Nil",
"isbn": "16598927",
"courseId": 536101,
"courseName": "MG1",
"ipaddress": "192.168.1.112",
"pageId": "StudentPerformanceReport"
},
{
"userId": 8213,
"emailId": "student1@tricon.com",
"role": "Nil",
"date": "2014-09-20 7:59:03 AM",
"target": "Logout",
"sectionId": 515578476,
"sectionName": "Mc Connell section1",
"assignmentId": 0,
"assignmentName": "Nil",
"isbn": "15562355",
"courseId": 515578475,
"courseName": "Economics Mc Conell -1",
"ipaddress": "192.168.1.112",
"pageId": "Logout"
},
{
"userId": 0,
"emailId": "student@tricon.com",
"date": "2014-09-20 7:39:08 AM",
"target": "Logintrack",
"sectionId": 0,
"assignmentId": 0,
"courseId": 0,
"ipaddress": "192.168.1.112",
"pageId": "loginPage"
},
{
"userId": 8213,
"emailId": "student@tricon.com",
"role": "Nil",
"date": "2014-09-20 7:49:39 AM",
"target": "Anilsection11",
"sectionId": 686086,
"sectionName": "Anilsection11",
"assignmentId": 0,
"assignmentName": "Nil",
"isbn": "16598927",
"courseId": 536101,
"courseName": "MG1",
"ipaddress": "192.168.1.112",
"pageId": "StudentSectionHome"
},
{
"userId": 8213,
"emailId": "student@tricon.com",
"role": "Nil",
"date": "2014-09-20 7:55:03 AM",
"target": "Logout",
"sectionId": 515578476,
"sectionName": "Mc Connell section1",
"assignmentId": 0,
"assignmentName": "Nil",
"isbn": "15562355",
"courseId": 515578475,
"courseName": "Economics Mc Conell -1",
"ipaddress": "192.168.1.112",
"pageId": "Logout"
},
{
"userId": 0,
"emailId": "student1@tricon.com",
"date": "2014-09-21 7:37:08 AM",
"target": "Logintrack",
"sectionId": 0,
"assignmentId": 0,
"courseId": 0,
"ipaddress": "192.168.1.112",
"pageId": "loginPage"
},
{
"userId": 0,
"emailId": "student@tricon.com",
"date": "2014-09-21 7:37:08 AM",
"target": "Logintrack",
"sectionId": 0,
"assignmentId": 0,
"courseId": 0,
"ipaddress": "192.168.1.112",
"pageId": "loginPage"
},
{
"userId": 0,
"emailId": "student@tricon.com",
"date": "2014-09-21 7:37:08 AM",
"target": "Logintrack",
"sectionId": 0,
"assignmentId": 0,
"courseId": 0,
"ipaddress": "192.168.1.112",
"pageId": "TimeSpentReport"
},
{
"userId": 8213,
"emailId": "student1@tricon.com",
"role": "Nil",
"date": "2014-09-21 7:43:39 AM",
"target": "Anilsection11",
"sectionId": 686086,
"sectionName": "Anilsection11",
"assignmentId": 0,
"assignmentName": "Nil",
"isbn": "16598927",
"courseId": 536101,
"courseName": "MG1",
"ipaddress": "192.168.1.112",
"pageId": "StudentSectionHome"
},
{
"userId": 8298,
"emailId": "student1@tricon.com",
"role": "Nil",
"date": "2014-09-21 8:23:34 AM",
"target": "Logout",
"sectionId": 515578476,
"sectionName": "Mc Connell section1",
"assignmentId": 0,
"assignmentName": "Nil",
"isbn": "15562355",
"courseId": 515578475,
"courseName": "Economics Mc Conell -1",
"ipaddress": "192.168.1.112",
"pageId": "TimeSpentReport"
},
];
我的索引.html就像这样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
'version':'1.1','packages':['timeline']}]}"></script>
</head>
<body>
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Blogger</a>
<ul class="nav">
<li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="posts">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<table class='table'>
<thead>
<tr><th>Recent Posts</th></tr>
</thead>
<tbody>
<div id="example3.1" ></div>
{{#each model}}
<tr>
<td>
{{emailId}} <small class='muted'>clicked {{target}}</small>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="span9">
{{outlet}}
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" id="about">
<div class='about'>
<p>
Yehuda Katz is a member of the <a href="http://emberjs.com">Ember.js</a>, <a href="http://rubyonrails.org">Ruby on Rails</a>
and <a href="http://www.jquery.com">jQuery</a> Core Teams; he spends his daytime hours at the startup he founded,
<a href="http://www.tilde.io">Tilde Inc.</a>.
</p>
<p>
Yehuda is co-author of best-selling <a href="http://affiliate.manning.com/idevaffiliate.php?id=485_176">jQuery in Action</a> and
<a href="http://affiliate.manning.com/idevaffiliate.php?id=485_145">Rails 3 in Action</a>.
</p>
<p>
He spends most of his time hacking on open source—his main projects, along with others, like <a href="https://github.com/wycats/thor">Thor</a>,
<a href="http://www.handlebarsjs.com">Handlebars</a> and <a href="https://github.com/carlhuda/janus">Janus</a>—or traveling the world doing evangelism work.
</p>
<p>He can be found on Twitter as <a href="http://www.twitter.com/wycats">@wycats</a>.</p>
</div>
<div class='about'>
<p>My name is Tom Dale. I helped create <a href="http://www.emberjs.com/">Ember.js</a>, a JavaScript framework that brings sanity to the web.</p>
<p>In October of 2011, I co-founded <a href="http://www.tilde.io">Tilde</a> with Yehuda Katz, Leah Silber and Carl Lerche.</p>
<p>In my spare time I run a cash-for-beer exchange program at many local San Francisco dive bars.</p>
</div>
</script>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="js/app.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
如果您看到该帖子的模板，我不知道如何在此显示谷歌图表。 我可以在此创建带有id的div，但是如何让googlechart在其上调用drawchart。如果你看到app.js文件，在这里我可以直接发送可以放入循环和显示数据的json数据，我想要的是我想将这些数据传递给我的函数里面调用google chart drawchart方法。但是如何让这个图表在特定的div上被摧毁。 我完全是ember.js的新手，想要一些帮助或想法让它解决。