I am working on a Highchart column chart.
I need to add an onclick event to it so I can get data back when I click on the different columns.
Here is my current full code.
var chart;
$(function () {
$.ajax({
url: 'url here',
method: 'GET',
async: false,
success: function(result) {
themainData = result;
}
});
var mainData = [themainData];
var chList=[];
var voList=[];
var coList=[];
for (var i = 0; i < mainData[0].ch.length; i++) {
var obj = mainData[0].ch[i];
var chlst = obj.name;
var vl = obj.st.vo;
var cl = obj.st.co;
chList.push(chlst);
voList.push(vl);
coList.push(cl);
}
var chart = {
type: 'column',
};
var title = {
text: 'Vo and Co'
};
var xAxis = {
categories: chList
};
var yAxis ={
min: 0,
title: {
text: 'Ch'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
};
var legend = {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
};
var tooltip = {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
};
var plotOptions = {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Vo',
data: voList
}, {
name: 'Co',
data: coList
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container').highcharts(json);
});
Where do I add the onclick event here?
You can add the click event on the chart, series, or point. I think it makes sense in your case to add the click event to the series.
var series= [{
name: 'Vo',
data: voList
events: {
click: function (event) {}
}
}, {
name: 'Co',
data: coList
}];
event.point is the point that is clicked on. See http://api.highcharts.com/highcharts/series%3Cbar%3E.events.click
This works for me,
chart: {
type: "bar",
},
title: {
text: "Stacked bar chart",
},
xAxis: {
categories: ["Apples", "Oranges", "Pears", "Grapes", "Bananas"],
},
yAxis: {
min: 0,
title: {
text: "Total fruit consumption",
},
},
legend: {
reversed: true,
},
plotOptions: {
series: {
cursor: 'pointer',
stacking: "normal",
events: {
click: function(event) {
alert(
this.name + ' clicked\n' +
'Alt: ' + event.altKey + '\n' +
'Control: ' + event.ctrlKey + '\n' +
'Meta: ' + event.metaKey + '\n' +
'Shift: ' + event.shiftKey
);
}
}
},
},
series: [{
name: "John",
data: [5, 3, 4, 7, 2],
},
{
name: "Jane",
data: [2, 2, 3, 2, 1],
},
{
name: "Joe",
data: [3, 4, 4, 2, 5],
},
],
});```
Related
I had to print the values of Active_Employees & Employees_Plan in bar chart like in this
Image
Means to make a bar representing the comparison in the last bar. It would be more suitable if concise code is provided.
function BarChart()
{
var emp = 0;
myData = "{ 'date':'" + startdate + "', 'Level1':'0','Level2':'0','Level3':'0','Level4':'0','Level5':'0','Level6':'0', 'EmployeeId':'" + emp + "'}";
$.ajax({
type: "POST",
url: "NewDashboard.asmx/BarChart",
contentType: "application/json; charset=utf-8",
data:myData,
success: OnSuccessBarChart,
// function (result) {
// alert(result.d);
//},
error: onError,
cache: false
});
}
function OnSuccessBarChart(data,status)
{
var bar_array = [];
if (data.d != null) {
var bar_data = jsonParse(data.d);
$.each(bar_data, function (i, option) {
//OSA.push(
// {
// name: option[i].Active_Employees,
// data: parseFloat(option[i].Employees_Plan)
// })
bar_array.push(
parseFloat([option.Employees_Plan]),
parseFloat([option.Active_Employees]),
parseFloat([option.Employees_Plan] + "/" + [option.Active_Employees])
);
});
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'BarCharts',
type: 'bar',
height: 300
},
title: {
text: 'Month Planned by Employees '
},
colors: [
'#604228'
],
credits: { enabled: false },
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
},
formatter: function () {
return this.x + ':' + this.y;
}
},
plotOptions: {
series: {
shadow: false,
borderWidth: 1,
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Plan of Current Month', 'Total Active Employee', 'Plans Made by Active Employees'],
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
title: {
text: 'Plans of Active Employees',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
series: [{
showInLegend: false,
data: bar_array
}]
});
}
I would try something like this:
$.each(bar_data, function (i, option) {
var emp_plan = option.Employees_Plan;
var active_emp = option.Active_Employees;
var plan_ratio = emp_plan / active_emp;
bar_array.push(
parseFloat([option.Employees_Plan]),
parseFloat([option.Active_Employees]),
parseFloat(plan_ratio).toFixed(2)
);
});
I'm trying to manipulate a chart with input boxes. Each input box should correspond to a bar. In my code, I can get the first function at the bottom of the highcharts to work, but identical code with the bar changed and the input id doesnt work. Function in question is the last function with season-2 as id.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
xAxis: {
categories: ['2016-17', '2017-18', '2018-19', '2019-20', '2020-21', '2021-22'],
title: {
text: 'Season'
}
},
yAxis: [{
title: {
text: '$ Dollars'
}
}],
plotOptions: {
series: {
borderColor: '#2c3e50',
point: {
events: {
drag: function(e) {
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
if (this.category == "2016-17"){
$('#season-1').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2017-18"){
$('#season-2').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2018-19")
{
$('#season-3').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2019-20"){
$('#season-4').val(Highcharts.numberFormat(e.y, 2));
} if (this.category == "2020-21"){
$('#season-5').val(Highcharts.numberFormat(e.y, 2));
}
},
drop: function() {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
}
}
},
stickyTracking: false
},
column: {
stacking: 'normal'
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
yDecimals: 2
},
series: [{
name: 'Salary Cap',
data: [94000000, 102000000, 108000000, 109000000, 114000000]
}, {
name: 'Tax Cap',
data: [113000000, 122000000, 130000000, 132000000, 139000000]
}, {
name: 'New Contract',
data: [10996155, 10996155, 10996155, 10996155, 10996155],
draggableY: true,
// drag: function() { console.log(arguments); },
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: 'whitesmoke'
}, {
name: 'Current Payroll',
data: [110492645, 103423474, 97903566, 62944822, 28751775],
//draggableX: true,
draggableY: false,
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: '#2c3e50'
}]
}, function(chart) {
$('#season-1').change(function() {
var val = parseInt(this.value) || 0;
chart.series[3].data[0].update({
y: val
});
})
},
function(chart) {
$('#season-2').change(function() {
var val = parseInt(this.value) || 0;
chart.series[3].data[1].update({
y: val
});
})
});
http://jsfiddle.net/twq6gb7d/
What I did is I isolated the change functions from inside the highcharts initialization function, and let JQuery handle it by selecting the container of the chart and calling the highchart function.
Snippet of the code:
.... //rest of the code
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: '#2c3e50'
}]
}); //end of the highchart initialization
$('#season-1').change(function() {
var val = parseInt(this.value) || 0;
$('#container').highcharts().series[3].data[0].update({
y: val
});
});
... // other change functions
Working JSFiddle here.
Good morning,
I'm working on small dashboard and using WinJS, but I have problem with Highcharts. They can't load inside WinJS.UI.HubSection and only in google chrome. I tried firefox and there is showed. I have second graph where I'm using Highstock and then works fine everywhere. I tried almost everything and don't know why the highchart isn't loaded inside HubSection. Thanks for your answers and help.
RainbowShaggy
You are trying to create a chart in div #vehicles, but jQuery (in your demo) nor Highcharts (I tested) are able to find that container.
It seems that when Highstock chart is created all divs are available, so if you will be creating all charts in createChart function, then they should be created successfully.
Example: https://jsfiddle.net/r6twbj0z/6/
var clientsArray = [];
stationsArray = [];
companiesArray = [];
WinJS.Namespace.define("ListView.Clients", {
data: new WinJS.Binding.List(clientsArray)
});
WinJS.Namespace.define("ListView.Stations", {
data: new WinJS.Binding.List(stationsArray)
});
WinJS.Namespace.define("ListView.Companies", {
data: new WinJS.Binding.List(companiesArray)
});
WinJS.UI.processAll();
$(function() {
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
function createChart() {
$('#companyvalue').highcharts('StockChart', {
/*chart : {
events : {
load : function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, false);
}, 1000);
}
}
},*/
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
$('#vehicles').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Použité vozidla'
},
xAxis: {
categories: ['Vlaky', 'Autobusy', 'Nákl. auta', 'Lodě', 'Letadla']
},
yAxis: {
min: 0,
title: {
text: 'Počet vozidel'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
}
$.each(names, function(i, name) {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
I am using highcharts to display a graph.
I am having trouble displaying the time in the tooltip.
If i send time in data object of seriesdata object it displays correctly but not the other way around.
var renderchart = function (seriesData) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'barGrpahcontainer',
type: 'bar',
backgroundColor: '#d3d3d3',
animation: false
},
title: {
text: ''
},
xAxis: {
opposite: false,
categories: null,
title: {
text: ''
},
labels: {
enabled:false
}
},
yAxis: {
min: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: ''
},
opposite: true
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.y + '<br/>' + 'Time: ' + this.time;
}
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 20
}
},
series: seriesData
});
}
var dataArray = [{"status":"Program Running","y":0.08,"color":"#01BC01","time":"00:13:47"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:03:41"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:36"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:28"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:14"},{"status":"Program Stopped","y":0.04,"color":"#FEC201","time":"00:07:45"},{"status":"Program Running","y":0.21,"color":"#01BC01","time":"00:37:43"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:47"},{"status":"Program Running","y":0.13,"color":"#01BC01","time":"00:24:00"},{"status":"Program Stopped","y":0.01,"color":"#FEC201","time":"00:01:55"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:36"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:19"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:16"},{"status":"Program Stopped","y":0.05,"color":"#FEC201","time":"00:08:52"},{"status":"Program Running","y":0.21,"color":"#01BC01","time":"00:37:46"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:02:53"},{"status":"Program Running","y":0.13,"color":"#01BC01","time":"00:24:03"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:03:24"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:50"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:11"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:09"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:21"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:20"},{"status":"Program Stopped","y":1.67,"color":"#FEC201","time":"05:00:27"},{"status":"NO DATA","y":5.26,"color":"#444849","time":"15:47:37"}]
$(function () {
var data = dataArray;
var seriesData = [];
var total = 0;
var i, cat;
var count = 0;
for (i = 0; i < data.length; i++) {
seriesData.push({
name: data[i].status,
data: [data[i].y],
color: data[i].color,
time: data[i].time
});
}
var chart;
$(document).ready(function () {
renderchart(seriesData)
});
});
The reason of that is parameter, which is kept in this.series.options.time instead of this.time.
Fixed formatter:
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.y + '<br/>' +
'Time: ' + this.series.options.time;
}
},
Demo:
http://jsfiddle.net/vwdzxawv/
Can you please take a look at following code and let me know why I am not able to initialize the closing tag for
$("#submitform").on("click", function (e) {});
I already tried it in http://www.jshint.com/ but it doesn't show any dis match character it took me hours to work on it but unfortunately I couldn't find out what is causing this. The weird thing is the application is working fine and I am not getting any error on console!
$("#submitform").on("click", function (e) {
$("div.alert").remove();
// Validation
var proceed = true;
if (targetPower == "Target Energy") {
$('#counter').parent().after('<div class="alert alert-danger err"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>This is a Requierd Field</div>');
proceed = false;
}
if ($("#scenSelect").val() == "0") {
$('#counter1').parent().after('<div class="alert alert-danger err"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Please Select From List</div>');
proceed = false;
}
if (proceed) {
//Change Concat
targetPower = targetPower.replace(/\D/g, '');
senario = $("#scenSelect").val();
var mapquery = senario + "_" + targetPower;
var data = 'column=' + mapquery;
if (qtype == "econo") {
var req = $.ajax({
type: "POST",
data: data,
dataType: 'json',
url: "assets/econo.php"
});
req.done(function (points) {
coords = points;
st = map.set();
for (var i = 0; i < coords.length; i++) {
var circle = map.circle(coords[i][0], coords[i][1], 5);
st.push(circle);
}
st.attr({
fill: '#FF6600',
translation: "4,4",
stroke: '#FFF',
'stroke-width': 1.5,
opacity: 1,
});
st.hover(function () {
this.animate({
fill: 'red',
opacity: .6,
r: 8,
'stroke-width': 2
}, 300)
}, function () {
this.animate({
//fill: '#98ED00',
fill: '#FF6600',
opacity: 1,
'stroke-width': 1.5,
r: 5
}, 300)
});
}); //done first
var req2 = $.ajax({
type: "POST",
data: data,
dataType: 'json',
url: "assets/econocharts.php"
});
req2.done(function (data) {
var cars = [];
cars.push(data[0]);
cars.push(data[1]);
cars.push(data[2]);
cars.push(data[3]);
cars.push(data[4]);
$('#chart1').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Economy Model',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['ROR Facilities'],
},
yAxis: {
title: {
text: 'Number of Facilities'
},
tickInterval: 50,
max: 300
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + '</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[0]
}]
}]
});
// Second Chart
$('#chart2').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'title!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
plotLines: [{
color: 'grey',
value: '.5',
width: '3'
}],
categories: ['Powerlines', 'Roads'],
style: {
color: Highcharts.getOptions().colors[0]
},
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Km Powerline',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Km Roads',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' Km</b>';
}
},
series: [{
name: 'Powerline',
//color: '#0066FF',
type: 'column',
yAxis: 1,
data: [0, cars[2]],
tooltip: {
valueSuffix: ' km'
}
}, {
name: 'Roads',
type: 'column',
data: [cars[1], 0],
tooltip: {
valueSuffix: ' km'
}
}]
});
// Third Chart
$('#chart3').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Penstocks'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000;
}
},
title: {
text: 'Km Penstocks'
},
tickInterval: 100000,
max: 1500000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' m</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[4]
}]
}]
});
// Four Chart
$('#chart4').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Total Cost Per Year'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000000;
}
},
title: {
text: 'Million $'
},
tickInterval: 100000000,
max: 1300000000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x +
' <b>' + this.y + '< $/b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[3]
}]
}]
});
});
} //end of ecolo
if (qtype == "ecolo") {
var add = 'img/' + $("#aniSelect").val() + '.png';
image2.animate({
opacity: 0
}, 500, mina.easein, function () {
image2.remove();
image2 = map.image(add, -100, 0, 794, 680).insertBefore(st).animate({
opacity: 1,
x: 0
}, 500, mina.easeout);
});
var selectedanimal = $("#aniSelect").val();
var dataecolo = 'column=' + mapquery + '&animal=' + selectedanimal;
if ($('#c1').is(':checked')) {
var req = $.ajax({
type: "POST",
data: dataecolo,
dataType: 'json',
url: "assets/ecolo_yes.php"
});
req.done(function (points) {
coords = points;
st = map.set();
for (var i = 0; i < coords.length; i++) {
var circle = map.circle(coords[i][0], coords[i][1], 5);
st.push(circle);
}
st.attr({
fill: '#FF6600',
translation: "4,4",
stroke: '#FFF',
'stroke-width': 1.5,
opacity: 1,
});
st.hover(function () {
this.animate({
fill: 'red',
opacity: .6,
r: 8,
'stroke-width': 2
}, 300)
}, function () {
this.animate({
//fill: '#98ED00',
fill: '#FF6600',
opacity: 1,
'stroke-width': 1.5,
r: 5
}, 300)
});
}); //done first
//Performance
var req3 = $.ajax({
type: "POST",
data: dataecolo,
dataType: 'json',
url: "assets/ecolochart_yes.php"
});
req3.done(function (data) {
var cuyes = [];
cuyes.push(data[0]);
cuyes.push(data[1]);
cuyes.push(data[2]);
cuyes.push(data[3]);
cuyes.push(data[4]);
$('#chart1').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Economy Model',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['ROR Facilities'],
},
yAxis: {
title: {
text: 'Number of Facilities'
},
tickInterval: 50,
max: 300
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + '</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cuyes[0]
}]
}]
}); // End of Chart One
// Third Chart
$('#chart3').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Penstocks'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000;
}
},
title: {
text: 'Km Penstocks'
},
tickInterval: 100000,
max: 1500000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' m</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cuyes[4]
}]
}]
}); //end of Chart 3
});
} //end of if Checked
else {}
} // end of ecolo
} // end of procced
mapReset();
e.preventDefault();
});