Upgrade Your Website with Google Charts

Upgrade Your Website with Google Charts

With Google charts, displaying chart data on web pages has become very easy and stress-free. Many types of charts can be used, such as pie charts, line charts, histograms, scatter charts and many more. This web service is easily customizable and free. In this article, you will learn how to use to customize charts for your website.

Getting Started

The first step is to import the Charts API JavaScript:

            

The code above loads the required JavaScript files and initializes the API and should be placed inside the head element in HTML document. You will notice the drawChart callback function — that function contains the code which actually creates the chart. Finally, the div is created in the HTML part of the code at the place where you want to show the chart.

Pie Chart

In order to create any of the charts, we need to prepare the data that will be shown on the website. Each chart is actually a visualization of a table with multiple rows and columns. So, the data would be added to the chart as a table using Google charts API predefined functions. If we take the following table for example:

Then the data would be added to the chart like this:

// Initialize DataTable objectvar data = new google.visualization.DataTable();        // Create two columns – Beverage and Sold// String and number are column values’ data types        data.addColumn('string', 'Beverage');data.addColumn('number', 'Sold');// Add rows// Each line represents one row, where the first value is the first column’s value and the second value is the second column’s value        data.addRows([   ['Beer', 10],   ['Wine', 5],   ['Whiskey', 2],   ['Juice', 7],   ['Water', 6]]); 

Next step is to set chart options:

// Set chart optionsvar options = {'title': 'Today’s beverage sales',                'width': 700,                'height': 300};

After that, we need to draw the chart and show it on the web page:

// Draw the chart// Note that the data and options variables represent data and options set in the code above// chart_wrap is the id of the div where the chart will be displayedvar chart = new google.visualization.PieChart(document.getElementById('chart_wrap'));chart.draw(data, options); 

At this point, the chart is fully functioning and will be shown on the page. The complete code would look like this:

