I am working on the below demo. Why am I not able to add id sample to the object? I am trying to control the element style through css but it is not working
var paper = Raphael("container", 500, 300);
var dot = paper.circle(50, 50, 30).attr({
stroke: "#000",
"stroke-width": 5
}).data("id", "sample");
#sample{
fill:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="container"></div>
The problem is data() doesn't refer to svg attributes on an element, but custom data on a Raphael element, that it can access.
If you want to set the id attribute, you would need to try one of the following...
set the 'id' within the attr({}) definition you are using (however, iirc some versions of Raphael don't work with that), if not you would need to do
dot.attr({ 'id', 'sample' }); // or try the following
dot.node.setAttribute('id', 'sample'); // or
dot.node.id = 'sample';
Related
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 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.
Goal: use Raphael.js to draw data chart/lines in web2py framework.
What I have learned from http://raphaeljs.com/ is that, I just need to include the JS into the HTML page and then I can use the APIs. But here is what I have done:
(1) First, I copied both raphael.js and raphael-min.js to myapp\static\js folder.
(2) Then I wrote these in the HTML file:
<script type="text/javascript" src="{{=URL('static','js/raphael.js')}}">
window.onload = function() {
var paper = new Raphael(0, 0, 100, 100);
var circle = paper.circle(50, 50, 50);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
}
</script>
This file is periodically loaded to a div in the index.html.
I expected a circle could be shown but nope, though I was very sure this page was periodically loaded.
Did I do anything wrong here (of course I did)? Thanks for your help!
Try using separate script tags to load the library and then run your code:
<script type="text/javascript" src="{{=URL('static','js/raphael.js')}}"></script>
<script>
window.onload = function() {
var paper = new Raphael(0, 0, 100, 100);
var circle = paper.circle(50, 50, 50);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");
}
</script>
I'm not sure if this is exactly your question but instead of importing just one and then writing the other in the file, you can do it all in one src assigning like so:
<script type="text/javascript" src="{{=URL('static','js/raphael.js')}} {{=URL('static', 'other_function.whatever_extension}}">
This will import both scripts. You can add as many as you wish and even change the paths.
I have the following;
<asp:Repeater runat="server" ID="Repeater">
<ItemTemplate>
<sc:image field="image from droplink" Item='<%# Container.DataItem %>' runat="server" />
</ItemTemplate>
"Image from droplink" is a droplink selected value (a Sitecore content item). Within this item, there is a field "Image" which is the actual media item i want the source of. So the above does not work, as this field just returns the GUID of the content item.
How do I get the image src from the Image field of the droplink selected item in the above repeater?
You'll need to populate the Item or Datasource property on the sc:Image tag with the actual item containing the Image field. Item would be an Item object, whereas Datasource can be an ID or path. I think the following should do it.
<sc:Image runat="server" Field="image field" Datasource="<%# ((Item)Container.DataItem)["droplink field"] %>" />
The following answer assumes that the droplink on the Context Item points to a Media Item. (Prior to questioner clarification). Might be useful for someone else.
You'll need to use an asp:Image and a OnItemDataBound handler in your code behind, and use e.Item.DataItem (where e is RepeaterItemEventArgs) to get the item being bound. Ensure e.ItemType is a ListItemType.Item. From there it will be something like...
var item = (Item)e.Item.DataItem;
var dropLink = new InternalLinkField(item.Fields["image from droplink"]);
var mediaItem = dropLink.TargetItem;
if (mediaItem != null)
{
var options = new MediaOptions { Height = 100, Width = 100 }; //change to your dimensions
var imageUrl = MediaManager.GetMediaUrl(new MediaItem(mediaItem), options);
var imageControl = e.Item.FindControl("myImageControlID"); //change to asp:Image ID
imageControl.ImageUrl = imageUrl;
imageControl.AlternateText = mediaItem.Alt;
}
If you are supporting Page Editor (I hope you are!), within a repeater you can use Edit Frames to allow editing of the image on each item. (Note that the linked example puts an edit frame around a whole ListView, whereas you'll want to place it within your Repeater and databind the Datasource property to the current item ID.)
I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.