Skip to content

F
fordecyt_2019
Commit 475ac850 authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Functions to create chart series. Disable toggle legend for % charts

parent f816c9f8
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 309 deletions
public/js/centropais_periurbano_charts.js
View file @ 475ac850
......@@ -10,6 +10,81 @@
let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
//let cellbgColor = getComputedStyle(document.body).getPropertyValue("--main-bg-color");
const makeStackedBarSeries = (chart, name, category, value, color) => {
let series = chart.series.push(new am4charts.ColumnSeries());
series.columns.template.width = am4core.percent(80);
series.name = name;
series.dataFields.categoryX = category;
series.dataFields.valueY = value;
series.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series.dataItems.template.locations.categoryX = 0.5;
series.stacked = true;
series.tooltip.pointerOrientation = "vertical";
series.fill = am4core.color(color);
series.stroke = am4core.color(color);
}
const makeStackedBarLineSeries = (chart, name, category, value, barColor, yAxis, lineColor) => {
let barSeries = chart.series.push(new am4charts.ColumnSeries());
barSeries.columns.template.width = am4core.percent(80);
barSeries.name = name;
barSeries.dataFields.categoryX = category;
barSeries.dataFields.valueY = value;
barSeries.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
barSeries.dataItems.template.locations.categoryX = 0.5;
barSeries.stacked = true;
barSeries.tooltip.pointerOrientation = "vertical";
barSeries.fill = am4core.color(barColor);
barSeries.stroke = am4core.color(barColor);
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.name = `% ${name}`;
lineSeries.dataFields.valueY = value;
lineSeries.dataFields.categoryX = category;
lineSeries.dataFields.valueYShow = "totalPercent";
// FIXME: using totalPercent chanhges values when turning series on or off
lineSeries.yAxis = yAxis;
//stackedBarLineLineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries.stroke = am4core.color(lineColor);
lineSeries.strokeWidth = 3;
lineSeries.propertyFields.strokeDasharray = "lineDash";
lineSeries.tooltip.label.textAlign = "middle";
lineSeries.stacked =true;
lineSeries.calculatePercent = true;
let bullet = lineSeries.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color(lineColor); // tooltips grab fill from parent by default
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
let circle = bullet.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#fff");
circle.strokeWidth = 3;
}
const makeLineSeries = (chart, name, value, category, yAxis, color) => {
let series = chart.series.push(new am4charts.LineSeries());
series.name = name;//"San Juan del río - Querétaro";
series.dataFields.valueY = value;
series.dataFields.categoryX = category;
series.yAxis = yAxis;
series.stroke = am4core.color(color);
series.strokeWidth = 3;
series.propertyFields.strokeDasharray = "lineDash";
series.tooltip.label.textAlign = "middle";
let bullet = series.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color(color); // tooltips grab fill from parent by default
bullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]";
// FIXME: using totalPercent chanhges values when turning series on or off`
let circle = bullet.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#fff");
circle.strokeWidth = 3;
}
am4core.ready(function() {
// Themes begin
......@@ -92,67 +167,9 @@ am4core.ready(function() {
stackedBarValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarValueAxis.renderer.labels.template.fontSize = 9;
let stackedBarSeries1 = stackedBarChart.series.push(new am4charts.ColumnSeries());
stackedBarSeries1.columns.template.width = am4core.percent(80);
stackedBarSeries1.name = "Bajo";
stackedBarSeries1.dataFields.categoryX = "category";
stackedBarSeries1.dataFields.valueY = "value1";
stackedBarSeries1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarSeries1.dataItems.template.locations.categoryX = 0.5;
stackedBarSeries1.stacked = true;
stackedBarSeries1.tooltip.pointerOrientation = "vertical";
stackedBarSeries1.fill = am4core.color("#2dc937");
stackedBarSeries1.stroke = am4core.color("#2dc937");
/*let bullet1 = stackedBarSeries.bullets.push(new am4charts.LabelBullet());
bullet1.interactionsEnabled = false;
bullet1.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet1.label.fill = am4core.color("#ffffff");
bullet1.label.fontSize = 9;
bullet1.locationY = 0.5;*/
let stackedBarSeries2 = stackedBarChart.series.push(new am4charts.ColumnSeries());
stackedBarSeries2.columns.template.width = am4core.percent(80);
stackedBarSeries2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarSeries2.name = "Medio";
stackedBarSeries2.dataFields.categoryX = "category";
stackedBarSeries2.dataFields.valueY = "value2";
//stackedBarSeries2.dataFields.valueYShow = "totalPercent";
stackedBarSeries2.dataItems.template.locations.categoryX = 0.5;
stackedBarSeries2.stacked = true;
stackedBarSeries2.tooltip.pointerOrientation = "vertical";
stackedBarSeries2.fill = am4core.color("#e7b416");
stackedBarSeries2.stroke = am4core.color("#e7b416");
/*let bullet2 = stackedBarSeries2.bullets.push(new am4charts.LabelBullet());
bullet2.interactionsEnabled = false;
bullet2.locationY = 0.5;
bullet2.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet2.label.fill = am4core.color("#ffffff");
bullet2.label.fontSize = 9;*/
let stackedBarSeries3 = stackedBarChart.series.push(new am4charts.ColumnSeries());
stackedBarSeries3.columns.template.width = am4core.percent(80);
stackedBarSeries3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarSeries3.name = "Alto";
stackedBarSeries3.dataFields.categoryX = "category";
stackedBarSeries3.dataFields.valueY = "value3";
//stackedBarSeries3.dataFields.valueYShow = "totalPercent";
stackedBarSeries3.dataItems.template.locations.categoryX = 0.5;
stackedBarSeries3.stacked = true;
stackedBarSeries3.tooltip.pointerOrientation = "vertical";
stackedBarSeries3.fill = am4core.color("#c41e3a");
stackedBarSeries3.stroke = am4core.color("#c41e3a");
/*let bullet3 = stackedBarSeries3.bullets.push(new am4charts.LabelBullet());
bullet3.interactionsEnabled = false;
bullet3.locationY = 0.5;
bullet3.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet3.label.fill = am4core.color("#ffffff");
bullet3.label.fontSize = 9;*/
makeStackedBarSeries(stackedBarChart, "Bajo", "category", "value1", "#61ac65");
makeStackedBarSeries(stackedBarChart, "Medio", "category", "value2", "#fcfccc");
makeStackedBarSeries(stackedBarChart, "Alto", "category", "value3", "#b33d6e");
//++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
// FALTA CONSTRUIR QUERY
......@@ -237,143 +254,20 @@ am4core.ready(function() {
stackedBarLinePercentAxis.strictMinMax = true;
stackedBarLinePercentAxis.renderer.grid.template.disabled = true;
stackedBarLinePercentAxis.numberFormatter = new am4core.NumberFormatter();
stackedBarLinePercentAxis.numberFormatter.numberFormat = "#'%'"
stackedBarLinePercentAxis.numberFormatter.numberFormat = "#'%'";
stackedBarLinePercentAxis.cursorTooltipEnabled = false;
stackedBarLinePercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
stackedBarLinePercentAxis.renderer.labels.template.fontSize = 9;
makeStackedBarLineSeries(stackedBarLineChart, "Bajo", "category", "value1", "#f8caa0", stackedBarLinePercentAxis, "#D197FA");
makeStackedBarLineSeries(stackedBarLineChart, "Medio", "category", "value2", "#cf8a4f", stackedBarLinePercentAxis, "#844DDF");
makeStackedBarLineSeries(stackedBarLineChart, "Alto", "category", "value3", "#93592a", stackedBarLinePercentAxis, "#351591");
let stackedBarLineSeries1 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
stackedBarLineSeries1.columns.template.width = am4core.percent(80);
stackedBarLineSeries1.name = "Bajo";
stackedBarLineSeries1.dataFields.categoryX = "category";
stackedBarLineSeries1.dataFields.valueY = "value1";
stackedBarLineSeries1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarLineSeries1.dataItems.template.locations.categoryX = 0.5;
stackedBarLineSeries1.stacked = true;
stackedBarLineSeries1.tooltip.pointerOrientation = "vertical";
stackedBarLineSeries1.fill = am4core.color("#f8caa0");
stackedBarLineSeries1.stroke = am4core.color("#f8caa0");
/*let bullet1 = stackedBarLineSeries1.bullets.push(new am4charts.LabelBullet());
bullet1.interactionsEnabled = false;
bullet1.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet1.label.fill = am4core.color("#ffffff");
bullet1.label.fontSize = 9;
bullet1.locationY = 0.5;*/
let stackedBarLineSeries2 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
stackedBarLineSeries2.columns.template.width = am4core.percent(80);
stackedBarLineSeries2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarLineSeries2.name = "Medio";
stackedBarLineSeries2.dataFields.categoryX = "category";
stackedBarLineSeries2.dataFields.valueY = "value2";
//stackedBarLineSeries2.dataFields.valueYShow = "totalPercent";
stackedBarLineSeries2.dataItems.template.locations.categoryX = 0.5;
stackedBarLineSeries2.stacked = true;
stackedBarLineSeries2.tooltip.pointerOrientation = "vertical";
stackedBarLineSeries2.fill = am4core.color("#cf8a4f");
stackedBarLineSeries2.stroke = am4core.color("#cf8a4f");
/*let bullet2 = stackedBarLineSeries2.bullets.push(new am4charts.LabelBullet());
bullet2.interactionsEnabled = false;
bullet2.locationY = 0.5;
bullet2.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet2.label.fill = am4core.color("#ffffff");
bullet2.label.fontSize = 9;*/
let stackedBarLineSeries3 = stackedBarLineChart.series.push(new am4charts.ColumnSeries());
stackedBarLineSeries3.columns.template.width = am4core.percent(80);
stackedBarLineSeries3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
stackedBarLineSeries3.name = "Alto";
stackedBarLineSeries3.dataFields.categoryX = "category";
stackedBarLineSeries3.dataFields.valueY = "value3";
//stackedBarLineSeries3.dataFields.valueYShow = "totalPercent";
stackedBarLineSeries3.dataItems.template.locations.categoryX = 0.5;
stackedBarLineSeries3.stacked = true;
stackedBarLineSeries3.tooltip.pointerOrientation = "vertical";
stackedBarLineSeries3.fill = am4core.color("#93592a");
stackedBarLineSeries3.stroke = am4core.color("#93592a");
/*let bullet3 = stackedBarLineSeries3.bullets.push(new am4charts.LabelBullet());
bullet3.interactionsEnabled = false;
bullet3.locationY = 0.5;
bullet3.label.text = "{valueY.formatNumber('#,###.00')} Ha";
bullet3.label.fill = am4core.color("#ffffff");
bullet3.label.fontSize = 9;*/
let stackedBarLineLineSeries1 = stackedBarLineChart.series.push(new am4charts.LineSeries());
stackedBarLineLineSeries1.name = "% Bajo";
stackedBarLineLineSeries1.dataFields.valueY = "value1";
stackedBarLineLineSeries1.dataFields.categoryX = "category";
stackedBarLineLineSeries1.dataFields.valueYShow = "totalPercent";
// FIXME: using totalPercent chanhges values when turning series on or off
stackedBarLineLineSeries1.yAxis = stackedBarLinePercentAxis;
//stackedBarLineLineSeries.dataItems.template.locations.categoryX = 0.5;
stackedBarLineLineSeries1.stroke = am4core.color("#D197FA");
stackedBarLineLineSeries1.strokeWidth = 3;
stackedBarLineLineSeries1.propertyFields.strokeDasharray = "lineDash";
stackedBarLineLineSeries1.tooltip.label.textAlign = "middle";
stackedBarLineLineSeries1.stacked =true;
let stackedBarLineBullet = stackedBarLineLineSeries1.bullets.push(new am4charts.Bullet());
stackedBarLineBullet.fill = am4core.color("#D197FA"); // tooltips grab fill from parent by default
stackedBarLineBullet.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"
let stackedBarLineBulletCirlce1 = stackedBarLineBullet.createChild(am4core.Circle);
stackedBarLineBulletCirlce1.radius = 4;
stackedBarLineBulletCirlce1.fill = am4core.color("#fff");
stackedBarLineBulletCirlce1.strokeWidth = 3;
let stackedBarLineLineSeries2 = stackedBarLineChart.series.push(new am4charts.LineSeries());
stackedBarLineLineSeries2.name = "% Medio";
stackedBarLineLineSeries2.dataFields.valueY = "value2";
stackedBarLineLineSeries2.dataFields.categoryX = "category";
stackedBarLineLineSeries2.dataFields.valueYShow = "totalPercent";
stackedBarLineLineSeries2.yAxis = stackedBarLinePercentAxis;
//stackedBarLineLineSeries2.dataItems.template.locations.categoryX = 0.5;
stackedBarLineLineSeries2.stroke = am4core.color("#844DDF");
stackedBarLineLineSeries2.strokeWidth = 3;
stackedBarLineLineSeries2.propertyFields.strokeDasharray = "lineDash";
stackedBarLineLineSeries2.tooltip.label.textAlign = "middle";
stackedBarLineLineSeries2.stacked =true;
let stackedBarLineBullet2 = stackedBarLineLineSeries2.bullets.push(new am4charts.Bullet());
stackedBarLineBullet2.fill = am4core.color("#844DDF"); // tooltips grab fill from parent by default
stackedBarLineBullet2.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let stackedBarLineBulletCircle2 = stackedBarLineBullet2.createChild(am4core.Circle);
stackedBarLineBulletCircle2.radius = 4;
stackedBarLineBulletCircle2.fill = am4core.color("#fff");
stackedBarLineBulletCircle2.strokeWidth = 3;
let stackedBarLineLineSeries3 = stackedBarLineChart.series.push(new am4charts.LineSeries());
stackedBarLineLineSeries3.name = "% Alto";
stackedBarLineLineSeries3.dataFields.valueY = "value3";
stackedBarLineLineSeries3.dataFields.categoryX = "category";
stackedBarLineLineSeries3.dataFields.valueYShow = "totalPercent";
stackedBarLineLineSeries3.yAxis = stackedBarLinePercentAxis;
//stackedBarLineLineSeries.dataItems.template.locations.categoryX = 0.5;
stackedBarLineLineSeries3.stroke = am4core.color("#351591");
stackedBarLineLineSeries3.strokeWidth = 3;
stackedBarLineLineSeries3.propertyFields.strokeDasharray = "lineDash";
stackedBarLineLineSeries3.tooltip.label.textAlign = "middle";
stackedBarLineLineSeries3.stacked =true;
let stackedBarLineBullet3 = stackedBarLineLineSeries3.bullets.push(new am4charts.Bullet());
stackedBarLineBullet3.fill = am4core.color("#351591"); // tooltips grab fill from parent by default
stackedBarLineBullet3.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let stackedBarLineCircle3 = stackedBarLineBullet3.createChild(am4core.Circle);
stackedBarLineCircle3.radius = 4;
stackedBarLineCircle3.fill = am4core.color("#fff");
stackedBarLineCircle3.strokeWidth = 3;
//chart.scrollbarX = new am4core.Scrollbar();
// Use this to avoid turning on or off legend items.
// Remove if use of percentTotal is fixed in series
stackedBarLineChart.legend.itemContainers.template.clickable = false;
stackedBarLineChart.legend.itemContainers.template.focusable = false;
stackedBarLineChart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
//++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
......@@ -468,119 +362,19 @@ am4core.ready(function() {
lineChartValueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
lineChartValueAxis.renderer.labels.template.fontSize = 9;
let lineLineSeries1 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries1.name = "T7";//"San Juan del río - Querétaro";
lineLineSeries1.dataFields.valueY = "Tramo7";
lineLineSeries1.dataFields.categoryX = "category";
lineLineSeries1.yAxis = lineChartValueAxis;
lineLineSeries1.stroke = am4core.color("#fddfb9");
lineLineSeries1.strokeWidth = 3;
lineLineSeries1.propertyFields.strokeDasharray = "lineDash";
lineLineSeries1.tooltip.label.textAlign = "middle";
let lineLinebullet1 = lineLineSeries1.bullets.push(new am4charts.Bullet());
lineLinebullet1.fill = am4core.color("#fddfb9"); // tooltips grab fill from parent by default
lineLinebullet1.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff][/]"
let lineLineCircle1 = lineLinebullet1.createChild(am4core.Circle);
lineLineCircle1.radius = 4;
lineLineCircle1.fill = am4core.color("#fff");
lineLineCircle1.strokeWidth = 3;
let lineLineSeries2 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries2.name = "T8";//"Querétaro - Celaya";
lineLineSeries2.dataFields.valueY = "Tramo8";
lineLineSeries2.dataFields.categoryX = "category";
lineLineSeries2.yAxis = lineChartValueAxis;
lineLineSeries2.stroke = am4core.color("#fb9a99");
lineLineSeries2.strokeWidth = 3;
lineLineSeries2.propertyFields.strokeDasharray = "lineDash";
lineLineSeries2.tooltip.label.textAlign = "middle";
let lineLineBullet2 = lineLineSeries2.bullets.push(new am4charts.Bullet());
lineLineBullet2.fill = am4core.color("#fb9a99"); // tooltips grab fill from parent by default
lineLineBullet2.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle2 = lineLineBullet2.createChild(am4core.Circle);
lineLineCircle2.radius = 4;
lineLineCircle2.fill = am4core.color("#fff");
lineLineCircle2.strokeWidth = 3;
let lineLineSeries3 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries3.name = "T9";//"Celaya - Salamanca";
lineLineSeries3.dataFields.valueY = "Tramo9";
lineLineSeries3.dataFields.categoryX = "category";
lineLineSeries3.yAxis = lineChartValueAxis;
lineLineSeries3.stroke = am4core.color("#33a09b");
lineLineSeries3.strokeWidth = 3;
lineLineSeries3.propertyFields.strokeDasharray = "lineDash";
lineLineSeries3.tooltip.label.textAlign = "middle";
let lineLineBullet3 = lineLineSeries3.bullets.push(new am4charts.Bullet());
lineLineBullet3.fill = am4core.color("#33a09b"); // tooltips grab fill from parent by default
lineLineBullet3.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle3 = lineLineBullet3.createChild(am4core.Circle);
lineLineCircle3.radius = 4;
lineLineCircle3.fill = am4core.color("#fff");
lineLineCircle3.strokeWidth = 3;
let lineLineSeries4 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries4.name = "T10";//"Salamanca - Irapuato";
lineLineSeries4.dataFields.valueY = "Tramo10";
lineLineSeries4.dataFields.categoryX = "category";
lineLineSeries4.yAxis = lineChartValueAxis;
lineLineSeries4.stroke = am4core.color("#de6eb4");
lineLineSeries4.strokeWidth = 3;
lineLineSeries4.propertyFields.strokeDasharray = "lineDash";
lineLineSeries4.tooltip.label.textAlign = "middle";
let lineLineBullet4 = lineLineSeries4.bullets.push(new am4charts.Bullet());
lineLineBullet4.fill = am4core.color("#de6eb4"); // tooltips grab fill from parent by default
lineLineBullet4.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle4 = lineLineBullet4.createChild(am4core.Circle);
lineLineCircle4.fill = am4core.color("#fff");
lineLineCircle4.radius = 4;
lineLineCircle4.strokeWidth = 3;
let lineLineSeries5 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries5.name = "T11";//"Irapuato - León";
lineLineSeries5.dataFields.valueY = "Tramo11";
lineLineSeries5.dataFields.categoryX = "category";
lineLineSeries5.yAxis = lineChartValueAxis;
lineLineSeries5.stroke = am4core.color("#4db0ec");
lineLineSeries5.strokeWidth = 3;
lineLineSeries5.propertyFields.strokeDasharray = "lineDash";
lineLineSeries5.tooltip.label.textAlign = "middle";
let lineLineBullet5 = lineLineSeries5.bullets.push(new am4charts.Bullet());
lineLineBullet5.fill = am4core.color("#4db0ec"); // tooltips grab fill from parent by default
lineLineBullet5.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle5 = lineLineBullet5.createChild(am4core.Circle);
lineLineCircle5.radius = 4;
lineLineCircle5.fill = am4core.color("#fff");
lineLineCircle5.strokeWidth = 3;
let lineLineSeries6 = lineChart.series.push(new am4charts.LineSeries());
lineLineSeries6.name = "T12"; //"León - San Francisco del rincón";
lineLineSeries6.dataFields.valueY = "Tramo12";
lineLineSeries6.dataFields.categoryX = "category";
lineLineSeries6.yAxis = lineChartValueAxis;
lineLineSeries6.stroke = am4core.color("#2be829");
lineLineSeries6.strokeWidth = 3;
lineLineSeries6.propertyFields.strokeDasharray = "lineDash";
lineLineSeries6.tooltip.label.textAlign = "middle";
let lineLineBullet6 = lineLineSeries6.bullets.push(new am4charts.Bullet());
lineLineBullet6.fill = am4core.color("#2be829"); // tooltips grab fill from parent by default
lineLineBullet6.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
let lineLineCircle6 = lineLineBullet6.createChild(am4core.Circle);
lineLineCircle6.radius = 4;
lineLineCircle6.fill = am4core.color("#fff");
lineLineCircle6.strokeWidth = 3;
//chart.scrollbarX = new am4core.Scrollbar();
makeLineSeries(lineChart, "T7", "Tramo7", "category", lineChartValueAxis, "#fddfb9");
makeLineSeries(lineChart, "T8", "Tramo8", "category", lineChartValueAxis, "#fb9a99");
makeLineSeries(lineChart, "T9", "Tramo9", "category", lineChartValueAxis, "#33a09b");
makeLineSeries(lineChart, "T10", "Tramo10", "category", lineChartValueAxis, "#de6eb4");
makeLineSeries(lineChart, "T11", "Tramo11", "category", lineChartValueAxis, "#4db0ec");
makeLineSeries(lineChart, "T12", "Tramo12", "category", lineChartValueAxis, "#2be829");
// Use this to avoid turning on or off legend items.
// Remove if use of percentTotal is fixed in series
lineChart.legend.itemContainers.template.clickable = false;
lineChart.legend.itemContainers.template.focusable = false;
lineChart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
// Create bar + percentage chart
let barPercentChart = am4core.create("bottomRightChart", am4charts.XYChart);
......@@ -597,6 +391,7 @@ am4core.ready(function() {
/* Create axes */
let barPercentCategoryAxis = barPercentChart.xAxes.push(new am4charts.CategoryAxis());
barPercentCategoryAxis.dataFields.category = "region";
// FIXME: axis labels are too big
barPercentCategoryAxis.renderer.minGridDistance = 30;
barPercentCategoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barPercentCategoryAxis.renderer.labels.template.fontSize = 9;
......@@ -614,7 +409,7 @@ am4core.ready(function() {
barPercentAxis.strictMinMax = true;
barPercentAxis.renderer.grid.template.disabled = true;
barPercentAxis.numberFormatter = new am4core.NumberFormatter();
barPercentAxis.numberFormatter.numberFormat = "#'%'"
barPercentAxis.numberFormatter.numberFormat = "#'%'";
barPercentAxis.cursorTooltipEnabled = false;
barPercentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
barPercentAxis.renderer.labels.template.fontSize = 9;
......@@ -625,7 +420,7 @@ am4core.ready(function() {
barPercentColumnSeries.dataFields.valueY = "has";
barPercentColumnSeries.dataFields.categoryX = "region";
barPercentColumnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} Ha[/] [#fff]{additional}[/]"
barPercentColumnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} \n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} Ha[/] [#fff]{additional}[/]";
barPercentColumnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
barPercentColumnSeries.columns.template.propertyFields.stroke = "stroke";
barPercentColumnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
......@@ -647,7 +442,7 @@ am4core.ready(function() {
let barPercentBullet = barPercentLineSeries.bullets.push(new am4charts.Bullet());
barPercentBullet.fill = am4core.color("#c41e3a"); // tooltips grab fill from parent by default
barPercentBullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} %[/] [#fff]{additional}[/]"
barPercentBullet.tooltipText = "[#fff font-size: 15px]{name}\n en {categoryX}:\n[/][#fff font-size: 20px]{valueY} %[/] [#fff]{additional}[/]";
let barPercentCircle = barPercentBullet.createChild(am4core.Circle);
barPercentCircle.radius = 4;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment