https://github.com/pariazar/imagine-graph
This npm package offers a user-friendly way to create interactive charts, graphs, and maps from various data sources. With its intuitive interface and powerful tools, users can easily generate stunning visualizations to better understand their data and communicate insights to others.
https://github.com/pariazar/imagine-graph
Last synced: over 1 year ago
JSON representation
This npm package offers a user-friendly way to create interactive charts, graphs, and maps from various data sources. With its intuitive interface and powerful tools, users can easily generate stunning visualizations to better understand their data and communicate insights to others.
- Host: GitHub
- URL: https://github.com/pariazar/imagine-graph
- Owner: pariazar
- License: mit
- Created: 2023-03-13T15:28:13.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-27T09:33:52.000Z (almost 3 years ago)
- Last Synced: 2025-01-07T20:34:17.322Z (over 1 year ago)
- Language: JavaScript
- Size: 486 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# imagine-graph
[](https://www.npmjs.com/package/imagine-graph)
[](https://codeclimate.com/github/pariazar/imagine-graph/maintainability)
[](https://github.com/pariazar/imagine-graph/issues)
[](https://opensource.org/licenses/MIT)
This npm package offers a user-friendly way to create interactive charts, graphs, and maps from various data sources. With its intuitive interface and powerful tools, users can easily generate stunning visualizations to better understand their data and communicate insights to others.
### Install the package:
```bash
npm install imagine-graph
```
### Bar Chart
To use the chart functions, you first need to install the npm package and import the relevant function(s) into your project. Here's an example of how to use the createBarChart function:
Import the createBarChart function into your project:
```javascript
const { createBarChart } = require('imagine-graph');
```
Call the createBarChart function with your data and options:
```javascript
const data = [
{ label: 'A', value: 10 },
{ label: 'B', value: 20 },
{ label: 'C', value: 30 },
{ label: 'D', value: 15 },
];
const options = {
title: 'My Bar Chart',
width: 600,
height: 400,
backgroundColor: '#ffffff',
borderColor: '#75a485',
titleColor: '#75a485',
labelColor: '#75a485',
borderWidth: 2
};
createBarChart(data, options, './mychart.png')
.then(filePath => {
console.log(`Chart saved to ${filePath}`);
})
.catch(error => {
console.error('Error creating chart:', error);
});
```
or can access buffer by calling following method and don't pass path
```javascript
// To get the image buffer
const imageBuffer = await createBarChart(data, options);
console.log(imageBuffer);
//
```
## Line Chart
Import the createLineChart function into your project:
```javascript
const { createLineChart } = require('imagine-graph');
```
Call the createLineChart function with your data and options:
```javascript
const data = [
{ label: 'A', value: 10 },
{ label: 'B', value: 20 },
{ label: 'C', value: 30 },
{ label: 'D', value: 15 },
];
const options = {
title: 'My Line Chart',
width: 600,
height: 400,
backgroundColor: '#ffffff',
borderColor: '#75a485',
titleColor: '#75a485',
labelColor: '#75a485',
borderWidth: 2
};
createLineChart(data, options, './mychart.png')
.then(filePath => {
console.log(`Chart saved to ${filePath}`);
})
.catch(error => {
console.error('Error creating chart:', error);
});
```
or can access buffer by calling following method and don't pass path
```javascript
// To get the image buffer
const imageBuffer = await createLineChart(data, options);
console.log(imageBuffer);
//
```
## Bubble Chart
The createBubbleChart function allows you to create an interactive bubble chart from a given dataset. The chart can be customized with various options to match your needs.
To use the createBubbleChart function, you need to first import it from the imagine-graph package:
```javascript
const { createBubbleChart } = require('imagine-graph');
```
Then, you can call the createBubbleChart function with your data and options:
```javascript
const data = [
{ x: 10, y: 20, r: 5, label: 'A' },
{ x: 20, y: 30, r: 10, label: 'B' },
{ x: 30, y: 10, r: 15, label: 'C' },
{ x: 15, y: 25, r: 8, label: 'D' },
];
const options = {
title: 'My Bubble Chart',
width: 600,
height: 400,
backgroundColor: '#ffffff',
borderColor: '#75a485',
titleColor: '#75a485',
labelColor: '#75a485',
borderWidth: 2,
tooltip: function(d) {
return `(${d.x}, ${d.y}): ${d.r}`;
},
xLabel: 'X Axis Label',
yLabel: 'Y Axis Label',
xTicks: 10,
yTicks: 5,
xTickCount: 5,
yTickCount: 5,
};
createBubbleChart(data, options, './mychart.png')
.then(filePath => {
console.log(`Chart saved to ${filePath}`);
})
.catch(error => {
console.error('Error creating chart:', error);
});
```
The path argument is the path where the chart image will be saved.
Alternatively, you can access the image buffer by calling the createBubbleChart function without the path argument:
```javascript
const imageBuffer = await createBubbleChart(data, options);
console.log(imageBuffer);
//
```
## Pie Chart
Import the createPieChart function into your project:
```javascript
const { createPieChart } = require('imagine-graph');
```
Call the createPieChart function with your data and options:
```javascript
const data = [
{ label: 'A', value: 10 },
{ label: 'B', value: 20 },
{ label: 'C', value: 30 },
{ label: 'D', value: 15 },
];
const options = {
title: 'My Pie Chart',
width: 600,
height: 400,
backgroundColor: '#ffffff',
borderColor: '#75a485',
titleColor: '#75a485',
labelColor: '#75a485',
borderWidth: 2
};
createPieChart(data, options, './mychart.png')
.then(filePath => {
console.log(`Chart saved to ${filePath}`);
})
.catch(error => {
console.error('Error creating chart:', error);
});
```
Call the createPieChart function with your data and options:
```javascript
// To get the image buffer
const imageBuffer = await createPieChart(data, options);
console.log(imageBuffer);
//
```
## Scatter Chart
Import the createScatterChart function into your project:
```javascript
const { createScatterChart } = require('imagine-graph');
```
Call the createScatterChart function with your data and options:
```javascript
const data = [
{ x: 1, y: 10 },
{ x: 2, y: 20 },
{ x: 3, y: 30 },
{ x: 4, y: 15 },
];
const options = {
title: 'My Scatter Chart',
width: 600,
height: 400,
backgroundColor: '#ffffff',
borderColor: '#75a485',
titleColor: '#75a485',
labelColor: '#75a485',
borderWidth: 2,
xAxisLabel: 'X-Axis',
yAxisLabel: 'Y-Axis'
};
createScatterChart(data, options, './mychart.png')
.then(filePath => {
console.log(`Chart saved to ${filePath}`);
})
.catch(error => {
console.error('Error creating chart:', error);
});
```
Or you can access the image buffer by calling the following method and not pass a path:
```javascript
// To get the image buffer
const imageBuffer = await createScatterChart(data, options);
console.log(imageBuffer);
//
```
## Support
- [Bug Reports](https://github.com/pariazar/imagine-graph/issues/)
## Contributors
Pull requests are always welcome! Please base pull requests against the main branch and follow the contributing guide.
- [Contributors](https://github.com/pariazar/imagine-graph/blob/main/CONTRIBUTING.md)
if your pull requests makes documentation changes, please update readme file.
## License
This project is licensed under the terms of the
MIT license