Vizualy

Vizualy is a easy to use, configuration driven charting library based on JavaScript and D3.js empowering users to create interactive data visualizations.

Installation

Use the package manager NPM to install Vizualy.

npm install @impetusuxp/vizualy

Usage

import vizualy from '@impetusuxp/vizualy';

const BarChart = vizualy.getChart('BarChart');
const barChart = new BarChart();

// Draw chart (https://www.npmjs.com/package/@impetusuxp/vizualy-bar-chart)
barChart
      .container('containerID')
      .x('x axis key in data')
      .y('y axis key in data')
      .data(data object)
      .settings(unified configuration object) // Not mandatory to call. Chart takes its default settings.
      .draw();

// Update chart
barChart.data(updated data object).update();

<script type="text/javascript" src="./libs/d3.v6.min.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/utility.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/assistant.js"></script>
<script type="text/javascript" src="./vizualy-assistant/src/js/observer.js"></script>
<script type="text/javascript" src="./vizualy-bar-chart/vizualy-bar-chart.js"></script>
<script>
const barchart = new vizualy.BarChart();

// Draw chart
barChart
      .container('containerID')
      .x('x axis key in data')
      .y('y axis key in data')
      .data(data object)
      .settings(unified configuration object) // Not mandatory to call. Chart takes its default settings.
      .draw();

// Update chart
barChart.data(updated data object).update();
</script>

Characteristics

• Framework agnostic
• Easy to use APIs
• Various configurations
• Animation
• Event observers
• Responsive charts
• Life cycle hooks
• Centralized error handling
• General purpose utility methods

Vizualy Charts Documentation

For detailed usage instructions, properties, and methods of each chart, refer to below readme files.

[Area Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-area-chart) [Bar Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-bar-chart) [Bubble Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-bubble-chart) [Circle Packing Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-circle-packing-chart) [Horizontal Bullet Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-horizontal-bullet-chart) [Horizontal Grouped Bar Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-horizontal-grouped-bar-chart) [Horizontal Stacked Bar Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-horizontal-stacked-bar-chart) [Line Bar Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-line-bar-chart) [Line Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-line-chart) [Network Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-network-chart) [Pie Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-pie-chart) [Radial Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-radial-chart) [SunBurst Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-sunburst-chart) [Vertical Grouped Bar Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-vertical-grouped-bar-chart) [Vertical Stacked Bar Chart] (https://www.npmjs.com/package/@impetusuxp/vizualy-vertical-stacked-bar-chart)

Contriubutor

Impetus Technologies

License

MIT