I implemented this https://fancyproductdesigner.com/jquery/ which works fine. My query is when I the uploaded images on demo site it fix on the product's shape. For example, When I upload a logo on a cap the logo flexibly fixes on the shape of the cap. But in my integration, this is not working.
my code is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Product Designer</title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- The CSS for the plugin itself - required -->
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />
<!-- Include required jQuery files -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- HTML5 canvas library - required -->
<script src="js/fabric.min.js" type="text/javascript"></script>
<!-- The plugin itself - required -->
<script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var $yourDesigner = $('#clothing-designer'),
pluginOpts = {
productsJSON: 'json/products.json', //see JSON folder for products sorted in categories
designsJSON: 'json/designs.json', //see JSON folder for designs sorted in categories
stageWidth: 1200,
editorMode: false,
smartGuides: true,
fonts: [{
name: 'Helvetica'
}, {
name: 'Times New Roman'
}, {
name: 'Pacifico',
url: 'Enter_URL_To_Pacifico_TTF'
}, {
name: 'Arial'
}, {
name: 'Lobster',
url: 'google'
}],
customTextParameters: {
colors: false,
removable: true,
resizable: true,
draggable: true,
rotatable: true,
autoCenter: true,
boundingBox: "Base"
},
customImageParameters: {
draggable: true,
removable: true,
resizable: true,
rotatable: true,
colors: '#000',
autoCenter: true,
boundingBox: "Base"
},
actions: {
'top': ['download', 'print', 'snap', 'preview-lightbox'],
'right': ['magnify-glass', 'zoom', 'reset-product', 'qr-code', 'ruler'],
'bottom': ['undo', 'redo'],
'left': ['manage-layers', 'info', 'save', 'load']
}
},
yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);
});
</script>
</head>
<body>
<div id="main-container">
<h3 id="clothing">Clothing Designer</h3>
<div id="clothing-designer" class="fpd-container fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left"> </div>
<br />
</div>
</body>
</html>
Related
I'm using Dojo Toolkit 1.12. How can I show a dojox/layout/FloatingPane that moves on a dijit/layout/BorderContainer. The problem is that I do not know where srcNodeRef to locate it so that it can move across the screen. Thank you.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>`
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title>Prueba</title>
<!-- Estilos -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/resources/dojo.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojox/layout/resources/FloatingPane.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojox/layout/resources/ResizeHandle.css" media="screen">
<!-- CSS -->
<style>
body, html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;}
</style>
<!-- Libraries -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js">
</script>
<!-- Dojo -->
<script>
require([
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojox/layout/FloatingPane",
"dojo/domReady!"
], function(
registry,
BorderContainer,
TabContainer,
ContentPane,
FloatingPane) {
//........................................................
var border = new BorderContainer({
design: "headline",
style: "width: 100%; height: 100%; background-color: yellow;",
design: "headline",
liveSplitters: true,
gutters: true
}, "divBody");
//........................................................
border.addChild(
new TabContainer({
region: "center",
id: "tabs",
tabPosition: "top"
})
);
var tabs = registry.byId("tabs");
tabs.addChild(
new ContentPane({
content: "content Tab 1",
title: "Tab 1"
})
);
tabs.addChild(
new ContentPane({
content: "content Tab 2",
title: "Tab 2"
})
);
//........................................................
border.addChild(
new ContentPane({
region: "top",
id: "top",
content: "HEADER"
})
);
//........................................................
border.addChild(
new ContentPane({
region: "left",
id: "left",
content: "LEFT",
splitter: true,
})
);
//........................................................
border.addChild(
new ContentPane({
region: "bottom",
id: "footer",
content: "FOOTER",
splitter: false
})
);
//........................................................
border.startup();
//........................................................
var floating = new FloatingPane({
id: "floating",
title: "A floating pane",
resizable: true,
dockable: true,
style: "position:absolute; top:0; left:0;width:100px; height:100px;"
});
floating.addChild(
new ContentPane({
content: "FLOATING"
})
);
floating.startup();
//........................................................
});
</script>
</head>
<body class="claro">
<div id="divBody"></div>
</body>
</html>
take a look at this example
http://jsfiddle.net/icsteveoh/ADPZS/
FloatingPane has a property 'content' to set whatever the content you need. In this example, content is set as part of declaration i.e. while creating the FloatingPane. If you want to set content dynamically, you can use
dijit.byId('yourfloatingpaneid').set('content',"Hello again");
Hope this helps
Hi i have the following trirand jqgrid (4.6) loaded with values
as you can see there is grouped Column header with textbox. the following code should respond to mouse click event on the text box and display an alert but it does not and why it displays the string {this.state.TextDate} instead of its value?
here is my code :
var DEMOCOMPONENT = React.createClass({
getInitialState:function(){
return{
TextDate:''
}
},
componentDidMount:function(){
this.getData();
},
showDTPicker:function(){
alert('date picker hit');
},
setTextDate:function(){
var newV = ReactDOM.findDOMNode(this.refs.reftxt).value;
this.setState({TextDate:newV},function(){
});
},
render: function () {
return (<div><table id="list4"></table><div id="plist483"></div></div>)
},
getData:function(){
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data",
rowNum:10,
width:700,
rowList:[10,20,30],
pager: '#plist483',
sortname: 'invdate',
height: '100%'
});
//setting groupcolumn headers
jQuery("#list4").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'amount',
numberOfColumns: 3,
titleText: '<span><div style="text-align: left"><input type="text" id="txt" style="width: 50%" ref="reftxt" onClick={this.showDTPicker} onChange={this.setTextDate} value={this.state.TextDate} />'
},
{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
]});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
}
});
ReactDOM.render(<DEMOCOMPONENT />,document.getElementById('divdemo'));
Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" />-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
</head>
<body>
<div id="divdemo">
</div>
<script src="react-15.0.0.js"></script>
<script src="react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/babel" src="demo.js"></script>
</body>
</html>
Give editable option in jq Grid Column properties as true ,eg
name : 'ABC',
index : 'ABC',
align : "center",
formatter : 'select',
edittype : 'select',
width : 174,
**editable : true,**
I have a very curious bug or error with JQuery with JqGrid. The error is when I try to show the data in JSON in the table, if you show me the data, if the table does not show more than 20 columns and have more than 200 data, the code is presented like this:
The Header is:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/ecmascript" src="jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/ecmascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<!-- Continuacion de JqGrid-->
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid-bootstrap.css" />
The JS is:
<script>
$.jgrid.defaults.width = 780;
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<div style="margin-left:20px">
<table id="jqGrid4"></table>
<div id="jqGridPager4"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid4").jqGrid({
url: 'http://localhost/fileupload/api/Proveedor',
mtype: "GET",
styleUI : 'Bootstrap',
datatype: "JSON",
colModel: [
{ label: 'id', name: 'id', key: true, width: 75 },
{ label: 'Name', name: 'Name', width: 150 },
{ label: 'RFC', name: 'RFC', width: 150 },
{ label: 'Company Name', name: 'CompanyName', width: 150 },
{ label:'DateCreation', name: 'DateCreation', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 20,
pager: "#jqGridPager4",
sortable: true
});
});
</script>
In the image you can see that the table only shows 20 rows, but I have 207 rows. I need the arrows to move and show more rows, but I can't. Any ideas? I don't want to put rowNum: +20 or more because I don't like that, I need to move with the arrows but I can't.
Do you implemented server-side paging on the server or the server returnes all 207 rows at once and you want to use client-side paging? In the last case you should add loadonce: true option. 207 rows is not much and thus I would recommend you to use loadonce: true option in the scenario. You will don't need to write long code on the server side and can directly use sorting, paging and filtering/searching (see filterToolbar or advanced searching) of local data.
I'm stuck on this since a week! Any help would be greatly appreciated.!
What I have is some JSON data which now I want to display as thumbnails using Kendo ListView. Also, when we click on the thumbnail image, I want the fancybox to open the dark screen and allow me to view the items.
With what I've done so far, the kendo ListView manages to show the thumbnails fine, but when I click on the thumbnail image, it redirects me to the whole image and doesn't open the fancybox popup.
My guess is that the two things are intefering because of which Fancybox is probably not able to do stuff.
The page is here: http://butterflydiamonds.com/blank.php
Just click on Tile View once the data has loaded to see what I'm talking about.
Thanks in advance!
EDIT: The code for those who don't want to click the link:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Diamond Database</title>
<link href="style/css/custom.css" rel="stylesheet" type="text/css">
<!-- Common Kendo UI Web CSS -->
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<!-- Default Kendo UI Web theme CSS -->
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="js/kendo.web.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/css/media-queries.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/type/qlassik.css" media="all" />
<script type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/selectnav.js"></script>
<script type="text/javascript" src="style/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/jsonconvert.js"></script>
<script type="text/javascript" src="style/js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="style/js/fancybox/jquery.fancybox.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<link rel="stylesheet" type="text/css" href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<script type="text/javascript" src="style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link href="style/css/classic-081711.css" rel="stylesheet" type="text/css">
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
</head>
<body id="page">
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Main -->
<div id="main">
<div class="container box">
<div id="container"></div>
<p id="new"></p>
<p id="test"></p>
<!-- Begin Toggle -->
<h4 class="title">Search Options</h4>
<div>
<div style="float: right">
<div style="float: left"><ul class="filter">
<li><a class="active button dark" id="gridfilter" onclick="dogridstuff()" data-filter="*">Grid View</a></li>
<li><a class="dark button" id="tilefilter" onclick="dotilestuff()" data-filter=".bw">Tile View</a></li>
</ul></div>
</div>
</div>
<!-- End Toggle -->
<div id="database">
<div id="items" style="display:none">
<div id="listView" style="margin-left: 50px"></div>
<div id="pager" class="k-pager-wrap"> </div>
</div>
<div id="grid"></div>
</div>
<p><b>Note:The column pair id represents respective pairs and prices may vary as per selection, if any.</b></p>
<br>
<script type="text/x-kendo-template" id="template2">
<div class="item">
<div class="thumb">
</span><img src= #= PHOTO # style="display: inline" onerror="this.src='style/images/imgnotavailable.jpg'" width='280px'>
</div>
<div class="details">
<h4 class="entry-title"> #= PID # </a></h4>
</div>
</div>
</script>
<script>
var data=[];
var dataforgrid=[];
var data2=[];
var i=1;
var prev="";
var text="";
var source;
$(document).ready(function(){
$.ajax({
url: 'https://dl.dropboxusercontent.com/u/2565723/thedata.js?callback=callback&_=1402638666911',
dataType: 'jsonp',
jsonp: 'callback'
});
})
function initSource()
{
for(var i=0;i<dataforgrid.length;++i)
{
dataforgrid[i].CTS=dataforgrid[i].CTS.toFixed(2);
}
source=new kendo.data.DataSource({
data:dataforgrid,
// {transport:{
// read: {
// url:"https://dl.dropboxusercontent.com/u/2565723/thedata.js",
// dataType:"jsonp",
// jsonpCallback: 'callback'
// }}
schema: {
model: {
fields: {
PID: { type: "string",editable: false},
SELECT: {type:"boolean",editable: false},
SPRICE: { type: "number",editable: false },
SHAPE: { type: "string",editable: false },
PCS: { type: "number",editable: false },
COLID: {editable: false},
CTS: {editable: false},
PHOTO: {editable: false},
DESCRIPTION: {editable: false},
CLARITY: {editable: false},
POLISH: {editable: false},
SYMMETRY: {editable: false},
L: {editable: false},
W: {editable: false},
TD: {editable: false},
D: {editable: false},
FLU: {editable: false},
}
}
},
autoSync: true,
sort:
[{field:"COLID",dir:"asc"},
{field:"DESCRIPTION",dir:"asc"},
{field:"CTS",dir:"asc"}
],
pageSize: 20
});
initGrid();
}
function dogridstuff()
{
$("#tilefilter").removeClass("active");
$("#gridfilter").addClass("active");
$("#grid").show();
document.getElementById("items").style.display='none';
}
function dotilestuff()
{
$("#tilefilter").addClass("active");
$("#gridfilter").removeClass("active");
prepareDataForTile();
initTile();
$("#grid").hide();
document.getElementById("items").style.display='block';
}
function initTile()
{
updateSource();
$("#pager").kendoPager({
dataSource: source,
pageSizes: [9,18,27,54],
buttonCount: 5
});
$("#listView").kendoListView({
dataSource: source,
selectable: false,
template: kendo.template($("#template2").html())
});
}
function prepareDataForTile()
{
for(var i=0;i<dataforgrid.length;++i)
{
if(dataforgrid[i].PHOTO=="")
dataforgrid.splice(i--,1);
}
}
function callback(datafromfile)
{
dataforgrid=datafromfile;
data=datafromfile;
for(var i=0;i<dataforgrid.length;++i)
{
dataforgrid[i].SELECT=false;
data[i].SELECT=false;
}
data[0].SELECT=true;
initSource();
}
function updateSource()
{
source=new kendo.data.DataSource({
data:dataforgrid,
schema: {
model: {
fields: {
PID: { type: "string",editable: false},
SELECT: {type: "boolean",editable: true},
SPRICE: { type: "number",editable: false },
SHAPE: { type: "string",editable: false },
PCS: { type: "number",editable: false },
COLID: {editable: false},
CTS: {editable: false},
PHOTO: {editable: false},
DESCRIPTION: {editable: false},
CLARITY: {editable: false},
POLISH: {editable: false},
SYMMETRY: {editable: false},
L: {editable: false},
W: {editable: false},
TD: {editable: false},
D: {editable: false},
FLU: {editable: false},
}
}
},
autoSync: true,
sort:
[{field:"COLID",dir:"asc"},
{field:"DESCRIPTION",dir:"asc"},
{field:"CTS",dir:"asc"}
],
pageSize: 20
});
//functions for Kendogrid, filtering search, etc. not relevant to question
</script>
</div>
</div>
<!-- End Main -->
</div>
<!-- End Wrapper -->
<script type="text/javascript" src="style/js/scripts.js"></script>
</body>
</html>
Got the problem. It was conflicting jQuery calls. Solved using jQuery.fancybox() instead of $.fancybox().
I am trying to create a pie chart using wijmo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Data Source</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="%description%" />
<meta name="keywords" content="" />
<meta name="author" content="ComponentOne" />
<link href="../Scripts/Wijmo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/Wijmo/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/raphael-min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/globalize.min.js" type="text/javascript"></script>
<script src="../Scripts/Wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/Wijmo/jquery.wijmo.wijchartcore.js"></script>
<script type="text/javascript" src="../Scripts/Wijmo/jquery.wijmo.wijpiechart.js"></script>
<style type="text/css">
#wijpiechart
{
width: 756px;
height: 475px;
}
</style>
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
debugger;
var data = [{
Device: 'MacBook Pro',
Percent: 46.78,
Offset: 15
}, {
Device: 'iMac',
Percent: 23.18
}, {
Device: 'MacBook',
Percent: 20.25
}, {
Device: 'Mac Pro',
Percent: 5.41
}, {
Device: 'Mac mini',
Percent: 3.44
}];
$('#wijpiechart').wijpiechart({
dataSource: data,
data: {
label: { bind: "Device" },
value: { bind: "Percent" },
offset: { bind: "Offset" }
},
radius: 140,
legend: { visible: true },
hint: {
content: function () {
return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
}
},
header: {
text: "Steam - Mac Hardware"
}
});
});
</script>
</head>
<body class="demo-single">
<div class="container">
<div class="header">
<h2>
DataSource</h2>
</div>
<div class="main demo">
<!-- Begin demo markup -->
<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all">
</div>
<!-- End demo markup -->
<div class="demo-options">
<!-- Begin options markup -->
<!-- End options markup -->
</div>
</div>
<div class="footer demo-description">
<p>
This sample shows how to create a pie chart using an array as the data source for
the chart.</p>
</div>
</div>
</body>
</html>
I am getting an object reference error ///
Microsoft JScript runtime error: Object doesn't support this property or method
You should either refer the complete js files that are available at this link:
http://wijmo.com/downloads/
or you can use AMD modules and can refer to the following link:
http://wijmo.com/docs/wijmo/#AMDwithRequireJs.html