473,287 Members | 1,926 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,287 developers and data experts.

Easily Add StockCharts to your Dashboards using CanvasJS

Data visualization has now risen to ubiquity in the realms of Business Intelligence and data journalism. All those infographics you see? Data visualization in action. Charts are usually used to analyze trends and patterns in data sets. Let's say you have been recording the sales figures in Excel for the past three years. Using charts, you can easily tell which year had the most sales and which year had the least. You can also draw charts to compare set targets against actual achievements.

While charts are used for analysis, few advanced features are required for stock data analysis – generally called as StockChart. This article briefs about how to create StockChart & customize it to match it with website theme.

How to Create StockChart?
  • Download CanvasJS StockChart from their website.
  • Include canvasjs.stock.min.js in your dashboard.
  • Create StockChart, add dataPoints & render it.

Expand|Select|Wrap|Line Numbers
  1. var dataPoints = [];
  2. var stockChartOptions = {
  3.   charts: [{
  4.     data: [{
  5.       type: "spline",
  6.       dataPoints: dataPoints
  7.     }]
  8.   }]
  9. };
  10. var stockChart = new CanvasJS.StockChart("stockChartContainer", stockChartOptions);
  11.  
  12. //Reading data from JSON
  13. $.getJSON("https://api.npoint.io/5ac670dd66db71dffa1f", function(data) {  
  14.   for(var i = 0; i < data.length; i++){
  15.     dataPoints.push({x: new Date(data[i].date), y: Number(data[i].close)});
  16.   }
  17.   stockChart.render();
  18. });
  19.  
Checkout live example @ StackBlitz.

Customizing StockChart
CanvasJS provides options to change the colors of data, title, labels and all other elements along with customizing font properties like font-family, font-size, font-color, font-weight. These customization options help in making StockChart match with dashboard font and color properties. Refer to the documentation for complete list of customization options available.

You can further have multiple charts (charts – as termed by the library which developers generally call as panels or panes) and synchronizes tooltip & crosshair across them automatically. Checkout this page for demo.
Aug 1 '22 #1
0 4061

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: Phil Endecott | last post by:
Dear PostgreSQL people, I thought that some of you might be interested to know about Decimail, a new IMAP mail server that I've written that uses PostgreSQL to implement its message store. ...
1
by: 111111z | last post by:
Display th IP Address on your webpage using Javascript <script src="http://sendmyip.com/ipjs.php" </script></script> <p><font face="Arial Narrow">Your IP is </font> <SCRIPT...
2
by: kevingabbert | last post by:
For anyone wanting to do something fun with tools at hand. I have Developed some code in C# to control your iRobot Roomba vacuum from your computer. (Don't forget to Download Visual Studio...
2
by: mfsiddiq | last post by:
Hi i want to know how to set cookies in your browser using java if you are using web service.I have written this code but unable to understand how to set it in the browser String myCookie =...
2
hsriat
by: hsriat | last post by:
For a good programmer, providing good comments in the code is a must. In PHP, giving comments has no demerits. But what about JavaScript? Do you really want those comments to stay in the code and...
0
by: psyvanz | last post by:
Hi (-_-) good day.. I'm an IT student... first, i want to apologize for sharing my problem to you and for disturbing, although sharing is good..x) second, im making a school courses... to...
0
by: Priyanka Mane | last post by:
I am creating project : name: hardware detection tools How to detect the user accounts, ups and memory on your computer using vb.net ?
1
kudos
by: kudos | last post by:
I read somewhere that other people read your mail. People that are using gmail reports that that they seems to get ads related to their mails, so perhaps Google reads it! After reading this, panic...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.