Question

I was wondering if anyone is familiar with putting polymer dart and graphs together. I'm looking into using Google graph APIs, however I wanted to put some feelers out there if anyone was handling them different.

Was it helpful?

Solution

I think SVG + Polymer makes for a great foundation for charting libraries!

I experimented with SVG and data-binding a while back and was very happy with the results. My repository of experiments is here: https://github.com/justinfagnani/svg-binding

Custom elements would be a really nice way to allow for chart configuration. You could offer a default bar chart with a tag like <chrt-bar-chart data="{{ myData }}">, but allow incremental customization by supplying more attributes or child elements:

<chrt-chart>
  <chrt-x-axis start="10" end="100"></chrt-x-axis>
  <chrt-grid spacing="100"></chrt-grid>
  <chrt-bars>
    <chrt-series name="Series One" data="{{ myData }}"></chrt-series>
    <chrt-series name="Series Two" data="{{ myOtherData }}"></chrt-series>
  </chrt-bars>
</chrt-chart>

For a rough example.

Of course, you probably don't want to write your own configurable charting library, so if you check the bar chart example in my repo you can see how much work it is to roll you own chart from scratch. Being able to write SVG with data-bindings made it simple enough that you might consider doing it without a library.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top