CODEWITHSUNDEEP
javascriptjqueryhtmldimple.js
Shahbaz
Shahbaz

Reputation: 10585

Driving dimple.js charts from div attributes

Currently my code is full of small functions which setup various dimple charts, the usual boiler plate of svgs, charts, axes, etc. In many cases, these functions are tied, one-to-one to div tags where the chart will be drawn.

I'm thinking of setting up a system to do something like this instead:

<div class="dimple-chart" margin-x="10% xAxisType="measure" xAxis="height" ...></div>

Once I've figured out the naming convention and the set of attributes I need, I can use jquery (or whatever works) to transform the values in attributes and generate a chart.

I don't normally do web programming so I'm curious if I need to build this myself or if something like this already exists. If there are no tools or libraries, are there some standards or best practices I should be aware of (such as adding custom attributes to div tags)?

I have seen some templating languages which even let you do basic data transforms, such as filtering, mapping or reducing data. I'm interested in learning if such templating library may help in this case.

Upvotes: 0

Views: 215

Answers (2)

Shahbaz
Shahbaz

Reputation: 10585

For whoever may visit this question in the future, I have a basic prototype for dimple-chart tag using xtag at https://github.com/falconair/dimple-chart.

This uses Mozilla's x-tag library, which means non-angular devs can use this. What I have is the most basic, proof of concept. As of now, my intention is to only build it out as much as I need it for my app. Over time, if there is demand, I may clean it up further

Upvotes: 1

John Kiernander
John Kiernander

Reputation: 4904

You are pretty much describing angular directives and you are in luck because a set of angular directives exist for dimple called angular-dimple http://esripdx.github.io/angular-dimple/

Upvotes: 1

Related Questions