huww98 / timechart Goto Github PK

[Error] Error: Unable to initialize WebGL. Your browser or machine may not support it.
x (timechart.min.js:1:8925)
(anonymous function) (timechart.min.js:1:21941)
main (demo.js:7)
Global Code (demo.js:1)

Safari 13.1 on macOS Catalina

It's working properly on Chrome 81.

Loving your work, but I can't get Date.now() passed as x value to work.

Smaller numbers works fine, performance.now() also works, but with Date.now() there is no line.

What is interesting is that this code does not work:

var time: number = Date.now();
for (var i: number = 0; i < 10000; i++) {
  chart_data.push({ x: time + i, y: i });
}

But this one renders properly:

var time: number = Date.now()\10000;
for (var i: number = 0; i < 10000; i++) {
  chart_data.push({ x: time*i, y: i });
}

I need to make realtime smooth chart, but points add only ~once a second(depends on server-side), so i can't use built in realtime.

I made interval to solve this problem

setInterval(() => {
    var time = Date.now() - this.startTime;
    this.charts.forEach(c => {
        c.chart.options.xRange = { min: time - 60000, max: time };
        c.chart.update();
    });
}, 1000 / fps);

To use zoom I need to kill this interval and set it when user clicks button.
To do it I need to listen for event called on zoom changed/aplied

Is there any way to listen for such event or another way of solving my problem?

P.S. While exploring the code base I found onScaleUpdated in ChartZoom but I don't know how to reach it

Hi, maybe it's time, add to npm?

Hi, how technically difficult is it to make an infinite scale axis-x (timestamp) and generate event on update viewpoint?
there is an idea to make dynamic loading of historical data on left drag

Dear,

Sorry for the context I am a total newbie in this language. I am taking back a project from a colleague using this to display two signals in our web app (thanks for your work here).

I would like to display specific events on top of the chart with specific markers. A scatter plot would do it equivalently I think.
Do you have a way to display a scatter plot ? Or could give me some hints on where to look for it ?

Also, being able to add a title to the figure would be nice as well.

Thanks for your help.

At first I tried to code this:

const el = document.getElementById('chart');
let x = 0, s = 0;
let series = [];
const chart = new TimeChart(el, {
    series: series,
});
let itv = setInterval(() => {
    if ((x++) % 50 == 0) {
        if ((s++) > 3) {
            window.clearInterval(itv)
            return;
        }
        series.push({
            name: "" + s,
            data: []
        });
    }
    for (let _s = 0; _s < s; _s++) {
        series[_s].data.push({
            x: x,
            y: Math.random()
        });
    }
    chart.update();
}, 20);

The chart was not updated.

Then I tried this:

const el = document.getElementById('chart');
let x = 0, s = 0;
let chart = new TimeChart(el, {
    series: [],
});
let series = chart.options.series;
let itv = setInterval(() => {
    if ((x++) % 50 == 0) {
        if ((s++) > 3) {
            window.clearInterval(itv)
            return;
        }
        series.push({
            name: "" + s,
            data: []
        });
    }
    for (let _s = 0; _s < s; _s++) {
        series[_s].data.push({
            x: x,
            y: Math.random()
        });
    }
    chart.update();
}, 20);

The chart refreshes and the data points display normally when hovering, but the lines are not visible.

What's wrong?

Hi

The changes in #53 seems to have broken rendering on mac for FF and Chrome.

I tested it with the latest FF 105.0.3 and Chrome 106.0.5249.103 on Mac and it doesn't show up.
It works with Safari 16.0 (17614.1.25.9.10, 17614) on Mac, or FF on windows.

Chrome chrome://gpu report for mac says WebGL2 is enabled.

