We Keep Coding

Highchart xAxis and value did not align

I have highchart series with time, I try to configure as below
http://jsfiddle.net/viethien/3eofd1nk/33/
$(function () {
$('#container').highcharts({
global: {
useUTC: false
},
chart: {
zoomType: 'x',
type:'area',
plotBackgroundColor: '#fff',
backgroundColor:'transparent',
},
credits: {
enabled: false
},
title: {
text: 'X Axis and value not match',
align: 'left',
margin: 30,
style:{
fontFamily:'VegurRegular',
fontSize:'21px'
}
},
subtitle: {
text:'Date Time',
align: 'left',
x: 20,
style: {
color: '#282828',
fontFamily:'VegurRegular'
}
},
xAxis: {
title: {
text: ''
},
type: 'datetime',
labels : {
formatter: function() {
var myDate = new Date(this.value);
var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
return Highcharts.dateFormat('%Y-%m-%d',newDateMs);
},
style:{
fontFamily:'VegurRegular'
}
}
},
yAxis: {
opposite:true,
title: {
text: ''
},
labels: {
formatter: function() {
return [this.value];
},
style:{
fontFamily:'VegurRegular'
}
},
},
tooltip: {
shared: true,
formatter: function() {
var myDate = new Date(this.x);
var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
return Highcharts.dateFormat('%Y-%m-%d',newDateMs);
},
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#5cc2d6'],
[1, Highcharts.color('#5cc2d6').setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: [{x: 1628175600000, y: 15.06670830384981064, display: "2021-08-06"},
{x: 1628262000000, y: 10.9409600143487062, display: "2021-08-07"},
{x: 1628348400000, y: 50.5110465749795092, display: "2021-08-08"},
{x: 1628434800000, y: 30.5244073812182639, display: "2021-08-09"},
{x: 1628521200000, y: 20.7439211283888343, display: "2021-08-10"},
{x: 1628607600000, y: 60.6684340924556529, display: "2021-08-11"},
{x: 1628694000000, y: 90.5417027025304146, display: "2021-08-12"}]
}]
});
});
I read other article and suggest set utc false but not work.
HighChart- When I use useUTC: false then x axis data are not showing properly
Could you help me this issue?

You can just use tickPositioner function and generate ticks in the same positions as points.
tickPositioner: function() {
return this.series[0].xData;
}
Live demo: http://jsfiddle.net/BlackLabel/43bugf76/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner

Highchart is doing everything right. Once you remove the formatter from both the XAxis Label and Tooltip, you will see that the Timestamps from your dataset are not actually from 00:00 clock.
I see two ways around this, either convert the x UNIX Timestamp from your dataset to display the date only, or change your Highchart configuration to use the display from your dataset as the XAxis.
The code example below includes the function shiftTimeInData to convert the dataset and to align the x with your display.
I also modified your formatter.
function shiftTimeInData(data){
$(data).each(function(){
let d = new Date(this.x);
this.x = Date.UTC(d.getFullYear(),d.getMonth(),d.getDate()+1);
});
return data;
}
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
type:'area',
plotBackgroundColor: '#fff',
backgroundColor:'transparent',
},
credits: {
enabled: false
},
title: {
text: 'X Axis and value not match',
align: 'left',
margin: 30,
style:{
fontFamily:'VegurRegular',
fontSize:'21px'
}
},
subtitle: {
text:'Date Time',
align: 'left',
x: 20,
style: {
color: '#282828',
fontFamily:'VegurRegular'
}
},
xAxis: {
title: {
text: ''
},
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
type: 'datetime',
labels : {
style:{
fontFamily:'VegurRegular'
},
align:'left'
}
},
yAxis: {
opposite:true,
title: {
text: ''
},
labels: {
formatter: function() {
return [this.value];
},
style:{
fontFamily:'VegurRegular'
}
},
},
tooltip: {
shared: true,
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#5cc2d6'],
[1, Highcharts.color('#5cc2d6').setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: shiftTimeInData([{x: 1628175600000, y: 15.06670830384981064, display: "2021-08-06"},
{x: 1628262000000, y: 10.9409600143487062, display: "2021-08-07"},
{x: 1628348400000, y: 50.5110465749795092, display: "2021-08-08"},
{x: 1628434800000, y: 30.5244073812182639, display: "2021-08-09"},
{x: 1628521200000, y: 20.7439211283888343, display: "2021-08-10"},
{x: 1628607600000, y: 60.6684340924556529, display: "2021-08-11"},
{x: 1628694000000, y: 90.5417027025304146, display: "2021-08-12"}])
}]
});
});
As you can see, the function shiftTimeInData is called right when adding the data it to the Highchart series.

