Ticks option do not work on Bar chart

[elfenheart]

When I specify the number of Ticks option on a bar chart, it doesn't work. It will still give the ticks for each data points.

[rsandor]

Real-time or static bar charts? Can you provide a quick code snippet with comments so I can see exactly what you're trying to do?

[elfenheart]

It's with Static bar charts.

Here is the code snippet

$(document).ready(function() {

  var myData = [
    {
      label: 'Series 1',
      values: [
        { x: 10, y: 109 },
        { x: 11, y: 103 },
        { x: 12, y: 120 },
        { x: 13, y: 100 },
        { x: 14, y: 127 },
        { x: 15, y: 102 },
        { x: 16, y: 115 },
        { x: 17, y: 119 },
        { x: 18, y: 100 },
        { x: 19, y: 122 },
        { x: 20, y: 106 }
      ]
    }
  ];

  var chart = $('#bar')
    .epoch({ 
      type: 'bar',
      data: myData,
      ticks: { bottom: 3 }
    });

});

[mamac]

Hi

Ticks actually works on left and right, but not on top or bottom.

Below is an example of my code:

<div id="barChart" class="epoch" style="height: 250px"></div>

<script>
(function() {

var barChartData = [
  { label: "Series 1",
   values: [
  {% for eleclogdaydetail in eleclogdaydetails %}
     {x: {{ eleclogdaydetail.daterx | date("U")}}, y: {{ eleclogdaydetail.consumption }}},
  {% endfor %}
   ]
  }
];

  $('#barChart').epoch({
     type: 'bar',
     data: barChartData,
     axes: ['left', 'bottom', 'top', 'right'],
     ticks: { left: 3, bottom: 10, top: 10, right: 5 },
     tickFormats: { bottom:
       function(d) {
         var date = new Date(d*1000);

         var date_month  = date.getMonth() + 1;
         var date_day    = date.getDate();
         var date_hour   = date.getHours();
         var date_minute = date.getMinutes();

         return date_month + '-' + date_day + ' ' + date_hour + ':' + date_minute;
       }
     }
  });
})();

</script>

Epoch is a great java visualization tool :-)

Thank you!
/JM

[rsandor]

@elfenheart - So the bar chart uses an ordinal scale for the x axis. The .ticks() method we use to set the "rough" number of ticks will not work with ordinal scales. Looking into a nice way to provide similar functionality for the chart (though it's a little messy design wise considering I assumed that d3 would support this up front). Please stay tuned :)

[elfenheart]

@rsandor Sounds good!

Out of curiosity, how is it different than how you are implementing it with the live bar chart?

[rsandor]

The static bar chart was built using the d3 enter-update-exit paradigm, and uses the ordinal scale specifically to allow for grouped bar charts. The real-time bar chart uses a windowed time-scaled axis of my own design to allow for smooth animation of incoming points over time (for an in-depth treatment read the base time plot class: https://github.com/fastly/epoch/blob/master/src/time.coffee).

[rsandor]

@elfenheart, @mamac - So I just pushed a new branch that should address this issue. Essentially we have to emulate d3's linear axis .ticks by providing specific tick values via the .tickValues method. My crude approximation takes the ceiling of the number of elements divided by the number of ticks specified in order to generate the set.

Please take a look at it and try it out, if it does the job then I will get full testing in and merge it into master asap. Cheers.

[mamac]

Still same problem:

Do we need to change anything in the syntax?

[rsandor]

@mamac - Can you please share the code you were using for the above example?

[mamac]

Thank you for fast reply.

This is what I use (within a Twig view):

<div id="barChart" class="epoch" style="height: 250px"></div>

<script>
(function() {

var barChartData = [
  { label: "Series 1",
   values: [
  {% for eleclogdaydetail in eleclogdaydetails %}
     {x: {{ eleclogdaydetail.daterx | date("U")}}, y: {{ eleclogdaydetail.consumption }}},
  {% endfor %}
   ]
  }
];

  $('#barChart').epoch({
     type: 'bar',
     data: barChartData,
     axes: ['left', 'bottom'],
     ticks: { left: 5, bottom: 5 },
     tickFormats: { bottom:
       function(d) {
         var date = new Date(d*1000);

         var date_month  = date.getMonth() + 1;
         var date_day    = date.getDate();
         var date_hour   = date.getHours();
         var date_minute = date.getMinutes();

         return date_month + '-' + date_day + ' ' + date_hour + ':' + date_minute;
       }
     }
  });
})();

</script>

[elfenheart]

seems like it works for me:

@mamac you need to recompile the code after you pull from the branch

[mamac]

Indeed I just downloaded epoch.min.js and assumed it was compiled in that branch.
So I need to pull the branch and compile it.
Cheers

[mamac]

Compilation doesn't work here, I got the following:

Building...
Compiling CoffeeScript into JavaScript...
5 Mar 22:09:23 - [ERROR] Task 'coffee':
  /bin/sh: ./node_modules/.bin/coffee: No such file or directory

Compiling SCSS into CSS...
Packaging...
5 Mar 22:09:23 - [ERROR] Task 'package':
  /bin/sh: js/epoch.js: No such file or directory

Can anyone post the compiled js script so I can test it?

Thank you

[rsandor]

Have you run "npm install" from the epoch source directory yet?
On Mar 5, 2015 1:11 PM, "mamac" notifications@github.com wrote:

Compilation doesn't work here, I got the following:

Building...
Compiling CoffeeScript into JavaScript...
5 Mar 22:09:23 - [ERROR] Task 'coffee':
/bin/sh: ./node_modules/.bin/coffee: No such file or directory

Compiling SCSS into CSS...
Packaging...
5 Mar 22:09:23 - [ERROR] Task 'package':
/bin/sh: js/epoch.js: No such file or directory

Can anyone post the compiled js script so I can test it?

Thank you

—
Reply to this email directly or view it on GitHub
#152 (comment).

[mamac]

@rsandor I just ran "npm install" as you suggest but got many errors: http://pastebin.com/j98446z6

Then when I start "cake build" it hangs as below:

Building...
Compiling CoffeeScript into JavaScript...
Compiling SCSS into CSS...

[rsandor]

Hmm looks like one of the packages requires python 2 and you have 3. Let me
see if I can build a temporary solution for ya to test with
On Mar 5, 2015 2:04 PM, "mamac" notifications@github.com wrote:

@rsandor https://github.com/rsandor I just ran "npm install" as you
suggest but got many errors: http://pastebin.com/j98446z6

Then when I start "cake build" it hangs as below:

Building...
Compiling CoffeeScript into JavaScript...
Compiling SCSS into CSS...

—
Reply to this email directly or view it on GitHub
#152 (comment).

[rsandor]

@mamac - Here's the unminified js for the branch: http://filebin.ca/1tpLN75vaPGO/epoch.js

[mamac]

@rsandor, that's very kind of you.

I confim it works:

Thank you!

[rsandor]

This should be fixed in master now. Thanks guys!

[mamac]

Just downloaded the epoch.min.js from the master branch and the issue is back.
Is it required to compile the master branch in order to get the fix?
Thank you

[jme783]

I'm noticing this as well. I'm using the real-time bar chart and would like to increase the number of time stamps on the bottom of the chart. No matter what I change time to, I still get the same number of stamps:

ticks: {time: 100, right: 4, left: 4},

[Alireza-]

Somehow old thread but @jme783 is correct. It doesn't work in real-time line chart either!