How Django uses highcharts, we can actually abandon Django-chartit

The previous time used the Pandas+matplotlib drawing, later thought, because is uses the picture to display, but is not the dynamic presentation, really not very good.

So we're going to improve the use of Higchart (I've tried Django Chartit, I think this stuff makes simple things complicated, really, it's easier to use Highchart directly)

Data

d={' 1.htldxhzj.duapp.com ': 9398, ' gtxapi.cdn.duapp.com ': 79496, ' www.xxx.com ': 2477070, ' www.baidu.com ': 1465, ' Www.bing.com ': 777, ' www.aaa.com ': 1113101, ' www.ccc.net.cn ': 922, ' www.zhanimei.ga ': 29847, ' www.zhanimei.ml ': 40155, ' Www.zhasini.ml ': 373436}

Highchart

Let's draw a simple histogram, as before. Here is the code, this code to the official website to copy on the line, a lot of real columns.

<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><script>    $ (function  ()  {    $ (' # Container '). Highcharts ({        chart: {             type:  ' column ',             margin: [ 50, 50, 100, 80]         },        title: {             text:  ' website Access data '          },        xaxis: {             categories: {{ categories | safe }},                \\ Here we introduce the data              labels: {                 rotation: 0,                 align:  ' right ',                 style: {                     fontSize:  ' 13px ',                      fontfamily:  ' Verdana,&nbsP;sans-serif '                 }             }         },        yAxis: {             min: 0,             title: {                 text:  ' Traffic '             }         },        legend:  {            enabled: false         },        tooltip: {             pointFormat:  ' Traffic: <b>{point.y:.1f}</b> ',         },        series: [{             name:  ' Today's log ',             data: {{ data }},             dataLabels: {                 enabled: false,                 rotation: -90,                 color:  ' #FFFFFF ',                 align:  ' right ',                 x: 4,                 y: 10,                 style: {                     fontSize:  ' 13px ',                      fontFamily:  ' Verdana, sans-serif ',                     textShadow:  ' 0 0 3px black '                 }             }        } ]    });}); </script><div id= "Container"  style= "min-width:700px;height:400px" ></div>            //, this is where the picture is.

See how the data is.

>>> d={' 1.htldxhzj.duapp.com ': 9398, ' gtxapi.cdn.duapp.com ': 79496, ' www.xxx.com ': 2477070, ' www.baidu.com ': 1465, ' www.bing.com ': 777, ' www.aaa.com ': 1113101, ' www.ccc.net.cn ': 922, ' www.zhanimei.ga ': 29847, ' www.zhanimei.ml ': 40155, ' www.zhasini.ml ': 373436}>>> d.values () [40155, 1113101, 9398, 373436, 777, 79496, 922, 1465, 2477070, 2984 7]>>> D.keys () [' www.zhanimei.ml ', ' www.aaa.com ', ' 1.htldxhzj.duapp.com ', ' www.zhasini.ml ', ' www.bing.com ', ' gtxapi.cdn.duapp.com ', ' www.ccc.net.cn ', ' www.baidu.com ', ' www.xxx.com ', ' Www.zhanimei.ga ']>>> categories = D.keys () >>> data = D.values ()

Add the above code to the views.py

Categories = D.keys () data = D.values () return render_to_response (' an_log/an_log.html ', {' user ': Request.user, ' Categories ': Categories, ' Data ':d ATA})

Okay, a simple bar chart is generated.

How Django uses highcharts, we can actually abandon Django-chartit