FeaturesPricing
All Charts
Chart.js ChartsLine ChartsSparkline ChartsScatter ChartsPie ChartsDonut ChartsPolar ChartsRadar ChartsBubble ChartsGraph Viz ChartsQR Codes generatorBar Charts
Integrations
Popular Integration
How to Integrate
Typeform
with Image Charts using Zapier/Make
How to Integrate
Gmail
with Image Charts using Zapier/Make
How to Integrate
Slack
with Image Charts using Zapier/Make
See all integrations
BlogSubscription managementBuild your chart for free
Subscription managementBuild your chart for free
Learn

How to Use Java Script for Sending Charts?

Posted on 
August 28, 2020

If you’re just starting out with JavaScript, you should know that it’s a great programming language for visualizing data. Data visualization is an extremely pertinent skill right now since we’re in the age of Big Data. Visualization tools are essential to make sense of it all and extract insights. 

So here’s a basic rundown of how to create charts with JavaScript. 

What You’ll Need to Create Charts with JavaScript 

Internet Browser

The first thing you’ll need to implement any of the hundreds of Javascript solutions for charts is an internet browser. Chrome or Firefox are both fine for this exercise. 

Text Editor

You’ll also need a text editor. Notepad will work fine, but you should ideally go for an advanced code editor like VS Code. It’ll give you a more convenient user experience which will make writing HTML5, CSS, Java Script, etc., easier. The code editor will help you find mistakes and correct them if your code doesn’t run. 

Chart Library

Finally, you’ll need a chart library to generate the chart you need. I recommend using JSCharting, however, there are tons you can choose from. That being said, this tutorial will be for JSCharting. JSCharting can draw all sorts of charts with SVG and it’s easy to use. The API simplifies a lot of things and it’s a good option to experiment with when you’re beginning. 

Data 

Unless you have some data with you to generate a chart, you’ll need to get some. You can get data from places like the CDC, or WHO, or the WFP. Any data that pits two values against each other will do. Even charts that track the amount of rain in a city or a country per year is fine. 

How to Create Charts with JavaScript 

  1. Add a Blank Chart 

You need to download a blank chart first with this. This file contains 

  • index.html
  • js/index.js

The .html file is empty except for a little standard code. The .js file is completely empty. 

  • Open the index.html file in the code editor you’ve chosen and add a script tag to include the JSCharting library. Do this after the closing </body> tag. 

The code should look like this: 

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>
  • Then use the same technique to add a script tag to reference your blank .js file. Add it after the JSCharting script. It should look like this:
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>
  • Finally, add a <div> placeholder in the html file so that it defines where the chart is to be drawn. 

It should look like this: 

<body>
<div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>
  • The div should have an ID so that it can tell the chart which div to draw in. Here, the ID is chartDiv. 

Open the .js file and add a blank chart by writing the following code:

JSC.Chart('chartDiv', {});
  • Finally, open the index.html file in a browser. You can drag and drop the file into a browser like chrome. You will be able to see a small JSC logo on the page. This is the first step complete to sending charts with Java script. 
  1. Play Around a Little 

Add a few values you can use to play around with the chart. Replace the content in the .js file with the following code:

‍
JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 42}
         ]
      }
   ]
});
  • Refresh the browser where the page is loaded and you may see a bar chart. That’s because you set the type to ‘horizontal column’ in the code.
    Now, let’s get down to business.
  1. Prepare Your Data Put it Together 
  • The CSV data format means comma separated values. This file contains rows, and each one represents a record or entry. The first row of values contains the names of the comma separated value. This is the column. Further rows contain values themselves. For example:
Name, age
Milton, 45
Harry, 34
  • CSV is readable, but there are several variations of the format. If values contain commas, like mailing addresses, the format doesn’t work as is. Hence, each value has to be wrapped in quotes. Like this:
‍
“name”, “age”
“Milton”, “45”
“Harry”, “34”
  • JSCharting provides many tools to help with this. You can skip worrying about CSV and convert it to JSON (JavaScript Object Notation). This will be an array of objects.
    First, download this file of CDC data for a sample project. You can open this CSV file in excel. You’ll need to download the CSV data in realtime with JavaScript code. The code can be a little confusing, but it’s short. Also, you can use it to get any CSV or JSON files over the internet.
  • Replace the index.js file content with this: 
fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
   .then(function (response) {
      return response.text();
   })
   .then(function (text) {
csvToSeries(text);
   })
   .catch(function (error) {
      //Something went wrong
      console.log(error);
   });
function csvToSeries(text) {
   console.log(text);
}
  • The complex code makes sure that all the data is available immediately. That’s why it uses a fetch() function. 
  • The then(…) code is called for a response when it arrives. The function converts the response into text and then returns it. 
  • The second then(…) argument function passes the text as an argument. 
  • The catch() function specifies what to do if something goes wrong. This could be network problems, incorrect URLs, etc. In those cases, the error is sent to the console. 
  • After that the csvToSeries() function passes the text to the console for inspection. 


  1. Putting it All Together

At the end of the index.js file, add this code to render the chart:

function renderChart(series){
JSC.Chart('chartDiv', {
      series: series
   });
}

Then refresh the browser, and you’ll have the chart that you need. 

Line chart showing filtered CSV data

You can supplement your knowledge of java script charts with our article about bar charts.

Tagged:
Charting
Francois-Guillaume Ribreau
CEO

Featured Posts

How To's
Automate Charts in PDFs via Zapier—The Whys and Hows to Create Dynamic Reports
Automate!
Where You Draw the Line–Automated Line Graphs for Everyone
Learn
Raising the Bar—Easy, Automated Bar Charts for Everyday Use
How To's
How to create a progress bar chart
How To's
How to make charts with gradients
Learn
How to Get Started With Image Charts
Learn
Create Chart with One URL
Learn
How to Share Charts on Slack?

Tags

API
Automation
Bar Charts
Bubble Charts
Charting
Design
Doughnut Charts
Emailing
Graph-viz
GraphViz
Integration
Line Charts
Make
Mobile App
Pie Charts
Polar Charts
Progress Bar Charts
QR Code
Radar Charts
SDK
Scatter Charts
Sparkline Charts
Zapier

Create and send charts in email with Image-Charts

Get started
More Posts

You Might Also Like

Mar 30, 2023
 in 
How To's

Automate Charts in PDFs via Zapier—The Whys and Hows to Create Dynamic Reports

Mar 3, 2023
 in 
Automate!

An Automation Guide that Every Pie Charts User Needs

Mar 3, 2023
 in 
Automate!

Is Automation the Answer to Your Donut Chart Issues?

The most used static chart API in the world

Chart API

Chart.js ChartsLine ChartsSparkline ChartsScatter ChartsPie ChartsDonut ChartsPolar ChartsRadar ChartsBubble ChartsGraph Viz ChartsQR Codes generatorBar Charts

Product

PricingDocumentationSubscription managementChart EditorChange logStatus PageOn Premise

SDKs

JavaScript/NodeJS
PHP
Python
Java
Ruby
C#

Integrations

Zapier integrationMake integrationIntegromat integration

Company

About usBlogOpen SourceSecurity & CompliancePrivacyTermsSupport

Newsletter - Changelog

If you'd like more update regarding Image-Charts in your inbox please do join the newsletter
Subscribe
No spam
Unsubscribe anytime
The most used static chart API in the world