Skip to content

F
fordecyt_2019
Commit d85f55ff authored by Tania Gómez's avatar Tania Gómez
Browse files
Options

load other charts

parent e01a47e0
Show whitespace changes
Inline Side-by-side
Showing with 554 additions and 47 deletions
public/centropais/index.html
View file @ d85f55ff
...@@ -88,6 +88,12 @@ ...@@ -88,6 +88,12 @@
<div id="barChart"></div> <div id="barChart"></div>
</div> </div>
</div> </div>
<div class="col" id="topLeftChart">
<div class="row h-100">
</div>
</div>
</div> </div>
<div class="row h-50"> <div class="row h-50">
......
public/js/centropais_periurbano_charts.js
View file @ d85f55ff
...@@ -92,77 +92,578 @@ am4core.ready(function() { ...@@ -92,77 +92,578 @@ am4core.ready(function() {
}); // end am4core.ready() }); // end am4core.ready()
//------------------------------prueba para barras apiladas //++++++++++++++++++++++++++++++++++++++++++++++++++++++BARRAS SEMAFORO++
/*
FALTA VER DE QUÉ TABLA VIENEN ESTOS DATOS Y ELEGIR LA VERSION EN PIXELES
Y CONSTRUIR EL QUERY
*/
am4core.ready(function() {
var chart = am4core.create("odChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/*
let table = "periurbanoBajio";
let query = `${baseUrl}/query/${table}?columns=region,total15/1000 as T15,total16/1000 as T16,total17/1000 as T17,total18/1000 as T18,total19/1000 as T19,total20/1000 as T20,&filter=id=6`;
d3.json(query).then(d => chart.data = d);
*/
let title = chart.titles.create();
title.text = "Grado de urbanización en la RU-CMCP (número de pixeles)";
title.fontSize = 9;
title.fill = am4core.color(mainTextColor);
chart.data = [
{
category: "2015",
value1: 21750.100923,
value2: 3124.799027,
value3: 1575.434647
},
{
category: "2016",
value1: 24659.53423,
value2: 3621.838793,
value3: 1939.124265
},
{
category: "2017",
value1: 27560.13116,
value2: 4177.560407,
value3: 2393.056475
},
{
category: "2018",
value1: 30374.679993,
value2: 4719.515675,
value3: 2854.437993
},
{
category: "2019",
value1: 32656.93783,
value2: 5188.035213,
value3: 3357.159708
},
{
category: "2020",
value1: 34305.410194,
value2: 5602.741586,
value3: 3789.051441
}
];
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
//valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9;
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.name = "Bajo";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";
series1.fill = am4core.color("#2dc937");
series1.stroke = am4core.color("#2dc937");
/*var bullet1 = series1.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;*/
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series2.name = "Medio";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
//series2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true;
series2.tooltip.pointerOrientation = "vertical";
series2.fill = am4core.color("#e7b416");
series2.stroke = am4core.color("#e7b416");
/*var bullet2 = series2.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;*/
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series3.name = "Alto";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
//series3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true;
series3.tooltip.pointerOrientation = "vertical";
series3.fill = am4core.color("#c41e3a");
series3.stroke = am4core.color("#c41e3a");
/*var bullet3 = series3.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;*/
}); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++ BARRAS CAFES Y LINEAS MORADAS APILADAS ++++++++++++++++++
// FALTA CONSTRUIR QUERY
am4core.ready(function() { am4core.ready(function() {
// Themes begin // Themes begin
am4core.useTheme(am4themes_animated); am4core.useTheme(am4themes_animated);
// Themes end // Themes end
var bchart = am4core.create("topChart", am4charts.XYChart); var chart = am4core.create("topLeftChart", am4charts.XYChart);
bchart.hiddenState.properties.opacity = 0; // this creates initial fade-in chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/*
let table = "periurbanoBajio"; let table = "periurbanoBajio";
let query = `${baseUrl}/query/${table}?columns=region,total15,total16,total17,total18,total19,total20&filter=id=6`; let query = `${baseUrl}/query/${table}?columns=region,grbajo15/1000 as b15,grmedio15/1000 as b16,gralto15/1000 as a15 .... &filter=id=6`;
d3.json(query).then(d => bchart.data = d); d3.json(query).then(d => chart.data = d);
*/
let title = chart.titles.create();
title.text = "Evolución del grado de urbanización en el periurbano del \n Corredor del Bajío en extensión y proporción";
title.fontSize = 9;
title.fill = am4core.color(mainTextColor);
/*bchart.data = [ chart.data = [
{ {
category: "One", category: "2015",
value1: 1, value1: 21750.100923,
value2: 5, value2: 3124.799027,
value3: 3 value3: 1575.434647
}, },
{ {
category: "Two", category: "2016",
value1: 2, value1: 24659.53423,
value2: 5, value2: 3621.838793,
value3: 3 value3: 1939.124265
}, },
{ {
category: "Three", category: "2017",
value1: 3, value1: 27560.13116,
value2: 5, value2: 4177.560407,
value3: 4 value3: 2393.056475
}, },
{ {
category: "Four", category: "2018",
value1: 4, value1: 30374.679993,
value2: 5, value2: 4719.515675,
value3: 6 value3: 2854.437993
}, },
{ {
category: "Five", category: "2019",
value1: 3, value1: 32656.93783,
value2: 5, value2: 5188.035213,
value3: 4 value3: 3357.159708
}, },
{ {
category: "Six", category: "2020",
value1: 2, value1: 34305.410194,
value2: 13, value2: 5602.741586,
value3: 1 value3: 3789.051441
} }
];*/ ];
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
//valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9;
/* Create secondary value axis */
let percentAxis = chart.yAxes.push(new am4charts.ValueAxis());
percentAxis.renderer.opposite = true;
percentAxis.calculateTotals = true;
percentAxis.min = 50;
percentAxis.max = 110;
percentAxis.strictMinMax = true;
percentAxis.renderer.grid.template.disabled = true;
percentAxis.numberFormatter = new am4core.NumberFormatter();
percentAxis.numberFormatter.numberFormat = "#'%'"
percentAxis.cursorTooltipEnabled = false;
percentAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
percentAxis.renderer.labels.template.fontSize = 9;
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.name = "Bajo";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.tooltipText ="{name}: {valueY.formatNumber('#,###.00')} Ha";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";
series1.fill = am4core.color("#f8caa0");
series1.stroke = am4core.color("#f8caa0");
/*var bullet1 = series1.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;*/
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series2.name = "Medio";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
//series2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true;
series2.tooltip.pointerOrientation = "vertical";
series2.fill = am4core.color("#cf8a4f");
series2.stroke = am4core.color("#cf8a4f");
/*var bullet2 = series2.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;*/
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.formatNumber('#,###.00')} Ha";
series3.name = "Alto";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
//series3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true;
series3.tooltip.pointerOrientation = "vertical";
series3.fill = am4core.color("#93592a");
series3.stroke = am4core.color("#93592a");
/*var bullet3 = series3.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;*/
var lineSeries1 = chart.series.push(new am4charts.LineSeries());
lineSeries1.name = "% Bajo";
lineSeries1.dataFields.valueY = "value1";
lineSeries1.dataFields.categoryX = "category";
lineSeries1.dataFields.valueYShow = "totalPercent";
lineSeries1.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries1.stroke = am4core.color("#D197FA");
lineSeries1.strokeWidth = 3;
lineSeries1.propertyFields.strokeDasharray = "lineDash";
lineSeries1.tooltip.label.textAlign = "middle";
lineSeries1.stacked =true;
var bullet = lineSeries1.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#D197FA"); // 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][/]"
var circle11 = bullet.createChild(am4core.Circle);
circle11.radius = 4;
circle11.fill = am4core.color("#fff");
circle11.strokeWidth = 3;
var lineSeries2 = chart.series.push(new am4charts.LineSeries());
lineSeries2.name = "% Medio";
lineSeries2.dataFields.valueY = "value2";
lineSeries2.dataFields.categoryX = "category";
lineSeries2.dataFields.valueYShow = "totalPercent";
lineSeries2.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries2.stroke = am4core.color("#844DDF");
lineSeries2.strokeWidth = 3;
lineSeries2.propertyFields.strokeDasharray = "lineDash";
lineSeries2.tooltip.label.textAlign = "middle";
lineSeries2.stacked =true;
var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet());
bullet22.fill = am4core.color("#844DDF"); // tooltips grab fill from parent by default
bullet22.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle22 = bullet22.createChild(am4core.Circle);
circle22.radius = 4;
circle22.fill = am4core.color("#fff");
circle22.strokeWidth = 3;
var lineSeries3 = chart.series.push(new am4charts.LineSeries());
lineSeries3.name = "% Alto";
lineSeries3.dataFields.valueY = "value3";
lineSeries3.dataFields.categoryX = "category";
lineSeries3.dataFields.valueYShow = "totalPercent";
lineSeries3.yAxis = percentAxis;
//lineSeries.dataItems.template.locations.categoryX = 0.5;
lineSeries3.stroke = am4core.color("#351591");
lineSeries3.strokeWidth = 3;
lineSeries3.propertyFields.strokeDasharray = "lineDash";
lineSeries3.tooltip.label.textAlign = "middle";
lineSeries3.stacked =true;
var bullet33 = lineSeries3.bullets.push(new am4charts.Bullet());
bullet33.fill = am4core.color("#351591"); // tooltips grab fill from parent by default
bullet33.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle33 = bullet33.createChild(am4core.Circle);
circle33.radius = 4;
circle33.fill = am4core.color("#fff");
circle33.strokeWidth = 3;
//chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
//++++++++++++++++++++++++++++++++++++++++++++ HISTORICO POR TRAMOS ++++++++++++++++++
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("bottomLeftChart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
/*
let table = "periurbanoBajio";
let query = `${baseUrl}/query/${table}?columns=region,total15/1000 as T15,total16/1000 as T16,total17/1000 as T17,total18/1000 as T18,total19/1000 as T19,total20/1000 as T20,&filter=id>6&id<13&sort=inc desc`;
d3.json(query).then(d => chart.data = d);
*/
let title = chart.titles.create();
title.text = "Crecimiento del medio construido en 6 tramos del Corredor del Bajío";
title.fontSize = 9;
title.fill = am4core.color(mainTextColor);
chart.data = [
{
category: "2015",
Tramo7: 3565.151797,
Tramo8: 4402.997137,
Tramo9: 2982.665968,
Tramo10: 1571.134834,
Tramo11: 3909.316004,
Tramo12: 657.480063
},
{
category: "2016",
Tramo7: 3929.417937,
Tramo8: 4779.702192,
Tramo9: 3477.272593,
Tramo10: 1880.688948,
Tramo11: 4687.034719,
Tramo12: 808.189062
},
{
category: "2017",
Tramo7: 4344.194901,
Tramo8: 5290.03468,
Tramo9: 4184.257241,
Tramo10:2168.042568,
Tramo11:5354.295853,
Tramo12:946.076199
},
{
category: "2018",
Tramo7: 4712.061739,
Tramo8: 5798.574005,
Tramo9: 4904.355871,
Tramo10: 2463.225593,
Tramo11: 6065.936419,
Tramo12: 1077.998678
},
{
category: "2019",
Tramo7: 5004.426599,
Tramo8: 6112.824022,
Tramo9: 5397.632509,
Tramo10: 2775.836758,
Tramo11: 6783.400364,
Tramo12: 1238.459944
},
{
category: "2020",
Tramo7: 5364.43353,
Tramo8: 6427.625949,
Tramo9: 5722.221469,
Tramo10: 2972.499167,
Tramo11: 7299.502497,
Tramo12: 1338.796796
}
];
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 10;
chart.legend.labels.template.fill = am4core.color(mainTextColor);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
categoryAxis.renderer.labels.template.fontSize = 11;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
//valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50;
valueAxis.renderer.labels.template.fill = am4core.color(mainTextColor);
valueAxis.renderer.labels.template.fontSize = 9;
var lineSeries1 = chart.series.push(new am4charts.LineSeries());
lineSeries1.name = "T7";//"San Juan del río - Querétaro";
lineSeries1.dataFields.valueY = "Tramo7";
lineSeries1.dataFields.categoryX = "category";
lineSeries1.yAxis = valueAxis;
lineSeries1.stroke = am4core.color("#fddfb9");
lineSeries1.strokeWidth = 3;
lineSeries1.propertyFields.strokeDasharray = "lineDash";
lineSeries1.tooltip.label.textAlign = "middle";
var bullet = lineSeries1.bullets.push(new am4charts.Bullet());
bullet.fill = am4core.color("#fddfb9"); // 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][/]"
var circle11 = bullet.createChild(am4core.Circle);
circle11.radius = 4;
circle11.fill = am4core.color("#fff");
circle11.strokeWidth = 3;
var dateAxis = bchart.xAxes.push(new am4charts.DateAxis()); var lineSeries2 = chart.series.push(new am4charts.LineSeries());
dateAxis.renderer.minGridDistance = 60; lineSeries2.name = "T8";//"Querétaro - Celaya";
lineSeries2.dataFields.valueY = "Tramo8";
lineSeries2.dataFields.categoryX = "category";
lineSeries2.yAxis = valueAxis;
lineSeries2.stroke = am4core.color("#fb9a99");
lineSeries2.strokeWidth = 3;
lineSeries2.propertyFields.strokeDasharray = "lineDash";
lineSeries2.tooltip.label.textAlign = "middle";
var valueAxis = bchart.yAxes.push(new am4charts.ValueAxis()); var bullet22 = lineSeries2.bullets.push(new am4charts.Bullet());
bullet22.fill = am4core.color("#fb9a99"); // tooltips grab fill from parent by default
bullet22.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle22 = bullet22.createChild(am4core.Circle);
circle22.radius = 4;
circle22.fill = am4core.color("#fff");
circle22.strokeWidth = 3;
// Create series var lineSeries3 = chart.series.push(new am4charts.LineSeries());
var series = bchart.series.push(new am4charts.LineSeries()); lineSeries3.name = "T9";//"Celaya - Salamanca";
series.dataFields.valueY = "total15"; lineSeries3.dataFields.valueY = "Tramo9";
series.dataFields.dateX = "total15"; lineSeries3.dataFields.categoryX = "category";
series.tooltipText = "{region}" lineSeries3.yAxis = valueAxis;
lineSeries3.stroke = am4core.color("#33a09b");
lineSeries3.strokeWidth = 3;
lineSeries3.propertyFields.strokeDasharray = "lineDash";
lineSeries3.tooltip.label.textAlign = "middle";
series.tooltip.pointerOrientation = "vertical"; var bullet3 = lineSeries3.bullets.push(new am4charts.Bullet());
bullet3.fill = am4core.color("#33a09b"); // tooltips grab fill from parent by default
bullet3.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle3 = bullet3.createChild(am4core.Circle);
circle3.radius = 4;
circle3.fill = am4core.color("#fff");
circle3.strokeWidth = 3;
bchart.cursor = new am4charts.XYCursor(); var lineSeries4 = chart.series.push(new am4charts.LineSeries());
bchart.cursor.snapToSeries = series; lineSeries4.name = "T10";//"Salamanca - Irapuato";
bchart.cursor.xAxis = dateAxis; lineSeries4.dataFields.valueY = "Tramo10";
lineSeries4.dataFields.categoryX = "category";
lineSeries4.yAxis = valueAxis;
lineSeries4.stroke = am4core.color("#de6eb4");
lineSeries4.strokeWidth = 3;
lineSeries4.propertyFields.strokeDasharray = "lineDash";
lineSeries4.tooltip.label.textAlign = "middle";
//chart.scrollbarY = new am4core.Scrollbar(); var bullet4 = lineSeries4.bullets.push(new am4charts.Bullet());
bchart.scrollbarX = new am4core.Scrollbar(); bullet4.fill = am4core.color("#de6eb4"); // tooltips grab fill from parent by default
bullet4.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle4 = bullet4.createChild(am4core.Circle);
circle4.radius = 4;
circle4.fill = am4core.color("#fff");
circle4.strokeWidth = 3;
var lineSeries5 = chart.series.push(new am4charts.LineSeries());
lineSeries5.name = "T11";//"Irapuato - León";
lineSeries5.dataFields.valueY = "Tramo11";
lineSeries5.dataFields.categoryX = "category";
lineSeries5.yAxis = valueAxis;
lineSeries5.stroke = am4core.color("#4db0ec");
lineSeries5.strokeWidth = 3;
lineSeries5.propertyFields.strokeDasharray = "lineDash";
lineSeries5.tooltip.label.textAlign = "middle";
var bullet5 = lineSeries5.bullets.push(new am4charts.Bullet());
bullet5.fill = am4core.color("#4db0ec"); // tooltips grab fill from parent by default
bullet5.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle5 = bullet5.createChild(am4core.Circle);
circle5.radius = 4;
circle5.fill = am4core.color("#fff");
circle5.strokeWidth = 3;
var lineSeries6 = chart.series.push(new am4charts.LineSeries());
lineSeries6.name = "T12"; //"León - San Francisco del rincón";
lineSeries6.dataFields.valueY = "Tramo12";
lineSeries6.dataFields.categoryX = "category";
lineSeries6.yAxis = valueAxis;
lineSeries6.stroke = am4core.color("#2be829");
lineSeries6.strokeWidth = 3;
lineSeries6.propertyFields.strokeDasharray = "lineDash";
lineSeries6.tooltip.label.textAlign = "middle";
var bullet6 = lineSeries6.bullets.push(new am4charts.Bullet());
bullet6.fill = am4core.color("#2be829"); // tooltips grab fill from parent by default
bullet6.tooltipText = "[#fff font-size: 15px]{name} en {categoryX}:\n[/][#fff font-size: 15px]{valueY.totalPercent.formatNumber('#.00')} %[/] [#fff]{additional}[/]"
var circle6 = bullet6.createChild(am4core.Circle);
circle6.radius = 4;
circle6.fill = am4core.color("#fff");
circle6.strokeWidth = 3;
//chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
}); // end am4core.ready()
\ No newline at end of file
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