Forums

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

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

mijung mooney

  • Username: mijung mooney
  • Joined: Mon Jan 09, 2012 2:14 pm
  • Posts: 2
  • Offline
  • Profile
Tags:

How to selectively show marker(s) on a YUI3 line chart

Post Posted: Mon Jan 09, 2012 2:29 pm
+0-
I am currently developing a YUI3 line graph which contains a lot of data points. I need to selectively show markers to be able to avoid crowded markers and retain the cursive look of the graph.

Does anyone know whether we can achieve this? If we can, would you be able to provide sample code?

This is how I display my line chart and it displays markers for ALL datapoints.
var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart"});

I appreciate your help!

Thank you.

Tripp Bridges

YUI Developer

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

Re: How to selectively show marker(s) on a YUI3 line chart

Post Posted: Wed Jan 11, 2012 9:55 am
+0-
You can disable markers for a chart with the showMarkers boolean. If you do this, you'll probably want to change interactionType from "marker" to "planar" as well so that you could still retrieve data on mouseover.

Code:
var myChart = new Y.Chart({
    dataProvider:myDataValues,
    render:"#mychart",
    showMarkers: false,
    interactionType: "planar"
});


Currently, there is no option for selectively showing markers. Could you elaborate on what you would expect of this functionality? (e.g. When would a marker show or not show)

Thanks,
Tripp

Felipe

  • Username: xsquarenix
  • Joined: Tue Jan 31, 2012 5:51 am
  • Posts: 4
  • GitHub: xsquarenix
  • Gists: xsquarenix
  • IRC: xsquarenix
  • Offline
  • Profile

Re: How to selectively show marker(s) on a YUI3 line chart

Post Posted: Tue Jan 31, 2012 8:28 am
+0-
Hi, i'm looking for a solution for a little problem related ... i'm trying to show the mark only on the "top values"... i mean... showing the marker only in particular situation.. is that possible?... i've been looking for it but no helps =/... thanks

Tripp Bridges

YUI Developer

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

Re: How to selectively show marker(s) on a YUI3 line chart

Post Posted: Tue Jan 31, 2012 9:20 am
+0-
You can use the chart's method getSeries to get the series of the marker you want to show/hide. You get can an array of all markers in a series through the series attribute markers. Each marker has a visible attribute. The following code below would hide the second marker in a chart's series whose value key is expenses:

Code:
mychart.getSeries("expenses").get("markers")[1].set("visible", false);


You should be able to use these methods to show/hide markers as you need.

Thanks,
Tripp

Felipe

  • Username: xsquarenix
  • Joined: Tue Jan 31, 2012 5:51 am
  • Posts: 4
  • GitHub: xsquarenix
  • Gists: xsquarenix
  • IRC: xsquarenix
  • Offline
  • Profile

Re: How to selectively show marker(s) on a YUI3 line chart

Post Posted: Tue Jan 31, 2012 10:17 am
+0-
Tripp ...

i'll try this... thanks man

Felipe

  • Username: xsquarenix
  • Joined: Tue Jan 31, 2012 5:51 am
  • Posts: 4
  • GitHub: xsquarenix
  • Gists: xsquarenix
  • IRC: xsquarenix
  • Offline
  • Profile
Tags:

Re: How to selectively show marker(s) on a YUI3 line chart

Post Posted: Wed Feb 01, 2012 3:39 am
+0-
My code is like that:

Code:
<p:lineChart id="availabilityChart"
                                                           value="#{dashboardBean.screenWidgetDTO.availabilityChart}"
                                                          var="iten"
                                                          xfield="#{iten.time}"
                                                          live="true"
                                                           refreshInterval="63000" 
                                                          width="400px"     
                                                          height="200px" 
                                                          style="chartStyle"
                                                          wmode="transparent">                     
                                                   <p:chartSeries id="service" label="#{msgs['chart.availability.autorizada']}" value="#{iten.auth}" style="authSerie"/>                  
                                                   <p:chartSeries label="#{msgs['chart.availability.538']}" value="#{iten._538}" style="_538Serie" />
                                                   <p:chartSeries label="#{msgs['chart.availability.115']}" value="#{iten._115}" style="_115Serie" />
                                                </p:lineChart>



how do I supose to get this "myChart" as your example above?

Tripp Bridges

YUI Developer

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

Re: How to selectively show marker(s) on a YUI3 line chart

Post Posted: Wed Feb 01, 2012 9:44 am
+0-
Replace mychart with whichever variable in your javascript code references the chart instance with which you want to work.

Code:
[YOURCHARTREFERENCE].getSeries("expenses").get("markers")[1].set("visible", false);


For example if you created a chart like this:
Code:
var stockChart = new Y.Chart({
                             //attributes for chart
                         });


You would hide a marker like this:
Code:
stockChart.getSeries("expenses").get("markers")[1].set("visible", false);


Thanks,
Tripp

Felipe

  • Username: xsquarenix
  • Joined: Tue Jan 31, 2012 5:51 am
  • Posts: 4
  • GitHub: xsquarenix
  • Gists: xsquarenix
  • IRC: xsquarenix
  • Offline
  • Profile
Tags:

Re: How to selectively show marker(s) on a YUI3 line chart

Post Posted: Thu Feb 02, 2012 6:03 am
+0-
Tripp ...
i've attempted to do this once... but i'm rendering the chart with the primefaces framework... so the chart is already rendered...
Code:
var stockChart = new Y.Chart({
                             //attributes for chart
                         });

the code above shows how to manipulate a chart made with javascript ... but how can i capture an already rendered chart... i mean... what kind of "selector" should i use... cuz i already tryied with the attribute id.. and doesn't work... any sugestions? ... I saw an attribute named "widgetVar" .. i dunno if it's related
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

No Users Online

© 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