Add links to category titles

[flrs]

Branching off this issue from unrelated issue #7.

ijunaid8088 posted:

Hi.. Thanks a ton. for your answers they are helping us a lot..

What I think is the better idea is to save SVG to png and then send an email. But not sure yet that what I am going to apply, Your suggestions are very very good and considerable for us.

Anyhow, as we put a name in measure field while creating data for chart, It should support some HTML as well, as we are using it to show cameras status report, I tried to add a span tag with measure value but it came as string in browser, or am doing it wrong?

Do you think it would be better have animation in bars, Like they may create with a slow motion, (Just saying, that how good they will look with animation.)

[flrs]

iljunaid8088's original post in issue #7:

For follow up:

I edited it as

  svg.select('#g_axis').selectAll('text')
      .data(dataset.slice(startSet, endSet))
      .enter()
      .append('text')
      .attr('x', paddingLeft)
      .attr('y', lineSpacing + dataHeight / 2)
      .html(function (d) {
        return d.measure;
      })

the last append was only text for the moment I changed it to html. I hope that would not harm any other thing.

[flrs]

@iljunaid8008: Unfortunately, the SVG that the plot is rendered in behaves a little different from HTML. For this reason, adding a link or other HTML code is as far as I know not as trivial. However, I have just committed some new code that addresses your issue.

You can add the property measure_url to your dataset as shown here:

var dataset = [{
    "measure": "Annual Report",
    "measure_url": "http://www.github.com/flrs/visavail" // link definition
    "interval_s": 365 * 24 * 60 * 60,
    "data": [
        ["2015-01-01", 0], 
        ["2016-01-01", 1],
        ["2017-01-01", 1],
        ["2018-01-01", 1]
    ]
}];

The CSS style for the link is defined in this piece of Visavail.js main CSS file.

Let me know if that solved your issue!

[ijunaid8989]

Hi Thanks for all your efforts..

Actually my issue was:I want to add an fa-icon with measure string, such as if

"measure <i class='fa fa-icon'></i>"

Something like this could be possible?

[flrs]

@ijunaid8088, I have implemented the feature for you. Please see the referenced issue above. Thank you for contributing your ideas! :1st_place_medal:

[ijunaid8989]

Thanks a lot.. You are great..:)