Drill-down column chart

Developer
Otto Garcia
Size
2,655 Kb
Views
10,120
  1. Drill-down column chart Previews
  2. Drill-down column chart HTML Codes
  3. Drill-down column chart CSS Codes
  4. Drill-down column chart JS Codes

How do I make an drill-down column chart?

What is a drill-down column chart? How do you make a drill-down column chart? This script and codes were developed by Otto Garcia on 02 December 2022, Friday.

Drill-down column chart Previews
IQ Test

Drill-down column chart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drill-down column chart</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> <script src="js/index.js"></script>
</body>
</html>

Drill-down column chart - Script Codes CSS Codes

#chartdiv { width: 100%; height: 500px;
}

Drill-down column chart - Script Codes JS Codes

var chartData = [ { "category": 2016, "income": 5.2, "url": "#", "description": "click to drill-down", "months": [{ "category": "Enero", "income": 1, "TipoAduana": [ { "category": "Febrero", "income": 2,"NombreAduana":"Central de Aviación","ValorUsd":0.0,"Volumen":0.0,"Anio":2016,"Producto":null,"TipoAduana":"Aérea","Criterio":"Exportaciones","NombreMes":"Febrero","Porcentaje":0} ] }, { "category": "Febrero", "income": 2 }, { "category": "Marzo", "income": 1 }, { "category": "Abril", "income": 3 }, { "category": "Mayo", "income": 2.5 }, { "category": "Junio", "income": 1.1 }, { "category": "Julio", "income": 2.9 }, { "category": "Agosto", "income": 3.5 }, { "category": "Septiembre", "income": 3.1 }, { "category": "Octubre", "income": 1.1 }, { "category": "Noviembre", "income": 1 }, { "category": "Diciembre", "income": 3 }]
}, { "category": 2017, "income": 6.1, "url": "#", "description": "click to drill-down", "months": [{ "category": "Enero", "income": 1 }, { "category": "Febrero", "income": 2 }, { "category": "Marzo", "income": 1 }, { "category": "Abril", "income": 3 }, { "category": "Mayo", "income": 2.5 }, { "category": "Junio", "income": 1.1 }, { "category": "Julio", "income": 2.9 }, { "category": "Agosto", "income": 3.5 }, { "category": "Septiembre", "income": 3.1 }, { "category": "Octubre", "income": 1.1 }, { "category": "Noviembre", "income": 1, }, { "category": "Diciembre", "income": 3 }]
}];
var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "creditsPosition": "top-right", "autoMargins": false, "marginLeft": 30, "marginRight": 8, "marginTop": 10, "marginBottom": 26, "titles": [{ "text": "Yearly data" }], "dataProvider": chartData, "startDuration": 1, "graphs": [{ "alphaField": "alpha", "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span> <br>[[description]]", "dashLengthField": "dashLengthColumn", "fillAlphas": 1, "title": "Income", "type": "column", "valueField": "income", "urlField": "url" }], "categoryField": "category", "categoryAxis": { "gridPosition": "start", "axisAlpha": 0, "tickLength": 0 }
});
chart.addListener("clickGraphItem", function(event) { if ('object' === typeof event.item.dataContext.months) { // set the monthly data for the clicked month event.chart.dataProvider = event.item.dataContext.months; // update the chart title event.chart.titles[0].text = event.item.dataContext.category + ' monthly data'; // let's add a label to go back to yearly data event.chart.addLabel( 35, 20, "< Regresar", undefined, 15, undefined, undefined, undefined, true, 'javascript:resetChart();'); // validate the new data and make the chart animate again event.chart.validateData(); event.chart.animateAgain(); }
if ('object' === typeof event.item.dataContext.TipoAduana) { // set the monthly data for the clicked month event.chart.dataProvider = event.item.dataContext.TipoAduana; // update the chart title event.chart.titles[0].text = event.item.dataContext.category + ' monthly data'; // let's add a label to go back to yearly data event.chart.addLabel( 35, 20, "< Regresar", undefined, 15, undefined, undefined, undefined, true, 'javascript:resetChart();'); // validate the new data and make the chart animate again event.chart.validateData(); event.chart.animateAgain(); }
});
chart.addListener("clickGraphItem", function(event) { if ('object' === typeof event.item.dataContext.months) { // set the monthly data for the clicked month event.chart.dataProvider = event.item.dataContext.subdata; // update the chart title event.chart.titles[1].text = event.item.dataContext.category + ' monthly data'; // let's add a label to go back to yearly data event.chart.addLabel( 35, 20, "< Regresar", undefined, 15, undefined, undefined, undefined, true, 'javascript:resetChart();'); // validate the new data and make the chart animate again event.chart.validateData(); event.chart.animateAgain(); }
});
// function which resets the chart back to yearly data
function resetChart() { chart.dataProvider = chartData; chart.titles[0].text = 'Yearly data'; // remove the "Go back" label chart.allLabels = []; chart.validateData(); chart.animateAgain();
}
Drill-down column chart - Script Codes
Drill-down column chart - Script Codes
Home Page Home
Developer Otto Garcia
Username good886
Uploaded December 02, 2022
Rating 3
Size 2,655 Kb
Views 10,120
Do you need developer help for Drill-down column 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!

Otto Garcia (good886) Script Codes
Name
3D Pie Chart - MATRIZ GENERACION ENERGIA
Automatically create a table of chart data on load
Tipo de Aduana
Map with dynamic Pie charts
Google Map Amcharts
Time-line map with jQuery UI slider
Map usa select state
MAPS GOOGLE MAPS
Capitals map
Loading external CSV data for bubble map
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!