We Keep Coding

How can I limit my Google chart to 7 items?

I'm wondering how I could limit the MAX amount of items it can display to my chart to 5. I've got a cron job updating the .json daily, and currently it just tries to fit them all onto there.
This is my code:
<script>
google.charts.load("visualization", "1", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "/server/database.json",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Players Hourly',
'is3D':true,
legend: 'bottom',
hAxis: {
minValue: 0,
format: 'long'
},
vAxis: {
minValue: 0,
scaleType: 'log',
format: 'long'
},
pointSize: 5,
series: {
0: { pointShape: 'circle' },
}
};
var chart = new google.visualization.LineChart(document.getElementById('serverstats'));
chart.draw(data, options);
}
$(window).resize(function(){
drawChart();
});
</script>
Thank you.

an easy way would be to use a data view and the setRows method.
then use the view to draw the chart.
var data = new google.visualization.DataTable(jsonData);
var view = new google.visualization.DataView(data);
view.setRows([0, 1, 2, 3, 4]); //<-- provide an array of the row indexes you want to see
...
chart.draw(view, options); //<-- use view here
EDIT
to show the last 5 rows...
var viewRows = [];
for (var i = data.getNumberOfRows() - 1; i > data.getNumberOfRows() - 6; i--) {
viewRows.push(i);
}
view.setRows(viewRows);

how to create line chart with jqplot using ajax data

I am trying to create line chart with Jqplot by getting the data from c# controller using ajax.
function getGraph(fcn) {
var turl = '/Rep/ChartBoxPlot/' + fcn;
$.ajax({
type: "POST",
url: turl,
dataType: "json",
success: function (result) {
$('#chart1').empty();
for (var i = 0; i < result.length; i++) {
var temp = result[i]['Date'];
var date = moment(temp).format('MMM DD');
var y = result[i]['Actual'];
var line1 = [date, result[i]['Actual']];
var line2 = [date, result[i]['Forecast']];
// alert(line1);
var plot = $.jqplot('chart1', [line1], {
axes: {
xaxis: {
label: "Forecast",
renderer: $.jqplot.ajaxDataRenderer,
//tickOptions: { formatString: '%I:%M:%S %p' },
//numberTicks: 8,
tickInterval: '15 second'
},
yaxis: {
label: 'Lines'
},
},
});
}
},
error(result) {
alert(result)
}
});
}
html
<div id="chart1" style="height: 400px; width: 900px;
position: relative;" class="jqplot-target">
The data from controller is coming fine but the graph is not plotted. Any suggestions would be appreciated
Thanks

Removing Legend in Google Visualization Pie Chart

