javascript - change properties of google chart -


hellp every body in code have google chart here photograph

the problem when click on line there strange dot on how disable property

and how creat thiner line ?

here graph , here red dot 

google.charts.load('current', {'packages':['line', 'corechart']}); google.charts.setonloadcallback(drawchart); function drawchart() {   var button = document.getelementbyid('change-chart');   var chartdiv = document.getelementbyid('dealchart_div');   var data = new google.visualization.datatable();   data.addcolumn('number', 'x');   data.addcolumn('number', "");   data.addcolumn('number', "");   data.addcolumn('number', "");   // data.addcolumn({type:'number', role:'interval'});   // data.addcolumn({type:'number', role:'interval'});   // interval role col.   // data.addcolumn({type:'boolean', role:'scope'});   // interval role col.   //data.addcolumn({type:'boolean', role:'scope'});   // interval role col.   // data.addcolumn('number', "average hours of daylight");   data.addrows([     [ 3.47072 ,32853.30048,null,null ],     [ 3.47424 ,30506.63616,null,null ],     [ 3.47776 ,28159.97184,null,null ],     [ 3.48128 ,25813.30752,null,null ],     [ 3.4848 ,23466.6432,null,null ],     [ 3.48832 ,21119.97888,null,null ],     [ 3.49184 ,18773.31456,null,null ],     [ 3.49536 ,16426.65024,null,null ],     [ 3.49888 ,14079.98592,null,null ],     [ 3.5024 ,11733.3216,null,null ],     [ 3.50592 ,9386.6572799999,null,null ],     [ 3.50944 ,7039.9929599999,null,null ],     [ 3.51296 ,4693.32864,null,null ],     [ 3.51648 ,2346.66432,null,null ],     [ 3.51999 ,null,null,175999.824 ],     [ 3.52 ,null,null,-175999.824 ],     [ 3.52352 ,null,-2346.66432,null ],     [ 3.52704 ,null,-4693.32864,null ],     [ 3.53056 ,null,-7039.9929599999,null ],     [ 3.53408 ,null,-9386.6572799999,null ],     [ 3.5376 ,null,-11733.3216,null ],     [ 3.54112 ,null,-14079.98592,null ],     [ 3.54464 ,null,-16426.65024,null ],     [ 3.54816 ,null,-18773.31456,null ],     [ 3.55168 ,null,-21119.97888,null ],     [ 3.5552 ,null,-23466.6432,null ],     [ 3.55872 ,null,-25813.30752,null ],     [ 3.56224 ,null,-28159.97184,null ],     [ 3.56576 ,null,-30506.63616,null ],     [ 3.56928 ,null,-32853.30048,null ],     [ 3.5728 ,null,-35199.9648,null ],     [ 3.57632 ,null,-37546.62912,null ],     [ 3.57984 ,null,-39893.29344,null ],     [ 3.58336 ,null,-42239.95776,null ],     [ 3.58688 ,null,-44586.62208,null ],     [ 3.5904 ,null,-46933.2864,null ],     [ 3.59392 ,null,-49279.950720001,null ],     [ 3.59744 ,null,-51626.615040001,null ]     // [ $newx , $payyer],     // [new date(2014, 1), .4, 8.7],     //[new date(2014, 11), -.2, 4.5]   ]);   var classicoptions = {     title: 'your exposed deal',     width: 430,     height: 360,     // gives each series axis matches vaxes number below.     series: {       0: {axis: '', },       interval: {         'interval': {           'color': '#000000',           'style':'bars',           'barwidth':0,           'linewidth':4,           'pointsize':1,           'fillopacity':1         },         // 'interval': { 'color': '#000000', 'style':'bars', 'barwidth':0, 'linewidth':4, 'pointsize':1, 'fillopacity':1 },       }     },     colors: [ 'green','red','black'],     vaxes: {       // adds titles each axis.       0: {title: 'profit'},     },     haxis: {       title: 'rate',       legend: 'none'     },     vaxis: {       viewwindow: { }     }   };    function drawmaterialchart() {     var materialchart = new google.charts.line(chartdiv);     materialchart.draw(data, materialoptions);   }    function drawclassicchart() {     var classicchart = new google.visualization.linechart(chartdiv);     classicchart.draw(data, classicoptions);   }    drawclassicchart(); }

a 'style' column role can used make point size 0,
, line thinner

see following working snippet,
data view used add columns 'style' role... 

google.charts.load('current', {    callback: drawchart,    packages: ['corechart']  });    function drawchart() {    var button = document.getelementbyid('change-chart');    var chartdiv = document.getelementbyid('chart_div');    var data = new google.visualization.datatable();    data.addcolumn('number', 'x');    data.addcolumn('number', "");    data.addcolumn('number', "");    data.addcolumn('number', "");    data.addrows([      [ 3.47072 ,32853.30048,null,null ],      [ 3.47424 ,30506.63616,null,null ],      [ 3.47776 ,28159.97184,null,null ],      [ 3.48128 ,25813.30752,null,null ],      [ 3.4848 ,23466.6432,null,null ],      [ 3.48832 ,21119.97888,null,null ],      [ 3.49184 ,18773.31456,null,null ],      [ 3.49536 ,16426.65024,null,null ],      [ 3.49888 ,14079.98592,null,null ],      [ 3.5024 ,11733.3216,null,null ],      [ 3.50592 ,9386.6572799999,null,null ],      [ 3.50944 ,7039.9929599999,null,null ],      [ 3.51296 ,4693.32864,null,null ],      [ 3.51648 ,2346.66432,null,null ],      [ 3.51999 ,null,null,175999.824 ],      [ 3.52 ,null,null,-175999.824 ],      [ 3.52352 ,null,-2346.66432,null ],      [ 3.52704 ,null,-4693.32864,null ],      [ 3.53056 ,null,-7039.9929599999,null ],      [ 3.53408 ,null,-9386.6572799999,null ],      [ 3.5376 ,null,-11733.3216,null ],      [ 3.54112 ,null,-14079.98592,null ],      [ 3.54464 ,null,-16426.65024,null ],      [ 3.54816 ,null,-18773.31456,null ],      [ 3.55168 ,null,-21119.97888,null ],      [ 3.5552 ,null,-23466.6432,null ],      [ 3.55872 ,null,-25813.30752,null ],      [ 3.56224 ,null,-28159.97184,null ],      [ 3.56576 ,null,-30506.63616,null ],      [ 3.56928 ,null,-32853.30048,null ],      [ 3.5728 ,null,-35199.9648,null ],      [ 3.57632 ,null,-37546.62912,null ],      [ 3.57984 ,null,-39893.29344,null ],      [ 3.58336 ,null,-42239.95776,null ],      [ 3.58688 ,null,-44586.62208,null ],      [ 3.5904 ,null,-46933.2864,null ],      [ 3.59392 ,null,-49279.950720001,null ],      [ 3.59744 ,null,-51626.615040001,null ]    ]);      var view = new google.visualization.dataview(data);    view.setcolumns([0, 1, {      calc: function (dt, row) {        return 'line {stroke-width: 1; stroke-color: green;}, point {size: 0;}';      },      type: 'string',      role:'style'    }, 2, {      calc: function (dt, row) {        return 'line {stroke-width: 1; stroke-color: red;}, point {size: 0;}';      },      type: 'string',      role:'style'    }, 3, {      calc: function (dt, row) {        return 'line {stroke-width: 1; stroke-color: black;}, point {size: 0;}';      },      type: 'string',      role:'style'    }]);      var classicoptions = {      title: 'your exposed deal',      width: 430,      height: 360,      colors: [ 'green','red','black'],      vaxes: {        0: {title: 'profit'},      },      haxis: {        title: 'rate',        legend: 'none'      },      pointsize: 0    };      function drawclassicchart() {      var classicchart = new google.visualization.linechart(chartdiv);        google.visualization.events.addlistener(classicchart, 'select', function () {        classicchart.setselection([]);      });        classicchart.draw(view, classicoptions);    }      drawclassicchart();  }
<script src="https://www.gstatic.com/charts/loader.js"></script>  <div id="chart_div"></div>


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more