Highcharts: Passing a secondary data variable in the tooltip

I'm trying to pass a secondary variable that's located in each point of my series' data-set. I've managed to that so far but when I try to hover on another data point on the chart, the same data gets printed for all points instead of showing the correct data for that specific point.
I've tried a variety of solutions and I would like to stick to this one, however I have this small hurdle which I can't seem to get over.
Here's a jsFiddle to show the problem I'm encountering: https://jsfiddle.net/Flik1/dfn51akc/47/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I believe its a problem with this specific line of code as its displaying the first 'tt' variable from each series.
this.points[index].series.userOptions.data[0].tt
The expected outcome would be 1 and 5 for column 1, 2 and 6 for column 2, 3 and 7 for column 3 and 4 and 8 for column 4.

Try this.points[index].point.options.tt
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Alignment issue in dynamically updated highstock having multiple series

I am creating a dynamic updated highstock chart with 2 series but at start one series is rendering in wrong place. And when I resize the selection in navigator the series comes back to its correct place.
Here is the config of highstock:
Highcharts.setOptions({
global: {
useUTC: false
}
});
var groupingUnits = [['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
['second',[1, 2, 5, 10, 15, 30]],
['minute',[1, 2, 5, 10, 15, 30]],
['day',[1]]
];
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, false);
series1.addPoint([x, y], true, false);
}, 500);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1min'
},
{
count: 3,
type: 'minute',
text: '3min'
}, {
count: 5,
type: 'minute',
text: '5min'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3
},
exporting: {
enabled: false
},
title: {
text: 'Live Chart'
},
yAxis: [
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Line'
},
height: '60%',
lineWidth: 2,
resize: {
enabled: true
}
},
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [
{
type: 'line',
name: 'OHLC',
data: [[]],
dataGrouping: {
units: groupingUnits
}
},
{
type: 'column',
name: 'Volume',
data: [[]],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}
]
});
I have created a fiddle for the same:
https://jsfiddle.net/xu058sgp/23/
I have tried changing the height and top property of yAxis but nothing seems to fix this issue. I am not sure but it can be due to the frequency in which the data is getting updated.
Can someone point me out what I am doing wrong here.

As a workaround you could initialize the series and then remove the points before adding your own points.
Initialization:
series: [{
type: 'line',
name: 'OHLC',
data: [0], //added this 0
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: [0], //added this 0
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
Then, remove the points before adding new ones:
events: {
load: function () {
// set up the updating of the chart each second
var chart = this
var series = this.series[0];
var series1 = this.series[1];
//Remove 0 data
series.setData([], false); //false to avoid redrawing, so we only redraw once per update
series1.setData([], false);
//update graph
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false, false);
series1.addPoint([x, y], false, false);
//redraw graph
chart.redraw();
}, 500);
}
}
Working example: https://jsfiddle.net/ewolden/xu058sgp/46/

Create and update multiple series in Zingchart

I'm trying to graph some Network data in Realtime using Zingchart. I'm using websockets to send data from a twisted pyton server to Zingchart.
Is there any way to identify which serie to update? For instance if a have this serie:
'series': [
{
'text': 'Serie 1',
'values': []
},
{
'text': 'Series 2',
'values': []
}
]
use "text" or another id to identify the serie to update with the data sent via websockets? Also is it possible to create series dynamically from the websocket?

