I am using JQPlot trying to draw a graph which contains dates. But I cant able to draw the graph, but i tried the sample application it is working fine. But whenever i pass my array it is not working, can anyone please help what i am doing wrong? Below is the code i am using.
$.get("${contextPath}/qos/graphJQPlot", $("#qosForm").serialize()).done(function(content) {
$.each(content, function (index1, value1) {
var innerArray = [];
$.each(value1, function (index2, value2) {
innerArray.push(value2, index2);
console.log(index2);
console.log(value2);
})
outerArray.push(innerArray);
})
var line1=[['2008-09-30 4:00PM',4], ['2008-10-30 4:00PM',6.5], ['2008-11-30 4:00PM',5.7], ['2008-12-30 4:00PM',9], ['2009-01-30 4:00PM',8.2]];
var plot3 = $.jqplot('chartdiv', [outerArray],
{
title:'Line Style Options',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d, %y'}/* ,
min:'2013-09-14',
max:'2013-09-21',
tickInterval:'1 day' */
/* ,
tickOptions:{formatString:'%b %#d, %Y'},
*/
}
}
}
);
});
If i pause an line1 to jqPlot it is working fine, but if i pass an outerArray it is not working.
Don't forget to include jqplot.dateAxisRenderer.js plugins
Related
I need to make an API call when clicking on a bar element. For example, look at this jsfiddle.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/
See how the x axis has the 12 months? Let's say that when clicking on the bar for "April," I want to make an API call in order to get sales data for the month of April and display that on the graph. I can't find a way to do this, because this click function...
plotOptions: {
series: {
events: {
click: function (event) {
//code goes here
}
}
}
}
... can only access items inside of the chart. I need to make an outside call to the database when clicking on a bar. Anything I can do? Thanks.
I tried this
document.querySelector('.rect.highcharts-point').addEventListener('click', e => {
//code goes here
});
It didn't work at all which is confusing, because this method clearly works when referencing the chart as whole, but doesn't work for just a bar element as you can see it working for the entire chart in this jsfiddle.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/events-container/
Three ways how you can achieve that:
From the callback to the built-in point click() event:
plotOptions: {
series: {
point: {
events: {
click() {
let point = this;
getPoint(point)
}
}
}
}
},
.
function getPoint(p) {
console.log('From the callback: ', p)
}
From the div container:
document.querySelector('.chart-container').addEventListener('click', e => {
if (e.point != undefined) {
console.log('From the container: ', e.point)
}
});
Looping through the rects:
function getPointLoop(p) {
p.addEventListener('click', e => {
console.log('From the loop:', e.target.point)
})
}
let points = Array.from(document.querySelectorAll('rect.highcharts-point'))
for (i = 0; i < points.length; i++) {
getPointLoop(points[i])
}
Demo:
https://jsfiddle.net/BlackLabel/9bos6eu8/
I have been struggling with this piece of javascript for some time now. I have read different, and similar, posts on the subject but I can't find anything that seems to lead me in the right direction of solving my problem.
I need to call the value of the variables from the watchPosition (and getCurrentPosition) method , set them as global and then call them inside of the function initMap().
The code is working but watchPosition reloads the Google map (this appears to happen when i change the browser/switch between tabs). I can't get the global variables to catch the value from the methods below (inside updateMarker).
How do I set the values from:
mon_lat = +position.coords.latitude;
mon_long = +position.coords.longitude;
to become global?
My main question is, more or less: how can i load the script without updating function initMap()? I would like it so that the navigator.geolocation.watchPosition() method updates automatically.
$(document).ready(function() {
updateMarker();
});
var mon_lat = null;
var mon_long = null;
var start_lat = null;
var start_long = null;
function updateMarker() {
// Get positions
if (navigator.geolocation) {
// Get current position
navigator.geolocation.watchPosition(
function (position) {
mon_lat = +position.coords.latitude;
mon_long = +position.coords.longitude;
initMap(mon_lat, mon_long);
}
);
// Get starting position
navigator.geolocation.getCurrentPosition(
function (position) {
start_lat = +position.coords.latitude;
start_long = +position.coords.longitude;
initMap(start_lat, start_long);
}
);
}
}
function initMap() {
// Display the map
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: mon_lat, lng: mon_long},
zoom: 10,
mapTypeControl:false
});
}
I've been able to import some shapefiles to Neo4j 2.3.1.
Now how do I view this data on a map?
I have tried the Wiki instructions on GeoServer and uDig, but both of them are outdated and I couldn't get it to work.
Is there any recent tutorial or other tool that can solve this problem?
I've used neo4j-spatial with Mapbox.js for visualizing geometries in a map.
For my use case I indexed US Congressional district geometries in neo4j-spatial then query the spatial index based on where a user clicks on the map, returning the closest district including the WKT string and the results of a Cypher query. To render the WKT polygon in the map I wrote a simple javascript function to parse that into an array of points to add a map annotation.
Here are some relevant code snippets:
Create the map and define a click handler for the map:
L.mapbox.accessToken = MB_API_TOKEN;
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([39.8282, -98.5795], 5);
map.on('click', function(e) {
clearMap(map);
getClosestDistrict(e);
});
Handle mouse click
/**
* Find the District for a given latlng.
* Find the representative, commitees and subjects for that rep.
*/
function infoDistrictWithinDistance(latlng, distance) {
var districtParams = {
"layer": "geom",
"pointX": latlng.lng,
"pointY": latlng.lat,
"distanceInKm": distance
};
var districtURL = baseURI + findGeometriesPath;
makePOSTRequest(districtURL, districtParams, function (error, data) {
if (error) {
console.log("Error");
} else {
console.log(data);
var params = {
"state": data[0]["data"]["state"],
"district": data[0]["data"]["district"]
};
var points = parseWKTPolygon(data[0]["data"]["wkt"]);
makeCypherRequest([{"statement": subjectsQuery, "parameters": params}], function (error, data) {
if (error) {
console.log("Error");
} else {
console.log(data);
var districtInfo = data["results"][0]["data"][0]["row"][0];
districtInfo["points"] = points;
districtInfo["state"] = params["state"];
districtInfo["district"] = params["district"];
console.log(districtInfo);
addDistrictToMap(districtInfo, latlng);
}
});
}
});
Parse WKT into an array of points
/**
* Converts Polygon WKT string to an array of [x,y] points
*/
function parseWKTPolygon(wkt) {
var pointArr = [];
var points = wkt.slice(10, -3).split(",");
$.each(points, function(i,v) {
var point = $.trim(v).split(" ");
var xy = [Number(point[1]), Number(point[0])];
pointArr.push(xy)
});
return pointArr;
}
The code is in this repo. You can see the simple map demo here (just click anywhere in the US to get started). There is also a recent blog post about this example here.
I would like to use a CSV file as source for a highcharts graph.
Could you give some guidance? I need to understand basically how to get data in the web page.
Do I need to put the function that load the text file in the "series" part of the js function?
This is what I have so far:
<script type='text/javascript'>
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'chart example'
},
xAxis: {
categories: []
},
yAxis: {
},
series: []
};
$.get('test.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first
// position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 1) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
This is how the data file is structured in the CSV file:
Compound,Value
mix1,0.244
mix2,0.453
pureCu,1
pureAg,0.98
The value of column 1 is an ID basically, so the distance between each of them could be considered as 1. So technically, the first column would be always from 1 to 15 for example, with the label using the name in the first column
I would like to put the second field on the Y, and on the X the first field; but using the code pasted (which is what is on an example on the Highcharts website), I can't really figure out how to set up correctly the values on each side of the chart.
Thanks
Here you can find tutorials from Highcharts to load data from external file: http://www.highcharts.com/docs/working-with-data/preprocessing
About refreshing page - yes you can refresh page every n-seconds, however it would be better (I think) to call AJAX to fetch new data from server and then replace it in Highcharts (simply using chart.series[0].setData( new_array_of_data );
http://jsfiddle.net/ErzQs/
How can I get the output from series0 ? I need the datapoints ... but my solution does not work properly.
data = chart.series[0].data;
You can retrieve the data this way:
$('#button').click(function () {
var chart = $('#container').highcharts();
data = chart.series[0].data;
$(chart.series[0].data).each(function (index, element) {
alert(this.y);
});
});
Working demo: http://jsfiddle.net/ErzQs/1/