Develop Reference

How to push data to create pie chart - chart js

I have data from SQL in json code file (checked in Fiddler)
{"d":[{"__type":"Dashboards.Employee","name":"Test
Hen","turnover":"1500000,0000","color":"#231F20"},{"__type":"Dashboards.Employee","name":"Test
Bai","turnover":"130000,0000","color":"#FFC200"}]}
but i dont know, how to push them correctly in order to create pie chart
my ajax/javascript is here:
$.ajax({
url: 'HelloService.asmx/GetEmployeeDetail',
contentType: 'application/json;charset=utf-8',
data: JSON.stringify({ month: number }),
dataType: 'json',
method: 'post',
success: OnSuccess_,
error: OnErrorCall_
});
function OnSuccess_(response) {
var aData = response.d;
var arr = [];
//var ctx = document.getElementById('pele').getContext('2d');
$.each(aData, function (inx, val) {
var obj = {};
obj.label = val.name;
obj.value = val.turnover;
obj.color = val.color;
arr.push(obj);
});
var ctx = $("#pele").get(0).getContext("2d");
var myPieChart = new Chart(ctx).Pie(arr);}
function OnErrorCall_(response) {
console.log(error);
}
});
});
Am I missing something?
If i use static values (value, label, color) pie chart works without problem.
Thank you

I created the following FiddleJS for you: https://jsfiddle.net/cukyrh5h/1/
You need to replace the URL of the Ajax call with yours of course. You had some wrong syntax (too much braches in the end of your Snippet) and the API you were using was not working with ChartJS 2.4 anymore.
The code looks like the following:
$.ajax({
url:"/echo/json/",
data:data,
type:"POST",
success:OnSuccess_
});
function OnSuccess_(response) {
var aData = response.d;
var data = {
labels: [],
datasets: [{
data: [],
backgroundColor: []
}]
};
$.each(aData, function (inx, val) {
data.labels.push(val.name);
data.datasets[0].data.push(val.turnover);
data.datasets[0].backgroundColor.push(val.color);
});
var ctx = $("#pele").get(0).getContext("2d");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data
});
}
function OnErrorCall_(response) {
console.log(error);
}

Ok, i found problem, why i cant see my Chart. Maybe it will be useful for another members. Data in Database (turnover was daclared as money, i changed it to int .... and it works)

Pie chart crashes when no data from JSON

I am a beginner and learning web development. In my sample project I have created Pie Chart using ChartJS. I am getting data from REST Service. Everything is working fine and pie chart is getting rendered properly. The problem is when there is null data from REST then I am getting error in Chart.js.
Error:
JSON DATA FROM REST:
My sample project uses BackboneJS. I know the error is because there is no data coming from REST. How can I handle that so that m Pie Chart does not crash.
Below is the MODEL:
define(['backbone'], function(Backbone) {
var chart = Backbone.Model.extend({
urlRoot: 'SAMPLE REST URL',
defaults: function() {
return {
currMonthOccAvailVac: [],
};
},
fetch: function(data) {
var d = $.Deferred();
var self = this;
var ajaxRequest = $.ajax({
url: this.urlRoot,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(data)
});
ajaxRequest.done(function(json) {
var graphVar = {
currMonthOccAvailVac: [],
}
var yearSelected = (localStorage.getItem('date')).split("-")[0];
var monthSelected = (localStorage.getItem('date')).split("-")[1];
for (var i = 0; i < json.length; i++) {
var monthYear = json[i].columnstrDate.split("/");
var year = monthYear[0];
var month = monthYear[1];
if(month.length == 1)
if(month == (monthSelected - 1) && year == yearSelected)
{
graphVar.currMonthOccAvailVac.push(json[i].columndecOccPercentage);
graphVar.currMonthOccAvailVac.push(json[i].columndecVacantUnitsPercentage);
graphVar.currMonthOccAvailVac.push(json[i].columndecUnavailableUnitsPercentage);
}
}
self.set({
currMonthOccAvailVac: graphVar.currMonthOccAvailVac,
});
d.resolve();
});
//failure callback for ajax request.
ajaxRequest.fail(function(jqXHR, status) {
// Handle fail request
d.reject();
});
return d.promise();
}
});
// returning the model
return {
chart: chart
};
});
Place in ChartJS where actually code is breaking:
So how can I make sure even if graphvar.currMonthOccAvailVac has no value the pie chart does not crash. Kindly guide me.
EDIT
Currently in my View Model I did something like below. But I am not sure if this the right way to handle.
define(['backbone'], function(Backbone) {
var sixthSubViewModel = Backbone.View.extend({
template: _.template($('#myChart6-template').html()),
render: function() {
$(this.el).html(this.template());
var ctx = this.$el.find('#pieChart')[0];
var data = {
datasets: [{
data: this.model.attributes.currMonthOccAvailVac,
label: 'My dataset' // for legend
}],
labels: [
"Rented",
"Vacant",
"Unavailable",
]
};
// I AM CHECKING HERE THE LENGTH AND THE RNEDERING THE PIE CHART
if (this.model.attributes.currMonthOccAvailVac.length > 1)
var pieChart = new Chart(ctx, {
type: 'pie',
data: data,
otpions: {
legend: false
}
});
WHAT SHALL I PUT IN THE ELSE PART
},
initialize: function() {
this.render();
}
});
return sixthSubViewModel;
});

