Amchart column graph

Developer
Drew Adams
Size
2,246 Kb
Views
20,240
  1. Amchart column graph Previews
  2. Amchart column graph HTML Codes
  3. Amchart column graph CSS Codes
  4. Amchart column graph JS Codes

How do I make an amchart column graph?

What is a amchart column graph? How do you make a amchart column graph? This script and codes were developed by Drew Adams on 29 September 2022, Thursday.

Amchart column graph Previews
IQ Test

Amchart column graph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>amchart column graph</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="http://www.wgu.edu/sites/all/themes/bricktheme/javascripts/amcharts/amcharts.js"></script>
<script src="http://www.wgu.edu/sites/all/themes/bricktheme/javascripts/amcharts/serial.js"></script>
<script src="amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
<script src="amcharts/plugins/responsive/responsive.min.js" type="text/javascript"></script>
<div id="chartdiv" class="bar-chart"></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Amchart column graph - Script Codes CSS Codes

#chartdiv{ height: 300px; width: 350px;
}

Amchart column graph - Script Codes JS Codes

// info to be graphed
var chartData = [ { timeToGraduate: "1<br>Year", percent: 38, color: "#ffffff" }, { color: "#ffffff", percent: 29, timeToGraduate: "1.5<br>Years" }, { color: "#ffffff", percent: 19, timeToGraduate: "2<br>Years" }, { color: "#ffffff", percent: 9, timeToGraduate: "2.5<br>Years" }, { color: "#ffffff", percent: 3, timeToGraduate: "3<br>Years"
} ];
// chart properties
var chart = new AmCharts.AmSerialChart();
//chart.angle = 30;
chart.categoryAxis.labelsEnabled = false; // disables x-axis category labels
chart.categoryAxis.title = "Time to Graduate";
chart.categoryAxis.titleColor = "#406591";
chart.categoryField = "timeToGraduate";
//chart.columnSpacing3D = 10;
chart.dataProvider = chartData;
//chart.depth3D = 25;
chart.handDrawn = false;
chart.type = "serial";
// graph properties
var graph = new AmCharts.AmGraph();
graph.balloonText = "[[value]]%";
graph.fillAlphas = 1; // sets opacity of each graph
graph.labelColorField = "color"; // references 'color' in chartData
graph.labelPosition = "bottom"; // positions graph lables below the top of the graph
graph.labelText = "[[category]]";
graph.lineColor = "#406591";
graph.type = "column";
graph.valueField = "percent";
chart.addGraph(graph);
// valueAxis properties
var valueAxis = new AmCharts.ValueAxis();
valueAxis.labelFrequency = 1;
valueAxis.minimum = 0;
valueAxis.maximum = 50;
valueAxis.title = "Percent of Grads";
valueAxis.titleColor = "#406591";
valueAxis.unit = "%";
chart.addValueAxis(valueAxis); // add valueAxis properties to chart
// draw out the graph
chart.write("chartdiv");
Amchart column graph - Script Codes
Amchart column graph - Script Codes
Home Page Home
Developer Drew Adams
Username drewtadams
Uploaded September 29, 2022
Rating 3
Size 2,246 Kb
Views 20,240
Do you need developer help for Amchart column graph?

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!

Drew Adams (drewtadams) Script Codes
Name
Multiple Choice Quiz
Jquery 2d character movement
Beescientific
A Pen by Drew Adams
Gsap dribbling basketball
Text banner
Generic button
Vanilla js carousel
Zombie Follow - In Progress
Complimentary hex color calculator
Create amazing captions 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!