Creating a Chart-Generating Application

Screen of app
Welcome to my first post documenting the creation of a showcase application. Writing this article was a new experience for me, so I kindly ask for your understanding and am open to any suggestions on how I could improve—both in the project itself and in this description.

Project Description

The idea for this application came from my desire to test my skills. The goal was to create an intuitive tool that allows users to generate simple bar charts based on input data. In the application, users can:

  • Add data to the chart (name, value, color).
  • Sort data in ascending or descending order.
  • Change the order of the bars.
  • Remove bars.
  • Download the chart as a PNG image.

The entire application is available online at: https://charts.kwiatkowskilukasz.pl/,
and its source code can be found in the GitHub repository: Simple Chart Generator.

Technical Aspects of the Project

I based my solution on the following technologies:

  • jQuery – Its simplicity in managing DOM elements was key, especially since I already had experience with this library.
  • Chart.js – A powerful library for data visualization, which I used to generate dynamic charts.
  • Gulp – A task automation tool used for converting SASS to CSS and minimizing JavaScript code.
  • SASS – Allowed me to take a more organized approach to styling.

Application Features

The current version of the application allows users to:

  1. Create charts – Users can add bars with a name, value, and color.
  2. Sort and reorganize – Data can be sorted in ascending or descending order, with bars dynamically repositioning in real time.
  3. Export to PNG – Users can download the finished chart as an image.
  4. Edit and delete – Users have full control over each bar.

Application Code

Adding a New Element:


    $('#create__btn').click(() => {
        try {
            // Set values for new item
                let randColor = Math.floor(Math.random()*16777215).toString(16);
                let idedntifier = Math.random().toString(36).substring(7);
        
            // Create object for item
                let itemObject = {
                    id: idedntifier,
                    name: 'New item',
                    color: '#'+randColor,
                    value: 0
                };
        
            // Add item object to items array
                items.push(itemObject);
        
            // Prepare HTML for new item
                prepareHTML_ListItems();
        
            // Save items to local storage
                saveItems();
        } catch (error) {
            console.error(error);
        }
    });

Each new element is assigned a random color and an identifier. A default name and starting value are set. The saved object is added to an array. Then, HTML code is prepared for the user-configurable settings, and the list of objects is saved to local storage.

Creating the Chart:


    // Reload Chart
    function reloadChart() {
        try {
            if(myChartCreate) {
                myChartCreate.destroy();
            }
            let datasets = items.map(item => {
                return {
                    label: item.name,
                    data: [item.value],
                    backgroundColor: item.color,
                    borderColor: item.color,
                }
            });
    
            myChartCreate = new Chart(ctxCreate, {
                type: 'bar',
                data: {
                    labels: [''],
                    datasets: datasets
                },
            });
        } catch (error) {
            console.error(error);
        }
    }

This functionality generates a bar chart. If a chart already exists, it is destroyed before a new one is generated.

Sorting:


    // Sort items by value ascending
    $('#asc__btn').click(() => {
        try {
            items.sort((a, b) => a.value - b.value);
            saveItems();
            prepareHTML_ListItems();
        } catch (error) {
            console.error(error);
        }
    });

    // Sort items by value descending
    $('#desc__btn').click(() => {
        try {
            items.sort((a, b) => b.value - a.value);
            saveItems();
            prepareHTML_ListItems();
        } catch (error) {
            console.error(error);
        }
    });

Sorting is performed on the array, which is then updated in local storage. The data settings list in the user interface is also rebuilt.


You can find the full code of the application in the GitHub repository

Potential Future Developments

In the future, I plan to:

  • Add support for other types of charts (e.g., pie charts, line charts).
  • Improve the layout of bar charts to make them more flexible, such as allowing orientation changes from the x-axis to the y-axis.

How It Works

Summary

This project turned out to be an exciting challenge and a valuable learning opportunity. I encourage you to try out the application and share your feedback.

This site uses cookies. By using the site, you consent to the use of cookies in accordance with the current browser settings. Using our website without changing the cookie settings means that they will be stored in your device's memory. More information can be found in our Privacy Policy. Learn more about the purpose of their use and changing the cookie settings in the browser.