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.
Related
I'm using chart.js for first time and I'm facing problem in drawing graph. When I run this code, Graph axis are shown only but bars are not shown until I minimize or change browser window size. This is happening every time. Maybe this has to do with responsiveness. Any help about what I'm doing wrong here. I'm using visual studio and chrome for rendering graph.
let labels=[]
let duration=[]
let file="assets/duration.csv";
d3.csv(file).then(
function (loaddata) {
for (let i = 0; i < loaddata.length; i++) {
//console.log(loaddata.hours)
if (loaddata[i].hours != 0)
{
duration.push(loaddata[i].hours)
labels.push(loaddata[i].Trend)
}
}
//console.log(labels)
//console.log(duration)
}
);
let options={
type: 'bar',
responsive: true,
title: {
display:true,
text:'Duration of Trending Tweets'
},
data: {
labels:labels,
datasets:[{
data: duration,
label: 'Hours',
backgroundColor:["#3e95cd"]
}]
}
};
let chart=new Chart(document.getElementById('canvas'),options);
<!DOCTYPE html>
<html lang="en">
<head>
<script src="chart.min.js"></script>
<script src ="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js">
</script>
<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first website</title>
</head>
<body>
<h1>Hello world</h1>
<div>
<canvas id="canvas" style="position: relative; height:40vh; width:80vw">
</canvas>
</div>
<script src="index.js">
</script>
</body>
</html>
The problem is that you create the chart before the CSV data is loaded. Be aware that the d3.csv request is processed asynchronously.
This can be solved by creating the chart only once the CSV data is fully loaded (at the end and inside of d3.csv(file).then( ... ).
An alternative approach is described in this answer.
I am trying to figure out how to create a FancyBox 3 gallery from, say a folder of 128 pictures for instance. How would I do that? I have tried to create it myself, but have had no luck. I read another StackOverflow answer, but it was from a earlier version of FancyBox, So I could not figure it out.
Here is the old link:
JS to automatically make a fancybox Gallery
Here is the new documentation for FancyBox 3 with the API Info:
https://fancyapps.com/fancybox/3/docs/#api
Here is my Example Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FancyBox JavaScript Gallery from Folder</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<!-- Your HTML content goes here -->
<a id="Gallery_A" href="javascript:;" class="btn btn-primary">Gallery A</a>
<!-- JS -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
<script>
$("#Gallery_A").on('click', function() {
$.fancybox.open([
//Image 1
{
src : '_assets/_images/gallery_a/0.jpg',
type : 'image',
opts : {
//caption : 'Image 1',
//thumb : '_assets/_images/gallery_a/0.jpg'
}
},
// Lets say this folder has 128 images in it
// Clearly I dont want to do this 128 times
// So I need a JavaScript For Loop
//Image 128
{
src : '_assets/_images/gallery_a/127.jpg',
type : 'image',
opts : {
//caption : 'Image 128',
//thumb : '_assets/_images/gallery_a/127.jpg'
}
}
], {
loop : true,
thumbs : {
autoStart : true
}
});
});
</script>
</body>
</html>
Any help would be greatly appreciated.
Actually, you could easily port that answer to v3, you would just need to replace href with src and $.fancybox(..) to $.fancybox.open(..).
Here is a (slightly different) demo - https://codepen.io/anon/pen/MqKpPL?editors=1010
I use EnhancedLegendRenderer plugin for my jqPlot charts, however I am unable to get it working for Pie charts.
If I click on the legend labels, they don't show or hide series. Here is jsFiddle example.
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberColumns: 3,
seriesToggle: true
},
show: true
}
Has anybody came across and found a solution?
The answer of Merrily somehow correct, ZingChart looks good and have such functionality out of the box, but jqPlot is free and open source.
I rewrote jqPlot Pie Chart plugins and now the Pie chart from your example will work. Here is my blog post with explanation what I changed.
Download these 2 files:
extendedPieRenderer.js (it replaces jqplot.pieRenderer.js)
enhancedPieLegendRenderer.js (it replaces
jqplot.enhancedLegendRenderer.js)
And use them like this code:
<script type="text/javascript" src="jquery.jqplot.js"></script>
<script type="text/javascript" src="extendedPieRenderer.js"></script>
<script type="text/javascript" src="enhancedPieLegendRenderer.js"></script>
<script type="text/javascript">
...
var plot = $.jqplot('chart', data, {
seriesDefaults: {
renderer: $.jqplot.PieRenderer
},
legend: {
renderer: $.jqplot.EnhancedPieLegendRenderer
}
});
...
</script>
I also created this jsFiddle which you can open and verify that showing and hiding works: http://jsfiddle.net/19vzL5h2/1/
I'm not sure how tied to jqPlot you are, but many libraries have this sort of option baked in. Highcharts has it (and is free in most cases if that is your concern) and I saw it in AmCharts recently too.
It is also available through the ZingChart JavaScript charting library. I've made a demo with the toggle legend for you to try.
<html>
<head>
<script src="https://blog.pint.com/include_files/zingchart-html5-min.js"></script>
<script src="http://cdn.zingchart.com/zingchart-core.min.js"></script>
<script>zingchart.MODULESDIR="http://cdn.zingchart.com/modules/";</script>
<meta charset="utf-8">
<title>Pie chart with legend</title>
</head>
<div id="zc"></div>
<script>
var piedemo ={
"type":"pie",
"plot":{
"value-box":{
"text":"%v"
}
},
"series":[
{
"text":"Apples",
"values":[5]
},
{
"text":"Oranges",
"values":[8]
},
{
"text":"Bananas",
"values":[22]
},
{
"text":"Grapes",
"values":[16]
}
],
"legend":{
"header":{
"text":"Click an item to toggle"
},
"layout":"x4",
"marker":{
"type":"circle",
"size":4,
"border-color":"#333"
}
}
};
zingchart.render({
id: 'zc',
data: piedemo,
height: 400,
width: 400
});
</script>
</body>
</html>
I'm on the ZingChart team so if you have any questions on this demo, please feel free to reach out.
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),
I am creating an Android app using Phonegap.
I have installed phonegap using the commands on their website.
Everything is up and running with the SDK and Emulator.
Now when I run the example camera script from their website to get it working before I start cusotmising it.
Everytime I run the code below (even though I have the file linked to phonegap.js) it keeps throwing an error. I mean the script runs as far as the HTML and showing the buttons, but when the button is clicked nothing happens and in the log it says: Cannot read property 'DATA_URL' of undefined.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<title>Retouch</title>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoFileSuccess(imageData) {
// Get image handle
console.log(JSON.stringify(imageData));
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
function capturePhotoEdit() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.Camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: pictureSource
});
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<!-- Navigation bar -->
<div class="fixed">
<nav class="top-bar fixed" data-topbar>
<ul class="title-area">
<li class="name">
<h1 class="navmsg">
<script>
var Digital=new Date()
var hours=Digital.getHours()
if (hours>=5&&hours<=11)
document.write('<b>Good Morning.</b>')
else if (hours==12)
document.write('<b>Good Afternoon.</b>')
else if (hours>=13&&hours<=17)
document.write('<b>Good Afternoon.</b>')
else if (hours>=18&&hours<=20)
document.write('<b>Good Evening.</b>')
else if (hours>=21&&hours<=11)
document.write('<b>Hello!</b>')
else
document.write('<b>Hello!</b>')
</script>
</h1>
</li>
<li class="toggle-topbar menu-icon">Account</li>
</ul>
</nav>
</div>
<button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
<button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>`
I have tried to use the following:
<script type="text/javascript" src="phonegap.js"></script>
and
<script type="text/javascript" src="cordova.js"></script>
Nothing seems to work.
I have changed the following in capturePhoto() and capturePhotoEdit() from:
destinationType.DATA_URL
to
Camera.DestinationType.DATA_URL
Still no luck with the functionality. I suspect it has something to do with the cordova plugin and phonegap, as I only have phonegap.js included in the script. I'm also reading about settings in the config.xml, which I have done through command line (unless I have done it wrong) following the docs.
I have built the application by CL:
phonegap build android
The following code with cordova-2.5.0.js and destinationType.FILE_URI added has successfully enabled the getPhoto() functions and allows me to display the photos in library/album.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="phonegap.js"></script>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<title>Retouch</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
//alert(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
alert("inside large image")
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail,
{ quality: 20, allowEdit: true,
destinationType: destinationType.FILE_URI });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<!-- Navigation bar -->
<div class="fixed">
<nav class="top-bar fixed" data-topbar>
<ul class="title-area">
<li class="name">
<h1 class="navmsg">
<script>
var Digital=new Date()
var hours=Digital.getHours()
if (hours>=5&&hours<=11)
document.write('<b>Good Morning.</b>')
else if (hours==12)
document.write('<b>Good Afternoon.</b>')
else if (hours>=13&&hours<=17)
document.write('<b>Good Afternoon.</b>')
else if (hours>=18&&hours<=20)
document.write('<b>Good Evening.</b>')
else if (hours>=21&&hours<=11)
document.write('<b>Hello!</b>')
else
document.write('<b>Hello!</b>')
</script>
</h1>
</li>
<li class="toggle-topbar menu-icon">Account</li>
</ul>
</nav>
</div>
<button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
<button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I tried adding 'destinationType.FILE_URI' to capturePhoto() and capturePhotoEdit() functions, but they still don't seem to work.
I have now tried the following three types:
destinationType.FILE_URI
destinationType.DATA_URI
Camera.desitnationType.DATA_URI
None of them seem to make a difference.
That is a Javascript error. You are trying to access a property of an undefined variable. This line (in the capturePhoto and capturePhotoEdit methods):
destinationType.DATA_URL
should be:
Camera.DestinationType.DATA_URL
One more thing: With Cordova it is always good to have the docs at hand, and have a look at them each time you are using a new plugin, or when you upgrade to a newer version (they tend to change the API frequently, hence the examples found in Google usually show legacy code). Here you have the Camera plugin documentation.
In my case when I pause the execution Camera has getPicture() method but not DestinationType and PictureSourceType propreties.
$scope.tomarFoto = function(){
$ionicPlatform.ready(function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.cameraimage = "data:image/jpeg;base64," + imageData;
}, function (err) {
console.log('Failed because: ' + message);
});
});
UPDATED
Just I got recently the same problem.
If did you add the camera plugin and all the permissions needed, mainly you did all the Phonegap Api steps. I think you'r solution pass for go to you'r project folder and execute phonegap build or phonegap build app_platform.
First save you'r project data cause that command line reset the estructure of the project and delete the files you add.
Make me know if that works for you too, good luck.