CODEWITHSUNDEEP
javascripthtmljson
Jacob Irwin
Jacob Irwin

Reputation: 153

Display JSON Values in US Dollar Currency (prepend $ dollar sign)

I've been working on a Javascript InfoVis Toolkit to create [highly-optimistic] forecasting projections inside an interactive area chart.

I am having trouble getting the labels to display a "$" prefix in the chart.

However, I was able to successfully include a "$" + value + "M" with the tooltips (when you hover over a region of the chart it shows, for example: AUM: $1.14M -- which is ideally, how I would like the labels to show up); using a javascript function

  //enable tips
  Tips: {
    enable: true,
    onShow: function(tip, elem) {
      tip.innerHTML = "<b>" + elem.name + "</b>: " + "&#36;" + elem.value + "M";
    }
  },

The json data look like this:

var json = {
    'color': ['#ccc', '#54b666', '#2d6837', '#15311a'],
    'label': ['Year Expenses', 'Year Net Profit', 'Year Profit', 'AUM'],
    'values': [
    {
      'label': 'Year 1',
      'values': [.05, .14, .25, 5]
    }, 
    {
      'label': 'Year 2',
      'values': [.06, .21, .34, 6.14]
    }, 
    {
      'label': 'Year 3',
      'values': [.06, .29, .47, 7.85]
    }, 
    {
      'label': 'Year 5',
      'values': [.13, .54, .91, 14.30]
    }, 
    {
      'label': 'Year 10',
      'values': [.35, 5.93, 6.67, 115.46]
    }
    ]

};

The html page with chart: http://kimerick.com/invest/financials.html

And the full js: http://kimerick.com/invest/js/area/example1.js

Upvotes: 2

Views: 996

Answers (2)

Siddhartha Khatri
Siddhartha Khatri

Reputation: 1

To change the position of tooltip, offsetX and offsetY options are available:

var viz = new $jit.Viz({
    Tips: {
        enable: true,
        type: 'Native',
        offsetX: 10,
        offsetY: 10,
        onShow: function(tip, node) {
            tip.innerHTML = node.name;
        }
    }
});

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117354

These labels are selectable with a css-selector, so you may use css too to generate the prefix automatically:

#infovis-label div div div:last-child:before{ content:"$"; }

Upvotes: 2

Related Questions