generate Google Chart using JSON

I am working on a web application which retrieves JSON data from servlet and uses it to generate chart. I am successful in retrieving the requisite json file in Google Chart compliant JSON format but am unable to generate the chart.
The jsbin of google chart is in the foll link: http://jsbin.com/hofaqidape/1/watch?html,js,output
The data var should be generated using JSON and I am doing the following stuff in my servlet
response.setContentType("application/json");
String json;
newClass s =new newClass();
List<newClass> classes = new ArrayList<newClass>();
s.setCount(1);
s.setName("Name");
classes.add(s);
s =new newClass();
s.setCount(2);
s.setName("Name1");
classes.add(s);
s =new newClass();
s.setCount(3);
s.setName("Name2");
classes.add(s);
s =new newClass();
s.setCount(1);
s.setName("Name4");
classes.add(s);
json="{ cols :[ { label : name , type : string },{ label : count , type : number }], rows :[";
String ss;int y;
for(newClass class1:classes)
{
ss=class1.getName();
y=class1.getCount();
json+="{ c : [{ v : "+ss+" },{ v : "+y+"}]},";
}
json=json.substring(0, json.length()-1);
json+="]}";
JSONObject js=null;
try {
js = new JSONObject(json);
} catch (ParseException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
try {
out.print(js);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
on the html side I have the foll code for my chart generation:
$(document).ready(function(){
$.ajax({
url : "Serv",
dataType: 'json',
contentType: 'application/json',
success : function(result) {
var dat=result;
alert(JSON.stringify(dat));
google.load('visualization', '1', {
packages: ['corechart', 'bar']
});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable(dat);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Name'
},
vAxis: {
title: 'Count'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
},
complete: function()
{
alert('done');
}
});
});
alert(JSON.stringify(dat)) gives the alert as
{"cols":[{"label":"name","type":"string"},{"label":"count","type":"number"}],"rows":[{"c":[{"v":"Name"},{"v":1}]},{"c":[{"v":"Name1"},{"v":2}]},{"c":[{"v":"Name2"},{"v":3}]},{"c":[{"v":"Name4"},{"v":1}]}]}
which is a valid JSON.
how do I generate the chart using this data just like I did in jsbin?

google.setOnLoadCallback() set up a callback function to execute when Google Visualization API loaded, so google.load needs to load from the front explicitly. I am recalling it when i worked on them lately. My recommendation would be to move google.load and drawBasic() outside from AJAX call and use them in success of call, like this...
$(document).ready(function(){
google.load('visualization', '1', {
packages: ['corechart']
});
function drawBasic(d) {
var data = new google.visualization.DataTable(d);
var options = {
title: 'Motivation Level Throughout the Day',
hAxis: {
title: 'Name'
},
vAxis: {
title: 'Count'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$.ajax({
url : "Serv",
dataType: 'json',
contentType: 'application/json',
success : function(result) {
google.setOnLoadCallback(drawBasic(JSON.stringify(result)));
},
complete: function(){
// whatever..
}
});
});
Update: You only need to specify packages: ['corechart'] which will define most basic charts, including the pie, bar, and column charts.

finally got the answer to this question.
removed google.setOnLoadCallback() and called drawBasic() function from ajax call itself. somehow setOnLoadCallback() and $(document).ready() doesnt seem to coexist.
working code:
<script>
google.load('visualization', '1', {
packages: ['corechart']
});
function drawBasic(d) {
var data = new google.visualization.DataTable(d);
var options = {
title: 'Sample Data',
hAxis: {
title: 'Name'
},
vAxis: {
title: 'Count'
},
width: 600,
height: 240
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(function(){
$("#dd").change(function(){
if($(this).val()!='null')
{
$.ajax({
url : "Serv",
data: {dd1:$(this).val()},
dataType: 'json',
contentType: 'application/json',
success : function(result) {
drawBasic(result);
},
complete: function(){
// whatever..
}
}) ;
}
else
{
$("#chart_div").empty();
alert('please select');
}
});
});
</script>

how to use google chart using dynamic data from json

iam using mvc, i want to connect my data to google pie chart. so i used json to get list of names and their count using the following code
public JsonResult list()
{
var result= list.GroupBy(i => i.Name).Select(i => new { word = i.Key, count = i.Count()
return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}
Using the google chart API
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "list",
dataType: "json",
async: false
}).responseText;
var data = google.visualization.DataTable(jsonData);
var options = {
title: 'Certificate details',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
i want to know how to get list of key value pairs of my data into pie chart.
i have googled for long time, everybody is giving code example with php.
Thankyou.

You can parse that data client-side like this:
function drawChart () {
$.ajax({
url: "list",
dataType: "json",
success: function (jsonData) {
var data = new google.visualization.DataTable();
// assumes "word" is a string and "count" is a number
data.addColumn('string', 'word');
data.addColumn('number', 'count');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].word, jsonData[i].count]);
}
var options = {
title: 'Certificate details',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
});
}

I created a basic handler to provide some methods to work with dinamic google charts.
First you register the data or part of it. After this, you are able to render when necessary.
Look at: http://github.com/ahlechandre/chart-handler

Backbone.js fetch with parameters

Following the documentation, I did:
var collection = new Backbone.Collection.extend({
model: ItemModel,
url: '/Items'
})
collection.fetch({ data: { page: 1} });
the url turned out to be: http://localhost:1273/Items?[object%20Object]
I was expecting something like http://localhost:1273/Items?page=1
So how do I pass params in the fetch method?

changing:
collection.fetch({ data: { page: 1} });
to:
collection.fetch({ data: $.param({ page: 1}) });
So with out over doing it, this is called with your {data: {page:1}} object as options
Backbone.sync = function(method, model, options) {
var type = methodMap[method];
// Default JSON-request options.
var params = _.extend({
type: type,
dataType: 'json',
processData: false
}, options);
// Ensure that we have a URL.
if (!params.url) {
params.url = getUrl(model) || urlError();
}
// Ensure that we have the appropriate request data.
if (!params.data && model && (method == 'create' || method == 'update')) {
params.contentType = 'application/json';
params.data = JSON.stringify(model.toJSON());
}
// For older servers, emulate JSON by encoding the request into an HTML-form.
if (Backbone.emulateJSON) {
params.contentType = 'application/x-www-form-urlencoded';
params.processData = true;
params.data = params.data ? {model : params.data} : {};
}
// For older servers, emulate HTTP by mimicking the HTTP method with `_method`
// And an `X-HTTP-Method-Override` header.
if (Backbone.emulateHTTP) {
if (type === 'PUT' || type === 'DELETE') {
if (Backbone.emulateJSON) params.data._method = type;
params.type = 'POST';
params.beforeSend = function(xhr) {
xhr.setRequestHeader('X-HTTP-Method-Override', type);
};
}
}
// Make the request.
return $.ajax(params);
};
So it sends the 'data' to jQuery.ajax which will do its best to append whatever params.data is to the URL.

You can also set processData to true:
collection.fetch({
data: { page: 1 },
processData: true
});
Jquery will auto process data object into param string,
but in Backbone.sync function,
Backbone turn the processData off because Backbone will use other method to process data
in POST,UPDATE...
in Backbone source:
if (params.type !== 'GET' && !Backbone.emulateJSON) {
params.processData = false;
}

Another example if you are using Titanium Alloy:
collection.fetch({
data: {
where : JSON.stringify({
page: 1
})
}
});

try {
// THIS for POST+JSON
options.contentType = 'application/json';
options.type = 'POST';
options.data = JSON.stringify(options.data);
// OR THIS for GET+URL-encoded
//options.data = $.param(_.clone(options.data));
console.log('.fetch options = ', options);
collection.fetch(options);
} catch (excp) {
alert(excp);
}