I am working on a webapp which would take a question from the user from an HTML form. Extract the date from the string and plot a graph for the date using JavaScript. The String to date conversion is done via the dateutil library of Python.
E.g. "what are my sales for 4th of july", the Python function will return 07-04-2018 as the date which I will then use.
The problem is now passing this date as a variable to the external JavaScript file that will be doing the plotting. Is there any way I can call my Python function based on the string in the HTML form, get the date and pass it to the JS to plot the graph?
At the moment I am not using JS and just calling the Python function from html which launches a a new webpage after processing the date string :
<form class="has-text-centered" style="width:60%;"
action="{{url_for('intentHandler')}}" method="post">
The Python function QuestionHandler is defined as below :
def QuestionHandler(question):
date = dateConverter(question)
return render_template("graph.html", date = date)
To produce the graph on the same webpage after the question has been submitted, It was recommended that I use JS. So after fiddling around with it, right now the HTML looks like this :
<form action="" method="" onsubmit="myFunction()" action="{{url_for('intentHandler')}}" method="post">
<input type="search" placeholder="How can i help you ?">
</form>
<div class="buttonR">
<button id="searchButton" onclick="myFunction()">Search</button>
</div>`
The external JS file contains the following functions :
function myFunction(){
var x = document.getElementById("latest");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
$(loadLineGraphVizContainer);
}
function loadLineGraphVizContainer(){
var placeholderDiv = document.getElementById("tableauIFrame");
var url = <Graphics Library URL>;
var options = {
hideTabs: true,
showVizHome: false,
width: "950px",
height: "430px",
"Date": "06/01/2016",
"Measure Name": "Sales"
};
viz = new tableau.Viz(placeholderDiv, url, options);
}
I would like the date variable of the JS to be generated by the QuestionHandler function and then that value to be used by the JS file to plot my graph in the same HTML page.
Any suggestions, how we can go about this task?
myFunctionaccept the date as argument and dispatch it toloadLineGraphVizContainer? You would then just need toonClick="myFunction({{ date }})"in the HTML.