javascript - Levels is overlapping in angular-chart.js -


i using angular-chart.js

<div class="container" ng-controller="linectrl">      <canvas id="bar" class="chart chart-bar" data="barchartdata" options="options" series="linechartseries"             colours="colours" legend="true" labels="barchartlabel"></canvas> </div>

css chart is

.chart #bar {   width: 100%!important;  height: 300px; }

but chart showing overlapping labels like

enter image description here

that's because chart.js shows x axis labels , doesn't drop them if overlap. there feature request out there https://github.com/nnnick/chart.js/pull/897 - still open.

there separate branch - https://github.com/nnnick/chart.js/pull/521 solves issue. but, hasn't been integrated main branch yet , might want read full thread before opting this.

there workaround however. can opt set except every nth label when pass in labels array, this

labels: ["jan 1", "jan 2",... , lots of days ....].map(function (e, index) {      return index % 5 ? "" : e; })

adjust value 5 needed. best way adjust based on size of array x number of points or less if number of points crosses threshold. e.g. if want no more 10 points, replace 5 size of array / 10 if size of array > 200 or @ whichever point overlaps start. make sure don't end less markers :-). instance, if pick 30 instead of 200 threshold, there times when have 3 markers 30+ data points. or can choose more creative mapping function (for example, make sure have label @ end of scale, etc.)

here example chart.js. same logic work angular-chart.js well.

var mylabels = [] var myvalues = [] (var = 0; < 1000; i++) {     mylabels.push("label" + i);     myvalues.push(math.random() * 1000) }  var data1 = {     labels: mylabels,     datasets: [{         label: "my dataset",         fillcolor: "rgba(244, 6, 6, 1)",         data: myvalues     }] };  var ctx = document.getelementbyid("chart1").getcontext("2d"); window.weekschart = new chart(ctx).bar(data1, {     barshowstroke : false });   var data2 = {     labels: mylabels.map(function (e, index) {          return index % 30 ? "" : e;     }),     datasets: [{         label: "my dataset",         fillcolor: "rgba(244, 6, 6, 1)",         data: myvalues     }] };  var ctx = document.getelementbyid("chart2").getcontext("2d"); window.weekschart = new chart(ctx).bar(data2, {     barshowstroke : false });

with html

<canvas id="chart1" width="651" height="335"></canvas> <canvas id="chart2" width="651" height="335"></canvas>

and here corresponding fiddle - http://jsfiddle.net/2kvwndtq/

the downside if want tooltips have override tooltip function show spaces corresponding label , not blank.


Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more