Well, It might not be a right solution for you.
you can just write code below;
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 0,
values : [[time,newValue-20]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 1,
values : [[time,newValue+10]]
});
The point is you can set right order of the plotindex attribute;
I modified script source from the site below, see how it works.
Here is a complete source;
<html>
<head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
</script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
<script>
var myConfig = {
gui: {
contextMenu: {
position: 'right',
docked: true,
alpha: 0.9,
item: {
textAlpha: 1
},
button: {
visible: true
}
}
},
graphset: [{
type: 'line',
borderColor: "#cccccc",
borderWidth: 1,
borderRadius: 2,
plot: {
aspect: 'spline'
},
plotarea: {
margin: 'dynamic'
},
utc: true,
timezone: 9,
title: {
text: 'Uniform Step Time Series Line Chart',
adjustLayout: true,
align: 'left',
marginLeft: '15%'
},
legend: {
draggable: true,
backgroundColor: 'transparent',
header: {
text: "Facility N",
backgroundColor: '#f0f0f0'
},
marker: {
visible: false
},
//item: {
// margin: '5 17 2 0',
// padding: '3 3 3 3',
// fontColor: '#fff',
// cursor: 'hand'
//},
verticalAlign: 'middle',
borderWidth: 0
},
scaleX: {
//minValue: 1484870400000, //set minValue timestamp
//minValue: 1512018819470,
//step: 'day', //set step for scale
step: '30minute',
//step: 'minute',
maxItems: 7,
itemsOverlap: true,
zooming: true,
transform: {
type: 'date',
all: "%d %M %Y<br>%g:%i:%s"
}
},
preview: {
adjustLayout: true,
live: true
},
scaleY: {
step: 50,
label: {
text: 'Sensor'
},
guide: {
lineStyle: 'solid'
}
},
crosshairX: {
lineColor: '#555',
plotLabel: {
backgroundColor: '#fff',
multiple: true,
borderWidth: 2,
borderRadius: 2,
},
marker: {
size: 5,
borderWidth: 1,
borderColor: '#fff'
}
},
tooltip: {
visible: false
},
series: [{
values: [],
text: 'Sensor FC-456',
legendItem: {
backgroundColor: '#29A2CC',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor AB-265',
legendItem: {
backgroundColor: '#D31E1E',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor DC-445',
legendItem: {
backgroundColor: '#7CA82B',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor ER-985',
legendItem: {
backgroundColor: '#EF8535',
borderRadius: 2
}
}]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
//Set up of a websocket
var ws = new WebSocket('ws://65.50.232.201:8888/', 'zingchart');
//var ws = new WebSocket('ws://localhost:8080/examples/websocket/chartProgrammatic');
//var ws = new WebSocket('ws://192.9.112.69:8080/examples/websocket/sychart');
//Tell our internal server what to send.
ws.onopen = function(){
//console.log("########send##########");
ws.send('zingchart.feed');
ws.send('zingchart.push');
ws.send('zingchart.getdata');
}
//Setup an event to call a ZingChart API Method to update our chart.
ws.onmessage = function (e) {
console.log("===== \n " + JSON.stringify(e.data));
console.log("===== \n ");
//var data = JSON.parse(e.data);
var data = JSON.parse(e.data);
var newValue = data['plot0'][1];
var time = data['plot0'][0];
//console.log("====> " + time);
//console.log("====> " + newValue);
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 0,
values : [[time,newValue-20]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 1,
values : [[time,newValue+10]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 2,
values : [[time,newValue+150]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 3,
values : [[time,newValue+200]]
});
};
ws.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
</script>
</body>
</html>
The output is as follows;
I hope it will help you.

Issue on jQuery - Javascript Submit Closing Tag

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();
});