I am using J Vector Map (http://jvectormap.com/documentation/javascript-api/) to create a map of the United States.
What I want to be able to do is have a button for each state that you can click on and have the corresponding region in the map be selected (or unselected, if it already was selected). I am trying to use map.setSelectedRegion for this, but I can't get any of the code to work. Currently trying map.setSelectedRegion("US-CA") to no avail.
Any ideas on what to do?
Thanks!
There seem to be a lot of request for linking links with jvectormap.
I've put together a jsfiddle here: http://jsfiddle.net/3xZ28/117/
HTML
<ul id="countries">
<li>Romania</li>
<li>Australia</li>
</ul>
<div id="world-map" style="width: 600px; height: 400px"></div>
JS
var wrld = {
map: 'world_mill_en',
regionStyle: {
hover: {
"fill": 'red'
}
}
};
function findRegion(robj, rname) {
var code = '';
$.each(robj, function (key) {
if ( unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname)) ) {
code = key;
};
});
return code;
};
$(document).ready(function () {
$('#world-map').vectorMap(wrld);
var mapObj = $('#world-map').vectorMap('get', 'mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type,
cntrycode = findRegion(mapObj.regions, $(elem).text());
if (evtype === 'mouseover') {
mapObj.regions[cntrycode].element.setHovered(true);
} else {
mapObj.regions[cntrycode].element.setHovered(false);
};
});
});
Once you've set the handle
var mapObject = $('#your_map_div_id').vectorMap('get', 'mapObject');
Just use the built in function setSelectedRegions (mind the "s"):
mapObject.setSelectedRegions(your_region_code); //to set
mapObject.setSelectedRegions({your_region_code:false}); //to unset
If it still doesn't work, post your code, maybe it's something else.
This code is outdated, below is updated version of the code, according jvectormap latest API. Here is demo snippet:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jqvmap.min.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.vmap.min.js"></script>
<script src="jquery.vmap.world.js"></script>
<script>
jQuery(document).ready(function () {
$('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#2f95c9',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: false,
regionsSelectable: false,
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
}
});
var mapObj = $('#vmap').data('mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type;
if (evtype === 'mouseover') {
mapObj.select($(elem).attr('id'));
} else {
mapObj.deselect($(elem).attr('id'));
};
});
});
</script>
</head>
<body>
<ul id="countries">
<li><a id="RO" href="">Romania</a></li>
<li><a id="AU" href="">Australia</a></li>
</ul>
<div id="vmap" style="width: 100vw; height: 100vh;"></div>
</body>
</html>
Related
I try to automate the CMS using robot framework, I got the XPath using firepath, I'm able to locate the element in Firefox, if I refresh the page, I couldn't locate the same XPath,I thought XPath got changed, but I got the same XPath when I try to get after page refresh,
IN SHORT again:
1) Got the Xpath, say "A"
2) Refresh the page
3) try to locate the element using "A".but it shows no element found
4) Get the new XPath, say "B"
5) Both A and B are same if I try now with A it works,
I need to automate this scenario, Thanks for your time.
I tried Frame too.
Note:
Every time after refresh element gets hidden until the click operation takes place.
<document>
<html style="height: 100%; overflow: hidden;">
<head>
**xpath**<body id="m_bodyElem" class="Gecko Gecko54 ENUS cms-bootstrap ui-layout-container" style="position: relative; height: 100%; overflow: hidden; margin: 0px; padding: 0px; border: medium none;">
<form id="aspnetForm" method="post" action="./CMSAdministration.aspx">
<div class="aspNetHidden">**xpath**
***
</document>
AFTER DOM ACTIVATION
<document>
<html>
<head>
<body id="m_bodyElem" class="Gecko Gecko54 ENUS cms-bootstrap">
<form id="aspnetForm" method="post" action="./UIPage.aspx?elementguid=a5568855-b030-47ff-801a-d524618a2ca7&displaytitle=false" onsubmit="if (window.Loader) { window.Loader.submitForm(1000, false); }; return true;">
<div class="aspNetHidden">
<script type="text/javascript"> //<![CDATA[ var theForm = document.forms['aspnetForm']; if (!theForm) { theForm = document.aspnetForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script>
<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZBvGXq_vBGigUCFpfznup-OhZmSOTsQXuUy4Gn5GLidTPeGZMHkjMcSO21b0MZpf4w2&t=636160552680000000" type="text/javascript"/>
<script type="text/javascript"> //<![CDATA[ function CloseDialog(refreshPage) { // Check that the document content has not been changed without saving. Stop closing the dialog when user decides to save the content. if (window.CheckChanges && !CheckChanges()) { return false; } if (typeof(refreshPage) === "undefined") { refreshPage = true; } try { // IE9 fix - wopener doesn't have to be available if(refreshPage && window.wopener && window.wopener.RefreshWOpener) { wopener.RefreshWOpener(window); } } catch(err) {} var canClose = true; if (window.onCloseDialog) { canClose = window.onCloseDialog(); } if (canClose) { if(top.closeDialog && (top != window)) { setTimeout(function(){ if(top && top.closeDialog && (top != window)){ top.closeDialog(window) } }, 1); } else { top.close(); } } return false; } //]]> </script>
<script type="text/javascript"> //<![CDATA[ function GetTop(){ if(top.getTop) { return top.getTop(window); } else { return top; } } //]]> </script>
<script src="/CMSPages/GetResource.ashx?scriptfile=%2fCMSScripts%2fUI%2fUIPage.js" type="text/javascript"/>
<script type="text/javascript"> //<![CDATA[ function ToggleDiv(label){ var div = $cmsj(label).parent(); var image = div.find('.ToggleImage'); var hiddenField = image.next(); var affectedElements = div.find('.editing-form-category-caption').next(); if(hiddenField.val() == 'True') { div.removeClass('Collapsed'); hiddenField.val('False') image.attr('src', '/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2fCMSModules%2fCMS_PortalEngine%2fWebpartProperties%2fminus.png'); affectedElements.show(); } else { div.addClass('Collapsed'); hiddenField.val('True'); image.attr('src', '/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2fCMSModules%2fCMS_PortalEngine%2fWebpartProperties%2fplus.png'); affectedElements.hide(); } } //]]> </script>
<script type="text/javascript"> //<![CDATA[ function modalDialog(url, name, width, height, otherParams, noWopener, forceModal, forceNewWindow, setTitle) { // Header and footer is greater than before, increase window size accordingly if (typeof(height) === "number") { height += 66; } // Set default parameter values if (setTitle == undefined) { setTitle = true; } if (forceModal == undefined) { forceModal = true; } if (otherParams == undefined) { otherParams = 'toolbar=no,directories=no,menubar=no,modal=yes,dependent=yes,resizable=yes'; } var advanced = false; try { advanced = window.top.AdvancedModalDialogs; } catch (err) { } if (advanced && !forceNewWindow) { window.top.advancedModal(url, name, width, height, otherParams, noWopener, forceModal, setTitle, this); } else { var dHeight = height; var dWidth = width; if (width.toString().indexOf('%') != -1) { dWidth = Math.round(screen.width * parseInt(width, 10) / 100); } if (height.toString().indexOf('%') != -1) { dHeight = Math.round(screen.height * parseInt(height, 10) / 100); } var oWindow = window.open(url, name, 'width=' + dWidth + ',height=' + dHeight + ',' + otherParams); if (oWindow) { oWindow.opener = this; oWindow.focus(); } } } //]]> </script>
<script type="text/javascript"> //<![CDATA[ var applicationUrl = '/'; var imagesUrl = '/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2f'; var isRTL = false; //]]> </script>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fBootstrap%2fbootstrap.min.js" type="text/javascript"/>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fBootstrap%2fbootstrap.custom.js" type="text/javascript"/>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fControls%2fcontextmenu.js" type="text/javascript"/>
<script type="text/javascript"> //<![CDATA[ menuSettings['cg0_motheractions'] = { activecss : 'unigrid-action-menuactive', inactivecss : '', activecssoffset : 0, button : 'Both', vertical : 'Bottom', offsetx : 0, offsety : 0, horizontal : 'Left', dynamic : false, mouseover : false, level : 0, rtl : false, up : false }; CM_Init('cg0_motheractions'); function ContextMenuAsyncCloser_cg0_motheractions(sender, args) { HideContextMenu('cg0_motheractions',true); } RegisterAsyncCloser(ContextMenuAsyncCloser_cg0_motheractions); //]]> </script>
<script type="text/javascript"> //<![CDATA[ function ContextExportObject(definition, backup) { var query = ''; if (backup) { query += '&backup=true'; } modalDialog(applicationUrl + 'CMSModules/ImportExport/Pages/ExportObject.aspx?objectType=' + escape(definition[0]) + '&objectId=' + definition[1] + query, 'ExportObject', 750, 230); } function ContextRestoreObject(definition, backup) { var query = '&ug=UG_m_c_plc_lt_ctl01_ST_UI_Listing_gridElem'; if (backup) { query += '&backup=true'; } modalDialog(applicationUrl + 'CMSModules/ImportExport/Pages/RestoreObject.aspx?objectType=' + escape(definition[0]) + '&objectId=' + definition[1] + query, 'RestoreObject', 750, 400); } function ContextCloneObject(definition) { modalDialog(applicationUrl + 'CMSModules/Objects/Dialogs/CloneObjectDialog.aspx?objectType=' + escape(definition[0]) + '&objectId=' + definition[1], 'CloneObject', 750, 470); } //]]> </script>
<script type="text/javascript"> //<![CDATA[ menuSettings['cg0_mActions'] = { activecss : 'unigrid-menu-panel', inactivecss : 'unigrid-menu-panel', activecssoffset : 0, button : 'Both', vertical : 'Bottom', offsetx : 0, offsety : 0, horizontal : 'Left', dynamic : false, mouseover : false, level : 0, rtl : false, up : false }; CM_Init('cg0_mActions'); function ContextMenuAsyncCloser_cg0_mActions(sender, args) { HideContextMenu('cg0_mActions',true); } RegisterAsyncCloser(ContextMenuAsyncCloser_cg0_mActions); //]]> </script>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fjquery%2fjquery-dialog.js" type="text/javascript"/>
<script src="/ScriptResource.axd?d=x6wALODbMJK5e0eRC_p1LReXSSMeIyuHkoW0S0JbeJThyUVM1Ht4tiF1s3IQMCFhPQK_xpltR2WGldkDgz-jn22orun3s0371LlvE1PAZKjo6kObtvOl-fuKz6i7Aya00&t=7c776dc1" type="text/javascript"/>
<script src="/ScriptResource.axd?d=P5lTttoqSeZXoYRLQMIScL2FKbXixpOQbTl1EIUzR5PmuwyrWWddMW5IgYL1QiI9_cn_1H5B6OyKNQvmWuhRMgoFqxMQlu84DtMU2tQiSt_N7pheWxn0ZjjBaQY6SWz90&t=7c776dc1" type="text/javascript"/>
<script type="text/javascript"> //<![CDATA[ var CMS = CMS || {}; CMS.Application = { "applicationName": "PIM", "imagesUrl": "/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2f", "isDebuggingEnabled": false, "contexthelp": { "contextHelp": { "application": { "description": null, "helpTopics": [] }, "helpTopics": [] }, "suppressContextHelp": false }, "applicationUrl": "/", "isDialog": false, "isRTL": "false" }; //]]> </script>
<div class="aspNetHidden">
<script type="text/javascript"> //<![CDATA[ Sys.WebForms.PageRequestManager._initialize('m$manScript', 'aspnetForm', ['tm$c$plc$lt$ctl00$HeaderActions$headerElem$pnlUp','','tm$c$plc$lt$ctl01$ST_UI_Listing$gridElem$a$pnlUpdate','','tm$c$ctxM','','tm$pM$pMP','','tm$c$plc$lt$ctl01$MessagesPlaceholder$plcMess$pMP','','tm$c$plc$lt$ctl01$ST_UI_Listing$gridElem$plcMess$pMP',''], [], [], 90, 'm'); //]]> </script>
<div id="m_pnlBody" class="PageBody">
<div id="m_pM_pMP"/>
<div id="m_c_m"/>
<div id="m_c_ctxM">
<div id="UIHeader" class="UIHeader">
<div id="m_c_plc_lt_ctl00_HeaderActions_headerElem_pnlUp">
<div id="m_c_plc_lt_ctl00_HeaderActions_headerElem_pnlActions" class="header-actions-container">
<button id="m_c_plc_lt_ctl00_HeaderActions_headerElem_headerElem_HA_0" class="btn btn-primary" type="button" name="m$c$plc$lt$ctl00$HeaderActions$headerElem$headerElem_HA_0" value="New Product Type" onclick="window.open('/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=6e43429b-1086-4669-8130-9ee24ebb1d21&displaytitle=false','_self'); return false;__doPostBack('m$c$plc$lt$ctl00$HeaderActions$headerElem$headerElem_HA_0','')">New Product Type</button>
</div>
<div id="m_c_plc_lt_ctl00_HeaderActions_headerElem_pnlAdditionalControls" class="dont-check-changes "/>
</div>
<div id="m_c_plc_lt_ctl00_HeaderActions_HeaderActions_zone_PageTitle_pnlHeader" class="PageHeader SimpleHeader">
<div id="CMSHeaderDiv" class="CMSHeaderDiv"/>
<div id="CKToolbar" class="CKToolbar"/>
</div>
<div id="UIContent" class="UIContent scroll-area" style="height: auto; top: 56px; bottom: 0px;">
</div>
<script type="text/javascript"> //<![CDATA[ (function() {var fn = function() {$get("m_manScript_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();//]]> </script>
<script type="text/javascript"> //<![CDATA[ document.pageLoaded = true; //]]> </script>
<script type="text/javascript"> //<![CDATA[ cmsrequire(['CMS/UniGrid'], function(module) { new module({ "id": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem", "uniqueId": "m$c$plc$lt$ctl01$ST_UI_Listing$gridElem", "hdnCmdNameId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_hidCmdName", "hdnCmdArgId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_hidCmdArg", "hdnSelHashId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_hidSelectionHash", "hdnSelId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_hidSelection", "gridId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_v", "resetSelection": false, "allowSorting": false }); }); //]]> </script>
<script type="text/javascript"> //<![CDATA[ cmsrequire(['CMS/AdvancedExport'], function(module) { new module({ "id": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a", "uniqueId": "m$c$plc$lt$ctl01$ST_UI_Listing$gridElem$a", "unigridId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem", "hdnParamId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_hdnParameter", "btnFullPostbackUniqueId": "m$c$plc$lt$ctl01$ST_UI_Listing$gridElem$a$btnFullPostback", "chlColumnsId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_chlColumns", "hdnDefaultSelectionId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_hdnDefaultSelection", "revRecordsId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_revRecords", "cvColumnsId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_cvColumns", "mdlAdvancedExportId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_mdlAdvancedExport", "fixHeight": false, "alertMessage": null }); }); //]]> </script>
The button I need to interact is
//button[#id='m_c_plc_lt_ctl00_HeaderActions_headerElem_headerElem_HA_0']
hey hi everyone i am try to insert new record using kendo grid.
it's work fine.
but i want to set hide and show.
when its new then hide second column.
only on this row not other all.
here is my code:-
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var users = [{ UserId: 1, UserName: "Robin", IsAdmin: true }
, { UserId: 2, UserName: "Hood", IsAdmin: false }];
var t = $("#grid").kendoGrid({
dataSource: { data: users, pageSize: 10 }// binding data
,pageable: true
, selectable: "multiple row"
, toolbar: ["create"]
, columns: [
{ field: "UserId" }
, { field: "UserName"},
{ command: "destroy", title: " ", width: "100px" }
],
editable: true,
edit: function(e)
{
if(e.model.isNew())
{
$("td:nth-child(2)").css("display","none");
}
}
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="button" value="Iterate" onclick="iterate()"/>
<div id="grid"></div>
</body>
</html>
please help if is possible when insert new record hide there second td.
thanks.
Try this,
Below code set in document.ready
$(".k-button,.k-button-icontext,.k-grid-add").click(function(){
var activityGrid = $("#grid").data("kendoGrid");
activityGrid.hideColumn(1);
});
Updated Code:
var cnt = 1;
$(".k-button,.k-button-icontext,.k-grid-add").click(function () {
cnt = 0;
});
var hideFieldName = "UserName";
$(".k-textbox").live("focusin", function (e) {
if (cnt == 0) {
if ($(this).attr("name") == hideFieldName) {
if ($(this).closest('tr').index() == cnt) {
$(this).attr("readonly", "readonly");
}
}
}
});
So, below code worked as per your requirement. But in this case textbox was generated but user can't enter any value.
Let me know if any issue....
I've been trying to make a web app that shows multiple markers on google maps. I tried using this tutorial and the code works fine until I get to the point where I need to get the JSON data from the server instead of using the example JSON data in the same js file as the code.
I try to save the ajax response into variable but i get this error
TypeError: json is null
[Break On This Error]
for (var i = 0, length = json.length; i < length; i++) {
And this is the code I am using.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(57.9, 14.6),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': "http://myurl.com/getdata",
'dataType': "json",
'success': function (data) {
json = data; } });
return json;})();
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
var infoWindow = new google.maps.InfoWindow();
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
// Creating a closure to retain the correct data
//Note how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax div example</title>
<script type="text/javascript" src="jscripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var dbn,machine_name;
function main_draw(d,m,r)
{
dbn = d;
machine_name = m;
draw_charts();
if ( r > 0 )
{
setRefreshid = setInterval("draw_pie()",r);
}
}
function draw_charts()
{
document.getElementById('ajdiv4').innerHTML = "";
document.getElementById('ajdiv3').innerHTML = "";
document.getElementById('ajdiv2').innerHTML = "";
document.getElementById('ajdiv1').innerHTML = "";
draw_pie();
draw_line();
draw_space();
draw_backup();
}
function draw_pie()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/graph_pie1.html',
success: function(html)
{
$("#ajdiv4").html(html);
}
}); }, 100);
}
function draw_line()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/graph_line1.html',
success: function(html)
{
$("#ajdiv3").html(html);
}
}); }, 200);
}
function draw_space()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/space_graph.php',
success: function(html)
{
$("#ajdiv2").html(html);
}
}); }, 300);
}
function draw_backup()
{
setTimeout(function() {
$.ajax( {
url: 'JSCharts/backup_graph.php',
success: function(html)
{
$("#ajdiv1").html(html);
}
}); }, 400);
}
</script>
</head>
<body>
<div id="ajdiv1" style="float:left"></div>
<div id="ajdiv2" style="float:left"></div>
<div id="ajdiv3" style="float:left"></div>
<div id="ajdiv4" style="float:left"></div>
<button id="b1" onclick="main_draw('CQ1','va2apsap010',10000)">Display Content</button>
</body>
</html>
Above is an entire code which makes AJAX calls upon clicking on "Display Content" and after that it refreshes content of div "ajdiv4" by calling function "draw_pie". The only problem with this is that when it refreshes, it moves the pie graph all the way to the left. I would like it to stay and update it in the current position. Please help if any of you know what is going on here, Thanks.
Have you tried specifying the dimensions of your DIVs? With your current code, you could probably do:
<style>
#ajdiv1, #ajdiv2, #ajdiv3, #ajdiv4 {
height:200px;
width:200px;
}
</style>
Alternatively, add a class attribute to simplify things:
<style>
.chartContainer {
height:200px;
width:200px;
}
</style>
If you have a working version up, or can post something on JSfiddle, that would make things easier to troubleshoot.
I'm a new developer in Enyo(TouchPad). I would like to develop an app consisting some charts in it. so I'm trying to use Dojo framework libraries in Enyo.
Can anyone please help me in how to include the dojo code my application.
I'm posting my code, please have a look.
INDEX.HTML :
<!doctype html>
<html>
<head>
<title>Canvas Demo</title>
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
<script src="lib/widget/Chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/tom.js" type="text/javascript"> </SCRIPT>
</head>
<body>
<script type="text/javascript">
enyo.create({kind: "CanvasDemo"}).renderInto(document.body);
</script>
</body>
</html>
.Js file ::
enyo.kind({
name: "CanvasDemo",
kind: enyo.Control,
nodeTag: "canvas",
domAttributes: {
width:"300px",
height:"300px",
style: "border: 2px solid #000;"
},
// After the canvas is rendered
rendered: function() {
// I want to place the dojo code here to display a chart in the canvas.
}
});
DOJO CODE ::
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.Tom');
/* JSON information */
var json = {
January: [12999,14487,19803,15965,17290],
February: [14487,12999,15965,17290,19803],
March: [15965,17290,19803,12999,14487]
};
/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
chartData.push({ x: i, y: json['January'][i] });
});
/* resources are ready... */
dojo.ready(function() {
var chart2 = new dojox.charting.Chart2D('chart2').
setTheme(dojox.charting.themes.Tom).
addPlot('default', {type: 'Pie', radius: 70, fontColor: 'black'}).
addSeries('Visits', chartData).
render();
var anim = new dojox.charting.action2d.MoveSlice(chart2, 'default');
chart2.render();
});
Please help me in how to modify the dojo code ,so that it can work in the enyo..
Thanks in Advance.
Regards,
Harry.
index.html :
<!doctype html>
<html>
<head>
<title>dojo</title>
<script src="C:\WebOs\Development\enyo\1.0\framework\enyo.js" type="text/javascript"></script>
<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1-src\dojo-release-1.6.1-src\dojo\dojo.js"></script>
/head>
<body>
<script type="text/javascript">
new enyo.Canon.graphs2().renderInto(document.body);
</script>
</body>
</html>
Source/Charts1.js :
enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
{kind: "PageHeader", content: "bargraph"},
//{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
{kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
],
displayGraph: function() {
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');
/* JSON information */
var json = {
January: [12999,14487,19803,15965,17290],
February: [14487,12999,15965,17290,19803],
March: [15965,17290,19803,12999,14487]
};
/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
chartData.push({ x: i, y: json['January'][i] });
});
/* resources are ready... */
dojo.ready(function() {
//create / swap data
var barData = [];
dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
var chart1 = new dojox.charting.Chart2D('chart1').
setTheme(dojox.charting.themes.PlotKit.green).
addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
addPlot('default', {type: 'Columns', gap:5 }).
addSeries('Visits For February', chartData, {});
var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
chart1.render();
// var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');
});
}
});
Here I'm not sure about how to call the dojo code in enyo.
and
depends.js :
enyo.depends(
"source/charts1.js",
"lib/Chart2D.js",
"lib/widget/Chart2D.js",
"lib/blue.js",
"lib/dojo.js"
);
Now I'm getting the following errors :
error: Uncaught ReferenceError: dojo is not defined, Chart2D.js:1
[20110818-09:33:13.136736] error: Uncaught ReferenceError: dojo is not defined, widget/Chart2D.js:1
[20110818-09:33:13.138227] error: Uncaught ReferenceError: dojo is not defined, blue.js:1
[20110818-09:33:13.150707] error: Uncaught TypeError: Cannot read property 'graphs2' of undefined, index.html:10
It is working fine when I use it as a .HTML file with the same code in browser.
Chart.html :
<html>
<head>
<title>dojo</title>
<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1- src\dojo-release-1.6.1-src\dojo\dojo.js"></script>
</head>
<body>
<div id="chart1" style="width:260px;height:200px;"></div>
<script>
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');
/* JSON information */
var json = {
January: [12999,14487,19803,15965,17290],
February: [14487,12999,15965,17290,19803],
March: [15965,17290,19803,12999,14487]
};
/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
chartData.push({ x: i, y: json['January'][i] });
});
/* resources are ready... */
dojo.ready(function() {
//create / swap data
var barData = [];
dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
var chart1 = new dojox.charting.Chart2D('chart1').
setTheme(dojox.charting.themes.PlotKit.green).
addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
addPlot('default', {type: 'Columns', gap:5 }).
addSeries('Visits For February', chartData, {});
var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
chart1.render();
var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');
});
</script>
</body>
</html>
Please help me in working with this in Enyo.
Thanking You.
Kind Regards,
Harry.
I don't think you have to modify the Dojo code. In Enyo, you have to tell the framework where it has to look for included JS files. Yo do so editing the depends.js file.
The index.html:
<!doctype html>
<html>
<head>
<title>Canvas Demo</title>
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
new enyo.Canon.graphs2().renderInto(document.body);
</script>
</body>
</html>
and depends.js:
enyo.depends(
"lib/dojo/dojo.js" ,
"source/charts1.js"
);
You'll have to copy everything Dojo needs to work (dojo, dojox, dijit) into lib, and check enyo paths.
I get a Dojo error when creating the new Chart2D object, and I'm not a Dojo expert to fix this. It's in the line:
var chart1 = new dojox.charting.Chart2D("simplechart");
I've modified your code:
enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
{kind: "PageHeader", content: "bargraph"},
//{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
{kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
],
displayGraph: function() {
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');
/* JSON information */
var json = {
January: [12999,14487,19803,15965,17290],
February: [14487,12999,15965,17290,19803],
March: [15965,17290,19803,12999,14487]
};
/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
chartData.push({ x: i, y: json['January'][i] });
});
/* resources are ready... */
dojo.ready(function() {
//create / swap data
var barData = [];
dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
var chart1 = new dojox.charting.Chart2D("simplechart"); // HERE IS THE PROBLEM
chart1.setTheme(dojox.charting.themes.PlotKit.green);
chart1.addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 });
chart1.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' });
chart1.addPlot('default', {type: 'Columns', gap:5 });
chart1.addSeries('Visits For February', chartData, {});
var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
chart1.render();
// var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');
});
}
});
The object doesn't get instantiated. Got null pointer :-(