Gráfico con Highchart con los datos devueltos de una vista

[zavres]

Buenas tardes.

Estoy intentando realizar mi primera página web con django y me estoy encontrando con problemas.
La página web muestra los datos recibidos (temperaturas, humedad, etc) desde unos arduinos y que se graban en una base de datos sqlite.
Tengo la plantilla que recibe los datos de la vista y los muestra en una tabla dentro de un div pero ahora me gustaría mostrar en otro div un gráfico creado con Highchart

¿como puedo recoger los datos recibidos de la vista e añadirlos a la gráfica? ¿cuales serían los pasos?

Saludos y gracias.

[razpeitia]

1. Crea un view que devuelva un json que vas a graficar.
2. Haz un llamada ajax desde el frontend a la vista del paso 1 para obtener los datos.
3. Una vez que los obtengas los gráficas del lado del frontend.

[zavres]

Muchas gracias por la respuesta.

Una duda, me comentas que tengo que crear una view con los datos a mostrar en la gráfica y después tendría que llamar a la view desde la página para recuperar esos datos. ¿es así? ¿tengo que llamar a la vista desde la página con javascript (p.e)?

Supongo que las preguntas son muy básicas pero es la primera vez que me peleo con Django y todo lo que aprendí de programación es a nivel casero.

Saludos y gracias de nuevo.

[razpeitia]

Una duda, me comentas que tengo que crear una view con los datos a mostrar en la gráfica y después tendría que llamar a la view desde la página para recuperar esos datos. ¿es así? ¿tengo que llamar a la vista desde la página con javascript (p.e)?

Si

[zavres]

Muchas gracias.

En cuanto pueda lo pruebo y ya comento los resultados o si me sale algún otro problema.

Saludos.

[lagardel]

Si los datos ya los tienes en la vista no te hace falta volver a cargarlos, tendras que crear la grafica por javascript.

[zavres]

Muchas gracias por la información.

Yo paso los datos a la plantilla a través de esta vista:

Código Python:

def dispositivo_detail(request, pk):
    datos = Datos.objects.filter(Dispositivo_id=pk).order_by('-Fecha')
    return render(request, 'tc/dispositivo_detail.html', {'datos': datos})
 

Con esto ya puedo recoger los datos en javascript para crear los datos de HighChart?
¿como puedo acceder a esos datos con javascript? Estuve buscando pero no encuentro nada para ello.

En la plantilla la tabla la muestro con el siguiente código:

Código HTML:

<table class="table table-striped">
        <thead>
            <tr>
                <th>Fecha</th>
                <th>Temperatura</th>
                <th>Humedad</th>
                <th>Luz</th>
            </tr>
        </thead>
        
        {% for dato in datos %} 
        <tbody>
            <tr>
                <td>{{ dato.Fecha|date:"d/m/Y H:i" }}</td>
                <td>{{ dato.Temperatura }}</td>
                <td>{{ dato.Humedad }}</td>
                <td>{{ dato.Luz }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
 

Pero no tengo claro como acceder a la variable {% datos %} con javascript. Me podéis indicar algo?

Saludos.

[lagardel]

Accedes igual, por ejemplo:

Código:

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: {{datosdetokio}}
        }, {
            name: 'New York',
            data: {{datosdenewyork}}
        }, {
            name: 'Berlin',
            data: {{datosdeberlin}}
        }, {
            name: 'London',
            data:{{datosdelondres}}
        }]
    });

[zavres]

Hola de nuevo.

Aquí sigo con mi intento de crear una gráfica con Highcharts pero por ahora todos los intentos son en vano. He intentado hacerlo aprovechando los datos ya pasados a la plantilla como indica lagardel pero no me muestra nada (div en blanco). Pongo el código que tango actualmente:
- Modelo:

Código Python:

class Datos(models.Model):
    idDatos = models.AutoField
    Dispositivo = models.ForeignKey('Dispositivo')
    Temperatura = models.DecimalField(max_digits=5, decimal_places=2)
    Humedad = models.DecimalField(max_digits=5, decimal_places=2)
    Luz = models.DecimalField(max_digits=5, decimal_places=0)
    Fecha = models.DateTimeField(blank=True, null=True)
 

- Vista:

Código Python:

def dispositivo_detail(request, pk):
    datos = Datos.objects.filter(Dispositivo_id=pk).order_by('-Fecha')
    return render(request, 'tc/dispositivo_detail.html', {'datos': datos})
 

- Script en plantilla:

Código Javascript:

<script type="text/javascript">
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'grafico',
                    defaultSeriesType: 'line',
                    margin: [50, 150, 60, 80]
                },
                title: {
                    text: 'Datos sensores',
                    style: {
                        margin: '10px 100px 0 0' // center it
                    }
                },
                xAxis: {
                    categories: {{datos.Fecha}},
                    title: {
                        text: 'Fecha y Hora'
                    }
                },
                yAxis: {
                    title: {
                        text: 'Valores'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    style: {
                        left: 'auto',
                        bottom: 'auto',
                        right: '10px',
                        top: '100px'
                    }
                },
                series: [{
                    name: 'Temperatura',
                    data: {{ datos.Temperatura }}
                }, {
                    name: 'Humedad',
                    data: {{ datos.Humedad }}
                }, {
                    name: 'Luz',
                    data: {{ datos.Luz }}
                }]
            });
        });     
