Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 8 posts ]
New Topic | Post Reply | Print view

Ajay Malempati

  • Username: princenani
  • Joined: Tue Jun 19, 2012 11:12 am
  • Posts: 3
  • IRC: AJ
  • Offline
  • Profile
Tags:

Chart and XML Data

Post Posted: Tue Jun 19, 2012 1:33 pm
+0-
Hi .. Very new to YUI..

I am trying to get some info from the server.. but unable to render the chart.

The XML is from the same server as YUI lib..
<?xml version="1.0" encoding="UTF-8"?>
<Rowsets DateCreated="2012-05-22T16:09:29" EndDate="2012-05-22T13:03:55" StartDate="2012-05-22T13:03:55" Version="12.1.7 Build(47)">
<Rowset>
<Columns>
<Column Description="" MaxRange="1" MinRange="0" Name="Type" SQLDataType="1" SourceColumn="Type"/>
<Column Description="" MaxRange="1" MinRange="0" Name="Quantity" SQLDataType="1" SourceColumn="Quantity"/>
</Columns>
<Row>
<Type>Hyco</Type>
<Quantity>7</Quantity>
</Row>
<Row>
<Type>Coal</Type>
<Quantity>4</Quantity>
</Row>
***************************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Pie Chart Sample - Yahoo
</title>
<script src="/yui/build/yui/yui-min.js"></script>

<script>
// Create a new YUI instance and populate it with the required modules.
YUI().use("datasource-io", "datasource-xmlschema", "charts", function(Y) {

var myDataSource = new Y.DataSource.IO({source:"/###Test/Aj/FuelMix&OutputParameter=Output&Content-Type=text/xml"}),
myCallback = {
success: function(e){
alert(e.response);
},
failure: function(e){
alert("Could not retrieve data: " + e.error.message);
}
};

myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
schema: {
resultListLocator: "//Row",
resultFields: ["Type", "Quantity"]
}
});

myDataSource.sendRequest({
callback:myCallback
});

myDataSource.after("response", function() {
alert("loaded..")
// Instantiate and render the chart
var mychart = new Y.Chart({
dataProvider: myDataSource,
categoryKey: "Type",
render: "#mychart",
type: "Pie"
});
// End -- Instantiate and render the chart
}
);
});

</script>
</head>
<body style="font-family: Arial;border: 0 none;" >
<div id="mychart" style="width: 600px; height: 400px;"></div>
</body>
</html>

Tripp Bridges

YUI Developer

  • Username: tripp
  • Joined: Wed Jan 07, 2009 1:54 pm
  • Posts: 440
  • GitHub: tripp
  • Gists: tripp
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: Chart and XML Data

Post Posted: Tue Jun 19, 2012 10:21 pm
+0-
In YUI Charts, the dataProvider attribute needs to be an array of objects not a datasource instance.

Thanks,
Tripp

Todd Smith

YUI Contributor

  • Username: stlsmiths
  • Joined: Thu Nov 05, 2009 10:03 am
  • Posts: 675
  • GitHub: stlsmiths
  • Gists: stlsmiths
  • IRC: t_smith
  • Offline
  • Profile
Tags:

Re: Chart and XML Data

Post Posted: Wed Jun 20, 2012 11:33 am
+0-
Why couldn't he just do
Code:
myDataSource.after("response", function(e) {
   alert("loaded..")
   // Instantiate and render the chart
   var mychart = new Y.Chart({
      dataProvider: e.response.results,
      categoryKey: "Type",
      render: "#mychart",
      type: "Pie"
});

since DS's response argument e.response.results is an Array of Objects?

Ajay Malempati

  • Username: princenani
  • Joined: Tue Jun 19, 2012 11:12 am
  • Posts: 3
  • IRC: AJ
  • Offline
  • Profile
Tags:

Re: Chart and XML Data

Post Posted: Thu Jun 21, 2012 11:06 am
+0-
Thank you for your replies :) ..

I thought the XML will be converted to array using the following ..

myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
schema: {
resultListLocator: "//Row",
resultFields: ["Type", "Quantity"]
}
});

Any other ideas?

Todd Smith

YUI Contributor

  • Username: stlsmiths
  • Joined: Thu Nov 05, 2009 10:03 am
  • Posts: 675
  • GitHub: stlsmiths
  • Gists: stlsmiths
  • IRC: t_smith
  • Offline
  • Profile
Tags:

Re: Chart and XML Data

Post Posted: Thu Jun 21, 2012 8:01 pm
+0-
@princenani,

A few quick comments;
1. I don't think the XML snippet you provided is complete. I believe you need a closing </Rowset> and </Rowsets> tag at the bottom of your XML.
2. As an alternative to your 'after:response' method, you can also simply define your chart in the 'callback:success' function, where the e.response.results will hold the array of object data needed for the chart.
3. Your original code snippet included "type:'Pie'" with first letter capitalized; I think "pie" (lowercase) is required.

I reworked your original snippet into a working jsfiddle example at http://jsfiddle.net/blunderalong/cAe5f/. I had to mimic your DataSource IO (using a DataSource.Local) with the XML data snippet you provided by including the XML data as HTML markup because we don't have access to your server in jsfiddle.

A minor remark is that you should probably define "class='yui3-skin-sam'" on the <body> tag of your page, most YUI3 widgets and components require that. This might prevent future problems for you.

Todd

Nikhil Makhija

  • Username: Nikhil
  • Joined: Fri Jul 13, 2012 12:44 pm
  • Posts: 2
  • Offline
  • Profile
Tags:

Re: Chart and XML Data

Post Posted: Fri Jul 13, 2012 12:55 pm
+0-
Hi Todd,

I tried using the same way you mentioned in the snippet but Pie chart is not getting rendered on the screen after executing this code, below is the data I am using -

XML -

<?xml version="1.0" encoding="utf-8"?>
<Rowsets DateCreated="2012-07-13T13:49:36" EndDate="2012-07-12T15:14:25" StartDate="2012-07-12T15:14:25" Version="12.0.12 Build(9)">
<Rowset>
<Columns>
<Column Description="" MaxRange="1" MinRange="0" Name="Month" SQLDataType="1" SourceColumn="Month"/>
<Column Description="" MaxRange="1" MinRange="0" Name="Value" SQLDataType="1" SourceColumn="Value"/>
</Columns>
<Row>
<Month>Jan</Month>
<Value>10</Value>
</Row>
</Rowset>
</Rowsets>

Java Script

var url = link providing me the mentioned XML

YUI().use("datasource-io","datasource-xmlschema","charts",function(Y){
var myData = new Y.DataSource.IO({source:url});

myData.plug(Y.Plugin.DataSourceXMLSchema, {
schema:{
resultListLocator:"//Row",
resultFields: ["Month" ,"Value"]
}
});

myData.sendRequest({callback:

{ success: function(e){


var pieGraph = new Y.Chart ({
render:"#chartpiebls",
categoryKey:"Month",
seriesKeys:["Value"],
dataProvider:e.response.results,
type:"pie",
seriesCollection:[
{
categoryKey:"Month",
valueKey:"Value"
}
]
});

} ,



failure:function(e)
{
alert("could not retrieved data :"+ e.error.message);
}}

});

});

Tripp Bridges

YUI Developer

  • Username: tripp
  • Joined: Wed Jan 07, 2009 1:54 pm
  • Posts: 440
  • GitHub: tripp
  • Gists: tripp
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: Chart and XML Data

Post Posted: Mon Jul 16, 2012 9:17 am
+0-
Please post a repo link or the actual data that is returned as e.response.results.

Thanks,
Tripp

Nikhil Makhija

  • Username: Nikhil
  • Joined: Fri Jul 13, 2012 12:44 pm
  • Posts: 2
  • Offline
  • Profile

Re: Chart and XML Data

Post Posted: Wed Jul 18, 2012 9:35 pm
+0-
Hi Tripp,

Sorry for the delayed response.. Well the problem is solved as it was not taking the array structure response in a right way needed for Pie chart from the XML as an input.

Thanks again ..

Regards
Nikhil
Page 1 of 1   [ 8 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group