niloch / iplotter

JavaScript charting in ipython/jupyter notebooks -
http://niloch.github.io/iplotter/
MIT License
85 stars 10 forks source link

Full page chart and removed chart name from js #2

Closed ubershmekel closed 8 years ago

ubershmekel commented 8 years ago

This lets you see the chart as the entire web page. Also, I got a syntax error when giving a chart a name that has spaces in it. If you need the var name to be unique then we can either:

niloch commented 8 years ago

The double quotes in the template need to be replaced with single quotes to get it to render properly in an iframe I think.

Also, The div name does need to be unique for the purpose of having multiple plots in the same page/frame. We can handle names with spaces by changing render

return Template(head + self.template).render(name=name.replace(" ", "_"), data=json.dumps(data).replace('"', "'"),
                                                     layout=json.dumps(layout).replace('"', "'"))

If possible, corresponding changes could also be made for the C3Plotter class render function and template.

ubershmekel commented 8 years ago

There are more characters that require escaping.

http://stackoverflow.com/questions/1077084/what-characters-are-allowed-in-dom-ids

If you need the div to be unique then I think it'd be better to use random strings. E.g. a user might want a special character to differentiate two charts. I can imagine 2 chart titles like price < expected alongside price >= expected. If you escape < and > then both charts would get the id of priceexpected.

I'm not sure how you're using iframes. But I don't see an issue with double quotes. Though I'm not using ipython, just saving out html files.

niloch commented 8 years ago

I'm realizing the name parameter is a bit ambiguous since it is being used as both a div id in render and as a file name in save which is not immediately obvious. Making this clearer would probably be a good idea on my part.

However, in both these use cases, enforcing names consisting of [a-zA-Z0-9-_.] creates valid cross-platform file names and div ids. This rules out names with special characters like :/<>= that can cause problems in various filesystems and invalid div ids. I think this is a fair burden on the user. Also, div ids are still human readable which is convenient when many charts are in the same file, instead of using unique object ids.

The single quotes in the template string are also necessary to maintain functionality when using the iframe src_doc attribute in the plot method for jupyter notebooks.