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;
});
Related
I created API to pull data from MySQL. What I'm trying to do is to connect the response (output) of API to Google Chart. The problem is the chart do not display the API response. Any idea how I would go about this?
Here is my code:
// api connection
var request = new XMLHttpRequest()
request.open('POST', 'http://localhost:3000/api', true)
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
var obj
request.onreadystatechange = function() {
// check api status
if (this.readyState == 4 && this.status == 200) {
// response
obj = JSON.parse(this.responseText)
}
// google chart
google.charts.load("current", {packages:["corechart"]})
google.charts.setOnLoadCallback(pieChart)
// piechart function
function pieChart() {
// push response
var pieData = []
obj.forEach(item => {
pieData.push([item.title, item.data)]
})
// add response to chart
var data = new google.visualization.DataTable()
data.addColumn('string', 'Title')
data.addColumn('string', 'Size')
data.addRows(pieData)
var options = {
title: '',
is#D: true
}
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')
chart.draw(data, options)
}
}
Thank you.
function pieChart() {
$.ajax({
url: 'http://localhost:3000/graph',
type: 'post',
dataType: 'json',
crossDomain: true,
success: function(jsonObj) {
var arr = [
['Road Type', 'Size']
];
$.each(jsonObj, function(i, tObj) {
console.log(tObj)
arr.push([String(tObj.title), parseFloat(tObj.data)]);
});
console.log(arr);
var data = google.visualization.arrayToDataTable(arr);
var options = {
title: '',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
});
}
Source: http://jsfiddle.net/K8bk3
I have a php, jquery, jqueryMobile, highcharts page with several charts on one page.
No i added an ajax call to load event to get live data into the charts. but i have to declare this in every Highcharts object, no matter which way i try it's not working as global function.
Here parts of the code i have and which is working
$(document).ready(function () {
// define sensorName
var sensorName = "rflinkstation";
chart1 = new Highcharts.chart({
"chart": {
"renderTo": sensorName,
"events": {
"load": function() {
var series = this.series[0];
setInterval(function() {
$.ajax({
url: 'sensorAjaxData.php',
success: function(point) {
console.log("ajax request for = " + sensorName);
// add the point
series.addPoint(point, true, true);
},
cache: false,
data: { "sensorName": sensorName,
"stationID": <?php echo $stationID;?>,
}
});
}, 60000);
}
}
},
"series": [{
...
$(document).ready(function () {
// define sensorName
var sensorName = "batteryvolt1";
chart2 = new Highcharts.chart({
"chart": {
"renderTo": sensorName,
"events": {
"load": function() {
var series = this.series[0];
setInterval(function() {
$.ajax({
url: 'sensorAjaxData.php',
success: function(point) {
console.log("ajax request for = " + sensorName);
// add the point
series.addPoint(point, true, true);
},
cache: false,
data: { "sensorName": sensorName,
"stationID": <?php echo $stationID;?>,
}
});
}, 60000);
}
}
},
"series": [{
....
What i try to achieve is to put the "load" function into a function to prevent copy pasting allot of code.
but if i declare something like
function getData(sensorName) {
and
events: { load: setInterval(getData(sensorName),6000) }
i loose the object and get this.series is undefined
My programming knoledge comes from pre object orinted programming and i do not fully understand the explanations in how to extend highcharts. Also the Highcharts live data example is written so that chart is a global variable and works only with one chart on a page.
so my question is how can i extend Highcharts with a load event that takes "sensorName" as argument and does an ajax call and insertrs the returned data into the right chart?
And a side question why is something like:
var series = this.series[0];
$.ajax({
...
series.addPoint(point)
...
working, and this not
$.ajax({
...
this.series[0].addPoint(point)
...
The this (Window object) inside of setInterval() function is not the same this (Chart object) as in chart.events.load() function. You can for example set the second parameter in getData() function which will indicate chart. Now getData() looks like this:
function getData(sensorName, chart) {
var series = chart.series[0];
$.ajax({
url: 'http://www.json-generator.com/api/json/get/bTNHrHVJmG?indent=2',
success: function(point) {
console.log('AJAX request for = ' + sensorName);
// add the point
series.addPoint(point, true, true);
},
data: {
sensorName: sensorName,
stationID: sensorName + 'ID' //<?php echo $stationID;?>,
},
cache: false
});
};
and it call in load event looks like this:
load: function() {
var chart = this;
setInterval(function() {
getData(chart.options.chart.renderTo, chart);
}, 5000);
}
Take a look at the example I prepared for you.
Example:
http://jsfiddle.net/a40qvy47/
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)
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
I'm pretty new to Backbone and I've been trying to create autocomplete functionality with it, fed by an ASMX webservice. The issue I seem to have is whilst my webservice returns in JSON (after a painful battle with it), it wraps the response in a 'd' (dataset). How do I get the view to understand this and get at the correct data?
Here is my code:-
var Airline = Backbone.Model.extend({
initialize: function () {},
defaults: {
name: 'Airline Name',
rating: 50,
icon: '/blank.png'
}
});
var AirlineCollection = Backbone.Collection.extend({
model: Airline,
contentType: "application/json",
url: '/ControlTower/public/runway.asmx/all-airlines',
parse: function (response) {
return response;
}
});
var SelectionView = Backbone.View.extend({
el : $('#airline'),
render: function() {
$(this.el).html("You Selected : " + this.model.get('AirlineName'));
return this;
},
});
var airlines = new AirlineCollection();
airlines.fetch({async: false, contentType: "application/json" });
var airlineNames = airlines.pluck("AirlineName");
$("#airline").autocomplete({
source : airlineNames,
minLength : 1,
select: function(event, ui){
var selectedModel = airlines.where({name: ui.item.value})[0];
var view = new SelectionView({model: selectedModel});
view.render();
}
});
Can anyone see what I'm doing wrong? I've been sitting here for too long now!
Help is appreciated ;)
What about in your AirlineCollection:
parse: function (response) {
return response.d;
}
This works for me
In AirlineCollection
parse: function (response) {
var data = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
return data;
}