django Paint

Original link: http://www.cnblogs.com/linbinqiang/p/4891593.html

{% extends 'base.html' %}
{% block title %}环境监控{% endblock title %}
{% block extracss %}
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static 'app/CSS/environment.css' %}">
    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
{% endblock extracss %}
{% block content %}
    <div class="row-fluid">
        <div class="col-md-12">
            <div id="my_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-md-12">
            <button class="btn btn-success" id="refresh-button">修改</button>
        </div>
    </div>
    <script type="text/javascript">
    $(function () {
        var data_y = new Array();
        data_y = [10, 20, 30, 60, 70, 10, 20, 30];
        varChart;
         // define an image 
        Chart =  new new Highcharts.Chart ({ 
            Chart: { 
                renderTo: ' my_container ' , 
                type: ' spline ' 
            }, 
            title: { 
                text: ' Wisdom cloud platform ' 
            }, 
            XAXIS: { 
                the Categories: [ . 1 , 2 , 3 , 4 , 5 , 6 , 7 ] 
            }, 
            YAXIS: {
                title: { 
                    text: ' light intensity ' 
                } 
            }, 
            Credits: { 
                Enabled: to false  // Remove High-Hyper Link Chart logo 
            }, 
            Series: [{ 
                name: ' time ' , 
                Data: data_Y, 
            }] 
        }); 
        // refresh picture 
        function refreshPlot (data) { 
            chart.series [ 0 ] .setData (data); 
            chart.redraw (); 
        }; 
        // pass data to the background
         function Ajax (data_function) { 
            $ .post ( ' {% URL ' Ajax ' %} ' , { ' Drugs ' : json_str}, data_function); 
        } 

        // obtaining background data format and returns an array format json data 
        function get_json () { 
            data_Y = []; // empty array 
            // data_Y = [0,10,40,0,20,60,80]; // array to be reassigned 
            $ .getJSON ( ' / ajax_list / ' , function (RET) {
                 for ( var I =ret.length - . 1 ; I > =  0 ; I - ) { 
                    data_y.push (RET [I]); 
                } 
                refreshPlot (data_Y); 
            }); 
        } 
        // Run function 
        $ (Document) .ready ( function () { 
            Chart; 
            / / click event after the button 
            $ ( ' # Refresh-button ' ) .on ( ' the click ' , function (E) { 
                get_json (); 
            }); 
        }); 
    }); 
    </ Script >
{% endblock content %}

 

Reproduced in: https: //www.cnblogs.com/linbinqiang/p/4891593.html