Author: | jhuckaby |
---|---|
Views Total: | 344 views |
Official Page: | Go to website |
Last Update: | November 22, 2021 |
License: | MIT |
Preview:

Description:
pixl-chart is a lightweight, high-performance, retina-ready JavaScript charting library for drawing time series charts on an HTML5 canvas element.
More Features:
- Supports single or multiple layers.
- Render the chart “progressively” for better performance.
- Allows to add layers dynamically.
- Downloadable as a WEBP, PNG, or JPEG image.
- Custom fill gradient.
- Custom fill styles.
- Custom daily/monthly/yearly range.
- Custom line styles.
- Optional chart legend.
- Allows to set the number of horizontal & vertical ticks (grid lines and labels).
How to use it:
1. Download and import the pixl-chart library.
<script src="./chart.min.js"></script>
2. Create an empty canvas on which the time series chart should draw.
<canvas class="chart" id="example"></canvas>
3. Define your own layers containing titles and time series data as follows:
const myLayers = [ { "title": "Title 1", "data": [ { "x": 1634272560, "y": 1720508 }, { "x": 1634272620, "y": 1691917 }, // ... ] // additional options // see global options for more details "color": [], // an array of colors "opacity": 1, "hidden": true, "smoothing": true, "fill": 0.5, "fillStyle": 'gradient', // specifies the color, gradient, or pattern to use "stroke": true, "lineWidth": 2, "lineJoin": 'round', // "bevel" || "round" || "miter" "lineCap": 'butt', // "butt" || "round" || "square" "lineDashes": false, }, { "title": "Title 2", "data": [ { "x": 1634272560, "y": 3002730 }, { "x": 1634272620, "y": 1823347 }, // ... ] } // ... more layers here ]
4. Initialize the pixl-chart.
var chart = new Chart({ "canvas": '#example', "layers": myLayers, // more options here })
5. Render the chart on the canvas.
chart.render();
6. All possible chart options.
var chart: new Chart({ // CSS selector of the canvas canvas: null, // add your own layers here layers: [], // an array of colors assigned to layers colors: ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0", "#3F51B5", "#4CAF50", "#546E7A", "#D4526E", "#A5978B", "#C7F464", "#81D4FA", "#2B908F", "#F9A3A4", "#90EE7E", "#FA4443", "#449DD1", "#F86624", "#69D2E7", "#EA3546", "#662E9B", "#C5D86D", "#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044", "#662E9B", "#F86624", "#F9C80E", "#EA3546", "#43BCCD", "#5C4742", "#A5978B", "#8D5B4C", "#5A2A27", "#C4BBAF", "#A300D6", "#7D02EB", "#5653FE", "#2983FF", "#00B1F2", "#03A9F4", "#33B2DF", "#4ECDC4", "#13D8AA", "#FD6A6A", "#F9CE1D", "#FF9800"], // background color background: '', // font family fontFamily: 'Helvetica, sans-serif', // font size fontSize: 12, // font color fontColor: 'rgb(128, 128, 128)', // title size titleSize: 16, // title style titleStyle: 'bold', // title padding titlePadding: 15, // chart title title: '', // subtitle subtitle: '', /// whether to show subtitle showSubtitle: true, // line width in px lineWidth: 2, // determine the shape used to join two line segments where they meet. // "bevel" || "round" || "miter" lineJoin: 'round', // determine the shape used to draw the end points of lines. // "butt" || "round" || "square" lineCap: 'butt', // render dashed lines e.g. [4, 2] lineDashes: false, // whether to render lines stroke: true, // fill opacity fill: 0.5, // clip the data drawing to the viewable area clip: false, // the number of horizontal "ticks" horizTicks: 6, // the number of vertical "ticks" vertTicks: 6, // space between vertical/horizontal labels vertLabelPadding: 10, horizLabelPadding: 25, // border color borderColor: 'rgba(128, 128, 128, 0.25)', // pixel Density density: window.devicePixelRatio, // auto resizing autoResize: true, // auto manage the chart by the global chart manager autoManage: true, // the type of data // "integer" || "float" || "bytes" dataType: 'integer', // display a suffix after all data values dataSuffix: '', // maximum number of digits floatPrecision: 2, // display chart legend legend: true, // maximum number of lines legendMaxLines: 2, // legend padding legendPadding: 5, // If you set zeroFloor to false, then your data will dictate the lowest Y value, and the chart will adjust itself zeroFloor: true, // smooth data lines smoothing: true, // disable 'smoothing' after your dataset has more than this number of samples smoothingMaxSamples: 200, // enable tooltip on hover hover: true, // 0 Do not sort (the layers will be in their natural order). // 1 Sort the layers by the data values in ascending order. // -1 Sort the layers by the data values in descending order. hoverSort: 0, // cursor type cursor: 'crosshair', // show data gaps showDataGaps: false, dataGapImage: "data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAAXNSR0IArs4c6QAAADRJREFUCNedyjERAEEQAsERsjpwhQUK6Z9cRvZpVxNXPQDoVXHMUsxSxdJrvwmWeixVLMUfKik183saHHcAAAAASUVORK5CYII=", // auto add "headroom" above the highest Y value autoHeadroom: true, // add extra padding on any side of the chart padding: { left:0, top:0, right:10, bottom:0 }, // allow to zoom the chart // an object with xMin, xMax, yMin and yMax properties zoom: null, // width/height of the chart width: 0, height: 0, // render the chart "progressively". progressive: false, })
7. API methods & properties.
// add a layer chart.addLayer( OBJECT ); // add layers chart.addLayers( ARRAY ); // update the chart chart.update(); // take a snapshot of the chart, and produces a image in WebP, PNG or JPEG format chart.snapshot({ type: 'blob' // or 'url'. format: 'png', or 'webp', 'png' or 'jpeg'. quality: 1.0, }, CALLBACK ); // download the image chart.download({ type: 'blob' // or 'url'. format: 'png', or 'webp', 'png' or 'jpeg'. quality: 1.0, // and chart options }); // destroy the instance chart.destroy(); // xMin The lowest X value (timestamp) across your entire dataset. // xMax The highest X value (timestamp) across your entire dataset. // yMin The lowest Y value across your entire dataset (or simply 0 if zeroFloor is enabled). // yMax The highest Y value across your entire dataset (possibly adjusted by autoHeadroom). // width The width of your dataset (xMax - xMin). // height The height of your dataset (yMax - yMin). chart.dataLimits; // x The horizontal coordinate of the left side of the bounds rect, in pixels. // y The vertical coordinate of the top side of the bounds rect, in pixels. // width The width of the bounds rect, in pixels. // height The height of the bounds rect, in pixels. chart.bounds
8. Events.
chart.on('render', function() { // do something }); chart.on('mouseover', function() { // do something }); chart.on('mousemove', function() { // do something }); chart.on('mouseout', function() { // do something }); chart.on('mousedown', function() { // do something }); chart.on('mouseup', function() { // do something }); chart.on('click', function() { // do something });