vasturiano / timelines-chart Goto Github PK

The current parseData function for data throws an error when the first timeseries doesn't have any events: "TypeError: Cannot read property 'timeRange' of undefined"

Attached is documentation of the error and a suggested fix I have for PR review.
https://codepen.io/lilaclapras/pen/rNBKyBv

Hi,

if you use rimraf instead of rm -rf your repo would also build on windows.

"build": "rimraf dist && mkdir dist && rollup -c",

Obviously you need to --save-dev it first :)

Hope this helps,

Marc

On touchscreens it's extremely hard to grab the edges of the timeline brush for changing the zoom level.

Hi, thanks for your awesome timelines-charts.

I tried to use this graph in my project, but I cannot set the height of row line. Can you show me the way to resolve it, thanks.

Hi,
The event that i want to plot are in microsec resolution. Is it possible to have the timeline in microsec resolution? If Yes how can i define it.

Hi,
I am using your tool for a project and was wondering whats the best way to import the files so I can extend the api that you have built.

I work with webOS application for TV and it has a big screen.
Is it possible to customize text-size for labels, values in popup windows and text for categories (above the chart)? and also "Reset Zoom" button is veeery small :)
Also it would be cool for me to customize the popup window location, because you know the cursor on the TV is very large and it just covers the text in pop-up window :D
So I would like to display information for example above the cursor (selected time segment).

Is there any possible to track event on legend?

For user who want to watch all element or bar which legend they choose.

For example, user want to highlight all of element in the chart which is the first legend.

I try to set the mouse event on the legend but it didn't work.

Hi, it's me again :)
Something looks strange with sorting. The only type of sorting, which is working for me is .zQualitative(true).
I have a lot of data, the fild val can take for example one of the next the next values: -31, -33, -35, -61, -70, -51, -49 and so one.
What I want is to sort this values categorical in legend and use array of colors as gradient, so then the color will clearly display the value.
So as I understood from API all what I need is use zQualitative(false) for categorical sorting, sortAlpha(true or false) for sorting values ascending or descending and at the end put in zColorScale() array of colors from light to dark.
But when I try to do sorting without my colors just to check legend order, I see only two categories: 0 and 1.
Could you suggest any ideas, please?

Hi! How can I increase a height of each element? I have only one group and two labels. They look tiny. Maybe I can use some key to improve it?

Hi! First of all, thank you for good lib!

I have next code:

this.chart = TimelinesChart();
chart
    .data(oldData)
    .width(oldWidth)
    (document.getElementById("classificationChart" + widgetConf.id));

Later I want to resize chart and use refresh function:

this.chart
       .data(newData) // or oldData
       .width(newWidth)
       .refresh();

Data is changing but the width is the same. Is it some bug?

I have implemented timelines-chart into a project I am working on, and have come across a need to include HTML in labels and groups, specifically for links. I've looked through the docs provided and the code itself and haven't found that as an option or a way to implement it.

Would it be possible to have this added as a feature/have some insight on how to implement it.

Thanks.

When I mouse over any part of the graph and change direction, I get the following error.

Uncaught TypeError: Cannot read property 'target' of null
    at getScreenBBox (build.js:115507)
    at SVGRectElement.direction_w (build.js:115429)
    at SVGRectElement.tip.show (build.js:115288)
    at SVGRectElement.<anonymous> (build.js:106161)
getScreenBBox @ build.js:115507
direction_w @ build.js:115429
tip.show @ build.js:115288
(anonymous) @ build.js:106161

The tooltips are also not displayed, even though they are created and do load in the DOM.

Hi ,
Firstly thanks for this excellent module . I have a project using this module .
But due it doesn't support filtering by keywords , I am ready to re-render chart with new data instead . However , when I use refresh API to re-render , it seems not works . Could you help to check it ? I wander if it's source code issue or something wrong with my using way .
Br , Jing

Thanks admin for your awesome project.
I tried to config zoom in and zoom out button, but we cannot set the API for that.
I create a button to click zoom out (reset zoom will back to initial view), we want click zoom out to back to previous zoom, not the initial zoom.
Any one have suggestion for that.
Thanks.

Hi.
Thanks for the great lib.

I'm trying to set the zColorScale for an ordinal scale.
I guess I have to import d3-scale.

<script src="/libs/d3-scale/d3-scale.js"></script>

and then i did:

            let scale = d3.scaleOrdinal(['#00ff00ff', '#ff0000ff', '#00ffffff'])
                .domain(['success', 'fail', 'running'])
                // .range(['success', 'fail', 'running'])


            TimelinesChart()($('.scheduler-timeline')[0])
                .data(data)
                .width($('#navigationTab').width() - 60)
                .zQualitative(true)
                .zColorScale(scale)

This throws the following error:

d3-scale.js:16 Uncaught TypeError: d3Collection.map is not a function
    at Object.ordinal [as scaleOrdinal] (d3-scale.js:16)
    at Object.success (admin.js:167)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

Thanks for your help

Hi, is it possible to remove the display of the color scale ?
I'm using only one color.
Thanks by advance.

When browsing the example using Chrome 66 without any extensions (Incognito window) and zooming various area's and then use the "Reset zoom" causes:

