I'm new to the Raphael, so I'm trying to learn some things through the tutorials that are available.
I'm stuck with a problem, where I simply copy/paste the Source Code from Raphael's site:
http://g.raphaeljs.com/piechart2.html
I right-clicked to see the source code and I copy/pasted in my notepad++. I did add the needed JS and CSS files, everything is the same.
MY CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css" media="print">
<script src="raphael-min.js"></script>
<script src="g.raphael-min.js"></script>
<script src="g.pie-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="pie"></div>
<script>
<script type="text/javascript">
window.onload = function () {
var r = Raphael("holder"),
pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
/*pie.hover(function () {
this.sector.stop();
this.sector.scale(1.1, 1.1, this.cx, this.cy);*/
/*if (this.label) {
this.label[0].stop();
this.label[0].attr({ r: 7.5 });
this.label[1].attr({ "font-weight": 800 });
}
}, function () {
this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
if (this.label) {
this.label[0].animate({ r: 5 }, 500, "bounce");
this.label[1].attr({ "font-weight": 400 });
}*/
});
};
</script>
</head>
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
<div id="holder"></div>
<p>
Pie chart with legend, hyperlinks on two first sectors and hover effect.
</p>
<p>
Demo of gRaphaël JavaScript library.
</p>
</body>
</html>
Ignore the "commented lines", this was me trying to debugg my problem. I get the background, but the chart just won't display.
Any help would be appreciated.
You should check for your browser settings for Active x controls.There might be appearing a prompt message by the browser when you try to load the page.
Something like:-
"To help protect your security,Internet Explorer has restricted this page from running scripts or ActiveX controls that could access your computer.click here for options..."
You need to click on the message & select option- 'Allow Blocked Contents'
As I don't see any problem with your canvas creation or the coordinates.
Give your canvas dimensions.
Instead of:
var r = Raphael("holder"),
Try using:
var r = Raphael("holder", 0, 0, 520, 440),
Related
I'm using mo.js library for animations and other effects and noticed that I must place the script tag
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
at the end of body because if I place it at the head element then I'm getting null reference error "mojs is undefined".
The error occurs in javascript file where I'm using this particular library to create an animation:
const polygon = new mojs.Shape({
parent: '#cell1',
shape: 'polygon',
points: 5,
fill: { 'deeppink' : '#00F87F' },
x: { 'rand(-100%, -200%)' : 0 },
angle: { 0: 'rand(0, 360)' },
radius: 25,
duration: 2000,
repeat: 999,
}).play();
Could anyone explain why I'm getting this error when script is in head but when it's in body it's working as intended?
It doesn't depend on whether or not you put in your body, it just matters that you load mojs before using it. Depending on where you use mojs, you can place the script tag in the head.
<head>
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
<script>
console.log(mojs); // mojs is defined
</script>
</head>
<head>
<script>
console.log(mojs); // is not defined
</script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
</body>
<body>
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
<script>
console.log(mojs); // is defined
</script>
</body>
It should work fine if you include the library in head or at the bottom of page.
If you are using mojs functions before it's loaded on page, you will get the error. if you wait for the library to be available, then using it will be fine.
When you move the library inclusion to the bottom, the DOM gets rende
const polygon = new mojs.Shape({
parent: '#cell1',
shape: 'polygon',
points: 5,
fill: {
'deeppink': '#00F87F'
},
x: {
'rand(-100%, -200%)': 0
},
angle: {
0: 'rand(0, 360)'
},
radius: 25,
duration: 2000,
repeat: 999,
}).play()
#cell1 {
height: 200px
}
<head>
<script src="https://cdn.jsdelivr.net/npm/#mojs/core"></script>
</head>
<body>
<div id="cell1"></div>
</body>
I've got a piechart that works perfectly fine on desktop. It retrieves data from an AJAX request and stores the data/json it gets. Selected data is then pushed into the chart. I am using Thymeleaf & Spring in but thats not relevant here I believe.
Everything is rendered fine on my page when I access it through Safari or chrome on mobile, however the graph is not present.
I've tried changing responsive true/false, maintaingAspectRatio false/true, playing with other options provided in the chart.js documentation. Changed the viewport, set my width on the container of the canvas rather than the canvas it self and a whole bunch of other stuff.
Could it be due to the load order? i.e the page is loaded before it can actually get the information from the request? However, that would mean that it shouldn't be working on desktop either.
Here is some code
myGraph.js
$(document).ready(function () {
var id = $.url(2);
$.ajax({
url: "hosturl/a/b/" + id + "/c/d",
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
var count = [];
var days = [];
for (var i in data) {
days.push(data[i][1]);
count.push(data[i][0]);
}
var chartdata = {
labels: days,
datasets: [
{
label: "By day",
backgroundColor: "#4dc3ff",
borderWidth: 2,
hoverBackgroundColor: "#009",
hoverBorderColor: "#099",
hoverBorderWidth: 5,
data: count
}
]
};
var ctx = $("#daysGraph");
var pieChart = new Chart(ctx, {
type: 'pie',
data: chartdata,
options: {
responsive: true,
legend: {
display: true,
position: 'right',
labels: {
fontColor: "#000"
}
}
}
});
},
error: function (data) {
}
});
graph.html (most of the other html is cut out out, but this on its own doesn't work)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-
scale=1,maximum-scale=7"/>
<title>Hmm</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="../../javascript/Chart.min.js" th:href="#{/Chart.min.js}"/>
<script src="../../javascript/js-url-2.5.0/url.js" th:href="#{/url.js}" ></script >
<link rel="stylesheet" href="../static/css/graph.css" th:href="#{/css/graph.css}"/>
<script src="../../javascript/myGraph.js" th:href="#{/myGraph.js}" />
</head>
<body>
<div class="chart-container">
<canvas id="daysGraph" ></canvas>
</div>
</body>
</html>
graph.css
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
On the live server it looks like this
Any advice is welcome
Turned out there was something wrong with the api-route on mobile vs dektop relating to localhost. Therefore my data wasn't being fetched from the api and thus wouldn't populate the chart which is why it is not displaying on mobile. In other words, I was looking in the wrong places for an answer.
I've had similar problems myself, I resolved my issue by playing around with the borderWidth in order to get it working across all devices. Try changing it several times to see if it has any impact at all.
I'm testing out OpenSeadragon to see how it can handle a custom tile source. I've also turned on the navigator. However the thumbnail image does not show up in the navigator. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>OpenSeaDragon (OSD) Custom Tile Sources Test</title>
</head>
<body>
<div id="custom_tilesource" style="width: 800px; height: 600px;"></div>
<script src="libs/openseadragon/openseadragon.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
showNavigator: true,
navigatorSizeRatio: 0.25,
id: "custom_tilesource",
prefixUrl: "libs/openseadragon/images/",
wrapHorizontal: false,
tileSources: {
height: 9425,
width: 9426,
tileSize: 512,
maxLevel: 14,
minLevel: 10,
getTileUrl: function( level, x, y ){
var strSources = "W3siQXR0cmlidXRlcyI6eyJPcGVyYXRpb24iOiJTdW0ifSwiSWQiOm51bGwsIlR5cGUiOiJJbWFnZSJ9LHsiQXR0cmlidXRlcyI6e30sIklkIjoiMjIwOSIsIlR5cGUiOiJJbWFnZUlkIn1d";
var strSampleRegion = 161;
var handlerURL = "/MultiOmyxU/handler.ashx?X=" + x + "&Y=" + y + "&Level=" + level + "&Sources=" + strSources + "&Reason=SampleRegion=" + strSampleRegion;
return handlerURL;
}
}
});
</script>
</body>
</html>
If anyone has had a similar problem please let me know as I am unsure as how to proceed to fix this issue.
Interesting. I assume it works if you use a DZI instead of a custom tilesource? Are you seeing any errors in the console? Do you have a link you can share?
I recommend posting this to the OpenSeadragon issues:
https://github.com/openseadragon/openseadragon/issues
Someone might be able to help you there.
I'm trying to display piechart in UIWebview of my iOS xcode project, for that I'm using jqplot with HTML, CSS and JavaScript, the issue I face is JavaScript file "devicepiechart.js" is loading from the html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
function load()
{
alert("I am an loading scripts!");
}
</script>
<script src="devicepiechart.js"></script>
</head>
<body onload= "load()">
</body>
</html>
The load() function alert is shown properly without any problem. I could detect that my .js file is not loading as I have the alert("string"); function in my .js file too for debugging.
UPDATED devicepiechart.js, and I hope the external .js file may not have any error, because I have the source from this http://www.jqplot.com/tests/pie-donut-charts.php
$(document).ready(function()
{
alert("good");
var data = [
['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];
var plot1 = jQuery.jqplot ('chart1', [data],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
Include jquery before the other js loads
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Just load all your .js files into "copy bundle resources" of project Targets "bulid phases" , now the piechart is running successfully in ios simulator.
I am new to Raphael and am trying to do something very simple, but failing miserably.
I am trying to replicate the animation at this link This is the code I have so far:
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src=" src="jquery-1.7.2.js"></script>
</head>
<body>
<div id="draw-here-raphael" style="height: 200px; width: 400px; background: #666;">
</div>
<script type="text/javascript">
//all your javascript goes here
var r = new Raphael("draw-here-raphael", 400, 200),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"});
// Note JQuery is adding the mouseover. SVG == html nodes
$(rect.node).mouseover(function () {
if (position === 'left') {
rect.animate({x: 300, y: 100}, 400, "<>");
position = 'right';
} else {
rect.animate({x: 20, y: 20 }, 800, "bounce");
position = 'left';
}
});
// Make that sucker rotate
setInterval(function () {
rect.rotate(1);
}, 10);
</script>
</body>
</html>
I have downloaded jquery and have it in the same folder as the Raphael. The code that isn't working is the commented code talking about jquery adding the mouseover. When I add that code the rectangle doesn't rotate anymore. It is just stationary. If someone can please help me with this animation I would appreciate it.
Thanks
You have an error in your code:
<script src=" src="jquery-1.7.2.js"></script>
Change it to:
<script src="jquery-1.7.2.js"></script>
That should correct your problem with jQuery.