I am trying to hide the labels in my pie chart. I think the correct word is labels? But I could be wrong. Basically I have a pie chart That displays some data, outside of the pie chart it has a label with a color cube and a name next to it displaying what each color stands for, I would like to get rid of that, because on hover I show the same data and it takes up some valuable real estate I would like to use. Here is my Javascript code:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: '',
is3D: true
};
$.ajax({
type: "POST",
url: "myPage.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//console.log(JSON.stringify(r))
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
var formatter = new google.visualization.NumberFormat(
{ negativeColor: 'red', negativeParens: true, pattern: '$###,###.##' });
formatter.format(data, 1);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}

Google charts Visualization, killing legend:
legend: {position: 'none'}
-- this will kill the legend in Google Charts.
Also, the JS to do it:
http://jsfiddle.net/api/post/library/pure/
legend: 'none'
So, ultimately this should do it for you:
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: '',
is3D: true,
legend: none,
};
$.ajax({
type: "POST",
url: "myPage.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
//console.log(JSON.stringify(r))
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
var formatter = new google.visualization.NumberFormat(
{ negativeColor: 'red', negativeParens: true, pattern: '$###,###.##' });
formatter.format(data, 1);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}

Google line chart is not working

I'm working first time with google chart.i am trying to modify a bar chart to line chart in which i am facing an error "container is not defined". As a bar chart it is working fine and i am taking data as a json response my json response is like this.
[{"rate":0.7955,"month":"December"},{"rate":0.7822,"month":"November"},{"rate":0.7789,"month":"October"},{"rate":0.7915,"month":"September"},{"rate":0.7928,"month":"August"},{"rate":0.8002,"month":"July"},{"rate":0.8133,"month":"June"},{"rate":0.8218,"month":"May"},{"rate":0.8264,"month":"April"},{"rate":0.823,"month":"March"},{"rate":0.8201,"month":"February"},{"rate":0.8297,"month":"January"}]
and my js file is
var TUTORIAL_SAVVY = {
/*return google visualization data*/
getvisualizationData: function (jsonData) {
var point1, dataArray = [],
data = new google.visualization.LineChart();
data.addColumn('string', 'Rate');
data.addColumn('number', 'Marks in Mathematics');
data.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
/* for loop code for changing inputdata to 'data' of type google.visualization.DataTable*/
$.each(jsonData, function (i, obj) {
point1 = "Rate : " + obj.rate + "";
dataArray.push([obj.month, obj.rate, TUTORIAL_SAVVY.returnTooltip(point1)]);
});
data.addRows(dataArray);
return data;
},
/*return options for line chart: these options are for various configuration of chart*/
getOptionForLinechart: function () {
var options = {
title:'Key Success Metrics over time across all channels',
'backgroundColor': 'transparent',
'width': 620,
'vAxis': {minValue:"0", maxValue:"100", gridlines:{count: 7} },
'chartArea': {top:"50", left: "40"},
'legend':{position: 'top', alignment: 'start' }
};
return options;
},
/*Draws a line chart*/
drawLineChart: function (inputdata) {
var lineOptions = TUTORIAL_SAVVY.getOptionForLinechart(),
data = TUTORIAL_SAVVY.getvisualizationData(inputdata),
chart = new google.visualization.LineChart(document.getElementById('student-line-chart'));
chart.draw(data, lineOptions);
/*for redrawing the line chart on window resize*/
$(window).resize(function () {
chart.draw(data, lineOptions);
});
},
/* Returns a custom HTML tooltip for Visualization chart*/
returnTooltip: function (dataPoint1) {
return "<div style='height:30px;width:150px;font:12px,roboto;padding:15px 5px 5px 5px;border-radius:3px;'>" +
"<span style='color:#68130E;font:12px,roboto;padding-right:20px;'>" + dataPoint1 + "</span>" ;
},
/*Makes ajax call to servlet and download data */
getStudentData: function () {
$.ajax({
url: '/bin/servlet/rate',
dataType: "JSON",
success: function (data) {
TUTORIAL_SAVVY.drawLineChart(data);
}
});
}
};
google.load("visualization", "1", {
packages: ["corechart"]
});
$(document).ready(function () {
TUTORIAL_SAVVY.getStudentData();
});
can anybody help ?

Google Line Chart Customization

I have these line charts here with real time data from an arduino.
What i want to do is to make the first graph (Temperature) better looking. I want to have always some gaps from the top and bottom (Like humidity) and i want to increase the width of the Y Axis of temperature. Is this possible ?
Both charts has run with exactly the same settings:
function drawTemperature() {
$.ajax({
url: 'http://192.168.1.3/Charts/chart_temperature.php',
dataType: 'json',
success: function (jsonData) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
'title': 'Temperature',
'width': 1200,
'height': 600
//'legend.alignment' : 'start',
//'hAxis.baseline' : 5,
//'chartArea.top' : 20,
//'chartArea.left' : 500
//'focusTarget' : 'category'
//'animation.easing' : 'inAndOut'
//colors:['blue','#004411'],
//'hAxis.maxValue' : 30,
//'hAxis.showTextEvery' : 0.1,
//'hAxis.logScale' : 'true',
//'hAxis.gridlines.color' : '#00CC00',
//'hAxis.maxAlternation' : 10,
//'hAxis.viewWindow.max' : 10
//'curveType': 'function'
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_temperature'));
chart.draw(data, options);
}
});
}
function drawHumidity() {
$.ajax({
url: 'http://192.168.1.3/Charts/chart_humidity.php',
dataType: 'json',
success: function (jsonData) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_humidity'));
chart.draw(data, {width: 1200, height: 600});
}
});
}
function drawVisualization() {
drawTemperature();
drawHumidity();
}

You can create "gaps" at the top and bottom of you chart by setting the vAxis.minValue and vAxis.maxValue options to values less than the minimum and maximum (respectively) of your chart's data. Here's one way you might do this:
var range = data.getColumnRange(1);
var options = {
title: 'Temperature',
width: 1200,
height: 600,
vAxis: {
minValue: range.min - 1,
maxValue: range.max + 1
}
};