I am a newbie. Please tell what is wrong with the following JavaScript, which cannot display function, many thanks.
var car = {
size: "small",
color: "red",
show: function() {
console.log("This is my " + car.size);
}
};
show();
var car = {
size: "small",
color: "red",
show: function() {
console.log("This is my " + car.size);
}
};
car.show();// You should call like this
You have to Use car.show()
Try it and then Reply me in cmnts what is your output
var car = {
size: "small",
color: "red",
show: function() {
console.log("This is my " + car.size);
}
};
car.show(); // reffer to object first and then to your func
Related
Hello I have loaded one calendar using below code.
dataFactory.httpRequest('getCalanderTaskData','GET').then(function(data) {
$scope.taskCalanderDailyTask = data.dailyTask;
$scope.taskCalanderDueTask = data.dueTask;
$scope.fullCalendarEventSources = {
dailyTask : {
events:$scope.taskCalanderDailyTask,
textColor : '#000',
backgroundColor: '#FFD000',
},
dueTask : {
events:$scope.taskCalanderDueTask,
textColor : '#fff',
backgroundColor: '#da1445',
}
};
$('#fullcalendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
},
eventMouseover: function(calEvent, jsEvent, view) {
var tooltip = '<div class="tooltipevent" style="color:#fff;width:100px;height:50px;background:#125688;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
var $tooltip = $(tooltip).appendTo('body');
$(this).mouseover(function(e) {
$(this).css('z-index', 10000);
$tooltip.fadeIn('500');
$tooltip.fadeTo('10', 1.9);
}).mousemove(function(e) {
$tooltip.css('top', e.pageY + 10);
$tooltip.css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},
eventLimit: 3,
eventSources: [$scope.fullCalendarEventSources.dailyTask, $scope.fullCalendarEventSources.dueTask],
});
});
Above code load first time calendar now when any new task going to added I want to refresh calendar event source without reload page.
Below is the code for saveTask Inside that I have written code for dynamic event source which also remove source and added source but it not update newly added tasks.
$scope.saveTask = function(){
$scope.form.taskLeadId = $scope.leadId;
$scope.form.taskId = $scope.editTaskId;
if($scope.form.taskLeadId != "undefined" && $scope.form.taskLeadId != "")
{
dataFactory.httpRequest('taskCreate','POST',{},$scope.form).then(function(data) {
if(data.status == 1)
{
alertify.notify(data.message, 'success', 5, function(){});
$scope.addTask.$setPristine();
$scope.addTask.$setUntouched();
$scope.form = {};
$(".modal").modal("hide");
getDailyTaskData();
getCalanderTaskData();
console.log("updateed=="+$scope.taskCalanderDailyTask);
$scope.fullCalendarEventSources = {
dailyTask : {
events:$scope.taskCalanderDailyTask,
textColor : '#000',
backgroundColor: '#FFD000',
},
dueTask : {
events:$scope.taskCalanderDueTask,
textColor : '#fff',
backgroundColor: '#da1445',
}
};
$timeout(function () {
$('#fullcalendar').fullCalendar('removeEventSource',$scope.fullCalendarEventSources.dailyTask);
console.log("updateed=="+$scope.taskCalanderDailyTask);
$('#fullcalendar').fullCalendar('addEventSource',$scope.fullCalendarEventSources.dailyTask);
$('#fullcalendar').fullCalendar('refetchEventSources',$scope.fullCalendarEventSources.dailyTask);
$('#fullcalendar').fullCalendar('rerenderEvents');
$('#fullcalendar').fullCalendar('refetchEvents');
$('#fullcalendar').fullCalendar('refresh');
$('#fullcalendar').fullCalendar('updateEvents',$scope.fullCalendarEventSources.dailyTask);
$('#fullcalendar').fullCalendar('rerenderEvents');
$('#fullcalendar').fullCalendar('refetchEvents');
$('#fullcalendar').fullCalendar('refresh');
console.log("after update==");
});
//alertify.alert('Task', 'Congratulations your task is created successfully!');
}
else
{
if($scope.editTask = "edit")
{
alertify.alert('Task Update','Nothing is updated');
}
else
{
alertify.alert('Error', data.message,function(){ alertify.error(data.message)});
$(".modal").modal("hide");
}
}
});
}
else
{
alertify.alert('Error', 'There must be something went wrong please try again later');
$(".modal").modal("hide");
}
}
Any one please help on this.
I am adding a plugin which insert twitter embed code. the problem is that I can see the tweet on the editor but not in the source code and preview. And I can't save it. I saw in forum that I have to add 'http:' to '//platform.twitter.com/widgets.js' and put it before , unfortunately, it's not working. This is the code I put:
tinymce.PluginManager.add('twitter', function(editor, url) {
editor.on('init', function (args) {
editor_id = args.target.id;
});
editor.addButton('twitter', {
text: 'Twitter',
icon: false,
onclick: function () {
editor.windowManager.open({
title: 'Twitter Embed',
body: [
{ type: 'textbox',
size: 40,
height: '100px',
name: 'twitter',
label: 'twitter'
}
],
onsubmit: function(e) {
var embedCode = e.data.twitter;
var script = embedCode.match(/<script.*<\/script>/)[0];
var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
console.log(script);
var sc = document.createElement("script");
sc.setAttribute("src", "https:"+scriptSrc);
sc.setAttribute("type", "text/javascript");
var iframe = document.getElementById(editor_id + "_ifr");
var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];
var iframeBody = iframe.contentWindow.document.getElementsByTagName('body')[0];
embedCode1 = embedCode.replace('//platform.twitter.com/widgets.js','https://platform.twitter.com/widgets.js');
iframeBody.appendChild(sc);
editor.insertContent(embedCode1);
iframeHead.appendChild(sc);
// setTimeout(function() {
// iframe.contentWindow.twttr.widgets.load();
// }, 1000)
}
});
}
});
});
I am trying to draw highcharts with the json response, however I can able to draw for the first time, but unable to update the series with new data
function get_chart(data) {
//alert('hello..' + data);
return {
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
var monthStr = Highcharts.dateFormat('%b', this.value);
var firstLetter = monthStr.substring(0, 1);
return firstLetter;
}
}
},
title: {
text: data.measurementName
},
chart: {
height: 300,
width: 500,
type: 'column',
zoomType: 'x'
},
credits: {
enabled: false
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
console.log ('Category: '+ this.category +', value: '+ this.y);
}
}
}
}
},
series: [{
name: 'Hours',
data: (function() {
var chart = [{key:data.measurementName, values:[]}];
var i = 0;
if(typeof(data) == 'string')return chart;
for(n in data.values){
data.values[n].snapshot = new Date(data.values[n].snapshot);
data.values[n].value = parseInt(data.values[n].value);
}
chart[0].values = data.values.map(function(arrayObj){
return [arrayObj.value]
});
return chart[0].values;
})()
}]
};
}
and I am calling this function like
$scope.renderChart = function(measurement){
$scope.showChart = false;
restApp.getMeasurementForCompID(comp.id, measurement.id).then(function(data){
console.log(data);
$scope.example_chart = get_chart(data);
console.log($scope.example_chart);
$scope.showChart = true;
});
}
Here getMeasurementForCompID is another function which gets the data from database.
What is the problem here? any help..
I used https://github.com/pablojim/highcharts-ng
I just alter the data object and the highcharts reflects the change.
I have a question related the chart export.
Please see Jsfiddle here
I added a text label using chart.renderer.text on the Yaxis for the latest value of series.
If I directly click button "Export Image". There is no problem, the label can be displayed. I'm using the following way to export image. draw_labels() is a function to draw yaxis label.
$("#b").click(function () {
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
draw_labels(this);
}
}
}
});
});
The problem is after I clicked range selector or change Xaxis range. When I try to export the
chart to image, there is no labels are drawn. The following is the complete code.
The following is the complete code:
$(function () {
var chart;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: function () {
draw_labels(this);
$("#b").click(function () {
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
draw_labels(this);
}
}
}
});
});
}
}
},
series: [{
name: 'AAPL',
id: 'test',
data: data,
tooltip: {
valueDecimals: 2
}
}],
navigator: {
enabled: false
},
yAxis: {
tickWidth: 0,
id: 'value_axis',
type: 'linear',
gridLineColor: '#EEE',
lineColor: '#D0CDC9',
lineWidth: 0,
minorTickInterval: null,
opposite: true,
offset: 0
},
xAxis: {
events: {
afterSetExtremes: function (e) {
console.log('test');
$('[id="test_text"]').remove();
draw_labels(chart);
}
}
}
});
});
function draw_labels(chart) {
$(chart.series).each(function (i, serie) {
var s_id = serie.options.id;
var temp_id = s_id;
var point = serie.points[serie.points.length - 1];
if (point) {
var pre, post;
if (point.y) {
var last_value_dis = (point.y).toFixed(1);
yaxis_name = 'value_axis';
//Get Yaxis position
var y_axis = chart.get(yaxis_name);
offsite_yaxis = 0;
element_text = chart.renderer.text(
//the text to render
'<span style="font-size:10px;font-weight:bold;color:' + serie.color + ';">' + last_value_dis + '</span>',
//the 'x' position
y_axis.width + y_axis.offset,
//the 'y' position
chart.plotTop + point.plotY + 3).attr({
id: temp_id + '_text',
zIndex: 999
}).add();
}
}
});
}
});
Here, I have fixed it for you. Here is a saved image:
Following changes have been done:
Added a redraw event to your exportchart
redraw: function () {
$("#test_text").remove() ;
draw_labels(this);
}
Changed this line in afterSetExtremes
$('[id="test_text"]').remove();
to
$("#test_text").remove() ;
Earlier one was not working as expected, so I had to change it.
Problem with disappearing text is related with id, when I removed it, label appears. But then I came across second issue, wrong y position. So i declare global variable, then when you call your function, set position of label, and use in chart exporting this variable. As a result label is exported correct.
http://jsfiddle.net/UGbpJ/11/
I wrote this code to create chart, table and toolbar.
google.load("visualization", "1", { packages: ["corechart"] });
google.load('visualization', '1', { packages: ['table'] });
//google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "GET",
url: '#Url.Action("GunlukOkumalar", "Enerji")',
data: "startDate=" + $('#start_date').val() + "&endDate=" + $('#end_date').val() + "&sayac_id=" + $("#sayaclar").val(), //belirli aralıklardaki veriyi cekmek için
success: function (result) {
if (result.success) {
var evalledData = eval("(" + result.chartData + ")");
var opts = { curveType: "function", width: '100%', height: 500, pointSize: 5 };
new google.visualization.LineChart($("#chart_div").get(0)).draw(new google.visualization.DataTable(evalledData, 0.5), opts);
$('#chart_div').show();
var visualization;
var data;
var options = { 'showRowNumber': true };
data = new google.visualization.DataTable(evalledData, 0.5);
// Set paging configuration options
// Note: these options are changed by the UI controls in the example.
options['page'] = 'enable';
options['pageSize'] = 10;
options['pagingSymbols'] = { prev: 'prev', next: 'next' };
options['pagingButtonsConfiguration'] = 'auto';
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, options);
var components = [
{ type: 'html', datasource: data },
{ type: 'csv', datasource: data }
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
return false;
}
else {
$('#chart_div').html('<span style="color:red;"><b>' + result.Error + '</b></span>');
$('#chart_div').show();
$('#table').html('<span style="color:red;"><b>' + result.Error + '</b></span>');
$('#table').show();
return false;
}
}
});
}
Google example
function drawToolbar() {
var components = [
{type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
userprefs: {'3d': 1}},
{type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
{type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
{type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
userprefs: {'3d': 1},
style: 'width: 800px; height: 700px; border: 3px solid purple;'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
};
Google get dataSource from url, but I get dataSource dynamicly from controller. When I try to export It forwards page to another page like this:
http://localhost:49972/Enerji/%5Bobject%20Object%5D?tqx=out%3Acsv%3B
How can I use exporting toolbar for dynamic Json data? Is there any example about this topic?
I also had this problem and after a lot of trawling I found this!
https://developers.google.com/chart/interactive/docs/dev/implementing_data_source
I haven't implemented it yet but I reckon it's the way to go.