Loading ...
Sorry, an error occurred while loading the content.

YUI Sparkline Widget

Expand Messages
  • Michael Cramer
    I ve built a YUI Sparkline widget, if anyone else is interested. It s based on ideas by graphic design hero Edward Tufte and uses the HTML Canvas element,
    Message 1 of 6 , Jul 1, 2009
    • 0 Attachment
      I've built a YUI Sparkline widget, if anyone else is interested. It's based on ideas by graphic design hero Edward Tufte and uses the HTML Canvas element, subclassing the YUI Element class. You can find the source and an example of auto-scaling to enclosing text here: http://webkist.wordpress.com/2009/06/30/yui-sparkline-widget/

      A few questions:

      1) Would this make more sense if it were a subclass of Chart?
      2) What's the right way to handle its use of Canvas?
      3) Would DataSource support be a smarter way of passing in data?

      Obviously, this is very alpha, but I'm happily using it within some private admin stuff, so it's functional. But I've only tested it on Firefox 3.
    • matt_3251091
      Hey Michael, this is very nice - but I ve got a couple comments: Unfortunately for me using Canvas is a non-starter since it doesn t work in IE. I personally
      Message 2 of 6 , Jul 1, 2009
      • 0 Attachment
        Hey Michael,
        this is very nice - but I've got a couple comments:
        Unfortunately for me using Canvas is a non-starter since it doesn't work in IE. I personally think this would be a better fit under Chart - I've actually been creating sparklines just using the LineGraph method and hiding all the axis compontents - you have to obviously scale it in a div (instead of using your nice method inline) but that shouldn't be too tricky. Using XHRDataSource is great too since the you can set polling within the charts to get data updated. Very nice looking demo, I'd definitely use this if it was its own chart type.
        -matt

        --- In ydn-javascript@yahoogroups.com, "Michael Cramer" <cramer@...> wrote:
        >
        > I've built a YUI Sparkline widget, if anyone else is interested. It's based on ideas by graphic design hero Edward Tufte and uses the HTML Canvas element, subclassing the YUI Element class. You can find the source and an example of auto-scaling to enclosing text here: http://webkist.wordpress.com/2009/06/30/yui-sparkline-widget/
        >
        > A few questions:
        >
        > 1) Would this make more sense if it were a subclass of Chart?
        > 2) What's the right way to handle its use of Canvas?
        > 3) Would DataSource support be a smarter way of passing in data?
        >
        > Obviously, this is very alpha, but I'm happily using it within some private admin stuff, so it's functional. But I've only tested it on Firefox 3.
        >
      • Michael Cramer
        ... Yeah...I realize it s going to fail in IE. I m thinking if I make it subclass the LineGraph, it could fall back to a very tiny flash-version when Canvas is
        Message 3 of 6 , Jul 1, 2009
        • 0 Attachment
          On Wed, Jul 1, 2009 at 3:56 PM, matt_3251091 <sommer.matt@...> wrote:
          >
          > this is very nice - but I've got a couple comments:
          > Unfortunately for me using Canvas is a non-starter since it doesn't work in IE. I personally think this would be a better fit under Chart - I've actually been creating sparklines just using the LineGraph method and hiding all the axis compontents - you have to obviously scale it in a div (instead of using your nice method inline) but that shouldn't be too tricky. Using XHRDataSource is great too since the you can set polling within the charts to get data updated. Very nice looking demo, I'd definitely use this if it was its own chart type.

          Yeah...I realize it's going to fail in IE. I'm thinking if I make it
          subclass the LineGraph, it could fall back to a very tiny
          flash-version when Canvas is unavailable. And right now it doesn't do
          any updating once the chart is rendered (although that may just work
          if you update the "data" attribute and run render() again...haven't
          tried), so the DataSource stuff would definitely be a nice touch.

          --
          Mike Cramer
          http://www.webkist.com/
          215.769.2505 // AIM/Skype/Etc: MikeWebkist
        • Eric Miraglia
          Michael, We added this to our twitter feed (http://twitter.com/yuilibrary/statuses/2446201817 ) and it will be in the next In the Wild post -- thanks for
          Message 4 of 6 , Jul 2, 2009
          • 0 Attachment
            Michael,

            We added this to our twitter feed (http://twitter.com/yuilibrary/statuses/2446201817 ) and it will be in the next "In the Wild" post -- thanks for sharing.

            I love the idea of using DataSource underneath this -- that should make it pretty easy to fall back to YUI Charts in Flash for IE.

            -Eric


            On Jul 1, 2009, at 1:13 PM, Michael Cramer wrote:



            On Wed, Jul 1, 2009 at 3:56 PM, matt_3251091 <sommer.matt@ gmail.com> wrote:
            >
            > this is very nice - but I've got a couple comments:
            > Unfortunately for me using Canvas is a non-starter since it doesn't work in IE. I personally think this would be a better fit under Chart - I've actually been creating sparklines just using the LineGraph method and hiding all the axis compontents - you have to obviously scale it in a div (instead of using your nice method inline) but that shouldn't be too tricky. Using XHRDataSource is great too since the you can set polling within the charts to get data updated. Very nice looking demo, I'd definitely use this if it was its own chart type.

            Yeah...I realize it's going to fail in IE. I'm thinking if I make it
            subclass the LineGraph, it could fall back to a very tiny
            flash-version when Canvas is unavailable. And right now it doesn't do
            any updating once the chart is rendered (although that may just work
            if you update the "data" attribute and run render() again...haven' t
            tried), so the DataSource stuff would definitely be a nice touch.

            --
            Mike Cramer
            http://www.webkist. com/
            215.769.2505 // AIM/Skype/Etc: MikeWebkist


          • Michael Cramer
            ... I did a major update. YAHOO.widget.Sparkline now subclasses YAHOO.widget.Chart (instead of Element), taking with it all the polling and DataSource support.
            Message 5 of 6 , Jul 7, 2009
            • 0 Attachment
              On Thu, Jul 2, 2009 at 8:45 PM, Eric Miraglia<miraglia@...> wrote:
              > We added this to our twitter feed
              > (http://twitter.com/yuilibrary/statuses/2446201817 ) and it will be in the
              > next "In the Wild" post -- thanks for sharing.
              > I love the idea of using DataSource underneath this -- that should make it
              > pretty easy to fall back to YUI Charts in Flash for IE.

              I did a major update. YAHOO.widget.Sparkline now subclasses
              YAHOO.widget.Chart (instead of Element), taking with it all the
              polling and DataSource support. It also adds a "sparklineUpdate" event
              which fires whenever the <canvas> is redrawn. I've basically just
              overridden a few of Chart's methods -- _embedSWF, _initAttributes, and
              _loadDataHandler -- and the rest seems to have fallen out naturally.
              Main flaw remaining: the config attributes are very different from
              Chart.

              http://webkist.wordpress.com/2009/06/30/yui-sparkline-widget/

              --
              Mike Cramer
              http://www.webkist.com/
              215.769.2505 // AIM/Skype/Etc: MikeWebkist
            • matt_3251091
              very slick. nice work!
              Message 6 of 6 , Jul 8, 2009
              • 0 Attachment
                very slick. nice work!

                --- In ydn-javascript@yahoogroups.com, Michael Cramer <cramer@...> wrote:
                >
                > On Thu, Jul 2, 2009 at 8:45 PM, Eric Miraglia<miraglia@...> wrote:
                > > We added this to our twitter feed
                > > (http://twitter.com/yuilibrary/statuses/2446201817 ) and it will be in the
                > > next "In the Wild" post -- thanks for sharing.
                > > I love the idea of using DataSource underneath this -- that should make it
                > > pretty easy to fall back to YUI Charts in Flash for IE.
                >
                > I did a major update. YAHOO.widget.Sparkline now subclasses
                > YAHOO.widget.Chart (instead of Element), taking with it all the
                > polling and DataSource support. It also adds a "sparklineUpdate" event
                > which fires whenever the <canvas> is redrawn. I've basically just
                > overridden a few of Chart's methods -- _embedSWF, _initAttributes, and
                > _loadDataHandler -- and the rest seems to have fallen out naturally.
                > Main flaw remaining: the config attributes are very different from
                > Chart.
                >
                > http://webkist.wordpress.com/2009/06/30/yui-sparkline-widget/
                >
                > --
                > Mike Cramer
                > http://www.webkist.com/
                > 215.769.2505 // AIM/Skype/Etc: MikeWebkist
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.