How to Create a Chart with Gemini 2.5 Flash (No Coding Skill Needed!)

on
How to Create a Chart with Gemini 2.5 Flash (No Coding Skill Needed!)

When creating a chart, are you still creating and editing it in Excel manually? Setting the data range, choosing an appropriate chart type, and adjusting the design... This is such an extra yet time-consuming task! In this guide, you will explore how you can leave this burden and focus more on creative tasks. Before diving in, you need a Google account.

Step-by-Step Guide

Step 1: Generate a chart

  1. Visit https://gemini.google.com/.
  2. Click the "+" button near the textbox.
  3. Upload your Excel or CSV file to create a chart.
  4. Click "Tools".
  5. Click "Canvas".
  6. Execute this prompt. 
    Visualize this data in a html file using Chart.js. When you write the code, use this template below and write the code in the placeholder "code".


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <div style="height:95%; width:95%; margin:auto;">
      <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
      (code)
    </script>
  </body>
</html>

Step 2: Edit the Chart (optional)

The design of the generated chart may lack the design. In this case, ask Gemini to fix the design in the same chat.

Step 3: Complete Chart Generation

Once you finish editing, save your chart on your computer.

  1. Right-click the chart.
  2. Click "Save image as" to download it as an image.

Here's an example I created.

Use Cases

In a presentation

When creating presentation slides, you sometimes visualize data in a chart. In such a case, upload your data file, and create the chart.

The screenshot of a presentation slide that include the image of a chart created by chart.js.

In a report

When including visuals in a report, you can customize the design of the chart, such as the color, size, and visibility of ticks, scale, legends, and tooltips.

In an article

If an article is data-driven, you often embed charts in the HTML code. In this case, Chart.js makes charts interactive such as with animation and changing the visibility of certain data.

Troubleshooting

A chart isn't displayed.

When a chart seems to have syntax errors or is not visible, ask Gemini below in the same chat as you generate the chart.

It seems the chart is not visible. Check the syntax of the code.

In summary, this article walked through how you can streamline chart creation and designing using Gemini 2.5 Flash and Chart.js. I hope this information is helpful. I appreciate you for sharing your thoughts on social media. You can share this article by clicking the share button below.

Comments

Post a Comment