Awesome Chart

Developer
Alex Vazquez
Size
2,767 Kb
Views
24,288
  1. Awesome Chart Previews
  2. Awesome Chart HTML Codes
  3. Awesome Chart JS Codes

How do I make an awesome chart?

What is a awesome chart? How do you make a awesome chart? This script and codes were developed by Alex Vazquez on 14 September 2022, Wednesday.

Awesome Chart Previews
IQ Test

Awesome Chart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Awesome Chart</title>
</head>
<body> <html>	<head>	<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";	ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>	<body>	<div id='myChart'></div>	</body>
</html> <script src='https://cdn.zingchart.com/zingchart.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Awesome Chart - Script Codes JS Codes

zingchart.THEME="classic";
var myConfig = { "graphset":[ { "type":"mixed", "x":0, "y":0, "height":"60%", "background-color":"#a6c675", "plot":{ }, "plotarea":{ "margin":"5px 30px 0px 30px" }, "tooltip":{ "shadow":0 }, "labels":[ { "text":"AAPL", "x":"20px", "y":"14px", "font-color":"#fff", "font-size":"22px" }, { "text":"527.68", "x":"625px", "y":"14px", "font-color":"#fff", "font-size":"22px" }, { "text":"Today 3:25", "x":"20px", "y":"40px", "font-color":"#D0E0B8", "font-size":"14px", "font-family":"arial narrow" }, { "text":"PM", "x":"80px", "y":"44px", "font-color":"#D0E0B8", "font-size":"10px", "font-family":"arial narrow" }, { "text":"+1.05 (1.69 %)", "x":"625px", "y":"40px", "font-color":"#D0E0B8", "font-size":"14px", "font-family":"arial narrow" } ], "scale-x":{ "values":"1:30:1", "line-width":0, "items-overlap":true, "guide":{ "visible":false }, "item":{ "visible":false }, "tick":{ "visible":false } }, "scale-x-2":{ "values":"1:60:1", "line-width":0, "guide":{ "visible":false }, "item":{ "visible":false }, "tick":{ "visible":false } }, "scale-y":{ "values":"0:100:10", "line-width":0, "guide":{ "visible":false }, "markers":[ { "type":"line", "range":[50], "alpha":0.6, "line-color":"#777", "line-width":"1px", "line-style":"dashed" } ], "item":{ "visible":false }, "tick":{ "visible":false } }, "scale-y-2":{ "values":"0:100:10", "line-width":0, "guide":{ "visible":false }, "item":{ "visible":false }, "tick":{ "visible":false } }, "series":[ { "type":"bar", "background-color":"#9DBA73", "values":[7,8,4,9,40,45,6,5,9,12,9,12,8,11,10,9,8,13,14,7,6,7,11,14,16,13,7,16,13,7], "scales":"scale-x, scale-y", "animation":{ "effect":"ANIMATION_EXPAND_BOTTOM" }, "border-radius-top-left":"3px", "border-radius-top-right":"3px", "bar-width":"10px", "hover-state":{ "visible":0 } }, { "type":"line", "line-color":"#F5F8ED", "values":[61,56,63,54,61,48,49,46,46,49,52,51,49,47,43,40,36,33,30,35,37,37,42,31,28,22,26,23,25,27,23,23,25,26,31,35,33,38,47,46,49,45,52,53,55,53,54,56,57,43,44,43,42,46,49,52,53,56,58,61,62,67], "scales":"scale-x-2, scale-y-2", "animation":{ "effect":"ANIMATION_SLIDE_LEFT" }, "marker":{ "visible":false } } ] }, { "type":"bar", "border-width":"2px", "border-color":"#f2f2f2", "x":0, "y":"60%", "height":"40%", "background-color":"#fff", "plot":{ "bars-overlap":"100%", "bar-space":"5px", "bar-width":"20px", "animation":{ "effect":"ANIMATION_SLIDE_BOTTOM" } }, "plotarea":{ "margin":"25px 25px 50px 60%" }, "labels":[ { "text":"+120.23", "x":"20px", "y":"60px", "font-color":"#A7C47B", "font-size":"38px" }, { "text":"Yearly Change", "x":"65px", "y":"110px", "font-color":"#ACACAC", "font-size":"16px" } ], "scale-x":{ "line-width":0, "values":["J","F","M","A","M","J","J"], "tick":{ "visible":false }, "guide":{ "visible":false }, "item":{ "font-size":"12px", "font-color":"#ADADAD" } }, "scale-y":{ "line-width":0, "tick":{ "visible":false }, "guide":{ "visible":false }, "item":{ "visible":false } }, "series":[ { "values":[15,24,17,24,15,28,12], "z-index":2, "background-color":"#A7C67A", "border-radius-top-left":"3px", "border-radius-top-right":"3px", "tooltip":{ "text":"%v" } }, { "values":[50,50,50,50,50,50,50], "z-index":1, "background-color":"#F2F2F2", "hover-state":{ "visible":false }, "tooltip":{ "visible":false } } ] } ] };
zingchart.render({	id : 'myChart',	data : myConfig,	height: 500,	width: 725
});
Awesome Chart - Script Codes
Awesome Chart - Script Codes
Home Page Home
Developer Alex Vazquez
Username quezo
Uploaded September 14, 2022
Rating 3
Size 2,767 Kb
Views 24,288
Do you need developer help for Awesome Chart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Vazquez (quezo) Script Codes
Name
Simple Redux, React Example
Jquery Extension to Handle Clicks and Double Clicks
Angular 2 Example
Instagram Follow Button
Styling the Griddle React HTML Table
DC.js Example Bar Chart
DC.js Example Pie Chart
A Wufoo Form
Maximized TextArea
Default DC.js Template
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!