function drawChart() {       // Add the data to the chart       var data = new google.visualization.DataTable();              // Add columns      data.addColumn('string', 'Beverage');      data.addColumn('number', 'Sold');     // Add rows    data.addRows([       ['Beer', 10],       ['Wine', 5],       ['Whiskey', 2],       ['Juice', 7],       ['Water', 6]    ]);    // Set chart options    var options = {'title': 'Today’s beverage sales',                'width': 700,                'height': 300    };    // Draw the chart    var chart = new google.visualization.PieChart(document.getElementById('chart_wrap'));    chart.draw(data, options);}

The pie chart can have many additional options, such as creating a 3D chart, rotating it, creating a donut chart and many more. Check the list of all available options here.

Bar Chart

Creating a bar chart is very similar to creating a pie chart. Everything is the same, except the last two lines, which should be replaced with the following code:

var chart = new google.visualization.BarChart(document.getElementById('chart_wrap'));chart.draw(data, options); 

Line Chart

Line chart is created by using the following drawChart function:

function drawChart() {        // Add the data to the chart        // First column are x axis values        // Second column are blue line y axis values        // Third column are red line y axis values        var data = google.visualization.arrayToDataTable([          ['Year', 'Profits', 'Expenses'],          ['2004',  1000,      400],          ['2005',  1170,      460],          ['2006',  660,       1120],          ['2007',  1030,      540]        ]);        // Set chart options        var options = {          title: 'Shop Performance'        };        // Draw the chart        var chart = new google.visualization.LineChart(document.getElementById('chart_wrap'));        chart.draw(data, options);}

Loading Data from JSON

Chart data can also be loaded from an external URL, whose response should be formatted in JSON. In that case, the drawChart function will be slightly different:

function drawChart() {      var jsonData = $.ajax({          url: "http://www.example.com/beverage_sales.json",          dataType:"json",          async: false }).responseText;       // Add the data to the chart       var data = new google.visualization.DataTable(jsonData);            // Set chart options    var options = {'title': 'Today’s beverage sales',                'width': 700,                'height': 300    };    // Draw the chart    var chart = new google.visualization.PieChart(document.getElementById('chart_wrap'));    chart.draw(data, options);}

This example uses the same data as the pie chart example above. The corresponding JSON file should look like this:

{  "cols": [        {"id":"","label":"Beverage","pattern":"","type":"string"},        {"id":"","label":"Sold","pattern":"","type":"number"}      ],  "rows": [        {"c":[{"v":"Beer","f":null},{"v":10,"f":null}]},        {"c":[{"v":"Wine","f":null},{"v":5,"f":null}]},        {"c":[{"v":"Whiskey","f":null},{"v":2,"f":null}]},        {"c":[{"v":"Juice","f":null},{"v":7,"f":null}]},        {"c":[{"v":"Water","f":null},{"v":6,"f":null}]}      ]}

Click Events

Google charts can detect click events on chart items and execute some code whenever an event occurs. This is done by adding a listener handle before drawing the chart:

function doSomethingOnClick() {                  // Get selected data row  var selectedItem = chart.getSelection()[0];    if (selectedItem) {    // Get first column value    var beverage_name = data.getValue(selectedItem.row, 0);    // Get second solumn value    var order_num = data.getValue(selectedItem.row, 1);       alert('Today ordered: ' + order_num + ' bottles of ' + beverage_name +  ' .');  }}// Add on click listener// Whenever someone clicks on a chart item, doSomethingOnClick function is executed				var listenerHandle = google.visualization.events.addListener(chart, 'select', doSomethingOnClick); 

Conclusion

Google charts is a very powerful web service. Examples that are shown in this article represent only basic functionality. For advanced usage, check the following site.

devx-admin

devx-admin

Share the Post:
Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the state. A Senate committee meeting

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor supply chain and enhance its

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with minimal coding. These platforms not

Cybersecurity Strategy

Five Powerful Strategies to Bolster Your Cybersecurity

In today’s increasingly digital landscape, businesses of all sizes must prioritize cyber security measures to defend against potential dangers. Cyber security professionals suggest five simple technological strategies to help companies

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019 tech firms, as per data

Huawei Electric Dazzle

Huawei Dazzles with Electric Vehicles and Wireless Earbuds

During a prominent unveiling event, Huawei, the Chinese telecommunications powerhouse, kept quiet about its enigmatic new 5G phone and alleged cutting-edge chip development. Instead, Huawei astounded the audience by presenting

Cybersecurity Banking Revolution

Digital Banking Needs Cybersecurity

The banking, financial, and insurance (BFSI) sectors are pioneers in digital transformation, using web applications and application programming interfaces (APIs) to provide seamless services to customers around the world. Rising

FinTech Leadership

Terry Clune’s Fintech Empire

Over the past 30 years, Terry Clune has built a remarkable business empire, with CluneTech at the helm. The CEO and Founder has successfully created eight fintech firms, attracting renowned

The Role Of AI Within A Web Design Agency?

In the digital age, the role of Artificial Intelligence (AI) in web design is rapidly evolving, transitioning from a futuristic concept to practical tools used in design, coding, content writing

Generative AI Revolution

Is Generative AI the Next Internet?

The increasing demand for Generative AI models has led to a surge in its adoption across diverse sectors, with healthcare, automotive, and financial services being among the top beneficiaries. These

Microsoft Laptop

The New Surface Laptop Studio 2 Is Nuts

The Surface Laptop Studio 2 is a dynamic and robust all-in-one laptop designed for creators and professionals alike. It features a 14.4″ touchscreen and a cutting-edge design that is over

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted

Battery Investments

Battery Startups Attract Billion-Dollar Investments

In recent times, battery startups have experienced a significant boost in investments, with three businesses obtaining over $1 billion in funding within the last month. French company Verkor amassed $2.1

Copilot Revolution

Microsoft Copilot: A Suit of AI Features

Microsoft’s latest offering, Microsoft Copilot, aims to revolutionize the way we interact with technology. By integrating various AI capabilities, this all-in-one tool provides users with an improved experience that not

AI Girlfriend Craze

AI Girlfriend Craze Threatens Relationships

The surge in virtual AI girlfriends’ popularity is playing a role in the escalating issue of loneliness among young males, and this could have serious repercussions for America’s future. A

AIOps Innovations

Senser is Changing AIOps

Senser, an AIOps platform based in Tel Aviv, has introduced its groundbreaking AI-powered observability solution to support developers and operations teams in promptly pinpointing the root causes of service disruptions