Automatically create a table of chart data on load

Developer
Otto Garcia
Size
2,879 Kb
Views
18,216
  1. Automatically create a table of chart data on load Previews
  2. Automatically create a table of chart data on load HTML Codes
  3. Automatically create a table of chart data on load CSS Codes
  4. Automatically create a table of chart data on load JS Codes

How do I make an automatically create a table of chart data on load?

What is a automatically create a table of chart data on load? How do you make a automatically create a table of chart data on load? This script and codes were developed by Otto Garcia on 09 December 2022, Friday.

Automatically create a table of chart data on load Previews
IQ Test

Automatically create a table of chart data on load - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Automatically create a table of chart data on load</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="chartdata"></div> <script src="js/index.js"></script>
</body>
</html>

Automatically create a table of chart data on load - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato);
body { font-family: Lato; font-size: 15px;
}
#chartdiv { width: 900px; max-width: 100%; height: 300px; border: 2px solid #eee; border-bottom: none;
}
#chartdata { width: 900px; max-width: 100%; border: 2px solid #eee;
}
#chartdata table { width: 100%;
}
#chartdata table th, #chartdata table td { text-align: center; padding: 5px 7px;
}
#chartdata table th { background: #999; color: #fff;
}
#chartdata table td { border-bottom: 1px solid #eee;
}
#chartdata table td.row-title { font-weight: bold;
}

Automatically create a table of chart data on load - Script Codes JS Codes

/** * A plugin to automatically creata a data table for the chart * The plugin will check if the chart config has the following setting set: "dataTableId" */
AmCharts.addInitHandler(function(chart) { // check if export to table is enabled if (chart.dataTableId === undefined) return; // get chart data var data = chart.dataProvider; // create a table var holder = document.getElementById(chart.dataTableId); var table = document.createElement("table"); holder.appendChild(table); var tr, td; // add first row for (var x = 0; x < chart.dataProvider.length; x++) { // first row if (x == 0) { tr = document.createElement("tr"); table.appendChild(tr); td = document.createElement("th"); td.innerHTML = chart.categoryAxis.title; tr.appendChild(td); for (var i = 0; i < chart.graphs.length; i++) { td = document.createElement('th'); td.innerHTML = chart.graphs[i].title; tr.appendChild(td); } } // add rows tr = document.createElement("tr"); table.appendChild(tr); td = document.createElement("td"); td.className = "row-title"; td.innerHTML = chart.dataProvider[x][chart.categoryField]; tr.appendChild(td); for (var i = 0; i < chart.graphs.length; i++) { td = document.createElement('td'); td.innerHTML = chart.dataProvider[x][chart.graphs[i].valueField]; tr.appendChild(td); } }
}, ["serial"]);
/** * Define chart data */
var chartData = [{ "year": 1994, "cars": 1587, "motorcycles": 650, "bicycles": 121
}, { "year": 1995, "cars": 1567, "motorcycles": 683, "bicycles": 146
}, { "year": 1996, "cars": 1617, "motorcycles": 691, "bicycles": 138
}, { "year": 1997, "cars": 1630, "motorcycles": 642, "bicycles": 127
}, { "year": 1998, "cars": 1660, "motorcycles": 699, "bicycles": 105
}, { "year": 1999, "cars": 1683, "motorcycles": 721, "bicycles": 109
}, { "year": 2000, "cars": 1691, "motorcycles": 737, "bicycles": 112
}, { "year": 2001, "cars": 1298, "motorcycles": 680, "bicycles": 101
}, { "year": 2002, "cars": 1275, "motorcycles": 664, "bicycles": 97
}, { "year": 2003, "cars": 1246, "motorcycles": 648, "bicycles": 93
}, { "year": 2004, "cars": 1218, "motorcycles": 637, "bicycles": 101
}, { "year": 2005, "cars": 1213, "motorcycles": 633, "bicycles": 87
}, { "year": 2006, "cars": 1199, "motorcycles": 621, "bicycles": 79
}, { "year": 2007, "cars": 1110, "motorcycles": 210, "bicycles": 81
}, { "year": 2008, "cars": 1165, "motorcycles": 232, "bicycles": 75
}, { "year": 2009, "cars": 1145, "motorcycles": 219, "bicycles": 88
}, { "year": 2010, "cars": 1163, "motorcycles": 201, "bicycles": 82
}, { "year": 2011, "cars": 1180, "motorcycles": 285, "bicycles": 87
}, { "year": 2012, "cars": 1159, "motorcycles": 277, "bicycles": 71
}];
var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "dataProvider": chartData, "dataTableId": "chartdata", "categoryField": "year", "categoryAxis": { "gridAlpha": 0.07, "axisColor": "#DADADA", "startOnAxis": false, "title": "Year" }, "valueAxes": [{ "stackType": "regular", "gridAlpha": 0.07, "title": "Traffic incidents" }], "graphs": [{ "type": "column", "title": "Cars", "valueField": "cars", "lineAlpha": 0, "fillAlphas": 0.6 }, { "type": "column", "title": "Motorcycles", "valueField": "motorcycles", "lineAlpha": 0, "fillAlphas": 0.6 }, { "type": "column", "title": "Bicycles", "valueField": "bicycles", "lineAlpha": 0, "fillAlphas": 0.6 }], "chartCursor": { "cursorAlpha": 0 }
});
Automatically create a table of chart data on load - Script Codes
Automatically create a table of chart data on load - Script Codes
Home Page Home
Developer Otto Garcia
Username good886
Uploaded December 09, 2022
Rating 3
Size 2,879 Kb
Views 18,216
Do you need developer help for Automatically create a table of chart data on load?

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!

Otto Garcia (good886) Script Codes
Name
Drill-down column chart
SELECTIVO ADUANAS
Grouped countries map
Mensual doble grafica
TABLA DINAMICA CSV AMCHARTS
A Pen by Otto Garcia
Map with dynamic Pie charts
Tipo de Aduana
Chart With Gaps In Data
Google Map Amcharts
Create amazing marketing copy 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!