|
|
@ -5,52 +5,22 @@ |
|
|
|
|
|
|
|
|
|
|
|
#### Script tag |
|
|
|
#### Script tag |
|
|
|
```html |
|
|
|
```html |
|
|
|
<script src="https://unpkg.com/@chartwerk/line-pod@0.6.6/dist/index.dev.js" type="text/javascript"></script> |
|
|
|
<script src="https://unpkg.com/@chartwerk/line-pod@latest/dist/index.dev.js" type="text/javascript"></script> |
|
|
|
``` |
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
#### Example |
|
|
|
#### Example |
|
|
|
```html |
|
|
|
```html |
|
|
|
<div id="line-chart" class="chart-block" style="width: 100%; height: 400px;"></div> |
|
|
|
<div id="line-chart" class="chart-block" style="width: 100%; height: 400px;"></div> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/@chartwerk/line-pod@0.6.6/dist/index.dev.js" type="text/javascript"></script> |
|
|
|
<script src="https://unpkg.com/@chartwerk/line-pod@latest/dist/index.dev.js" type="text/javascript"></script> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
const pod = new LinePod(document.getElementById('line-chart')); |
|
|
|
new LinePod(document.getElementById('yourDivId', yourData, yourOptions)).render(); |
|
|
|
|
|
|
|
</script> |
|
|
|
const startTime = 1590590148; |
|
|
|
``` |
|
|
|
const arrayLength = 20; |
|
|
|
|
|
|
|
const k = [() => Math.floor(Math.random() * 40), () => Math.floor(Math.random() * 100), () => Math.floor(Math.random() * 20) + 90]; |
|
|
|
|
|
|
|
const [data1, data2, data3] = [null, null, null].map((item, i) => Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, k[i]()])) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const options = { |
|
|
|
|
|
|
|
renderLegend: false, |
|
|
|
|
|
|
|
usePanning: false, |
|
|
|
|
|
|
|
axis: { y: { invert: false, range: [0, 350] }, x: { format: 'time' } }, |
|
|
|
|
|
|
|
zoomEvents: { |
|
|
|
|
|
|
|
mouse: { zoom: { isActive: true, orientation: 'horizontal' } }, |
|
|
|
|
|
|
|
scroll: { zoom: { isActive: true, orientation: 'horizontal' } } |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
eventsCallbacks: { zoomIn, panningEnd } |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
pod.updateData( |
|
|
|
|
|
|
|
[ |
|
|
|
|
|
|
|
{ target: 'First Dataset', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true }, |
|
|
|
|
|
|
|
{ target: 'Second Dataset', datapoints: data2, color: 'blue' }, |
|
|
|
|
|
|
|
{ target: 'Third Dataset', datapoints: data3, color: 'orange' }, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
options |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function zoomIn(ranges) { |
|
|
|
#### Other examples |
|
|
|
options.axis.x.range = ranges[0]; |
|
|
|
[Static Chart](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/demo.html) |
|
|
|
pod.updateData(undefined, options); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function panningEnd(ranges) { |
|
|
|
[Live Chart](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/demo_live.html) |
|
|
|
options.axis.x.range = ranges[0]; |
|
|
|
|
|
|
|
pod.updateData(undefined, options); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
pod.render(); |
|
|
|
[Vertical Chart](https://code.corpglory.net/chartwerk/line-pod/src/branch/main/examples/demo_vertical.html) |
|
|
|
</script> |
|
|
|
|
|
|
|
``` |
|
|
|
|