Graphics Feature Status
Canvas: Hardware accelerated
Canvas out-of-process rasterization: Disabled
Direct Rendering Display Compositor: Disabled
Compositing: Hardware accelerated
Metal: Disabled
Multiple Raster Threads: Enabled
OpenGL: Enabled
Rasterization: Hardware accelerated
Raw Draw: Disabled
Video Decode: Hardware accelerated
Video Encode: Hardware accelerated
Vulkan: Disabled
WebGL: Hardware accelerated
WebGL2: Hardware accelerated
WebGPU: Disabled

I can also see the spinning cube in a webgl 2 test page https://get.webgl.org/webgl2/

In my project I'm using TimeChart inside a Svelkte component built with Rollup.
I tried to use the new version of the library with not too much success.

Version 1.0.0-beta1 seems to work on Firefox and Chrome, but not on another Chromium-based browser or on Android:

    Uncaught SyntaxError: Unexpected token '.'

Version 1.0.0-beta2 doesn't even build:

    Error: 'default' is not exported by node_modules\timechart\dist\timechart.min.js

I also tried the example code, which builds, but leads to an error in the browser:

    Uncaught ReferenceError: TimeChart is not defined

Any ideas?

I use HTML script tag to import TimeChart but I am unable to enable the zoom feature.
<script src="https://huww98.github.io/TimeChart/dist/timechart.min.js"></script>

Am I missing something ?

const chart = new TimeChart(el, {
  series: [{ data }],
  plugins: {
    lineChart: TimeChart.plugins.lineChart,
    d3Axis: TimeChart.plugins.d3Axis,
    legend: TimeChart.plugins.legend,
    crosshair: TimeChart.plugins.crosshair,
    nearestPoint: TimeChart.plugins.nearestPoint,
    zoom: new TimeChart.plugins.TimeChartZoomPlugin({x: {autoRange: true}, y: {autoRange: true}}),
    tooltip: TimeChart.plugins.tooltip,
  },
});

I get a wonderful and fast chart with crosshair but no zoom.
Either the doc is incomplete, the implementation is broken or I am dumb ( which may be true in all cases ).
Can you please share an example or fix the code?

When the page is load, the chart display really small, in elements inspector some dimensions have 0, but they change on resize.

I need to resize the windows, calling onResize doesn't do anything. (I'm using the code example)

First of all, great work on this library - it works a treat.

Is there a way to extract the current values of each of the series at the current mouse cursor? Either by query, or an event to subscribe to?

Thanks

there needs to be code examples on the README.

should i write up code samples? This stems from the demo code for disposing of the charts - it only shows disposal but it doesn't properly show how to reload it and update it.

can i set up some tutorial pages and make that a 'chapter' on the README?

When using beta 9, lines won't render. This was fixed in fabd3f0, but the fix was never published.
A temporary solution is to change package.json to download the library directly from Git Hub.

	"dependencies": {
-		"timechart": "^1.0.0-beta.9"
+		"timechart": "github:huww98/TimeChart"
	}

How to dynamic update series ?

tried variant 1

  componentDidUpdate(prevProps) {
    if (this.props.data.series !== prevProps.data.series && this.chart !== null) {
      this.chart.options.baseTime = this.props.data.baseTime;
      this.chart.options.series = this.props.data.series;
      this.chart.update();
    }
  }

tried variant 2

  componentDidUpdate(prevProps) {
    if (this.props.data.series !== prevProps.data.series && this.chart !== null) {
      this.chart.options.series = [];
      this.chart.update();
      this.chart.options.baseTime = this.props.data.baseTime;
      this.chart.options.series = this.props.data.series;
      this.chart.update();
    }
  }

This examples duplicate series. Should it be completely destroyed ?

Hi, is there a way to disable drawing in the padding area? If not, can you point me where I should start to edit the code?
Thank you

It would be nice to have an alternative zoom mode, i.e., creating a selection by clicking and dragging to create a time interval. Similar to what you can do in Grafana. With the current two finger zoom it can be very tedious to zoom into a small interval. As the current drag is already doing something else, maybe this can be done with Shift+Drag or something else.

Currently, there doesn't seem to be any sourcemaps available, although they are advertised in the minimized js files.

Is it possible or can you guide me on how I could prepend data to a trace instead of appending it?

Any help is greatly appreciated :)

As the title says, I need some way of limiting the size of the dataset as the application keeps running. If I speed up the generation of data points, the application gets sluggish over time, presumably as more and more time is spent growing and copying the data buffer to make room for new data.

Is it possible to add support for trimming the beginning of the buffer, either on-demand or by setting a maximum buffer size? Perhaps the library could have an option where it uses a circular (ring) buffer for the data so no copying is needed?

Hi, how hard is it to do?

Hi, Thanks for works.

This is happened while using the 0.5.2 version of timechart in angular.

vedio left side code(in vanila js - timechart.min.js)

vedio right side code(in angular - npm install timechart)

Is it that npm timechart version has not been updated?

Hi, how hard is it to do?

Hi, I'm studying the code and see the rendering is happening through the texture. Why ? what's the secret? productivity? why not attribute?

Is it possible to add vertical lines to the chart on click? If not, how difficult would it be to add this functionality?

How can I adjust the SVG CSS Shadow Root to position: relative?
Now, the chart takes only half of the parent div..
I am using Vue.
Thank you a lot in advance.

The picture below shows my problem:

The picture below shows show how to fix it:

The picture below shows the result of the CSS adjustment:

What do you think about adding timeFormay in options

Example:

const options: ChartOptions = {
  xScaleType: d3.scaleTime,
  timeFormat: "%H:%M:%S",
};

And add this to d3Axis

const xts = chart.options.xScaleType()
  .domain(xs.domain().map(d => d + chart.options.baseTime))
  .range(xs.range());
xAxis.scale(xts).tickFormat(d3.timeFormat(chart.options.timeFormat));

All i need is to format time. Maybe there is easier way to achieve this.

Is it possible or can you guide me on how I could use TimeChart to create multiple traces which zoom/pan all together when panning / zooming one of the traces.

Great library btw :)

Would it be possible to either add support for a stepped mode in LineChart, or add a new SteppedLineChart? Basically the line stays on the current value until a new value is encountered and then it moves up and down instantly.

See https://www.chartjs.org/docs/next/samples/line/stepped.html

I plot 10 series but I want to hide some ( but not all ) depending on the zoom scale.
I have tried using dispose() then instantiate a new chart but the chart is not displayed even if I can find the right series in chart._options
Maybe there is a better alternative than dispose then redraw.
What would you please suggest ?
Thank you very much for TimeChart.js

Any plans to add some react examples for this lib? Would be very usefull :)

Hi, does the library support hover tooltips? I'm asking because I read this line in the readme:

name (string): The name of the series. Will be shown in legend and tooltips.

but I don't see any tooltip on mouse hover. Is there any non-documented option to enable them maybe?

Thanks in advance

I need to display Series as discrete symbols ( dots, circles, square, etc . ) or bar-charts instead of line-charts.
Where should I please start to implement this new feature ?

How to use two or more Y Axis, Series has yAxisID mapped to one Y Axis,and zoom each Y Axis like chartjs-zoom-plugin.(panning directions should only be available when the mouse cursor is over a scale for that axis). Thanks.

Hi, Thanks for works.
There is no documentation or demo on OffscreenCanvas option. Does the library support OffscreenCanvas?

Regards,
Ibrahim

Hello, this library is downright impressive and absolutely fantastic!

Is it possible to develop such a UI with TimeChart today? The x-axis is zoomable and slide-able.

If some features are missing, what would it take to develop them? I'll be willing to contribute these features to TimeChart if we can estimate the work. Thanks!

Hi,
First, thanks for this awesome library.

Every now and then I need to clear the chart, so I call dispose and try to re-render by rerunning TimeChart on the existing div element; however, as the shadowroot already exists I get an error.
In the constructor for TimeChart, can we test if the shadowroot property is not null before creating the shadow root and reuse it?

