Highcharts.setOptions({
colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
    chart: {
        backgroundColor: '#ffffff',
        borderColor: '#353028',
        borderWidth: 1,
        borderRadius: 5,
        plotBackgroundColor: null,
        plotShadow: false,
        plotBorderWidth: 0,
        margin: [50, 30, 60, 40],
        style: {
            zIndex: 1
        }
    },
    title: {
        style: {
            color: '#FFF',
            font: '14px Open Sans, sans-serif',
            textShadow: 'none'
        }
    },
    subtitle: {
        style: {
            color: '#DDD',
            font: '12px Open Sans, sans-serif',
            textShadow: 'none'
        }
    },
    xAxis: {
        gridLineWidth: 0,
        lineColor: '#999',
        tickColor: '#999',
        labels: {
            style: {
                color: '#999',
                fontWeight: 'bold'
            }
        },
        title: {
            style: {
                color: '#AAA',
                font: 'bold 12px Open Sans, sans-serif'
            }
        }
    },
    yAxis: {
        alternateGridColor: null,
        minorTickInterval: null,
        gridLineColor: '#eeeeec',
        lineWidth: 0,
        tickWidth: 0,
        labels: {
            style: {
                color: '#999',
                fontWeight: 'bold'
            }
        },
        title: {
            text: null
        }
    },
    legend: {
        //layout: 'vertical',
        borderWidth: 1,
        backgroundColor: '#625E56',
        shadow: false,
        symbolWidth: 16,
        itemStyle: {
            color: '#CCC'
        },
        itemHoverStyle: {
            color: '#FFF'
        },
        itemHiddenStyle: {
            color: '#333'
        }
    },
    credits: {
        enabled: false
    },
    labels: {
        style: {
            color: '#CCC'
        }
    },
    tooltip: {
        backgroundColor: {
            linearGradient: [0, 0, 0, 50],
            stops: [
                [0, 'rgba(66, 60, 50, .9)'],
                [1, 'rgba(29, 27, 21, .8)']
            ]
        },
        borderWidth: 0,
        style: {
            color: '#FFF',
            font: '12px Open Sans, sans-serif'
        }
    },


    plotOptions: {
        line: {
            dataLabels: {
                color: '#CCC'
            },
            marker: {
                lineColor: '#333'
            }
        },
        spline: {
            marker: {
                lineColor: '#333'
            }
        },
        scatter: {
            marker: {
                lineColor: '#333'
            }
        }
    },

    toolbar: {
        itemStyle: {
            color: '#CCC'
        }
    }
});

function toDateSeries(arr) {
  ret = new Array();
  for (i in arr) {
    f = arr[i][0];
    f = Date.UTC( f.substring(0,4), f.substring(5,7)-1, f.substring(8,10) );
    ret.push([f, arr[i][1]]);
  }
  return ret;
}

function values_per_indicator_chart(json, container) {
  var chart;
  for (i=0;i<json.sources.length;i++) {
    data = json.sources[i].data;
    for (j=0;j<data.length;j++) {
      f = json.sources[i].data[j][0];
      json.sources[i].data[j][0] = Date.UTC( f.substring(0,4), f.substring(5,7)-1, f.substring(8,10) );
    }
  }

  chart = new Highcharts.Chart({
    chart: {
      zoomType: 'x',
      renderTo: container,
      defaultSeriesType: 'spline'
    },
    title: {
      text: ''
    },
    legend: {
      enabled: true // json.sources.length>1
    },
    exporting: {
      enabled: false
    },
    tooltip: {
      formatter: function() {
        return this.series.name + '<br>' + Highcharts.dateFormat('%e. %b', this.x) + ': <b>' + this.y + '</b>';
      }
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        month: '%e. %b',
        year: '%b'
      }
    },
    yAxis: {
      title: {
        text: ''
      },
      plotBands: [{
        from: json.data_min,
        to: json.data_max,
        color: 'rgba(68, 170, 213, 0.1)',
        label: {
          text: 'Zona de validez',
          style: {
            color: '#606060'
          }
        }
      }]
    },
    plotOptions: {
      spline: {
        lineWidth: 4,
        states: {
          hover: {
            lineWidth: 5
          }
        },
        marker: {
          enabled: true
        }
      }
    },
    series: json.sources
  });
  chart.redraw();
}

function values_per_indicator_manager(indicator, container) {
  var ajaxURL = '/charts/values/per/indicator/' + indicator;
  $.ajax({
    type: "GET",
    url: ajaxURL,
    success: function(json) { values_per_indicator_chart(json, container); },
    error: function(xhr, status, error) {
      alert("Error");
    }
  });

  return false;
}