Skip to content

Instantly share code, notes, and snippets.

@palistha01

palistha01/urls.py

Created January 10, 2019 08:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save palistha01/fa5781a66f53d87a01dfd6d63aa24dd6 to your computer and use it in GitHub Desktop.
Save palistha01/fa5781a66f53d87a01dfd6d63aa24dd6 to your computer and use it in GitHub Desktop.
Download ZIP
I want to show dynamic data in barchart by using morris.js and django. I'm able to show data and total number of repetition of same data in bar chart but unable to show the same data in range. Example: if i want to show total number of houses having area 1000-2000sqm, 2000-3000 and son on y-axis and area of houses in sqm in x-axis ,i'm unable to…
Raw
gistfile1.txt
{% load static %}
<html>
<head>
<meta charset=utf-8/>
<title>Analysis Report</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="{% static 'assets/js/report.js' %}"></script>
<style>
#area-chart,
#line-chart,
#bar-chart,
#stacked,
#pie-chart {
min-height: 250px;
}
</style>
</head>
<div>
<div class="container">
<h1 align="center"><b> Building Permit System Analysis Report</b></h1>
<br><br>
<div class
"row">
<div class="col-sm-6 text-center">
<label class="label label-success">Ward Number</label>
<div id="ward"></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">Building Use</label>
<div id="building_use"></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">Building Category</label>
<div id="building_category"></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">Number of Storey</label>
<div id="building_storey"></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">Building Area</label>
<div id="building_area"></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">Building Structure Category</label>
<div id="building_structure_category"></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">Land Information</label>
<div id="landinfo"></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">Year</label>
<br><br>
<select name="date" class="form-control" id="date">
<option value="" selected="selected">--Select Year--</option>
<option value="2074">2074</option>
<option value="2075">2075</option>
<option value="2076">2076</option>
</select>
<div id="date"></div>
</div>
<div class="col-sm-6 text-center">
<label class="label label-success">District</label>
<br><br>
<select name="year" class="form-control" id="year">
<option value="" selected="selected">--Select District--</option>
<option value="achham">अछाम</option>
<option value="arghakhachi">अर्घाखाँची</option>
<option value="baglung">बाग्लुंग</option>
<option value="baitadi">बैतडी</option>
<option value="bajhang">बझांग</option>
<option value="bajura">बाजुरा</option>
<option value="banke">बाँके</option>
<option value="bara">बारा</option>
<option value="bardiya">बर्दिया</option>
<option value="bhaktapur">भक्तपुर</option>
<option value="bhojpur">भोजपुर</option>
<option value="chitwan">चितवन</option>
<option value="dadeldhura">डडेल्धुरा</option>
<option value="dailekh">दैलेख</option>
<option value="dang">दांग</option>
<option value="darchula">दार्चुला</option>
<option value="dhading">धादिंग</option>
<option value="dhankuta">धनकुटा</option>
<option value="dhanusha">धनुषा</option>
<option value="dolakha">दोलखा</option>
<option value="dolpa">डोल्पा</option>
<option value="doti">डोटी</option>
<option value="gorkha">गोर्खा</option>
<option value="gulmi">गुल्मी</option>
<option value="humla">हुम्ला</option>
<option value="ilam">इलाम</option>
<option value="jajarkot">जाजरकोट</option>
<option value="jhapa">झापा</option>
<option value="jumla">जुम्ला</option>
<option value="kailali">कैलाली</option>
<option value="kalikot">कालिकोट</option>
<option value="kanchanpur">कंचनपुर</option>
<option value="kapilbastu">कपिलवस्तु</option>
<option value="kaski">कास्की</option>
<option value="kathmandu">काठमाडौँ</option>
<option value="kavrepalanchowk">कव्रेपलान्चोक</option>
<option value="khotang">खोटांग</option>
<option value="lalitpur">ललितपुर</option>
<option value="lamjung">लम्जुंग</option>
<option value="mahottari">महोत्तरी</option>
<option value="makawanpur">मकवानपुर</option>
<option value="manang">मनाङ्</option>
<option value="morang">मोरंग</option>
<option value="mugu">मुगु</option>
<option value="mustang">मुस्तांग</option>
<option value="myagdi">म्याग्दी</option>
<option value="nawalparasi">नवलपरासी</option>
<option value="nuwakot">नुवाकोट</option>
<option value="okhaldhunga">ओखल्धुङ्ग</option>
<option value="palpa">पाल्पा</option>
<option value="panchthar">पांचथर</option>
<option value="parbat">पर्बत</option>
<option value="parsa">पर्सा</option>
<option value="pyuthan">प्युठान</option>
<option value="ramechhap">रामेछाप</option>
<option value="rasuwa">रसुवा</option>
<option value="rautahat">रौतहट</option>
<option value="rolpa">रोल्पा</option>
<option value="rukum">रुकुम</option>
<option value="rupandehi">रुपन्देही</option>
<option value="salyan">सल्यान</option>
<option value="sankhuwasabha">संखुवासभा</option>
<option value="saptari">सप्तरी</option>
<option value="sarlahi">सर्लाही</option>
<option value="sindhuli">सिन्धुली</option>
<option value="sindhupalchowk">सिन्धुपाल्चोक</option>
<option value="siraha">सिराहा</option>
<option value="solukhumbu">सोलुखुम्बु</option>
<option value="sunsari">सुनसरी</option>
<option value="surkhet">सुर्खेत</option>
<option value="syangja">स्यांग्जा</option>
<option value="tanahun">तनहु</option>
<option value="taplejung">ताप्लेजुंग</option>
<option value="tehrathum">तेर्हथुम</option>
<option value="udaypur">उदयपुर</option>
</select>
<div id="district"></div>
</div>
</div>
</div>
<br>
<br>
<script>
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMonthwiseChart);
function load_monthwise_data(year, title) {
var temp_title = title + ' ' + year + '';
$.ajax({
url: '{% url "year" %}',
type: "GET",
data: {
"_token": "{% csrf_token %}",
// "mun_id":$('#municipality').val(),
"year": $('#year').val(),
},
dataType: "json",
success: function (data) {
// alert(4);
if (data) {
var results = data;
var count = results.results.length;
console.log(count);
drawMonthwiseChart(count, temp_title);
}
}
});
}
function drawMonthwiseChart(chart_data, chart_main_title) {
var date = $("select#year").val();
console.log(date);
var jsonData = chart_data;
console.log(jsonData);
var data = new google.visualization.DataTable();
data.addColumn('string', 'District');
data.addColumn('number', 'Total');
var month = date;
var profit = jsonData;
data.addRows([[month, profit]]);
var options = {
title: chart_main_title,
hAxis: {
title: "District"
},
vAxis: {
title: 'Total'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('district'));
chart.draw(data, options);
}
$('#year').change(function () {
var year = $(this).val();
if (year != '') {
load_monthwise_data(year, 'District');
}
});
var ward = [
{% for c in results %}
{y: '{{ c.ward_no }}', b: '{{ c.ward_no__count }}'}{% if not forloop.last %},{% endif %}
{% endfor %}
],
ward = {
data: ward,
xkey: 'y',
ykeys: ['b'],
labels: ['Ward Number'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 60,
hideHover: true
};
var building_use = [
{% for c in building_use %}
{y: '{{ c.building_use}}', b: '{{ c.building_use__count }}'}{% if not forloop.last %},{% endif %}
{% endfor %}
],
building_use = {
data: building_use,
xkey: 'y',
ykeys: ['b'],
labels: ['Building Use'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 60,
hideHover: true
};
var building_category = [
{% for c in building_category %}
{y: '{% if c.building_category == "a" %}क वर्ग {% elif c.building_category == "b" %}ख वर्ग {% elif c.building_category == "c"%}ग वर्ग {% else %}घ वर्ग {% endif %}', b: '{{ c.building_category__count }}'}{% if not forloop.last %},{% endif %}
{% endfor %}
],
building_category = {
data: building_category,
xkey: 'y',
ykeys: ['b'],
labels: ['Building Category'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 60,
hideHover: true
};
var building_storey = [
{% for c in building_storey %}
{y: '{{ c.building_storey}}', b: '{{ c.building_storey__count }}'}{% if not forloop.last %},{% endif %}
{% endfor %}
],
building_storey = {
data: building_storey,
xkey: 'y',
ykeys: ['b'],
labels: ['Building Storey'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 60,
hideHover: true
};
var building_structure_category = [
{% for c in building_structure_category %}
{y: '{% if c.building_structure_category == "rcc" %}आर. सि. सि.{% elif c.building_structure_category == "brick_wall" %}इट्टाको गाह्रोवाला घर {% elif c.building_structure_category == "stone_wall" %}ढुङ्गाको गाह्रोवाला घर {% elif c.building_structure_category == "wooden" %}काठको {% elif c.building_structure_category == "prefab" %}प्रिफ्याब {% else %}अन्य{% endif %}', b: '{{ c.building_structure_category__count }}'}{% if not forloop.last %},{% endif %}
{% endfor %}
],
building_structure_category = {
data: building_structure_category,
xkey: 'y',
ykeys: ['b'],
labels: ['Building Storage Category'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 60,
hideHover: true
};
var building_area = [
{% for c in building_area %}
{#{y: '{{ c.building_area}}', b: '{{ c.building_area__count }}'}{% if not forloop.last %},{% endif %}#}
{#{y: '1000-1500', b:' {% if c.building_area >= 1000 and c.building_area <= 1500 %}{{ c.building_area__count|add: c.building_area__count}} {% endif %} %} }',#}
{y: '{{ c.building_area}}', b:' {{c.building_area__count}}'},
{% endfor %}
],
building_area = {
data: building_area,
xkey: 'y',
ykeys: ['b'],
labels: ['Building Area'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 60,
hideHover: true
};
building_area = [
{% for c in building_area %}
{y: '{{ c.building_area}}', b: ' {{c.building_area__count}}'},
{% endfor %}
],
building_area = {
data: building_area,
xkey: 'y',
ykeys: ['b'],
labels: ['Building Area'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 60,
hideHover: true
};
landinfo = [
{% for c in landinfo %}
{y: '{{ c.landinfo_ropani}}Ropani{{ c.landinfo_aana}}Aana{{ c.landinfo_paisa}}Paisa{{ c.landinfo_daam }}Dam', b: ' {{c.landinfo_sqfeet__count}}'},
{% endfor %}
],
landinfo = {
data: landinfo,
xkey: 'y',
ykeys: ['b'],
labels: ['Land Information'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 80,
hideHover: true
};
$('#date').change(function () {
var date = $(this).val();
console.log(date);
if (date != '') {
load_datewise_data(date, 'Year');
}
});
function load_datewise_data(year, title) {
var temp_title = title + ' ' + year + '';
$.ajax({
url: '{% url "report" %}',
type: "GET",
data: {
"_token": "{% csrf_token %}",
// "mun_id":$('#municipality').val(),
"date": $('#date').val(),
},
dataType: "json",
success: function (data)
{
if (data) {
var results = data;
console.log(results);
var count = date.date.length;
console.log(count);
{#drawDatewiseChart(count, temp_title);#}
}
}
});
}
{#function drawDatewiseChart(chart_data, chart_main_title) {#}
{# var date = $("select#date").val();#}
{# alert("date");#}
{# var date = [#}
{# { y: date, b: chart_data},#}
{##}
{# ],#}
{# date = {#}
{# data: date,#}
{# xkey: 'y',#}
{# ykeys: [ 'b'],#}
{# labels: ['Total Income', 'Total Outcome'],#}
{# fillOpacity: 0.6,#}
{# hideHover: 'auto',#}
{# behaveLikeLine: true,#}
{# resize: true,#}
{# pointFillColors:['#ffffff'],#}
{# pointStrokeColors: ['black'],#}
{# lineColors:['gray','red']#}
{# };#}
{#date.element = 'date';#}
{#Morris.Area(date);#}
date = [
{y: '{{ year}}', b: ' {{year}}'},
],
date = {
data: date,
xkey: 'y',
ykeys: ['b'],
labels: ['date'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors: ['#ffffff'],
pointStrokeColors: ['black'],
lineColors: ['gray', 'red'],
xLabelAngle: 80,
hideHover: true
};
ward.element = 'ward';
Morris.Bar(ward);
building_use.element = 'building_use';
Morris.Bar(building_use);
building_category.element = 'building_category';
Morris.Bar(building_category);
building_storey.element = 'building_storey';
Morris.Bar(building_storey);
building_area.element = 'building_area';
Morris.Bar(building_area);
building_structure_category.element = 'building_structure_category';
Morris.Bar(building_structure_category);
landinfo.element = 'landinfo';
Morris.Bar(landinfo);
</script>
</body>
</html>
Raw
urls.py
url(r'^report/$', views.report, name='report'),
Raw
views.py
def report(request, template_name='report.html'):
total=0
building_area = Application.objects.all().values('building_area').annotate(Count('building_area'))
building_structure_category = Application.objects.all().values('building_structure_category').annotate(Count('building_structure_category'))
results = NewRegistrationModel.objects.all().values('ward_no').annotate(Count('ward_no'))
landinfo=Landinfo.objects.all().values('landinfo_sqfeet','landinfo_ropani','landinfo_aana','landinfo_paisa','landinfo_daam').annotate(Count('landinfo_sqfeet'))
count=Landinfo.objects.annotate(count=Count('landinfo_sqfeet')).values( 'count') .filter(count__gte=1000 , count__lte=1500)
building_storey= Application.objects.all().values('building_storey').annotate(Count('building_storey'))
building_use = Application.objects.all().values('building_use').annotate(Count('building_use'))
building_category = Application.objects.all().values('building_category').annotate(Count('building_category'))
return render_to_response(template_name, {'results':results,'building_category':building_category,'building_use':building_use,'building_storey':building_storey,'building_area':building_area,'total':total,'building_structure_category':building_structure_category,'landinfo':landinfo,'count':count})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment