All data points are not appearing in a line chart made using chart.js
0
I am using Django 2.0 for back-end development of a BPO website. In that one, I am trying to show one accounting information (trail balance) of an organisation in a table and two separate line chart for credit and debit accounts.I am using Chart.js for plotting the line chart. The corresponding functions in view.py file of django are:
#this preprocess function is used to find out the credit and debit accounts
def preprocess(a):
label1 =
label2 =
arr1 =
arr2 =
for i in range(len(a)):
if int(a[i,1])!=0:
label1.append(a[i,0])
arr1.append(int(a[i,1]))
else:
label2.append(a[i,0])
arr2.append(int(a[i,2]))
return label1,label2,list(arr1),list(arr2)
@login_required
def Acc_Info(request):
obj = request.user
if(request.method=='GET'):
obj1 = Company.objects.get(username=obj)
dt = int(datetime.date.today().year)
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
# names = ['Name of Account','Credit','Debit']
data = pd.read_csv(path)
data = np.array(data)
# dr = list(data[:,1])
# cr = list(data[:,2])
label1,label2,dr,cr = preprocess(data)
print("nncr = ",cr)
print("nndr = ",dr)
Debit_sum = data[:,1].sum(dtype=np.float64)
Credit_sum = data[:,2].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':datetime.date.today().year,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
else:
obj1 = Company.objects.get(username=obj)
dt = request.POST['year']
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
data = pd.read_csv(path)
data = np.array(data)
label1,label2,dr,cr = preprocess(data)
print("nncr = ",cr)
print("nndr = ",dr)
Credit_sum = data[:,2].sum(dtype=np.float64)
Debit_sum = data[:,1].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':dt,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
return redirect('/HRO/log_in/')
My HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
<title>
Accounting Information
</title>
</head>
<body>
<div class="text-center">
<h2>Select Year for Checking the particular Account Information of that year</h2>
</div><br><br>
<div class="text-center">
<form method="post">
{% csrf_token %}
<label>Year: </label>
<select id="year" name="year"></select>
<button type="submit" class="btn btn-primary">Submit</button>
</form><br>
</div>
<script type="text/javascript">
var start = 2000;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year++){
options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;
</script>
<div class="container">
<h2>Accounting Information for the Year: {{ year }}</h2>
{% if f %}
<table class="table table-hover table-stripe">
<thead><tr>
<th>NAME OF ACCOUNT</th>
<th>DEBIT</th>
<th>CREDIT</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr>
{% for any in value %}
<td>{{ any }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td><strong>Total:</strong></td>
<td>{{ Dredit_sum }}</td>
<td>{{ Crebit_sum }}</td>
</tr>
</tbody>
</table>
<label>Suspense Account: {{ Suspense }}</label>
</div>
<canvas id="myChart1" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
<canvas id="myChart2" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
</body>
{% else %}
<h1>It Seems you have not uploaded Account Information for the chosen year</h1><br>
{% endif %}
<script type="text/javascript">
//if({{ f }})
//{
var ctx = document.getElementById("myChart1").getContext('2d');
var ctx2 = document.getElementById("myChart2").getContext('2d');
// var backgroundColor1 =
// var backgroundColor2 =
// var border1 =
// var border2 =
// for(var i=0;i<{{ ld }};i++)
// {
// backgroundColor1.push('rgba(255, 99, 132, 0.5)');
// border1.push('rgba(255,99,132,1)');
// }
// for(var i=0;i<{{ lc }};i++)
// {
// backgroundColor2.push('rgba(132, 99, 255, 0.5)');
// border2.push('rgba(132,99,255,1)');
// }
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Debit Accounts',
data: {{ dr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {
datasets: [{
label: 'Credit Accounts',
data: {{ cr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
//}
</script>
</html>I have 2 questions:
1. Why is this plotting only first two data points
2. How to set a default colour in Chart.js charts, because the 'fillColor' method is not supported in this Chart.js version
The screen is appearing like this:
The accounting info in table( it is appearing properly)
The chart are as follows:
The line charts( Only two points are appearing)
P.S. It will be very helpful if I get some prompt answer because I have a project to submit. Thank you in advance :).
javascript django chart.js
asked Nov 23 '18 at 15:04
RickyRicky
55
|
show 1 more comment
0
I am using Django 2.0 for back-end development of a BPO website. In that one, I am trying to show one accounting information (trail balance) of an organisation in a table and two separate line chart for credit and debit accounts.I am using Chart.js for plotting the line chart. The corresponding functions in view.py file of django are:
#this preprocess function is used to find out the credit and debit accounts
def preprocess(a):
label1 =
label2 =
arr1 =
arr2 =
for i in range(len(a)):
if int(a[i,1])!=0:
label1.append(a[i,0])
arr1.append(int(a[i,1]))
else:
label2.append(a[i,0])
arr2.append(int(a[i,2]))
return label1,label2,list(arr1),list(arr2)
@login_required
def Acc_Info(request):
obj = request.user
if(request.method=='GET'):
obj1 = Company.objects.get(username=obj)
dt = int(datetime.date.today().year)
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
# names = ['Name of Account','Credit','Debit']
data = pd.read_csv(path)
data = np.array(data)
# dr = list(data[:,1])
# cr = list(data[:,2])
label1,label2,dr,cr = preprocess(data)
print("nncr = ",cr)
print("nndr = ",dr)
Debit_sum = data[:,1].sum(dtype=np.float64)
Credit_sum = data[:,2].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':datetime.date.today().year,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
else:
obj1 = Company.objects.get(username=obj)
dt = request.POST['year']
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
data = pd.read_csv(path)
data = np.array(data)
label1,label2,dr,cr = preprocess(data)
print("nncr = ",cr)
print("nndr = ",dr)
Credit_sum = data[:,2].sum(dtype=np.float64)
Debit_sum = data[:,1].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':dt,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
return redirect('/HRO/log_in/')
My HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
<title>
Accounting Information
</title>
</head>
<body>
<div class="text-center">
<h2>Select Year for Checking the particular Account Information of that year</h2>
</div><br><br>
<div class="text-center">
<form method="post">
{% csrf_token %}
<label>Year: </label>
<select id="year" name="year"></select>
<button type="submit" class="btn btn-primary">Submit</button>
</form><br>
</div>
<script type="text/javascript">
var start = 2000;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year++){
options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;
</script>
<div class="container">
<h2>Accounting Information for the Year: {{ year }}</h2>
{% if f %}
<table class="table table-hover table-stripe">
<thead><tr>
<th>NAME OF ACCOUNT</th>
<th>DEBIT</th>
<th>CREDIT</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr>
{% for any in value %}
<td>{{ any }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td><strong>Total:</strong></td>
<td>{{ Dredit_sum }}</td>
<td>{{ Crebit_sum }}</td>
</tr>
</tbody>
</table>
<label>Suspense Account: {{ Suspense }}</label>
</div>
<canvas id="myChart1" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
<canvas id="myChart2" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
</body>
{% else %}
<h1>It Seems you have not uploaded Account Information for the chosen year</h1><br>
{% endif %}
<script type="text/javascript">
//if({{ f }})
//{
var ctx = document.getElementById("myChart1").getContext('2d');
var ctx2 = document.getElementById("myChart2").getContext('2d');
// var backgroundColor1 =
// var backgroundColor2 =
// var border1 =
// var border2 =
// for(var i=0;i<{{ ld }};i++)
// {
// backgroundColor1.push('rgba(255, 99, 132, 0.5)');
// border1.push('rgba(255,99,132,1)');
// }
// for(var i=0;i<{{ lc }};i++)
// {
// backgroundColor2.push('rgba(132, 99, 255, 0.5)');
// border2.push('rgba(132,99,255,1)');
// }
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Debit Accounts',
data: {{ dr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {
datasets: [{
label: 'Credit Accounts',
data: {{ cr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
//}
</script>
</html>I have 2 questions:
1. Why is this plotting only first two data points
2. How to set a default colour in Chart.js charts, because the 'fillColor' method is not supported in this Chart.js version
The screen is appearing like this:
The accounting info in table( it is appearing properly)
The chart are as follows:
The line charts( Only two points are appearing)
P.S. It will be very helpful if I get some prompt answer because I have a project to submit. Thank you in advance :).
javascript django chart.js
asked Nov 23 '18 at 15:04
RickyRicky
55
1
What version of Chart are you using? Versions 1 and 2 have significant differences. And what exactly does the chart data structure look like when you set up the graph?
– Pointy
Nov 23 '18 at 15:07
I am using 2.7, the chart data structure is a list of integrs ( it is shown in the code as {{ cr }} and {{ dr }}
– Ricky
Nov 23 '18 at 15:11
No I mean exactly what does it look like? Have you tried dumping it to the console withconsole.dir()to verify that it's got the content you expect?
– Pointy
Nov 23 '18 at 15:15
Yes, it is getting the expected data values. But only two points are being plotted.
– Ricky
Nov 23 '18 at 16:24
Well if you don't post the data in your question it's going to be quite difficult to figure out what's going on. There's no "only the first two points" mode in Chart.js, so there's something wrong with the data you're passing it.
– Pointy
Nov 23 '18 at 16:29
|
show 1 more comment
0
0
0
0
I am using Django 2.0 for back-end development of a BPO website. In that one, I am trying to show one accounting information (trail balance) of an organisation in a table and two separate line chart for credit and debit accounts.I am using Chart.js for plotting the line chart. The corresponding functions in view.py file of django are:
#this preprocess function is used to find out the credit and debit accounts
def preprocess(a):
label1 =
label2 =
arr1 =
arr2 =
for i in range(len(a)):
if int(a[i,1])!=0:
label1.append(a[i,0])
arr1.append(int(a[i,1]))
else:
label2.append(a[i,0])
arr2.append(int(a[i,2]))
return label1,label2,list(arr1),list(arr2)
@login_required
def Acc_Info(request):
obj = request.user
if(request.method=='GET'):
obj1 = Company.objects.get(username=obj)
dt = int(datetime.date.today().year)
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
# names = ['Name of Account','Credit','Debit']
data = pd.read_csv(path)
data = np.array(data)
# dr = list(data[:,1])
# cr = list(data[:,2])
label1,label2,dr,cr = preprocess(data)
print("nncr = ",cr)
print("nndr = ",dr)
Debit_sum = data[:,1].sum(dtype=np.float64)
Credit_sum = data[:,2].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':datetime.date.today().year,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
else:
obj1 = Company.objects.get(username=obj)
dt = request.POST['year']
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
data = pd.read_csv(path)
data = np.array(data)
label1,label2,dr,cr = preprocess(data)
print("nncr = ",cr)
print("nndr = ",dr)
Credit_sum = data[:,2].sum(dtype=np.float64)
Debit_sum = data[:,1].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':dt,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
return redirect('/HRO/log_in/')
My HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
<title>
Accounting Information
</title>
</head>
<body>
<div class="text-center">
<h2>Select Year for Checking the particular Account Information of that year</h2>
</div><br><br>
<div class="text-center">
<form method="post">
{% csrf_token %}
<label>Year: </label>
<select id="year" name="year"></select>
<button type="submit" class="btn btn-primary">Submit</button>
</form><br>
</div>
<script type="text/javascript">
var start = 2000;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year++){
options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;
</script>
<div class="container">
<h2>Accounting Information for the Year: {{ year }}</h2>
{% if f %}
<table class="table table-hover table-stripe">
<thead><tr>
<th>NAME OF ACCOUNT</th>
<th>DEBIT</th>
<th>CREDIT</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr>
{% for any in value %}
<td>{{ any }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td><strong>Total:</strong></td>
<td>{{ Dredit_sum }}</td>
<td>{{ Crebit_sum }}</td>
</tr>
</tbody>
</table>
<label>Suspense Account: {{ Suspense }}</label>
</div>
<canvas id="myChart1" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
<canvas id="myChart2" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
</body>
{% else %}
<h1>It Seems you have not uploaded Account Information for the chosen year</h1><br>
{% endif %}
<script type="text/javascript">
//if({{ f }})
//{
var ctx = document.getElementById("myChart1").getContext('2d');
var ctx2 = document.getElementById("myChart2").getContext('2d');
// var backgroundColor1 =
// var backgroundColor2 =
// var border1 =
// var border2 =
// for(var i=0;i<{{ ld }};i++)
// {
// backgroundColor1.push('rgba(255, 99, 132, 0.5)');
// border1.push('rgba(255,99,132,1)');
// }
// for(var i=0;i<{{ lc }};i++)
// {
// backgroundColor2.push('rgba(132, 99, 255, 0.5)');
// border2.push('rgba(132,99,255,1)');
// }
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Debit Accounts',
data: {{ dr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {
datasets: [{
label: 'Credit Accounts',
data: {{ cr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
//}
</script>
</html>I have 2 questions:
1. Why is this plotting only first two data points
2. How to set a default colour in Chart.js charts, because the 'fillColor' method is not supported in this Chart.js version
The screen is appearing like this:
The accounting info in table( it is appearing properly)
The chart are as follows:
The line charts( Only two points are appearing)
P.S. It will be very helpful if I get some prompt answer because I have a project to submit. Thank you in advance :).
javascript django chart.js
asked Nov 23 '18 at 15:04
RickyRicky
55
I am using Django 2.0 for back-end development of a BPO website. In that one, I am trying to show one accounting information (trail balance) of an organisation in a table and two separate line chart for credit and debit accounts.I am using Chart.js for plotting the line chart. The corresponding functions in view.py file of django are:
#this preprocess function is used to find out the credit and debit accounts
def preprocess(a):
label1 =
label2 =
arr1 =
arr2 =
for i in range(len(a)):
if int(a[i,1])!=0:
label1.append(a[i,0])
arr1.append(int(a[i,1]))
else:
label2.append(a[i,0])
arr2.append(int(a[i,2]))
return label1,label2,list(arr1),list(arr2)
@login_required
def Acc_Info(request):
obj = request.user
if(request.method=='GET'):
obj1 = Company.objects.get(username=obj)
dt = int(datetime.date.today().year)
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
# names = ['Name of Account','Credit','Debit']
data = pd.read_csv(path)
data = np.array(data)
# dr = list(data[:,1])
# cr = list(data[:,2])
label1,label2,dr,cr = preprocess(data)
print("nncr = ",cr)
print("nndr = ",dr)
Debit_sum = data[:,1].sum(dtype=np.float64)
Credit_sum = data[:,2].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':datetime.date.today().year,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
else:
obj1 = Company.objects.get(username=obj)
dt = request.POST['year']
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
data = pd.read_csv(path)
data = np.array(data)
label1,label2,dr,cr = preprocess(data)
print("nncr = ",cr)
print("nndr = ",dr)
Credit_sum = data[:,2].sum(dtype=np.float64)
Debit_sum = data[:,1].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':dt,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
return redirect('/HRO/log_in/')
My HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
<title>
Accounting Information
</title>
</head>
<body>
<div class="text-center">
<h2>Select Year for Checking the particular Account Information of that year</h2>
</div><br><br>
<div class="text-center">
<form method="post">
{% csrf_token %}
<label>Year: </label>
<select id="year" name="year"></select>
<button type="submit" class="btn btn-primary">Submit</button>
</form><br>
</div>
<script type="text/javascript">
var start = 2000;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year++){
options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;
</script>
<div class="container">
<h2>Accounting Information for the Year: {{ year }}</h2>
{% if f %}
<table class="table table-hover table-stripe">
<thead><tr>
<th>NAME OF ACCOUNT</th>
<th>DEBIT</th>
<th>CREDIT</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr>
{% for any in value %}
<td>{{ any }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td><strong>Total:</strong></td>
<td>{{ Dredit_sum }}</td>
<td>{{ Crebit_sum }}</td>
</tr>
</tbody>
</table>
<label>Suspense Account: {{ Suspense }}</label>
</div>
<canvas id="myChart1" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
<canvas id="myChart2" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
</body>
{% else %}
<h1>It Seems you have not uploaded Account Information for the chosen year</h1><br>
{% endif %}
<script type="text/javascript">
//if({{ f }})
//{
var ctx = document.getElementById("myChart1").getContext('2d');
var ctx2 = document.getElementById("myChart2").getContext('2d');
// var backgroundColor1 =
// var backgroundColor2 =
// var border1 =
// var border2 =
// for(var i=0;i<{{ ld }};i++)
// {
// backgroundColor1.push('rgba(255, 99, 132, 0.5)');
// border1.push('rgba(255,99,132,1)');
// }
// for(var i=0;i<{{ lc }};i++)
// {
// backgroundColor2.push('rgba(132, 99, 255, 0.5)');
// border2.push('rgba(132,99,255,1)');
// }
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Debit Accounts',
data: {{ dr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {
datasets: [{
label: 'Credit Accounts',
data: {{ cr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
//}
</script>
</html>I have 2 questions:
1. Why is this plotting only first two data points
2. How to set a default colour in Chart.js charts, because the 'fillColor' method is not supported in this Chart.js version
The screen is appearing like this:
The accounting info in table( it is appearing properly)
The chart are as follows:
The line charts( Only two points are appearing)
P.S. It will be very helpful if I get some prompt answer because I have a project to submit. Thank you in advance :).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
<title>
Accounting Information
</title>
</head>
<body>
<div class="text-center">
<h2>Select Year for Checking the particular Account Information of that year</h2>
</div><br><br>
<div class="text-center">
<form method="post">
{% csrf_token %}
<label>Year: </label>
<select id="year" name="year"></select>
<button type="submit" class="btn btn-primary">Submit</button>
</form><br>
</div>
<script type="text/javascript">
var start = 2000;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year++){
options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;
</script>
<div class="container">
<h2>Accounting Information for the Year: {{ year }}</h2>
{% if f %}
<table class="table table-hover table-stripe">
<thead><tr>
<th>NAME OF ACCOUNT</th>
<th>DEBIT</th>
<th>CREDIT</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr>
{% for any in value %}
<td>{{ any }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td><strong>Total:</strong></td>
<td>{{ Dredit_sum }}</td>
<td>{{ Crebit_sum }}</td>
</tr>
</tbody>
</table>
<label>Suspense Account: {{ Suspense }}</label>
</div>
<canvas id="myChart1" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
<canvas id="myChart2" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
</body>
{% else %}
<h1>It Seems you have not uploaded Account Information for the chosen year</h1><br>
{% endif %}
<script type="text/javascript">
//if({{ f }})
//{
var ctx = document.getElementById("myChart1").getContext('2d');
var ctx2 = document.getElementById("myChart2").getContext('2d');
// var backgroundColor1 =
// var backgroundColor2 =
// var border1 =
// var border2 =
// for(var i=0;i<{{ ld }};i++)
// {
// backgroundColor1.push('rgba(255, 99, 132, 0.5)');
// border1.push('rgba(255,99,132,1)');
// }
// for(var i=0;i<{{ lc }};i++)
// {
// backgroundColor2.push('rgba(132, 99, 255, 0.5)');
// border2.push('rgba(132,99,255,1)');
// }
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Debit Accounts',
data: {{ dr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {
datasets: [{
label: 'Credit Accounts',
data: {{ cr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
//}
</script>
</html><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
<title>
Accounting Information
</title>
</head>
<body>
<div class="text-center">
<h2>Select Year for Checking the particular Account Information of that year</h2>
</div><br><br>
<div class="text-center">
<form method="post">
{% csrf_token %}
<label>Year: </label>
<select id="year" name="year"></select>
<button type="submit" class="btn btn-primary">Submit</button>
</form><br>
</div>
<script type="text/javascript">
var start = 2000;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year++){
options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;
</script>
<div class="container">
<h2>Accounting Information for the Year: {{ year }}</h2>
{% if f %}
<table class="table table-hover table-stripe">
<thead><tr>
<th>NAME OF ACCOUNT</th>
<th>DEBIT</th>
<th>CREDIT</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr>
{% for any in value %}
<td>{{ any }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td><strong>Total:</strong></td>
<td>{{ Dredit_sum }}</td>
<td>{{ Crebit_sum }}</td>
</tr>
</tbody>
</table>
<label>Suspense Account: {{ Suspense }}</label>
</div>
<canvas id="myChart1" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
<canvas id="myChart2" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
</body>
{% else %}
<h1>It Seems you have not uploaded Account Information for the chosen year</h1><br>
{% endif %}
<script type="text/javascript">
//if({{ f }})
//{
var ctx = document.getElementById("myChart1").getContext('2d');
var ctx2 = document.getElementById("myChart2").getContext('2d');
// var backgroundColor1 =
// var backgroundColor2 =
// var border1 =
// var border2 =
// for(var i=0;i<{{ ld }};i++)
// {
// backgroundColor1.push('rgba(255, 99, 132, 0.5)');
// border1.push('rgba(255,99,132,1)');
// }
// for(var i=0;i<{{ lc }};i++)
// {
// backgroundColor2.push('rgba(132, 99, 255, 0.5)');
// border2.push('rgba(132,99,255,1)');
// }
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Debit Accounts',
data: {{ dr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {
datasets: [{
label: 'Credit Accounts',
data: {{ cr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
//}
</script>
</html>javascript django chart.js
javascript django chart.js
asked Nov 23 '18 at 15:04
RickyRicky
55
asked Nov 23 '18 at 15:04
RickyRicky
55
edited Nov 23 '18 at 15:10
Ricky
asked Nov 23 '18 at 15:04
RickyRicky
55
asked Nov 23 '18 at 15:04
RickyRicky
55
asked Nov 23 '18 at 15:04
RickyRicky
55
55
1
What version of Chart are you using? Versions 1 and 2 have significant differences. And what exactly does the chart data structure look like when you set up the graph?
– Pointy
Nov 23 '18 at 15:07
I am using 2.7, the chart data structure is a list of integrs ( it is shown in the code as {{ cr }} and {{ dr }}
– Ricky
Nov 23 '18 at 15:11
No I mean exactly what does it look like? Have you tried dumping it to the console withconsole.dir()to verify that it's got the content you expect?
– Pointy
Nov 23 '18 at 15:15
Yes, it is getting the expected data values. But only two points are being plotted.
– Ricky
Nov 23 '18 at 16:24
Well if you don't post the data in your question it's going to be quite difficult to figure out what's going on. There's no "only the first two points" mode in Chart.js, so there's something wrong with the data you're passing it.
– Pointy
Nov 23 '18 at 16:29
|
show 1 more comment
1
What version of Chart are you using? Versions 1 and 2 have significant differences. And what exactly does the chart data structure look like when you set up the graph?
– Pointy
Nov 23 '18 at 15:07
I am using 2.7, the chart data structure is a list of integrs ( it is shown in the code as {{ cr }} and {{ dr }}
– Ricky
Nov 23 '18 at 15:11
No I mean exactly what does it look like? Have you tried dumping it to the console withconsole.dir()to verify that it's got the content you expect?
– Pointy
Nov 23 '18 at 15:15
Yes, it is getting the expected data values. But only two points are being plotted.
– Ricky
Nov 23 '18 at 16:24
Well if you don't post the data in your question it's going to be quite difficult to figure out what's going on. There's no "only the first two points" mode in Chart.js, so there's something wrong with the data you're passing it.
– Pointy
Nov 23 '18 at 16:29
1
1
What version of Chart are you using? Versions 1 and 2 have significant differences. And what exactly does the chart data structure look like when you set up the graph?
– Pointy
Nov 23 '18 at 15:07
What version of Chart are you using? Versions 1 and 2 have significant differences. And what exactly does the chart data structure look like when you set up the graph?
– Pointy
Nov 23 '18 at 15:07
I am using 2.7, the chart data structure is a list of integrs ( it is shown in the code as {{ cr }} and {{ dr }}
– Ricky
Nov 23 '18 at 15:11
I am using 2.7, the chart data structure is a list of integrs ( it is shown in the code as {{ cr }} and {{ dr }}
– Ricky
Nov 23 '18 at 15:11
No I mean exactly what does it look like? Have you tried dumping it to the console with
console.dir() to verify that it's got the content you expect?– Pointy
Nov 23 '18 at 15:15
No I mean exactly what does it look like? Have you tried dumping it to the console with
console.dir() to verify that it's got the content you expect?– Pointy
Nov 23 '18 at 15:15
Yes, it is getting the expected data values. But only two points are being plotted.
– Ricky
Nov 23 '18 at 16:24
Yes, it is getting the expected data values. But only two points are being plotted.
– Ricky
Nov 23 '18 at 16:24
Well if you don't post the data in your question it's going to be quite difficult to figure out what's going on. There's no "only the first two points" mode in Chart.js, so there's something wrong with the data you're passing it.
– Pointy
Nov 23 '18 at 16:29
Well if you don't post the data in your question it's going to be quite difficult to figure out what's going on. There's no "only the first two points" mode in Chart.js, so there's something wrong with the data you're passing it.
– Pointy
Nov 23 '18 at 16:29
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448999%2fall-data-points-are-not-appearing-in-a-line-chart-made-using-chart-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53448999%2fall-data-points-are-not-appearing-in-a-line-chart-made-using-chart-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
What version of Chart are you using? Versions 1 and 2 have significant differences. And what exactly does the chart data structure look like when you set up the graph?
– Pointy
Nov 23 '18 at 15:07
I am using 2.7, the chart data structure is a list of integrs ( it is shown in the code as {{ cr }} and {{ dr }}
– Ricky
Nov 23 '18 at 15:11
No I mean exactly what does it look like? Have you tried dumping it to the console with
console.dir()to verify that it's got the content you expect?– Pointy
Nov 23 '18 at 15:15
Yes, it is getting the expected data values. But only two points are being plotted.
– Ricky
Nov 23 '18 at 16:24
Well if you don't post the data in your question it's going to be quite difficult to figure out what's going on. There's no "only the first two points" mode in Chart.js, so there's something wrong with the data you're passing it.
– Pointy
Nov 23 '18 at 16:29