[ 7 posts ]

Amey Chaugule

  • Username: Amey
  • Joined: Tue May 29, 2012 10:41 am
  • Posts: 5
  • Offline
  • Profile

Using YUI charts with DataSource

Post Posted: Thu Jun 07, 2012 4:39 pm
+0-
So i'm trying to get datasource work with YUI charts. The JSON response from my php script looks like:

Code:
[{"Date":"2012-05-24","rmx_serve":"3415.80617367","rmx_preserve":"2959.58575267","rmx_click":"2689.52118644","rmx_conv":"2475.96878829","rmx_bid":"1679.27403198","rmx_pixel":"528.239954927","rmx_bid_outcome":"307.0780988"},{"Date":"2012-05-25","rmx_serve":"3648.51409869","rmx_preserve":"2912.6806058","rmx_click":"2623.51932647","rmx_conv":"2466.01756383","rmx_bid":"1652.31301274","rmx_pixel":"533.950680313","rmx_bid_outcome":"306.1154907"},{"Date":"2012-05-26","rmx_serve":"3342.91688373","rmx_preserve":"2808.89334631","rmx_click":"2487.56952913","rmx_conv":"2477.61466646","rmx_bid":"1643.93621394","rmx_pixel":"523.194287973","rmx_bid_outcome":"307.501065439"},{"Date":"2012-05-27","rmx_serve":"3373.1835071","rmx_preserve":"2826.88069561","rmx_click":"2429.27674166","rmx_conv":"2484.48522785","rmx_bid":"1648.16555004","rmx_pixel":"495.328084615","rmx_bid_outcome":"307.296036089"},{"Date":"2012-05-28","rmx_serve":"3339.15868436","rmx_preserve":"2772.60433546","rmx_click":"2518.38241913","rmx_conv":"2455.65834378","rmx_bid":"1632.51361376","rmx_pixel":"491.007553778","rmx_bid_outcome":"307.287957292"}]


And my JS code looks like:

Code:
    YUI().use('datasource-io','datasource-jsonschema','charts', function (Y)
    {
        var mychart = new Y.Chart({dataProvider:[], render:"#mychart"});
       
        var myDataSource = new Y.DataSource.IO({source:"server.php"}),
            myCallback = {
                success: function(e){
                        mychart.set("dataProvider", e.response.results);
                        alert(e.response.results);
                },
                failure: function(e){
                        alert("Oops something went wrong here.. " + e.error.message);
                }
        };
        myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
                schema: {
                        resultFields: ["Date","rmx_serve","rmx_preserve","rmx_click","rmx_conv","rmx_bid","rmx_pixel","rmx_bid_outcome"]
                        }
                });
       
        myDataSource.sendRequest({
                request: "",
                callback:myCallback
                });



I understand from looking at the forums that simply setting the
Quote:
dataProvider
to the JSON response should suffice. But the chart doesn't really render anything :(.

Tripp Bridges

YUI Developer

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

Re: Using YUI charts with DataSource

Post Posted: Fri Jun 08, 2012 7:10 am
+0-
The default categoryKey for the chart is "category". It looks like your data sample uses "Date". Try changing your categoryKey to "Date".

Code:
var mychart = new Y.Chart({
    dataProvider:[],
    categoryKey: "Date",
    render:"#mychart"
});


If you are still experiencing issues, please post back with a reprolink and I can help debug.

Thanks,
Tripp

Amey Chaugule

  • Username: Amey
  • Joined: Tue May 29, 2012 10:41 am
  • Posts: 5
  • Offline
  • Profile

Re: Using YUI charts with DataSource

Post Posted: Fri Jun 08, 2012 11:24 am
+0-
Hey Tripp,

Well putting in the category keys didn't work. Is there something wrong with my JSON? Or how I'm handling it?

Also does my schema need to have the field "resultListLocator"?

Amey

Tripp Bridges

YUI Developer

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

Re: Using YUI charts with DataSource

Post Posted: Fri Jun 08, 2012 12:30 pm
+0-
Hi Amey,
It looks like you may be encountering this bug:
http://yuilibrary.com/projects/yui3/ticket/2532078

The only workaround I have right now is to pre-define the seriesKeys when instantiating the chart:
Code:
mychart = new Y.Chart({
    seriesKeys: ["rmx_serve", "rmx_preserve", "rmx_click", "rmx_conv", "rmx_bid", "rmx_pixel", "rmx_bid_outcome"],
    categoryKey: "Date",
    dataProvider: [],
    render: "#mychart"
});


I do plan on addressing this issue in the next sprint and hope to get the fix in for 3.6.

Thanks,
Tripp

Amey Chaugule

  • Username: Amey
  • Joined: Tue May 29, 2012 10:41 am
  • Posts: 5
  • Offline
  • Profile

Re: Using YUI charts with DataSource

Post Posted: Fri Jun 08, 2012 12:59 pm
+0-
Interestingly the only thing it renders now is "4000" in the top left corner which is the incidentally the maximum range the values can take on the Y-axis.

Tripp Bridges

YUI Developer

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

Re: Using YUI charts with DataSource

Post Posted: Fri Jun 08, 2012 3:20 pm
+0-
Sounds like you are using an older version. Are you able to upgrade to 3.5.1? The seriesKeys workaround works for 3.5.0 and greater. I tested it out with 3.5.0, 3.5.1, 3.6.0pr1 and development master. There are other issues with older versions in which an empty dataProvider will break the chart.

Thanks,
Tripp

Amey Chaugule

  • Username: Amey
  • Joined: Tue May 29, 2012 10:41 am
  • Posts: 5
  • Offline
  • Profile

Re: Using YUI charts with DataSource

Post Posted: Fri Jun 08, 2012 5:44 pm
+0-
That worked. Thanks a bunch Tripp :).
  [ 7 posts ]
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