jquery - How to set Axis step range in Google Chart? -

-

hello want create google chart getting problem ticks: add [0, -50000, -100000, -150000, -200000] ... it's working fine add range 500000 , set auto ticks... in advance.

google.load('visualization', '1', {packages: ['corechart', 'line']});  google.setonloadcallback(drawbackgroundcolor);    function drawbackgroundcolor() {  	        var data = new google.visualization.datatable();        var amount_array = [];        //data.addcolumn('number', 'dogs');  	  data.addcolumn('date', 'product');  	  data.addcolumn('number', 'amount');  		data.addrows([  					  			[ new date(2015,4,20),-199525],  					  			[ new date(2015,4,27),-195930],  					  			[ new date(2015,5,17),-175720],  					  			[ new date(2015,7,05),-189725],  					  			[ new date(2015,8,11),-174875],  					  			[ new date(2015,8,30),-170819],  					  			[ new date(2015,9,07),-176488],  					  			[ new date(2015,9,21),-188950],  					  			[ new date(2015,9,28),-190418],  					  			[ new date(2015,10,05),-183461],  					  			[ new date(2015,10,12),-189215],  					  			[ new date(2015,10,18),-192451],  					  			[ new date(2015,10,26),-184334],  					  			[ new date(2015,11,03),-191307],  					  			[ new date(2015,11,09),-188478],  					  			[ new date(2015,11,16),-194779],  					  			[ new date(2016,0,06),-218751],  					  			[ new date(2016,0,20),-226485],  			 	]);  		  						amount_array[0] = '-199.5k';  								amount_array[1] = '-195.9k';  								amount_array[2] = '-175.7k';  								amount_array[3] = '-189.7k';  								amount_array[4] = '-174.8k';  								amount_array[5] = '-170.8k';  								amount_array[6] = '-176.4k';  								amount_array[7] = '-188.9k';  								amount_array[8] = '-190.4k';  								amount_array[9] = '-183.4k';  								amount_array[10] = '-189.2k';  								amount_array[11] = '-192.4k';  								amount_array[12] = '-184.3k';  								amount_array[13] = '-191.3k';  								amount_array[14] = '-188.4k';  								amount_array[15] = '-194.7k';  								amount_array[16] = '-218.7k';  								amount_array[17] = '-226.4k';  						  		// custom format data values      (var = 0; < data.getnumberofrows(); i++) {  		data.setformattedvalue(i, 1, amount_array[i]);		      }  		  		  	var chart = new google.visualization.linechart(document.getelementbyid('chart_div'));	  		          var options = {          haxis: {            title: '',  		  gridlinecolor: '#fff',  		  textposition: 'none',          },		          vaxis: {            title: '',		    		  textstyle: {  			  color: '#a7b3bc',			    			  fontsize: 14,  			  bold: true,			    			},  		  ticks: [0, -50000, -100000, -150000, -200000],          },          backgroundcolor: '#fff',  		series: {          	0: { color: '#5cbd60' }                      },  		pointsize: 2,  		baselinecolor: '#e6e6e6',  		legend: {position: 'none'},  		chartarea: {  			backgroundcolor: {          		stroke: '#e6e6e6',          		strokewidth: 1      		},  			width: 330,  			height: 155,  			top:20,  			bottom:20  		},  		width: 430,  		height : 200  	};  	  	  	  	// axis values , reformat them      var runonce = google.visualization.events.addlistener(chart, 'ready', function () {          google.visualization.events.removelistener(runonce);          var bb, val, formattedval, suffix, ticks = [], cli = chart.getchartlayoutinterface();  		  		  		          (var = 0; bb = cli.getboundingbox('vaxis#0#gridline#' + i); i++) {              val = cli.getvaxisvalue(bb.top);  			  			  			              if (val != parseint(val)) {                  val = cli.getvaxisvalue(bb.top + bb.height / 2);              }                          // convert base-10 counting 2^10 counting              (var n = 0; val >= 1000; n++) {			                  //val /= 1000;  				val = val / 1000;				              }  			  			formattedval = val;              val *= math.pow(1000, n);                					              switch (n) {                  case 0:                      suffix = '$-';                      break;                  case 1:                      suffix = 'k';                      break;                  case 2:                      suffix = 'm';                      break;                  case 3:                      suffix = 'g';                      break;  				 case 4:                      suffix = 't';                      break;                  default:                      while (n > 4) {                          formattedval *= 1000;                          n--;                      }                      suffix = 'k'              }  			  			  			if(formattedval >= 1){  				ticks.push({v: val, f: math.round(formattedval) + suffix});  			}  			else if(formattedval < 0){				  				var formattedval1 = formattedval / 1000;  				ticks.push({v: val, f: math.round(formattedval1) + 'k'});  			}  			else{  				ticks.push({v: val, f: suffix});	  			}                        }  	          options.vaxis = options.vaxis || {};          options.vaxis.ticks = ticks;          chart.draw(data, options);  		      });	  	  	chart.draw(data, options);      }
<script src="https://www.google.com/jsapi"></script>    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>    <div id="chart_div"></div>

you generate ticks specifying min,max , interval parameters demonstrated below:

function calcintticks(datatable, options) {     var min = options.hasownproperty("min")  ? options.min : math.floor(datatable.getcolumnrange(1).min);     var max = options.hasownproperty("max") ? options.max : math.ceil(datatable.getcolumnrange(1).max);     var vals = [];     (var cur = min; cur <= max; cur += options.interval) {         vals.push(cur);     }     return vals; }

modified example 

google.load('visualization', '1', { packages: ['corechart', 'line'] });  google.setonloadcallback(drawbackgroundcolor);    function drawbackgroundcolor() {        var data = new google.visualization.datatable();      var amount_array = [];      //data.addcolumn('number', 'dogs');      data.addcolumn('date', 'product');      data.addcolumn('number', 'amount');      data.addrows([            [new date(2015, 4, 20), -199525],            [new date(2015, 4, 27), -195930],            [new date(2015, 5, 17), -175720],            [new date(2015, 7, 05), -189725],            [new date(2015, 8, 11), -174875],            [new date(2015, 8, 30), -170819],            [new date(2015, 9, 07), -176488],            [new date(2015, 9, 21), -188950],            [new date(2015, 9, 28), -190418],            [new date(2015, 10, 05), -183461],            [new date(2015, 10, 12), -189215],            [new date(2015, 10, 18), -192451],            [new date(2015, 10, 26), -184334],            [new date(2015, 11, 03), -191307],            [new date(2015, 11, 09), -188478],            [new date(2015, 11, 16), -194779],            [new date(2016, 0, 06), -218751],            [new date(2016, 0, 20), -226485],      ]);        amount_array[0] = '-199.5k';      amount_array[1] = '-195.9k';      amount_array[2] = '-175.7k';      amount_array[3] = '-189.7k';      amount_array[4] = '-174.8k';      amount_array[5] = '-170.8k';      amount_array[6] = '-176.4k';      amount_array[7] = '-188.9k';      amount_array[8] = '-190.4k';      amount_array[9] = '-183.4k';      amount_array[10] = '-189.2k';      amount_array[11] = '-192.4k';      amount_array[12] = '-184.3k';      amount_array[13] = '-191.3k';      amount_array[14] = '-188.4k';      amount_array[15] = '-194.7k';      amount_array[16] = '-218.7k';      amount_array[17] = '-226.4k';        // custom format data values      (var = 0; < data.getnumberofrows() ; i++) {          data.setformattedvalue(i, 1, amount_array[i]);      }          var chart = new google.visualization.linechart(document.getelementbyid('chart_div'));          var options = {          haxis: {              title: '',              gridlinecolor: '#fff',              textposition: 'none',          },          vaxis: {              title: '',              textstyle: {                  color: '#a7b3bc',                  fontsize: 14,                  bold: true,              },              //ticks: [0, -50000, -100000, -150000, -200000],              ticks: calcintticks(data, { min: -200000, max: 0, interval: 50000 })          },          backgroundcolor: '#fff',          series: {              0: { color: '#5cbd60' }          },          pointsize: 2,          baselinecolor: '#e6e6e6',          legend: { position: 'none' },          chartarea: {              backgroundcolor: {                  stroke: '#e6e6e6',                  strokewidth: 1              },              width: 330,              height: 155,              top: 20,              bottom: 20          },          width: 430,          height: 200      };            // axis values , reformat them      var runonce = google.visualization.events.addlistener(chart, 'ready', function () {          google.visualization.events.removelistener(runonce);          var bb, val, formattedval, suffix, ticks = [], cli = chart.getchartlayoutinterface();                (var = 0; bb = cli.getboundingbox('vaxis#0#gridline#' + i) ; i++) {              val = cli.getvaxisvalue(bb.top);                    if (val != parseint(val)) {                  val = cli.getvaxisvalue(bb.top + bb.height / 2);              }              // convert base-10 counting 2^10 counting              (var n = 0; val >= 1000; n++) {                  //val /= 1000;                  val = val / 1000;              }                formattedval = val;              val *= math.pow(1000, n);                  switch (n) {                  case 0:                      suffix = '$-';                      break;                  case 1:                      suffix = 'k';                      break;                  case 2:                      suffix = 'm';                      break;                  case 3:                      suffix = 'g';                      break;                  case 4:                      suffix = 't';                      break;                  default:                      while (n > 4) {                          formattedval *= 1000;                          n--;                      }                      suffix = 'k'              }                  if (formattedval >= 1) {                  ticks.push({ v: val, f: math.round(formattedval) + suffix });              }              else if (formattedval < 0) {                  var formattedval1 = formattedval / 1000;                  ticks.push({ v: val, f: math.round(formattedval1) + 'k' });              }              else {                  ticks.push({ v: val, f: suffix });              }            }            options.vaxis = options.vaxis || {};          options.vaxis.ticks = ticks;          chart.draw(data, options);        });        chart.draw(data, options);  }        function calcintticks(datatable, options) {      var min = options.hasownproperty("min")  ? options.min : math.floor(datatable.getcolumnrange(1).min);      var max = options.hasownproperty("max") ? options.max : math.ceil(datatable.getcolumnrange(1).max);      var vals = [];      (var cur = min; cur <= max; cur += options.interval) {          vals.push(cur);      }      return vals;  }
<script src="https://www.google.com/jsapi"></script>  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  <div id="chart_div"></div>


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more