huww98 / TimeChart

An chart library specialized for large-scale time-series data, built on WebGL.

Home Page:https://huww98.github.io/TimeChart

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

No zoom using script tags

citron opened this issue · comments

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?

Hi, please try replace new TimeChart with new TimeChart.core.

Please refer to the README:

For users who use HTML script tag to import TimeChart, use this instead:
...

nope. Doesn't work :(

No idea why.

diff --git a/demo/plugins/assemble.html b/demo/plugins/assemble.html
index 1d34a14..208a7f6 100644
--- a/demo/plugins/assemble.html
+++ b/demo/plugins/assemble.html
@@ -28,6 +28,7 @@
             series: [{ data, name: 'Random' }],
             plugins: {
                 lineChart: TimeChart.plugins.lineChart,
+                zoom: new TimeChart.plugins.TimeChartZoomPlugin({x: { autoRange: true }, y: { autoRange: true }}),
             }
         });
     </script>

Apply this patch and you will get a working example at demo/plugins/assemble.html. I've just tried this locally.

BTW, to zoom the chart, you need to hold the ctrl key and scroll the mouse wheel.

I am dumb.
The problem is that I forgot "core" in const chart = new TimeChart.core(...
Thanks.