Error: <rect> attribute y: Expected length, "NaN".

This causes one or more of the elements to be invisible (white). In the example this is hard to see as it's random data and there are lots of gaps. My data has the whole graph filled and therefore it's easier to see.

It also happens in Firefox and probably other browsers.

Great tool! Thank you for making it!

Is there a way to show milliseconds in the From & To values for each tooltip?

Thanks for this excellent module.

I'm trying to set the initial date range to just the last two years of data.

I tried setting overviewDomain and zoomX but the chart sets the maximum axis limits to those values - what I want to do is to still allow the user to be able to zoom out to a longer date period, but just "pre zoom in on" the last two years....

      var today = new Date();
      var y = today.getFullYear();
      var m = today.getMonth();
      var d = today.getDate();
      var twoYearsAgo = new Date(y-2,m,d);

      this.chart = TimelinesChart()(timelineEl)
        .zoomX([twoYearsAgo,today])
        .overviewDomain([twoYearsAgo,today])
        .zQualitative(true)
        .data(this.processedData);

Please could you advise, or else provide a working example of programmatically zooming that I could adapt?

Thanks!

After zoom in and click some segment then reset zoom, segment in some area became not clickable. (Gray color too, seems entered some disabled state.)

This isn't obvious from the example since you pass in document.body to the constructor anyway, but the divs created for the tooltips are created directly on the document body regardless of what element is passed to the constructor. This makes the chart more difficult to modify or dispose of and caused rendering problems with our view framework. It would be better if the tooltip divs were created under the passed in el, or if there was a method to dispose of them.

Hello, thanks for great work!

I would like to ask: is it possible to add more than one dateMarker on chart?
I tried to use
.dateMarker(beginTimestamp)
.dateMarker(endTimestamp)
but it shows only second timestamp.
I tried also use
.dateMarker(beginTimestamp, endTimestamp)
then it shows only first timestamp.
And also I tried
.dateMarker([beginTimestamp, endTimestamp])
then it shows nothing :)

I'm having some difficulty using time ranges not formatted as dates. For example, dates in this case are formatted as integers that refer to millions of years ago. The x-axis would be optimal fixed for a specific duration (4600 to 0, for example) with 'date' range bars that are simple integers.

It looks to me like even the custom time format chart still requires data to be formatted as date/time, but is there a workaround for this use case? Cheers!

How exactly to use this in angular (my version is 8)?

When I do npm install at d:\myangularprojectfolder>npm install ... , it gives the following compatibility errors.

npm WARN @agm/[email protected] requires a peer of @angular/common@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @agm/[email protected] requires a peer of @angular/core@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngu/[email protected] requires a peer of @angular/common@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngu/[email protected] requires a peer of @angular/core@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^6.0.0-rc.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nicky-lenaers/[email protected] requires a peer of @angular/common@^7.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @nicky-lenaers/[email protected] requires a peer of @angular/core@^7.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

This is after doing updates with d:\projectfolder>ng update @angular/cli @angular/core --allow-dirty --force

I added this to app.module.ts, mycomponent.ts.
import { TimelinesChart } from 'timelines-chart';

It does not seem to recognize.

OR - is this purely a javascript library? There are tutorials on using a javascript function. But could not figure out how to integrate into angular. Importing javascript functions from given .js is understood, but could not figure out how to import the components.

Please suggest the specific steps to use this.

Thanks

I've been able to use the onLabelClick callback function just fine, but I have a need to drill down into the entries themselves to see more detailed information.

Is it possible to have an onClick function for the time entries themselves? Right now a tooltip comes up when you hover over them, so I would assume that an onClick behavior would be simple to add, but I'm unsure.

hello

i get Getting Error: Object doesn't support property or method 'assign'

file: timelines-chart.js, line : 2, col: 3931

n=Object.assign({},e instanceof Function?e():e,{initialised:!1});

i see http://kangax.github.io/compat-table/es6/#test-Object_static_methods_Object.assign

Browser compatibility :
IE11 👎
EDGE 👍

Hello,

can I change the colors? for example letter if (val == A) color = red

for example or in json put data + val + color

