Skip to content

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

Load combined graphs

parent 05661ab0
Hide whitespace changes
Inline Side-by-side
Showing with 178 additions and 180 deletions
public/centropais/index.html
View file @ 2a468b2b
...@@ -195,8 +195,11 @@ ...@@ -195,8 +195,11 @@
$("#showUrban").on("click", () => { $("#showUrban").on("click", () => {
let body = document.getElementsByTagName('body')[0]; let body = document.getElementsByTagName('body')[0];
let script = document.createElement('script'); let script = document.createElement('script');
let script_piloto = document.createElement('script');
script.src = "../js/evolucion_urbana.js"; script.src = "../js/evolucion_urbana.js";
script_piloto.src = "../js/evolucion_urbana_charts.js";
body.appendChild(script); body.appendChild(script);
body.appendChild(script_piloto);
}); });
</script> </script>
......
public/js/evolucion_urbana_charts.js
View file @ 2a468b2b
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
* June 2020 * June 2020
*/ */
/* globals am4core, am4charts, am4themes_animated, intervals */ /* globals am4core, am4charts, am4themes_animated, intervals*/
let minValue, maxValue; let minValue, maxValue;
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color'); let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
...@@ -14,184 +14,179 @@ let cellbgColor = getComputedStyle(document.body).getPropertyValue('--main-bg-co ...@@ -14,184 +14,179 @@ let cellbgColor = getComputedStyle(document.body).getPropertyValue('--main-bg-co
// amChart // amChart
am4core.ready(function() { am4core.ready(function() {
// am4core.useTheme(am4themes_animated); var chart = am4core.create("amchartdiv", am4charts.XYChart);
// Themes end
am4core.options.autoSetClassName = true; // Add data
// Create chart instance chart.data = [{
var chart = am4core.create("amchartdiv", am4charts.XYChart); "date": "2013-01-16",
chart.maskBullets = false; "market1": 71,
"market2": 75,
// Add data "sales1": 5,
chart.data = [{ "sales2": 8
"date": "2013-01-16", }, {
"market1": 71, "date": "2013-01-17",
"market2": 75, "market1": 74,
"sales1": 5, "market2": 78,
"sales2": 8 "sales1": 4,
}, { "sales2": 6
"date": "2013-01-17", }, {
"market1": 74, "date": "2013-01-18",
"market2": 78, "market1": 78,
"sales1": 4, "market2": 88,
"sales2": 6 "sales1": 5,
}, { "sales2": 2
"date": "2013-01-18", }, {
"market1": 78, "date": "2013-01-19",
"market2": 88, "market1": 85,
"sales1": 5, "market2": 89,
"sales2": 2 "sales1": 8,
}, { "sales2": 9
"date": "2013-01-19", }, {
"market1": 85, "date": "2013-01-20",
"market2": 89, "market1": 82,
"sales1": 8, "market2": 89,
"sales2": 9 "sales1": 9,
}, { "sales2": 6
"date": "2013-01-20", }, {
"market1": 82, "date": "2013-01-21",
"market2": 89, "market1": 83,
"sales1": 9, "market2": 85,
"sales2": 6 "sales1": 3,
}, { "sales2": 5
"date": "2013-01-21", }, {
"market1": 83, "date": "2013-01-22",
"market2": 85, "market1": 88,
"sales1": 3, "market2": 92,
"sales2": 5 "sales1": 5,
}, { "sales2": 7
"date": "2013-01-22", }, {
"market1": 88, "date": "2013-01-23",
"market2": 92, "market1": 85,
"sales1": 5, "market2": 90,
"sales2": 7 "sales1": 7,
}, { "sales2": 6
"date": "2013-01-23", }, {
"market1": 85, "date": "2013-01-24",
"market2": 90, "market1": 85,
"sales1": 7, "market2": 91,
"sales2": 6 "sales1": 9,
}, { "sales2": 5
"date": "2013-01-24", }, {
"market1": 85, "date": "2013-01-25",
"market2": 91, "market1": 80,
"sales1": 9, "market2": 84,
"sales2": 5 "sales1": 5,
}, { "sales2": 8
"date": "2013-01-25", }, {
"market1": 80, "date": "2013-01-26",
"market2": 84, "market1": 87,
"sales1": 5, "market2": 92,
"sales2": 8 "sales1": 4,
}, { "sales2": 8
"date": "2013-01-26", }, {
"market1": 87, "date": "2013-01-27",
"market2": 92, "market1": 84,
"sales1": 4, "market2": 87,
"sales2": 8 "sales1": 3,
}, { "sales2": 4
"date": "2013-01-27", }, {
"market1": 84, "date": "2013-01-28",
"market2": 87, "market1": 83,
"sales1": 3, "market2": 88,
"sales2": 4 "sales1": 5,
}, { "sales2": 7
"date": "2013-01-28", }, {
"market1": 83, "date": "2013-01-29",
"market2": 88, "market1": 84,
"sales1": 5, "market2": 87,
"sales2": 7 "sales1": 5,
}, { "sales2": 8
"date": "2013-01-29", }, {
"market1": 84, "date": "2013-01-30",
"market2": 87, "market1": 81,
"sales1": 5, "market2": 85,
"sales2": 8 "sales1": 4,
}, { "sales2": 7
"date": "2013-01-30", }];
"market1": 81,
"market2": 85, // Create axes
"sales1": 4, var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
"sales2": 7 //dateAxis.renderer.grid.template.location = 0;
}]; //dateAxis.renderer.minGridDistance = 30;
// Create axes var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());
var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); valueAxis1.title.text = "Sales";
//dateAxis.renderer.grid.template.location = 0;
//dateAxis.renderer.minGridDistance = 30; var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.title.text = "Market Days";
var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis2.renderer.opposite = true;
valueAxis1.title.text = "Sales"; valueAxis2.renderer.grid.template.disabled = true;
var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis()); // Create series
valueAxis2.title.text = "Market Days"; var series1 = chart.series.push(new am4charts.ColumnSeries());
valueAxis2.renderer.opposite = true; series1.dataFields.valueY = "sales1";
valueAxis2.renderer.grid.template.disabled = true; series1.dataFields.dateX = "date";
series1.yAxis = valueAxis1;
// Create series series1.name = "Target Sales";
var series1 = chart.series.push(new am4charts.ColumnSeries()); series1.tooltipText = "{name}\n[bold font-size: 20]${valueY}M[/]";
series1.dataFields.valueY = "sales1"; series1.fill = chart.colors.getIndex(0);
series1.dataFields.dateX = "date"; series1.strokeWidth = 0;
series1.yAxis = valueAxis1; series1.clustered = false;
series1.name = "Target Sales"; series1.columns.template.width = am4core.percent(40);
series1.tooltipText = "{name}\n[bold font-size: 20]${valueY}M[/]";
series1.fill = chart.colors.getIndex(0); var series2 = chart.series.push(new am4charts.ColumnSeries());
series1.strokeWidth = 0; series2.dataFields.valueY = "sales2";
series1.clustered = false; series2.dataFields.dateX = "date";
series1.columns.template.width = am4core.percent(40); series2.yAxis = valueAxis1;
series2.name = "Actual Sales";
var series2 = chart.series.push(new am4charts.ColumnSeries()); series2.tooltipText = "{name}\n[bold font-size: 20]${valueY}M[/]";
series2.dataFields.valueY = "sales2"; series2.fill = chart.colors.getIndex(0).lighten(0.5);
series2.dataFields.dateX = "date"; series2.strokeWidth = 0;
series2.yAxis = valueAxis1; series2.clustered = false;
series2.name = "Actual Sales"; series2.toBack();
series2.tooltipText = "{name}\n[bold font-size: 20]${valueY}M[/]";
series2.fill = chart.colors.getIndex(0).lighten(0.5); var series3 = chart.series.push(new am4charts.LineSeries());
series2.strokeWidth = 0; series3.dataFields.valueY = "market1";
series2.clustered = false; series3.dataFields.dateX = "date";
series2.toBack(); series3.name = "Market Days";
series3.strokeWidth = 2;
var series3 = chart.series.push(new am4charts.LineSeries()); series3.tensionX = 0.7;
series3.dataFields.valueY = "market1"; series3.yAxis = valueAxis2;
series3.dataFields.dateX = "date"; series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}[/]";
series3.name = "Market Days";
series3.strokeWidth = 2; var bullet3 = series3.bullets.push(new am4charts.CircleBullet());
series3.tensionX = 0.7; bullet3.circle.radius = 3;
series3.yAxis = valueAxis2; bullet3.circle.strokeWidth = 2;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}[/]"; bullet3.circle.fill = am4core.color("#fff");
var bullet3 = series3.bullets.push(new am4charts.CircleBullet()); var series4 = chart.series.push(new am4charts.LineSeries());
bullet3.circle.radius = 3; series4.dataFields.valueY = "market2";
bullet3.circle.strokeWidth = 2; series4.dataFields.dateX = "date";
bullet3.circle.fill = am4core.color("#fff"); series4.name = "Market Days ALL";
series4.strokeWidth = 2;
var series4 = chart.series.push(new am4charts.LineSeries()); series4.tensionX = 0.7;
series4.dataFields.valueY = "market2"; series4.yAxis = valueAxis2;
series4.dataFields.dateX = "date"; series4.tooltipText = "{name}\n[bold font-size: 20]{valueY}[/]";
series4.name = "Market Days ALL"; series4.stroke = chart.colors.getIndex(0).lighten(0.5);
series4.strokeWidth = 2; series4.strokeDasharray = "3,3";
series4.tensionX = 0.7;
series4.yAxis = valueAxis2; var bullet4 = series4.bullets.push(new am4charts.CircleBullet());
series4.tooltipText = "{name}\n[bold font-size: 20]{valueY}[/]"; bullet4.circle.radius = 3;
series4.stroke = chart.colors.getIndex(0).lighten(0.5); bullet4.circle.strokeWidth = 2;
series4.strokeDasharray = "3,3"; bullet4.circle.fill = am4core.color("#fff");
var bullet4 = series4.bullets.push(new am4charts.CircleBullet()); // Add cursor
bullet4.circle.radius = 3; chart.cursor = new am4charts.XYCursor();
bullet4.circle.strokeWidth = 2;
bullet4.circle.fill = am4core.color("#fff"); // Add legend
chart.legend = new am4charts.Legend();
// Add cursor chart.legend.position = "top";
chart.cursor = new am4charts.XYCursor();
// Add scrollbar
// Add legend chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.legend = new am4charts.Legend(); chart.scrollbarX.series.push(series1);
chart.legend.position = "top"; chart.scrollbarX.series.push(series3);
chart.scrollbarX.parent = chart.bottomAxesContainer;
// Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series1);
chart.scrollbarX.series.push(series3);
chart.scrollbarX.parent = chart.bottomAxesContainer;
}); // end am4core.ready() }); // end am4core.ready()
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