I would like to be able to change the chart type of charts using dimple.js by using a variable. I want for instance to switch from bars to lines. I've tried with no success, it seems simple however! Any idea?
Below is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
</head>
<body>
<div id="chartContainer">
<script type="text/javascript">
var chartType = "line";
var chartDimple = "dimple.plot." + chartType;
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.csv("data/test.csv", function (data) { //d3.tsv("data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
// myChart.addSeries(null, dimple.plot.bar);
myChart.addSeries(null, chartDimple);
myChart.draw();
});
</script>
</div>
</body>
</html>
You are passing a string to myChart.addSeries instead of a dimple.plot object. To make it dynamic you would need to reference the static object you're looking for on the dimple.plot object :
var chartType = "line";
var chartDimple = dimple.plot[chartType];
myChart.addSeries(null, chartDimple);
https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.plot#static-objects
Related
I used Google Custom Search API in my project and I try to detect the following events:
Enter is pressed in the search input box;
Search button is hit;
A option is selected from the recommendation list.
I have done a lot of searches, however, my code can only capture the first event. If anyone can point me to a right direction, this will be much appreciated.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<h3 align="center">My Search</h3>
</div>
<div>
<script>
(function () {
var cx = 'xxxx:xxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<script>
function addExtraParams(){
alert($("input.gsc-input").val()); //For debugging only
};
$(document).ready(function(){
setTimeout(
function(){
$( 'input.gsc-input' ).keyup( function(e){
if ( e.keyCode == 13 ) {
addExtraParams();
}
});
$( 'input.gsc-search-button' ).click(function(){
addExtraParams();
});
$( 'input.gsc-completion-container' ).click(function(){
addExtraParams();
});
}, 1000
);
});
</script>
<gcse:search></gcse:search>
</div>
</body>
</html>
I'm trying to display a simple dgrid as per the first demo on this page:
http://dgrid.io/tutorials/1.0/grids_and_stores/
The only trick is that I'm trying to put it inside an existing structure of containers. So I tried the onFocus event of the container, but when I click on that container, the grid is not showing, and no console.log message appears.
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
<script type='dojo/on' data-dojo-event='onFocus'>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</div>
I could make it work by:
setting the id of the div to 'grid'
adding a "Click me" span (or I had nothing to focus on)
changing the event name from 'onFocus' to 'focus'
Then, the grid appears when you click on the 'Click me' text (to activate focus).
Below the corresponding full source page (for my environment):
<!DOCTYPE HTML><html lang="en">
<head>
<meta charset="utf-8">
<title>Neal Walters stask overflow test</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">
</head>
<body class="claro">
<div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
<span>click me!</span>
<script type='dojo/on' data-dojo-event='focus'>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
//dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</div>
<script src="dojo-release-1.12.2-src/dojo/dojo.js" data-dojo-config="async:true"></script>
<script type="text/javascript">
require(["dojo/parser", "dojo/domReady!"],
function(parser){
parser.parse();
});
</script>
</body>
The above is using declarative syntax. Alternatively, you may consider going programmatic, as in the source code below where the grid appears on loading the page. Also whereas with the declarative syntax above a breakpoint inside the script is ignored (using firefox), it is activated as expected with the programmatic syntax:
<!DOCTYPE HTML><html lang="en">
<head>
<meta charset="utf-8">
<title>Neal Walters stask overflow test</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">
</head>
<body class="claro">
<div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'></div>
<script src="dojo-release-1.12.2-src/dojo/dojo.js" data-dojo-config="async:true"></script>
<script>
require([
'dstore/RequestMemory',
'dgrid/OnDemandGrid'
], function (RequestMemory, OnDemandGrid) {
// Create an instance of OnDemandGrid referencing the store
var dom = require('dojo/dom');
console.log("onFocus event for CustomersGrid ContentPane");
//dom.byId('studentLastname').value = 'test onFocus event';
var grid = new OnDemandGrid({
collection: new RequestMemory({ target: 'hof-batting.json' }),
columns: {
first: 'First Name',
last: 'Last Name',
totalG: 'Games Played'
}
}, 'grid');
grid.startup();
});
</script>
</body>
i am trying to develop a multipage app where i will be able to load many page but my task is to when loading page #2 i need the page2 function hello to run.
when clicking on func "change" i am able to load page2 but i need to run function "hello".
main.js
var pagesHistory = [];
var currentPage = {};
var path = "";
var busyIndicator = null;
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pageload").load(path + "pages/page1.html", function(){
$.getScript(path + "js/page1.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<div id="pageload">
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
page1.js
currentPage = {};
currentPage.init = function(){
WL.Logger.debug("Page1 :: init");
};
function funchange()
{
$("#pageload").load(path + "pages/page2.html");
}
page1.html
<script>
$.getScript(path + "js/page1.js");
</script>
<input type="button" value="click" onclick="funcchange();">
Page2.js
currentPage = {};
currentPage.init = function(){
WL.Logger.debug("Page2 :: init");
};
function hello()
{
alert("hello");
}
page2.html
<script>
$.getScript(path + "js/page2.js");
</script>
You can simply create a function in main.js:
function wlCommonInit() {
...
...
}
function test() {
alert ("test");
}
Then in Page2.js, simply call test();.
Do any standards require that the type of the status parameter in the XMLHttpRequest's readystatechange event is "number"?
SockJs-0.3.4 expects to be able to say
if (status === 200) {
but when running under Intel XDK's App Framework, the type of the status is "string".
Who is mistaken?
Here is a small test case that shows the problem:
<!DOCTYPE html>
<html>
<head>
<script src='intelxdk.js'></script>
<script src='cordova.js'></script>
<script src='xhr.js'></script>
<script type="application/javascript" src="js/appframework.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').click(function () {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://graph.facebook.com/", true);
xhr.onreadystatechange = function() {
switch (xhr.readyState) {
case 4:
var status = xhr.status;
alert("Type of status is: "+typeof status+". Status is: "+status+". 'status===400' is "+(status===400)+".");
break;
}
};
xhr.send();
});
});
</script>
</head>
<body>
<input type="button" id="test" value="test"/>
</body>
</html>
Driving directions are not supported in MapKit. so I think I can show driving direction in a webview. I am showing google maps in uiwebview, but it shows the whole site I just want to show only map part with some zoom so that it looks like original maps application of iphone. Also I don't know if this breaks the apple's Human Interface Guidelines(HIG) Rules, tell me if it is.
Load a string like this as an NSString (maybe strip the newlines). You can change the latitude and longitude, zoom level etc with stringWithFormat
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.000, 139.000);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">
</body>
</html>
Then set your UIWebViews html to that. It will give you a page with just a map on it, allow you to scroll with your finger or zoom in, pinch zoom, and place a marker.
Use this to load the HTML:
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL
Here you go. Pass it through a stringWithFormat with twice the origin lat long and once the destination lat long, all of them as float:
[NSString stringWithformat:... , oriLat,oriLon,oriLat,oriLon,destLat,destLon];
and then pass it into a UIWebView
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
function initialize() {
var latlng = new google.maps.LatLng(%f, %f);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = new google.maps.LatLng(%f, %f);
var end = new google.maps.LatLng(%f, %f);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:300px; height:300px">
</body>
</html>