Hi, guys, welcome back to Appsloveworld. In our previous article, we learned about Chart Js in detail. And now moving ahead, let’s learn about another striking feature of Chart Js i.e How we can create a Multiple-line charts in chart.js.
As we know that Chart.js is Built using JavaScript and requires the use of the HTML <canvas> element and a JavaScript function to create the chart. and then we add Datasets, borderColor, labels, background colors, ToolTip, and other configurations that are needed for our Graph.
In this article, we will learn about how to use chart.js for creating dynamic multi-line charts with simple examples.
How to Create Multi Line Chart Using Chart js?
So let start, I have taken an HTML page and added the latest chart js CDN reference to our page. and in the HTML, we have taken a Canvas element for creating the line chart graph.
<!DOCTYPE html>
<html>
<head>
<title>Chart.js-Multi line charts </title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="myLineChart" style="width:100%;max-width:500px"></canvas>
</div>
<script>
var xValues = [2011, 2012, 2013, 2014, 2016, 2017, 2018, 2019, 2020, 2021, 2022];
const MultiLinechartData = {
type: "line",
data: {
labels: xValues,
datasets: [
{
label: 'JavaScript Developer',
lineTension: 0,
backgroundColor: 'blue',
borderColor: 'blue',
data: [100, 500, 600, 800, 700, 900, 1200, 850, 970, 750, 1100]
},
{
label: 'React Developer',
lineTension: 0,
borderColor: 'green',
data: [98, 450, 750, 900, 650, 988, 1550, 880, 600, 800, 1300]
},
{
label: 'Chart Js Developer',
lineTension: 0,
borderColor: 'red',
data: [88, 800, 450, 550, 350, 820, 620, 730, 740, 660, 669]
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'Software developers in organization',
}
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Year'
}
},
y: {
display: true,
title: {
display: true,
text: 'Employees'
}
}
}
}
};
new Chart("myLineChart", MultiLinechartData );
</script>
</body>
</html>
Codepen Code-Editor Example
*Thank you so much if you have a question please comment
Code Explanation
The MultiLinechartData is the variable that contains all the data and styling properties of the multi-line chart graph. It is a javascript object with multiple properties that are used to create the chart.
The labels property in MultiLinechartData variable is an array that is used to assign the point in the x-axis and the datasets property is also an array that contains information such as line chart title, backgroundColor,borderColor, and The lineTension property is used to control the curvature of the line joining the points. data is an array that represents the x-axis values.
Chart. Js Basic
we’re gonna get started by essentially just adding a chart. Js to our webpage and just generally getting set up. So let’s get going on that now.
So to get started I have an HTML5 page. No HTML is something that has been used for a long time to just quickly get up and running. You don’t need any sort of generator or anything like that. You just create an HTML5.
At the end here, all that really matters is that you have something to get going. Now if you want to get this code directly, you can have access to the code there. But really like I said, it’s just HTML5.
Now there are lots of ways that you could go about adding charts to your application. If you click getting started, it’s going to take you to the GitHub page where you can see how you can install it with Bower or with node.
Now because I just want to get going as simple as possible. You can use NPM or Bower or any of these other methods. I’m just going to grab the CDN version. You’ll notice if you click on this link, it’s a hosted version of this file. You can copy this path directly, just paste it in here as the script that you’re loading.
So in our footer here we can just come down here. at the bottom of our body, we can just come down here and add a script and we can add a source and that source is just going to simply be equal to the path. So nothing fancy here. And since this is HTML5, we don’t need to do type JavaScript or anything like that. Okay.
But as you can see, chart js directly from CDN. And you might be wondering, well, do I need jquery or any of that stuff? we don’t so we can comment here. but as you can see here, we’re now loading using a CDN file and we just have a standard JavaScript file.
The post [Simple Trick]-Create a Multi Line Chart Using Chart.js appeared first on Software Development | Programming Tutorials.
Read More Articles
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- jQuery Ajax GET Example with Parameters
- How to Pass Parameters in AJAX POST?| JQuery Ajax Post Json Example
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- How to add, edit and delete rows of an HTML table with Jquery?
- Registration form with image upload in MVC using jquery Ajax
- How to make an Inline editable table in MVC using jquery?
- Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc
- [Solved]-How to Upload pdf file using jquery MVC?
- Dynamically creating graphs with jQuery
- Jqgrid custom formatter button click not working
- If...Else: If iFrame exists, apply CSS to page?
- Remove class on radio's that are not checked
- Scan for all data attributes with the same naming and insert value - jQuery
- Multiple hide show div
- jquery select2 work with dropdownlist asp.net server control
- How to return View without reloading complete form after saving data using Bootstrap modal popup in Asp.Net MVC
- Nav between 4 divs that are inside the .content div
- slideToggle function leaves some space at the beginning of dropdown list
- jquery custom tabs not working
- Highcharts - How to split up multiple charts in Rails 3
- How to grab a class name from a specific ID using jQuery
- add a multi-step form to WordPress
- ImageMapster plugin is not working when I am rendering image , map and area tag through jquery
- Ruby on Rails - Render a partial in another View via jQuery/Ajax
- Classes is making image load under all results in while loop
- How to insert text to an existing text in a cell if the cell next to it has this text?
- How to validate input date html year?
- Split multiple data cells per row <td> in single data cell per row - jQuery
- bootstrap ajax content re-appear twice
- Count number of words inside a div - ignoring those inside a specified child div
- Make last row NON sortable
- Why my overload controller methods not hitting properly?
- How to add Search Bar with Next, Previous and close Button to search text in main html page
- get the arrays value inside another array in jQuery
- CSS3 tooltip background
- When using jQuery AJAX call, the scrollTop() function scrolls to the most recent item BEFORE AJAX call rather than AFTER
- Center Align Horizontal Accordion in IE (dynamic widths)
- How to filter results based on session variable php
- jalali datepicker not working properly when using in more than one place in html
- How can i remove the options which are greater than the selected one in a select element?
- Fetch the hidden value in the jquery
- Jquery Fullpage - Disable scroll to intermediate slide
- Trying to chain together two jQuery functions
- How to print dict data in html if i submit form using ajax
- CometD v3.0.9 - server side disconnect doesn't set the successful flag on message (channel /meta/disconnect)
- Bootstrap flexible menubar according to devices
- jQuery: open window and attach a submit() callback to the opened window's document form
- Why is the Event Object different with a click event and with a trigger click?
- Issue with Add more button html php
- Why does Dreamweaver show syntax error for this script line?
- How does the StumbleUpon chrome extension insert a div above the google homepage navbar?
- Use URL segments as jQuery $.post variables
- Execute simple mysqli query on click with AJAX
- Text is being shifted after jQuery fadeIn
- Cant change text input with jQuery after user input
- Prevent a modal from opening again if there is an error
- Index position of sortable while still being dragged
- load external image with jquery
- Ajax loaded form sends empty get request
- HTML onchange not getting fired from Ajax insert
- Access content on canvas with jQuery
- add a loop function around 3 small animations within larger animation functions
- global variable is not set in jquery
- When an element or any of it's descendants lose focus, remove a class
- formvalidation use two regex pattern
- Button states wont change
- Cannot retrieve values from JS object using hash syntax
- HTML using jQuery to send a postback?
- Custom tooltip data for specific points on highchart
- Jquery AJAX form with 2 types of data
- js, delaying a function
- Responsive menu has dropdown bug when cycling through media queries
- jQuery ajax get image data from server
- Javascript ordering elements based on comparing child element content with target heading content
- How to tell if a jQuery slider (knob) is focused?
- Transition when adding class
- Detecting value change in any case, jQuery
- How to pass dropdown value in autocomplete code
- How to create table using json data
- jQuery autocomplete accept initial value
- Adding a div using jQuery then connecting it via jsPlumb
- How to use a custom attribute rather than value in this JS?
- Custom Angular Directive not working with dynamic images
- Displaying auto complete results a bit faster
- X-editable date format
- Bootstrap 4 Dropdown on hide doesn't wait for animation
- Google's downloadDataURI in Firefox
- Use inline script in views yii2
- Trying to add jQuery validation without submit() button
- PHP image script doesn't work via $.post
- Applying a class to a row that is added dynamically
- Same button for 2 tables selection jquery
- execution order when using a script_queue for JS functions
- Click and change handlers fire simultaneously on Chrome
- Mootools addClass every 4 li
- Why I cant use $(this) the jQuery selector
- ASP MVC prevent submit form with jquery function on separate js file
- cant load json data from .json file
- Jquery set tr with empty td lower than with text in td
- jquery validation messages in one separated div
- How to refresh dialog content
- How to get the formatted POST data of a Django form?
- SessionStorage Binding Event
- Image Drag Drop and Upload in Node.js
- How to hide bpopup jquery?
- How can I make this green colour come from bottom in place of coming from right
- Defining time in jQuery?
- Ajax runs my insert query twice
- Remove a wild "-" dash from active class anchor tag
- Why different lightbox links are opening always the same content?
- Loading an included php file every x'th second
- How to implement multiple tooltip show event using popper.js
- jsPlumb repaintEverything not working on every browsers but Firefox
- How to customize jquery ui autocomplete?
- How do I use Jquery traverse methods on selector with index?
- jQuery Form plugin - is there a way to load a page on Ajax success?
- if jquery has no 'readonly' on 'select' and 'checkbox'?
- Attach a global onBeforeCall listener to all AJAX call except for one
- Read the file from local directory and change the colors of the row of HTML table
- How to get checkbox value and the value of the selected option of dropdown menu next to it
- How do I use the POST method?
- data-iconpos="left" turning into data-iconpos="right" when page renders
- html jquery toggle between two forms
- Getting contents within ( ) and using that later
- selectors via jquery
- My Ajax function is not working when i click on delete link, however works for edit link
- consuming SSRS or SSRS Web service in JQuery
- jQuery calculation inside loop
- Act on ajax result with jquery before append
- How to perform zoom-fade slideshow using jquery?
- Button created with JavaScript, when the button is created again the on click event happens twice
- query On click event won't return firing context
- jQuery - Droppable doesn't accept more than one draggable
- Object-oriented way to separate page-specific JavaScript in Rails
- How can I retrieve Constituency_Name from This object
- How do I enable responsive extension for DataTables?
- Bringing a div back from .hide or .fadeOut onclick
- jQuery equal heights
- Q Library Promise Pattern for retrieving multiple XML files and displaying them in order
- Passing multiple values from MYSQL/PHP table to jQuery
- How to get values from a nested JSON string with jQuery?
- Function to track views of post only from past week
- assigning unique ID via find() and each() iteration
- AJAX error with response 200 (custom data type)
- jQuery for opening url in Flash
- how to check the check boxes with retrieved data
- Including jQuery in Wordpress-Plugin
- How to change width of Radgrid of telerik using jquery
- Create Delete and Rename in jstree not working
- How to get Jquery autocomplete data as array?
- Function in javascript won't update directly, have to refresh page
- jQuery equivalent of YUI Lang.sub function
- AJAX GET from PHP server works after second call only
- ReSharper : "Condition is always false" warning when reading value from ViewBag in .jQuery
- How to fix "DownloadURL gives responseXML null value"
- Conflict between Smoothscroll.js and Bootstrap Carousel
- Trying to update total column by # answers of selected 'Yes'
- JS not passing value to html div tag
- jquery toggle slideUp