Example of using highcharts

Next, only the tree value is returned for the voting result. The page is too single and you want to make a report to display data through charts. Use highcharts, change the original returned result to a chart (two charts are used, one is a pie chart and the other is a column chart)

1. Get Data

Compile a function to return JSON data. Here, the data is manually defined,

Import jsondef get_vote_result (request): pie_list = [[U 'beijing', 50], [U 'shanghai', 20], [U 'guangzhou ', 30] t_country = [U 'beijing', u 'shanghai', u 'shanghai'] t_country_count = [50, 20, 30] data_dic = {'pie _ G': pie_list, 't_ country ': t_country, 't_ county_count': t_country_count} return httpresponse (JSON. dumps (data_dic ))

2. Transform the template and introduce the highchats File

<Div class = "row"> <Div class = "col-md-5"> <Div id = "Container" class = "height: 500px "> </div> <Div class =" col-md-5 "> <Div id =" container3 "class =" height: 500px "> </div> <SCRIPT src ="/static/Bootstrap/JS/jquery-1.10.2.js "> </SCRIPT> <SCRIPT src = "/ static/Bootstrap/JS/Bootstrap. min. JS "> </SCRIPT> <SCRIPT src ="/static/highchart/JS/highcharts. JS "> </SCRIPT> <SCRIPT src ="/static/highchart/JS/modu Les/exporting. js "> </SCRIPT> <! -- Test --> <SCRIPT type = "text/JavaScript"> $ (document ). ready (function () {$. getjson ('/polls/get_vote_result/', {}, function (callback) {console. log (callback); // start pie graph $ (function () {$ (document ). ready (function () {$ ('# iner '). highcharts ({chart: {plotbackgroundcolor: NULL, plotborderwidth: NULL, plotshadow: false}, Title: {text: '11 day long vacation voting fig'}, tooltip: {pointformat: '{series. name }:< B> {point. percentage :. 1f }%</B> '}, plotoptions: {pie: {allowpointselect: True, cursor: 'pointer', datalabels: {enabled: false}, showinlegend: true }}, series: [{type: 'pie ', name: 'total votes', data: callback. pie_g}]}); // end pie graph // start bar chart $ (function () {$ ('# container3 '). highcharts ({chart: {type: 'column ', margin: [50,100, 80]}, Title: {text: '11 day long holiday voting fig'}, xaxis: {categories: callback. t_country, labels: {rotation:-45, align: 'right', style: {fontsize: '13px ', fontfamily: 'verdana, sans-serif' }}, yaxis: {min: 0, Title: {text: 'Voting (percentage) '}}, Legend: {enabled: false}, tooltip: {pointformat:' total votes: <B> {point. Y :. 1f }%</B> '}, Series: [{Name: 'population', data: callback. t_county_count, datalabels: {enabled: True, rotation:-90, color: '# ffff', align: 'right', X: 4, Y: 10, style: {fontsize: '13px ', fontfamily: 'verdana, sans-serif', textshadow: '0 0 3px black' }}]}) ;}); // end bar chart }); // end JSON}) </SCRIPT> </div>

3. Page access

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/8B/wKiom1P8TUeReVG0AAED3oRRrlw443.jpg "Title =" 13.jpg" alt = "wkiom1p8tuerev1_aaed3orrrlw443.jpg"/>

----- "Write it to yourself and forget it. Do not spray 《《《《--------

This article is from the "continue to struggle" blog and will not be reposted!

Example of using highcharts