How to render powerful charts and visualizations in the browser using Apache ECharts library

Posted by on

What is Apache ECharts library?

Apache ECharts is a powerful interactive charting and data visualization library for web browsers. allows developers/users to render interactive charts/graphs and visualizations with less amount of HTML source code. it is a lightweight canvas library written in Javascript. In today's modern world, it is important to showcase the data or datasets in clear and condensed format on the user screen to visualize more data insights and to improve the user experience. a good audience always expects interactive chart views to analyze the datasets so, we have the best solution to achieve this objective by using the apache community tool ECharts library.

Top Features of Apache ECharts library

  • Renders Interactive and customizable wide variety charts and visualization
  • Supports transition animations
  • Support all web browsers
  • Device and platform independent
  • Responsive Nature to adopt various devices screens/Mobile Optimization
  • Written in Java script
  • Available under the Apache License V2
  • Accessible on CDN's
  • Free available for download
  • Multiple Data Format Ready-To-Use
  • supports Large-Scale Data Visualizations
  • Interactive Data Exploration
  • Multi-Dimensional Data Support
  • Dynamic Data
  • Special Effects
  • More Powerful 3D Visualizations with GL

Popular extension pack of ECharts

  • ECharts GLfor 3D plots, globe visualization, and WebGL acceleration
  • Liquidfill
  • Wordcloud
  • Extension for Baidu Map
  • vue-echarts ECharts component for Vue.js
  • echarts-stat Statistics tool for ECharts

Echart components

echart_frequent_components
echart_Componets
echart_series_data_charts

How to Download Echart

Download Echart from official Web portal
Download Echart from jsDelivr CDN link
if you want to download Echarts for nodejs then use following command:

npm install echarts --save

To download from official apache repository
Download in Zip Fromat

Steps to render charts and visualizations in the web-browser

  • Create HTML file
  • Include Echart from jsDelivr CDN link as script source in the Html script tag
  • Create division with identifier to display chart
  • Create data elements to map on the chart
  • create jscript variable with parameters such as:title,tooltip,xAxis,yAxis,series with chart type
  • Use function call with arguments as jscript variable to render plot
  • Run file in browser

How to render scatter chart using Echart library

To create and render bar chart we need to include following parameters in javascript:

create chart title text

title: {
          text: 'ECharts Example'
        }

create chart legend

tooltip: {},
        legend: {
          data: ['Mycharts using Echart']
        }

define X and Y axis

xAxis: {
          data: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        yAxis: {}

define chart type with input data

series: [
          {
            name: 'sales',
            type: 'scatter',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]

chart object with required chart parameters


      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
        title: {
          text: 'ECharts Example'
        },
        tooltip: {},
        legend: {
          data: ['Mycharts using Echart']
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: 'scatter',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
apache_echarts_scatter_plot

How to render Bar chart using Echart library

To draw bar chart follow simillar approach with specify chart type as 'bar'. 
series: [
          {
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]



      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
        title: {
          text: 'ECharts Example'
        },
        tooltip: {},
        legend: {
          data: ['Mycharts using Echart']
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
apache_echarts_bar_plot

How to render Line using Echart library

To draw bar chart follow simillar approach with specify chart type as 'line' . 
series: [
          {
            name: 'sales',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]



      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
        title: {
          text: 'ECharts Example'
        },
        tooltip: {},
        legend: {
          data: ['Mycharts using Echart']
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
apache_echarts_line_plot

Applications of Data Visualization Libraries

  • Business Analytics and Reporting
    • Sales and Marketing
    • Financial Analysis
    • Inventory Management
  • Healthcare and Medicine
    • Disease Tracking
    • Patient Data Analysis
    • Genomic Data
  • Finance and Investment
    • Stock Market Analysis
    • Portfolio Management
    • Fraud Detection
  • Education and Research
    • Interactive Learning
    • Academic Research
    • Student Performance Monitoring
  • Technology and Software Development
    • Log Analysis
    • Machine Learning
    • Network Monitoring
  • Marketing and Customer Insights
    • Customer Journey Mapping
    • Sentiment Analysis
    • Ad Campaign ROI
  • Public Policy and Governance
    • Census Data Visualization
    • Crime Mapping
    • Policy Impact Analysis
  • Environmental and Geospatial Analysis
    • Climate Change.
    • Urban Planning
    • Biodiversity Studies
  • Media and Communication
    • Infographics for News
    • Social Media Trends
    • Content Engagement
  • Transportation and Logistics
    • Fleet Management
    • Traffic Analysis
    • Supply Chain Optimization
  • Retail and E-commerce
    • Customer Behavior Analysis
    • Product Performance
    • Pricing Strategy
  • Sports and Entertainment
    • Player Performance
    • Fan Engagement
    • Event Management

Where to get official documentation for the Echarts library?

Read Documentation Here

Official GitHub Repo For Developers and Various Programming langauges

Apache ECharts Github Repo

Echart library supports wide variety of charts if you want to use them, check list of available charts on following link List of charts from Echart library By using the Apache community tool ECharts library, it is easy to showcase the data or datasets in clear and consize format on the user screen to visualize more data insights and to improve the user experience to attract a larger audience, which always expects interactive charts views to analyze the datasets.

Comments

Post a Comment

Thanks for your valuable input