Iam trying to use Graphos with my Django html template to grab data from csv, and display a graph. I tried from the documentation https://pypi.org/project/django-graphos/, but the template isnt showing anything.
In my views i did this
from graphos.sources.csv_file import CSVDataSource
def graphos_chart(request):
csv_file = open("order_dashboard/Book1.csv")
data_source = CSVDataSource(csv_file)
return render(request, 'order_dashboard/home.html', {'chart': data_source})
template
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
</script>
{{ data_source|safe }}
Book1.csv
,January,February,March,April,May,June,July
Temperature,7,7,10,15,20,23,26
Precipitation,8.1,14.9,41.0,31.4,42.6,57.5,36.0
Something is missing in above method?
Or please suggest any alternate Graph plotting library to look for.
Related
How do you set dynamic content passed from view to template to use mathjax or Latex. To be more precise in the terminal if 2*sqrt(2) would be displayed as 2√2 by pprint function. But in the django template it outputs as 2*sqrt(2) and not 2√2?
Finally figured out in case anyone else runs into the same problem here's is the working solution. I used AsciiMath Input as the input format in mathjax that incorporates ASCIIMathML.
In the base.html add the following scripts:
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml']}
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/startup.js"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">
and remember to enclose the dynamic text by back-ticks”, i.e., `...` So in the django-admin you can simply enter sqrt(50) as ` sqrt(50) ` or ` x^2 ` and the dynamic content which is passed from view to the template, in the template you surround {{e1}} by back-ticks
` {{ e1 }} ` instead of
{{ e1 }}
where e1 is the dynamic content. So if e1 which was earlier displayed in plain text as 2*sqrt(2) will now be displyed as 2√2.
For more details: http://docs.mathjax.org/en/latest/input/asciimath.html#asciimath-support
I am getting HTML content from a backend service request that might include something (non-JSRender) like this:
<div>{{comp:someComponentId}}</div>
Or we can receive it as:
<div>{{comp someComponentId}}</div>
I want to leverage this syntax to use a converter or a tag in JSRender to effectively convert this to:
<div>{{include tmpl="someComponentId"/}}</div>
Whether the tag/converter does the rendering, or if it can iteratively create the include to have JSRender evaluate it. How do I achieve this?
Does this do what you want?
<script id="myTmpl" type="text/x-jsrender">
{{comp someid/}}
</script>
<script id="id1" type="text/x-jsrender">
what {{:foo}}
</script>
<div id="page"></div>
<script>
$.views.tags("comp", {
render: function(id) {
return $("#"+id).render(this.tagCtx.view.data);
}
});
var myTmpl = $.templates("#myTmpl"),
data = { someid: "id1", foo: "FOO" },
html = myTmpl(data);
$("#page").html(html);
</script>
I´m trying to use a date picker widget from a model form in the template. I´ve seen several posts but couldn´t get it working correctly.
The one I´m trying now is: Answered question
Form.py
My form code looks like
class FormularioTareas(forms.ModelForm):
class Meta:
model = Tareas
widgets = {'fecha_limite': forms.DateInput(attrs={'class': 'datepicker'})}
fields = ["destinatario", "titulo", "tarea", "resuelto", "fecha_limite"]
Template
In the template I add this script:
/* Include the jquery Ui here */
<script>
$(function() {
$( ".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1900:2012",
});
});
</script>
And have this form call in the html
<div style="background: white;">{{ tareas_form.fecha_limite }}</div>
Jquery
I load Jquery as follows and have no problems detected in the browsers console.
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
What I get
I found out that the picker is working, but the main text box diplays options down when focused so I didn´t see it. The text box is still behaving as a date picker and as a text box. How can I prevent this?
Any clues welcome. Thanks!
I used autocomplete="off" on the form so the usual text input dropdown options don´t show.
I'm creating content in my pages with some javascript. I'm creating my divs and adding scripts. So, content is pulled into page via javascript.
I'm also using django-tinymce package in my admin site. I'm typing and saving my HTML code via HTML button on tinymce. Everything works fine in template. But, when i want to edit that content, my divs are replaced with an empty div in Tinymce HTML view.
Here is my original html code:
<div site-widget="bulletin">
<bulletin-navigator></bulletin-navigator>
<bulletin-filter-container></bulletin-filter-container>
<bulletin-event-list-container></bulletin-event-list-container>
</div>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/common.js"></script>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/bulletin.js"></script>
After saving this html code, when i press HTML button on tinymce again i see the following html code:
<div> </div>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/common.js"></script>
<script type="text/javascript" src="http://192.168.30.42:10000/assets/js/bulletin.js"></script>
my tincmce config is like this in settings.py file:
TINYMCE_DEFAULT_CONFIG = {
'plugins': "table,paste,searchreplace",
'theme': "advanced",
'cleanup_on_startup': True,
'custom_undo_redo_levels': 10,
'skin' : "o2k7",
'width' : "100%",
'height' : "600px",
'extended_valid_elements': 'div|bulletin-navigator|bulletin-filter-container|bulletin-event-list-container'
}
It looks like TinyMCE is kindly filtering out any tags it does not recognize. It is being overly helpful...
You may need to define 'custom_elements' in TinyMCE - http://www.tinymce.com/wiki.php/Configuration:custom_elements
Spend some time Here and configure it to fit your specific needs.
I would like to know how to configure Mathjax in Django in a Q&A system where Questions and Answers will be based on LaTeX format.
I have tried to add:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
into the html template where the questions and answers will be displayed to no avail.
Thanks.
If the page's content is dynamically created, you will need to call MathJax after the content has been loaded. See the documentation for details. The main idea is that you have to include
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
in the javascript that is executed after the content is in place.
fOR Dynamic content here's is the working solution. I used AsciiMath Input as the input format in mathjax that incorporates ASCIIMathML.
In the base.html add the following scripts:
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml']}
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/startup.js"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">
and remember to enclose the dynamic text by back-ticks”, i.e., `...` So in the django-admin you can simply enter sqrt(50) as ` sqrt(50) ` or ` x^2 ` and the dynamic content which is passed from view to the template, in the template you surround {{e1}} by back-ticks
` {{ e1 }} `
instead of
{{ e1 }} where e1 is the dynamic content. So if e1 which was earlier displayed in plain text as 2*sqrt(2) will now be displyed as 2√2.
For more details: http://docs.mathjax.org/en/latest/input/asciimath.html#asciimath-support
see https://docs.mathjax.org/en/latest/web/configuration.html. For the demo indicated here to work you should also add ['\(', '\)'] to inlineMath:
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>