We Keep Coding

Removing the gap between the datapoints

Graph: Number of Persons v DateTime
2004-12-23 15:25:01,8
2004-12-23 15:26:01,5
2004-12-23 15:27:01,5
2004-12-23 15:28:01,4
2004-12-23 15:29:01,4
2004-12-24 10:30:01,13
2004-12-24 10:31:01,12
2004-12-24 10:32:01,12
2004-12-24 10:33:01,13
2004-12-24 10:34:01,13
2004-12-24 10:35:01,13
As we can see there is no data between 2004-12-23 15:29:01 and 2004-12-24 10:30:01 but still the Google Chart shows me a gap and connects the two datapoints when using LineChart. Also I avoid making the dates string as then I would get no yaxis markings, because of the huge date-time.
I am new to using Google Charts, can this be avoided?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', ‘Available);
data.addRows(dataPoints);
console.log(data);
var options = {
title: ‘Availability',
legend: {position: 'bottom' },
hAxis: {
title: 'Time',
/*
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}*/
},
vAxis: {
title: 'Number of people available’
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}

if you use string values, rather than date values, no gap will be displayed...
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
...
also, here, needed to add more room at the bottom of the chart for the labels,
as well as increase the default height...
chartArea: {
bottom: 128
},
height: 400
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawBasic);
function drawBasic() {
var dataPoints = [
['2004-12-23 15:25:01', 8],
['2004-12-23 15:26:01', 5],
['2004-12-23 15:27:01', 5],
['2004-12-23 15:28:01', 4],
['2004-12-23 15:29:01', 4],
['2004-12-24 10:30:01', 13],
['2004-12-24 10:31:01', 12],
['2004-12-24 10:32:01', 12],
['2004-12-24 10:33:01', 13],
['2004-12-24 10:34:01', 13],
['2004-12-24 10:35:01', 13]
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date-Time');
data.addColumn('number', 'Available');
data.addRows(dataPoints);
var options = {
title: 'Availability',
legend: {position: 'bottom'},
hAxis: {
title: 'Time',
},
vAxis: {
title: 'Number of people available'
},
chartArea: {
bottom: 128
},
height: 400
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Converting 3d pie chart to 2d piechart while rotating using google charts

I can able to create a 3d pie chart using google charts,but while rotating it's converting to 2d pie chart even though i set the options is3D:true, can anyone please help me how to fix this issue.
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
pieHole: 0.25,
pieStartAngle: 0,
animation:
{
startup: true,
duration: 2000,
easing: 'out'
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
google.visualization.events.addListener(chart, 'ready', function () {
if (options.pieStartAngle < 360) {
options.pieStartAngle++;
// options.is3D = true;
setTimeout(function () {
// options.is3D = true;
chart.draw(data, options);
}, 1);
}
});
// options.is3D = true;
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

how to dynamically add rows to google pie chart using ajax and jquery

how do I dynamically add rows to the google pie chart on each time the data is pulled by ajax call?
html
<div id="piechart" style="width: 900px; height: 500px;"></div>
google pie chart
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
'width': 900,
'height': 500
// pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
now instead of I want dynamic adding of rows as soon as page is loaded a should add new values fetched from ajax query like this:
ajax call
function getPieChartData() {
$.ajax({
url: pieChartData,
headers: {
token: token,
params: JSON.stringify({
"ads":[2,3],"start_date":"2018-01-01"
})
},
type: "GET"
}).then((response)=> {
r = JSON.parse(response);
let data = r.data
if(data.length >0){
}
})
}

by default, google.charts.load will wait for the page to load,
we can use this in place of $(document).ready or similar functions.
once google charts has loaded, go ahead and create the data table, chart, options, etc.,
then get the data.
assuming the data is an array of arrays, similar to the example you provided,
you can simply use data table method addRows to add the data to the data table.
e.g.
data.addRows([
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
or...
data.addRows(r.data);
if it is a single array or one row, use addRow
data.addRow(['Work', 11]);
the full snippet might look something like this...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
var options = {
width: 900,
height: 500
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
getPieChartData();
function getPieChartData() {
var pieChartData = 'some url';
var token = 'some token';
$.ajax({
url: pieChartData,
headers: {
token: token,
params: JSON.stringify({
"ads":[2,3],"start_date":"2018-01-01"
})
},
type: "GET"
}).then((response)=> {
r = JSON.parse(response);
if (r.data.length > 0){
data.addRows(r.data);
chart.draw(data, options);
}
});
}
});

Google charts and google table not displaying simultaneously

I am using google charts and google table for my project. The problem is that, I am not able to display two google charts and one google table on a single page. How can this be solved?
My code:
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages': ['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?= $jsonTable ?>);
var options = {
title: ' Audit Schedule ',
is3D: 'true',
width: 500,
height: 250
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
width: 501.2,
height: 250
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v: 8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
//html code
<div id="piechart" style="margin-top: -300px; margin-left:490px;"></div><br>
<div class="chart-wrapper">
<div id="chart" style="width:1006px; height:400px; margin-left: -15px"></div>
</div><br>
<div id="table_div"></div>
Link to google charts: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#column-styles

You have defined multiple instances of google.charts.setOnLoadCallback(). This function should only be defined ONCE in your code, because otherwise you'll be overwriting the callback event everytime. Anyway, you should wrap all your chart drawing functions in something like :
function drawCharts(){
drawchart1();
drawchart2();
drawwhateveryouwant();
}
google.setOnLoadCallback(drawCharts);
Also, I might have to point out that you have two functions with the same name ^^, you might want to correct that. Other than that, you might want to call all your chart packages at once by doing this since I also noticed that you were loading the same package twice, which is a waste of resources even if it doesn't stop your code from functioning correctly :
google.load('visualization', '1', {'packages': ['corechart','table']});
I modified your code a bit to help you towards achieving desired results :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="piechart"></div>
<div id="table_div"></div>
</body>
<script>
google.charts.setOnLoadCallback(init);
google.charts.load('current', {'packages':['corechart','table']});
//Function to draw piechart
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
width: 501.2,
height: 250
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
};
//Function to draw table
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v: 8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
//Function to initialize everything
function init(){
drawTable();
drawChart();
}
</script>
</html>
You'll forgive me for skipping the chart with JSON data though :p

Last slice color in google pie chart?

I'm looking for a way to consistently color the last slice in a google pie chart. The last slice is titled other and I won't always know how many other slices are showing. I set up the following bin...
http://jsbin.com/sugere/1/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Other', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Other', 2]
]);
var options = {
title: 'My Daily Activities 2'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>
I considered making Other the first item that comes back which would allow me to target the first item's color, but then I would need some way of rotating the pie chart back. As far as I can tell you can only do that by percentage and not by number of slices.

If you want to change color of the slice you have an option on this chart.
Link
https://developers.google.com/chart/interactive/docs/gallery/piechart
Example
slices: [{color: 'black', {}, {}, {color: 'red'}] // order of the slice
slices: {0: {color: 'black'}, 3: {color: 'red'}} // number of the slice
Your code modified
I am taking the liberty to change all color on the first chart and just change the last slice.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Other', 7]
]);
var options = {
title: 'My Daily Activities',
slices: {
0: { color: 'blue' },
1: { color: 'red' },
2: { color: 'orange' },
3: { color: 'grey' },
4: { color: 'black' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Other', 2]
]);
var options = {
title: 'My Daily Activities 2',
slices: {
3: { color: 'black' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="piechart2" style="width: 900px; height: 500px;"></div>
</body>
</html>

I believe you are looking for pieResidueSliceColor
See https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#configuration-options
This is the color for the 'Other' category for the data meeting your specified threshold.
However, if you are not using the threshold other then to use Hann's option you could just figure out the index of your last data point array and use the slices:{idxYourFiguredOut:{fontColor:'red'}} but the api has something built in.