Author: | ihabhussein |
---|---|
Views Total: | 199 views |
Official Page: | Go to website |
Last Update: | April 27, 2020 |
License: | BSD 2-Clause |
Preview:

Description:
μChart is a really tiny and simple JavaScript chart library to render a column or line chart on an HTML5 canvas element.
Also provides functionalities to format DateTime strings and numeric values.
How to use it:
1. Create a canvas element on the page.
<canvas id="canvas"></canvas>
2. Define your data to be plotted on the chart.
const myData = [ { data: [ [40, 200], [80, 120], [120, 160], [160, 100], [200, 110], [240, 90], ], }, { data: [ [40, 110], [80, 30], [120, 100], [160, 40], [200, 100], [240, 25], ], }, ]
3. Render a column chart on the canvas.
Chart('#canvas', { bars: myData, xAxis: { title: 'x-axis', min: 0, max: 280, ticks: 40, }, yAxis: { title: 'y-axis', min: 0, max: 250, ticks: 50, } });
4. Render a line chart on the canvas.
Chart('#canvas', { lines: myData, xAxis: { title: 'x-axis', min: 0, max: 280, ticks: 40, }, yAxis: { title: 'y-axis', min: 0, max: 250, ticks: 50, } });
5. Create a time series chart and format DateTime strings as follows:
const myData = [ { data: [ ['2020-03-19T23:00:00', 48], ['2020-03-20T00:00:00', 13], ['2020-03-20T01:00:00', 58], // ... more data here ... ], }, ]
Chart('#canvas', { bars: myChart barSep: 0, xAxis: { title: 'Days', min: '2020-03-19T22:00:00', max: '2020-03-23T22:00:00', ticks: '12h', timeSeries: { weekday: 'short', hour: 'numeric', }, }, yAxis: { title: 'Sales', min: 0, max: 125, ticks: 25, }, });