How can I limit my Google chart to 7 items?

up vote
1
down vote

favorite

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.

edited Nov 22 at 14:11

WhiteHat

35.4k61375

asked Nov 21 at 20:02

FallenSuper

add a comment |

up vote
1
down vote

favorite

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.

edited Nov 22 at 14:11

WhiteHat

35.4k61375

asked Nov 21 at 20:02

FallenSuper

add a comment |

up vote
1
down vote

favorite

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.

edited Nov 22 at 14:11

WhiteHat

35.4k61375

asked Nov 21 at 20:02

FallenSuper

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.

<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>

<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>

javascript php html charts google-visualization

edited Nov 22 at 14:11

WhiteHat

35.4k61375

asked Nov 21 at 20:02

FallenSuper

edited Nov 22 at 14:11

WhiteHat

35.4k61375

asked Nov 21 at 20:02

FallenSuper

edited Nov 22 at 14:11

WhiteHat

35.4k61375

edited Nov 22 at 14:11

WhiteHat

35.4k61375

edited Nov 22 at 14:11

WhiteHat

35.4k61375

asked Nov 21 at 20:02

FallenSuper

asked Nov 21 at 20:02

FallenSuper

asked Nov 21 at 20:02

FallenSuper

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

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);

edited Nov 22 at 14:20

answered Nov 22 at 0:15

WhiteHat

35.4k61375

This does work, but only applies the first 5 indexes. I want to see the last 5 at all times. Thanks for the help already. @WhiteHat
– FallenSuper
Nov 22 at 8:19

see EDIT above...
– WhiteHat
Nov 22 at 14:20

Amazing, any idea how I disable this? prnt.sc/llynz4
– FallenSuper
Nov 23 at 10:03

check this answer...
– WhiteHat
Nov 23 at 14:21

Umm, I just figured our that your solution shows the last 5 rows, but shows them backwards. The first last one comes upfront and the 5th one comes at the end. Making it look like progress is going down if you see what I mean. Any way around this? Appreciate the help so far.
– FallenSuper
Nov 24 at 15:33

|
show 1 more comment

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',
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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419696%2fhow-can-i-limit-my-google-chart-to-7-items%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

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);

edited Nov 22 at 14:20

answered Nov 22 at 0:15

WhiteHat

35.4k61375

This does work, but only applies the first 5 indexes. I want to see the last 5 at all times. Thanks for the help already. @WhiteHat
– FallenSuper
Nov 22 at 8:19

see EDIT above...
– WhiteHat
Nov 22 at 14:20

Amazing, any idea how I disable this? prnt.sc/llynz4
– FallenSuper
Nov 23 at 10:03

check this answer...
– WhiteHat
Nov 23 at 14:21

Umm, I just figured our that your solution shows the last 5 rows, but shows them backwards. The first last one comes upfront and the 5th one comes at the end. Making it look like progress is going down if you see what I mean. Any way around this? Appreciate the help so far.
– FallenSuper
Nov 24 at 15:33

|
show 1 more comment

up vote
0
down vote

accepted

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);

edited Nov 22 at 14:20

answered Nov 22 at 0:15

WhiteHat

35.4k61375

This does work, but only applies the first 5 indexes. I want to see the last 5 at all times. Thanks for the help already. @WhiteHat
– FallenSuper
Nov 22 at 8:19

see EDIT above...
– WhiteHat
Nov 22 at 14:20

Amazing, any idea how I disable this? prnt.sc/llynz4
– FallenSuper
Nov 23 at 10:03

check this answer...
– WhiteHat
Nov 23 at 14:21

Umm, I just figured our that your solution shows the last 5 rows, but shows them backwards. The first last one comes upfront and the 5th one comes at the end. Making it look like progress is going down if you see what I mean. Any way around this? Appreciate the help so far.
– FallenSuper
Nov 24 at 15:33

|
show 1 more comment

up vote
0
down vote

accepted

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);

edited Nov 22 at 14:20

answered Nov 22 at 0:15

WhiteHat

35.4k61375

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);

edited Nov 22 at 14:20

answered Nov 22 at 0:15

WhiteHat

35.4k61375

edited Nov 22 at 14:20

answered Nov 22 at 0:15

WhiteHat

35.4k61375

answered Nov 22 at 0:15

WhiteHat

35.4k61375

answered Nov 22 at 0:15

WhiteHat

35.4k61375

This does work, but only applies the first 5 indexes. I want to see the last 5 at all times. Thanks for the help already. @WhiteHat
– FallenSuper
Nov 22 at 8:19

see EDIT above...
– WhiteHat
Nov 22 at 14:20

Amazing, any idea how I disable this? prnt.sc/llynz4
– FallenSuper
Nov 23 at 10:03

check this answer...
– WhiteHat
Nov 23 at 14:21

Umm, I just figured our that your solution shows the last 5 rows, but shows them backwards. The first last one comes upfront and the 5th one comes at the end. Making it look like progress is going down if you see what I mean. Any way around this? Appreciate the help so far.
– FallenSuper
Nov 24 at 15:33

|
show 1 more comment

This does work, but only applies the first 5 indexes. I want to see the last 5 at all times. Thanks for the help already. @WhiteHat
– FallenSuper
Nov 22 at 8:19

see EDIT above...
– WhiteHat
Nov 22 at 14:20

Amazing, any idea how I disable this? prnt.sc/llynz4
– FallenSuper
Nov 23 at 10:03

check this answer...
– WhiteHat
Nov 23 at 14:21

Umm, I just figured our that your solution shows the last 5 rows, but shows them backwards. The first last one comes upfront and the 5th one comes at the end. Making it look like progress is going down if you see what I mean. Any way around this? Appreciate the help so far.
– FallenSuper
Nov 24 at 15:33

This does work, but only applies the first 5 indexes. I want to see the last 5 at all times. Thanks for the help already. @WhiteHat
– FallenSuper
Nov 22 at 8:19

see EDIT above...
– WhiteHat
Nov 22 at 14:20

Amazing, any idea how I disable this? prnt.sc/llynz4
– FallenSuper
Nov 23 at 10:03

check this answer...
– WhiteHat
Nov 23 at 14:21

Umm, I just figured our that your solution shows the last 5 rows, but shows them backwards. The first last one comes upfront and the 5th one comes at the end. Making it look like progress is going down if you see what I mean. Any way around this? Appreciate the help so far.
– FallenSuper
Nov 24 at 15:33

|
show 1 more comment

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi