Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 3, 2015 04:39
Show Gist options
  • Save anonymous/486498b9f651fd724ef1 to your computer and use it in GitHub Desktop.
Save anonymous/486498b9f651fd724ef1 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/nubijiqube
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.5.1/ember.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2> Enterprise Search report using ember</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#each item in model.reportModel}}
{{chart- chartOptions=chartOptions reportId=item.reportId series=model.graphData}}
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="components/chart-">
<div {{bind-attr id=reportId}} class="chart"></div>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
var series;
var reportData=[{"reportId":"esr1"},{"reportId":"esr2"}];
var esr1 = [{"data":[[1,2],[1,4],[3,5]],"name":"series1"},{"data":[[2,2],[3,4],[6,5]],"name":"series2"}];
var esr2=[{"data":[[5,4],[3,4],[3,7]],"name":"series1"},{"data":[[9,2],[13,4],[6,15]],"name":"series2"}];
App.IndexRoute = Ember.Route.extend({
model:function()
{
return Ember.Object.create({
reportModel:reportData,
graphData:fetchData("esr1")
//alert(this.get('reportId'));
});
}
});
App.ApplicationController=Ember.Controller.extend({
});
function fetchData(reportId)
{
if(reportId=="esr1")
{
return esr1;
}
}
App.ChartComponent = Ember.Component.extend({
chartOptions: null,
series: null,
attributeBindings: ['width', 'height','id'],
width:'300',
height:'300',
updateSeries: function () {
// TODO: a better updateSeries
console.log("update called over here");
//this.initializeChart();
},
initializeChart: function () {
var chart =chartOptions; chart.renderTo=Ember.computed.oneWay("id");
chart.series =this.get('series');
$('.chart').highcharts(chart);
},
didInsertElement: function () {
console.log('didInsertElement');
this.initializeChart();
this.addObserver('series', this, this.updateSeries);
},
willClearRender: function () {
console.log('willClearRender');
},
willDestroyElement: function () {
console.log('willDestroyElement');
this.removeObserver('series');
$('.chart').highcharts().destroy();
},
willInsertElement: function () {
console.log('willInsertElement');
},
actions:{
hover:function(obj)
{
var parent = obj.parentName;
for(var i=0;i<series.length;i++)
{
var data = series[i].data;
for(var j=0;j<data.length;j++)
{
var dataObj = data[j];
dataObj.color="red";
break;
}
break;
}
}}
});
var chartOptions = {chart:{
type: 'line',
}};
</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
var series;
var reportData=[{"reportId":"esr1"},{"reportId":"esr2"}];
var esr1 = [{"data":[[1,2],[1,4],[3,5]],"name":"series1"},{"data":[[2,2],[3,4],[6,5]],"name":"series2"}];
var esr2=[{"data":[[5,4],[3,4],[3,7]],"name":"series1"},{"data":[[9,2],[13,4],[6,15]],"name":"series2"}];
App.IndexRoute = Ember.Route.extend({
model:function()
{
return Ember.Object.create({
reportModel:reportData,
graphData:fetchData("esr1")
//alert(this.get('reportId'));
});
}
});
App.ApplicationController=Ember.Controller.extend({
});
function fetchData(reportId)
{
if(reportId=="esr1")
{
return esr1;
}
}
App.ChartComponent = Ember.Component.extend({
chartOptions: null,
series: null,
attributeBindings: ['width', 'height','id'],
width:'300',
height:'300',
updateSeries: function () {
// TODO: a better updateSeries
console.log("update called over here");
//this.initializeChart();
},
initializeChart: function () {
var chart =chartOptions; chart.renderTo=Ember.computed.oneWay("id");
chart.series =this.get('series');
$('.chart').highcharts(chart);
},
didInsertElement: function () {
console.log('didInsertElement');
this.initializeChart();
this.addObserver('series', this, this.updateSeries);
},
willClearRender: function () {
console.log('willClearRender');
},
willDestroyElement: function () {
console.log('willDestroyElement');
this.removeObserver('series');
$('.chart').highcharts().destroy();
},
willInsertElement: function () {
console.log('willInsertElement');
},
actions:{
hover:function(obj)
{
var parent = obj.parentName;
for(var i=0;i<series.length;i++)
{
var data = series[i].data;
for(var j=0;j<data.length;j++)
{
var dataObj = data[j];
dataObj.color="red";
break;
}
break;
}
}}
});
var chartOptions = {chart:{
type: 'line',
}};</script></body>
</html>
Raw
jsbin.nubijiqube.js
App = Ember.Application.create();
var series;
var reportData=[{"reportId":"esr1"},{"reportId":"esr2"}];
var esr1 = [{"data":[[1,2],[1,4],[3,5]],"name":"series1"},{"data":[[2,2],[3,4],[6,5]],"name":"series2"}];
var esr2=[{"data":[[5,4],[3,4],[3,7]],"name":"series1"},{"data":[[9,2],[13,4],[6,15]],"name":"series2"}];
App.IndexRoute = Ember.Route.extend({
model:function()
{
return Ember.Object.create({
reportModel:reportData,
graphData:fetchData("esr1")
//alert(this.get('reportId'));
});
}
});
App.ApplicationController=Ember.Controller.extend({
});
function fetchData(reportId)
{
if(reportId=="esr1")
{
return esr1;
}
}
App.ChartComponent = Ember.Component.extend({
chartOptions: null,
series: null,
attributeBindings: ['width', 'height','id'],
width:'300',
height:'300',
updateSeries: function () {
// TODO: a better updateSeries
console.log("update called over here");
//this.initializeChart();
},
initializeChart: function () {
var chart =chartOptions; chart.renderTo=Ember.computed.oneWay("id");
chart.series =this.get('series');
$('.chart').highcharts(chart);
},
didInsertElement: function () {
console.log('didInsertElement');
this.initializeChart();
this.addObserver('series', this, this.updateSeries);
},
willClearRender: function () {
console.log('willClearRender');
},
willDestroyElement: function () {
console.log('willDestroyElement');
this.removeObserver('series');
$('.chart').highcharts().destroy();
},
willInsertElement: function () {
console.log('willInsertElement');
},
actions:{
hover:function(obj)
{
var parent = obj.parentName;
for(var i=0;i<series.length;i++)
{
var data = series[i].data;
for(var j=0;j<data.length;j++)
{
var dataObj = data[j];
dataObj.color="red";
break;
}
break;
}
}}
});
var chartOptions = {chart:{
type: 'line',
}};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment