Browse Source

#DOC [Readme] add browser including

pull/2/head
Eugene Petukhov 2 years ago
parent
commit
f701b29bab
  1. 54
      README.md

54
README.md

@ -1,2 +1,56 @@
# Chartwerk Line Pod # Chartwerk Line Pod
## Including
### Browser
#### Script tag
```html
<script src="https://unpkg.com/@chartwerk/line-pod@0.6.6/dist/index.dev.js" type="text/javascript"></script>
```
#### Example
```html
<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>
const pod = new LinePod(document.getElementById('line-chart'));
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) {
options.axis.x.range = ranges[0];
pod.updateData(undefined, options);
}
function panningEnd(ranges) {
options.axis.x.range = ranges[0];
pod.updateData(undefined, options);
}
pod.render();
</script>
```
Loading…
Cancel
Save