Display dynamic results in website

Question

I'm developing a website for a travel search engine and I want to show the results similarly with a similar concept than Hipmunk.

Details are:

The website is being developed with Django.
Content is dynamic (results depends on each search)
Bars are placed along a timeline, so positioning them would depend on the time.
The bars used in the example seem too simple, so I might try something a bit more elaborated, such as a mix of circles, bars and icons, similarly to Rome2rio, but horizontally.
Time filter is applied at the timeline, so depending on the user interaction with the timeline, results shown would change (see hipmunk image above).

I guess the normal approach would be using javascript, but as I have no background, I was wondering if there are any alternatives or existing packages that would allow me to do this.

It would be ideal if there was some module in Python, as this is my background. I heard about bokeh, but it seems focused on scientific data and charts.

I also read somewhere about Skulpt, but it seems not mature yet.

Is there a way to create such a thing with Python or am I condemned to use Javascript? If so, any tips of existing modules that could help?

browser can execute only JavaScript (with HTML and CSS). There are modules like [TranScrypt](http://transcrypt.org/) which can convert part of Python into JavaScript. But better learn JavaScript, HTML, CSS because you can find many tutorials and libraries in JavaScript. — furas, Dec 16 '16 at 22:17
Thanks @furas, HTML and CSS are not an issue. What seems that would be more complicated would be JavaScript. Do you know of any module/widget that could be helpful to implement what I explained? — J0ANMM, Dec 16 '16 at 22:25
I don't know library which can do what you need but there are so many libraries. — furas, Dec 16 '16 at 22:37

score 0 · Answer 1 · edited May 23 '17 at 12:07

In Django, this can actually be done just with CSS and contexts.

For instance:

{% for obj in object_list|slice:":40" %}
    <div style='width:{{ obj|function_to_get_width }}%;float:left'>
        <hr class='diagram_formatting'/>
    </div>
{% endfor %}

Where function_to_get_width would be in a python file and diagram_formatting would be a specified in the CSS file.

Only point missing would be the time filter to be applied through the timeline.

Display dynamic results in website

1 Answers1