Would it be possible to register a custom callback for tooltips? Often a data payload can have more data ('val' has a direct correlation to the colorScale, so I can't overload it with more specific event data) and it would be useful to be able to put arbitrary information into the tooltip like so:

TimelinesChart()
  .width(1582)
  .data(data)
  .segmentTooltip(function() {
    return d3Tip()
        .attr('class', 'chart-tooltip segment-tooltip')
        .direction('s')
        .offset([5, 0])
        .html(d => {
            /* my stuff here */
            return "<...>" + d.arbitraryVariable + "...";
          });
  })
  (document.getElementById('myPlot'));

Hey there I'm trying to hit https://unpkg.com/[email protected]/index.js but seeing

Cannot find "/index.js" in [email protected]

Is that just something weird with the unpkg hosting?

I'm trying to scale the height of each rectangle plotted in a timeline according to a score value from 1-100.
Any method to control the height of plotted rectangles in svg?

I'm getting file not found for

<script src="//unpkg.com/timelines-chart"></script>

am i missing something?

thanks

My mistake, i added https and it worked.

Im getting a different error now:

timelines-chart.min.js:2 Uncaught TypeError: this.setAttribute is not a function
    at r.fn.init.<anonymous> (timelines-chart.min.js:2)
    at No.each (timelines-chart.min.js:2)
    at No.attr (timelines-chart.min.js:2)
    at Function.init (timelines-chart.min.js:5)
    at o (timelines-chart.min.js:2)
    at r (timelines-chart.min.js:2)
    at Sleep.js:43

Hi, I use onLabelClick callback:

onLabelClick(name) => {
   ....
}

chart
     ...
     .onLabelClick(this.onLabelClick);

I have few different groups with same labels' names. When I get some label name, I also need to know label group name.

Is there some way to get group also?

Every timelines my mouse goes over stays bold, need to zoom in or zoom out to reset it.

Not a huge problem of course.

Hi

I want to use your library in my typescript project but I am getting error because there is no typings. Can you please add your typings.

Thanks

we don't know how much space our groups and labels need. So it's pretty hard for us to set the margins manually to a fixed value. It would be great if it would be possible to automatically set the left and right margins depending on the longest group/label.

I would like to change the gradient in the graph from a "white to light gray" to "black to dark gray". How do I make the change? I tried to change the colorScale in gradient, but that did not make any changes. Thanks.

Hi,

Can someone provide an example of setting the color of the segment based on the category, please?

e.g. if I want category A to be green and B to always be red.

I want to use your work in my projects.Please tell me the license. THANKS!!

Hey,

Thanks for this wonderful code.
I am using this for data analysis and it is working perfect.
Currently I am trying to filter out some of the data based on two values [RowID, Date].

The values are passed to the script via query string (e.g. http://localhost:8000/timeline.html?id=324&date=20180312).
Then I am trying to "filter" out all other elements from the "myData" array, but it doesn't work.
I cannot even use CSS to make them invisible! I cannot get the correct element IDs.
Could you please give me a hint on how to do this?

Cheers

Hi,

I appreciate your work. You made a very nice package. I have searched in google and found only this package as my solution. I am using your package on my client's project. Your package helped me to earn $200 from the project. I really very very much appreciated the work.

Only one request to you, how we can make the width like bootstrap responsible columns. I know we can set the width by doing something like below:

TimelinesChart()
.data(data)
.width($('#hour-chart').width())

But using this method, width gets an overflow when the window is resized. Besides, It does not show correctly in mobile devices. Do you have a solution to handle this?

I hope you will keep up working on good things.

Thanks and Regards,
Rubel

Not so much an issue as a nice to have:

A vertical line representing "today" on the chart. This would draw immediate attention to whether any of the chart events were in the past or upcoming and make it easier for the viewer to take note. Also would enable the viewer to zoom into that area right away if that was the type of information they were interested in. Obviously would only be possible if the date range represented by the chart had the current date in scope.

I download your file project with include folder src and insert a folder has ::-

• comparison.js
• index.js
• timelines.css
  -timelines.js
• time-overview.js

I try add your library like this ,

please advise me,my website running in local environment.

I have next code:

let testData = [
       {
           group: "Audio",
           data: [
               {
                   label: "test",
                   data: [
                       {
                           timeRange: ["2016-12-15T18:00:20Z", "2016-12-15T18:01:29Z"],
                           val: "TEST"
                       },
                       {
                           timeRange: ["2016-12-15T18:03:29Z", "2016-12-15T18:05:29Z"],
                           val: "TEST"
                       }
                   ]
               }
          ]
       }
    ];

chart
     .data(testData)
     .width(width)
     .maxHeight(height)
     .(document.getElementById("test"));

And my chart looks like:

I think the problem is in UTC format, but how can I fix it?
Thanks.

One other question, is there any way that the user can pan/scroll the current view once zoomed in? Or is "reset zoom" the only option to change view (besides zooming in further)

If not available, what would be involved in building this feature if I were to fork the code?
Any pointers would be useful.

How can I use this lib as a react component? A simple example would be great. Thanks!

Hi,
On the x-axis, instead of the month series, i am getting the combination of month-date & day-date. Refer the attachment.
Can you provide some suggestion. thx.

I am using the below data:
[ { group: "Group1", data: [ { label: "6.4.4-1", data: [ { timeRange: ["Dec 04 2017", "Dec 05 2017"], val: "Ready", comment: "defect 23" }, { timeRange: ["Dec 06 2017", "Dec 12 2017"], val: "Dev - QA", comment: "defect 23" } ] } ] }, { group: "Group2", data: [ { label: "6.4.2-1", data: [ { timeRange: ["Dec 03 2017", "Dec 04 2017"], val: "Ready", comment: "defect 23" }, { timeRange: ["Dec 04 2017", "Dec 05 2017"], val: "Dev - QA", comment: "defect 23" } ] } ] } ]

Graph:

Great Chart, but it doesn't work with any version of ie

Hi, thanks for this great chart.

I want to increase height of my elements. Increasing value of maxLineHeight change nothing.

But reducing the size of maxLineHeight under 12 px (default) reduce height of my elements.