</script>
 

Entiendo que lo que falla es que no puedo acceder a los campos del modelo a través del formato {{datos.Campo_de_tabla}} pero no encuentro ninguna forma de acceder a estos campos directamente.
Intenté crear cuatro listas con los distintos valores pero error al intentarlo, cosa que en el shell de django si me sacaba la lista. El código que intenté hacer es:

Código Python:

temp = []
humedad = []
luz = []
fecha = []
 
from tc.models import Datos
datos = Datos.objects.filter(Dispositivo_id='AA:BB:CC:DD:EE:FF')
for dato in datos:
    temp.append(dato.Temperatura)
    humedad.append(dato.Humedad)
    luz.append(dato.Luz)
    fecha.append(dato.Fecha
 

Supongo que esas cuatro listas si las paso como parámetros para el script funcionaría pero no soy capaz de crearlas dentro de la plantilla.

¿que estoy haciendo mal? Estoy muy perdido.

Saludos y gracias

[sarayo2]

Hola,

Yo también estoy trabajando con higtchart y no he hecho nada por javascripts.
Me he creado el views, y he cargado el html a través del load chartit.

Te pongo un ejemplo de mi ventana. Es importante que pongas esto en la ventana en el container.
{% load chartit %}
{{ cht|load_charts:"container" }}

De todas formas te paso el ejemplo completo por si te sirve.
plantilla.html

{% extends "bootstrap/layouts/12.html" %}
{% load crispy_forms_tags %}
{% load chartit %}
{{ cht|load_charts:"container" }}
{% load django_tables2 %}
{% block all %}

<form name="form1" action="" method="post" charset="utf-8"></form>{% csrf_token %}

<h4>Gráficas</h4>

<ul class="nav nav-tabs">
<li {% if not u %}class="active"{% endif %}><a href="#peticion" data-toggle="tab">Petición</a></li>
{% if u %}
<li class="active"><a href="#graficas" data-toggle="tab">Gráficas</a></li>
{% endif %}
</ul>

<script src="{{STATIC_URL}}js/perfilado/utils.js" ></script>
<script type="text/javascript" src="{{STATIC_URL}}js/jquery-latest.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}js/highcharts/js/highcharts.js"></script>
<br/>
<div class="tab-content">
<div class="tab-pane {% if not u %}active{% endif %}" id="peticion">
<h4>1. Introduzca la semana clave a partir de la cual buscar</h4>
{% crispy form %}
</div>
<div class="tab-pane {% if u %}active{% endif %}" id="graficas">
{% load chartit %}
{{ cht|load_charts:"container" }}
<div id='container'>Gráfico</div>

</div>
</div>
{% endblock %}

views.py
id_64_resoluc = datos_extraidos.objects.filter(id_serie=64)
id_58_entrad = datos_extraidos.objects.filter(id_serie=58)
id_70_stock = datos_extraidos.objects.filter(id_serie=69)

# id = datos_extraidos.objects.filter(id_serie__in=selecc ion)
# print "id: ", id

ds = DataPool(series=[{'options': {'source': id_64_resoluc}, 'terms': ['clave', {'Resueltas': 'valor'}]},{'options': {'source': id_58_entrad}, 'terms':[{'clave_2': 'clave', 'Entradas': 'valor'}]},{'options': {'source': id_70_stock}, 'terms': [{'clave_3':'clave', 'Stock': 'valor'}]}])
cht = Chart(datasource=ds, series_options = [{'options':{'type':'line', 'stacking': False }, 'terms':{'clave': ['Resueltas'], 'clave_2': ['Entradas'],'clave_3': ['Stock'] }}], chart_options = {'title': {'text': 'Peticiones España'},'xAxis': {'title': {'text': 'Semanas'}}})

except MySQLdb.Error, e:
print "Mysql Error %d: %s" % (e.args[0], e.args[1])

return render(request, 'perfilado/informes/graficas_espana/index.html', {'cht': cht})


models.py
class datos_extraidos(models.Model):

id_serie = models.IntegerField(db_column='id_serie',primary_k ey=True)
clave = models.IntegerField(db_column='clave')
valor = models.DecimalField(db_column='valor', max_digits=9, decimal_places=2)

class Meta:
db_table = u'datos_extraidos'

Espero te sirva

[zavres]

Muchas gracias.

Llevo un mes de mucho trabajo y no he podido mirarlo más. A ver si puedo trabajar sobre el proyecto esta semana.
Me apunto las indicaciones a ver si consigo hacerlo funcionar.

Saludos.