I've been trying to figure out a way of clearing the shadowroot, and while this can be done its challenging with frameworks like React where you don't really control DOM elements directly.
Thanks!

I have an problem with time on axis x. When i set up baseTime to 0 and use performance.now() to generate x values time on chart starts not from 00:00, but from 01:00.
Is there any easy solution for this problem?

Simple problem: auto range considers invisible series.

For example:

• seriesA Y range = {0, 100}
• seriesB Y range = {5, 6}

Even if I toggle seriesA visibility to false, range will be calculated based on all series

Expected:

Reality:

Chart Setup

let chart = new TimeChart(chartElement, {
        series: dataholder ,
        xRange: { min: 0, max: 30000 },
        realTime: true,
        zoom: {
            x: {
                autoRange: true,
            },
            y: {
                autoRange: true,
            }
        },
    });

Sample data input

let dataholder = [...{
   name:'category_name',
   data: [{x:1626186924936,y:6.94},{x: 1626186925193, y: 6.29}, {x: 1626186925448, y: 6.3} ...]
}]

Do you know what's going on here? could it be that the points on the line is just too small in the x-axis that WebGL just doesn't render it?

Hi @huww98

As per my current requirements,
I need Zoom In & Zoom Out manually by clicking on the buttons (Right now it's possible thorough Mouse Scroll & Mouse Pan multi finger gesture)

I also noticed then when we zoom in the x axis, the live data stopped showing. (it stopped showing new data, after zoom In)

Your Stop is working, but when we required Resume/Start, that feature is not exist.

Let me know if that's possible.

Thank you for making amazing library.

Hi, is it possible to add the right awn Y2 ?

is it possible to add this ?

I'm pushing your module to its limits :)

In my usecase i need to reset data from chart. As removing data is impossiible i decided to remove whole parent div (it is generated automaticly when proper function is called). With this method i can remove data but after removing div with chart and appending it again console complains about old WebGL contexts. After few resets amount of old contexts grow to 20 and more (i'm reseting multiple charts at once) and this affect performance. To remove all WebGL contexts i need to restart site.

Other but minor problem is chart.update(). After reseting a chart this function generates error about DOM.

Full errors below:

With the published version of e7b086e, as there are no source maps (#56) I can only give this unhelpful error message.

Uncaught TypeError: e is undefined
    plugins index.ts:94
    y index.ts:94
[index.ts:94:77](https://huww98.github.io/src/core/index.ts)
    plugins index.ts:94
    map self-hosted:221
    y index.ts:94

the lib is great. One question though, I'd like use this lib to draw a graph and then export as png/jpg, how to achieve that?

When using baseTime and a time scale, the x-axis gets nicely formatted, but the tooltip still shows the raw value for the x-axis. It would be nice if it was possible to pass a formatter function, so that you could see the actual date and time.

It would be really useful if there was an option to draw a background grid with the same lines as the tickmarks in the X/Y axis. The grid should ideally be a bit more dampened than the grid lines, eg by using thinner and/or dashed lines.

Hi,

    const data = [];

    for (let x = 0; x < 1000000; x++) {
      data.push({x, y: Math.random()});
    }

    const chart = new TimeChart.core(this.root, {
      renderPaddingLeft: 45,
      series: [{ data, name: 'Random', color: 'blue' }],
      plugins: {
        lineChart: TimeChart.plugins.lineChart,
        d3Axis: TimeChart.plugins.d3Axis,
        legend: TimeChart.plugins.legend,
        crosshair: TimeChart.plugins.crosshair,
        nearestPoint: TimeChart.plugins.nearestPoint,
        zoom: new TimeChart.plugins.TimeChartZoomPlugin({
          x: { autoRange: true }, y: { autoRange: true }
        }),
        tooltip: new TimeChart.plugins.TimeChartTooltipPlugin({
          enabled: true, xLabel: 'Time'
        }),
      }
    });