I'm trying to create a jvectormap and populate it with markers received via ajax. I'm now able to put the markers in the map but I'd love to change the radius of them based on another value received via ajax.
$.ajax({
url: "/map",
type: 'post',
dataType: 'json',
data: {
_csrf : 'token'
},
success: function (data) {
var mapObj = new jvm.Map({
container: $('#todaymap'),
map: 'it_merc_en',
normalizeFunction: 'polynomial',
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47',
r: 3,
},
hover: {
fill: '#383f47',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [],
series: {
markers: [{
attribute: 'r',
scale: [3,10]
}],
}
});
$('#todaymap div:first-child').hide();
var mapMarkers = [];
var mapMarkersValues = [];
mapMarkers.length = 0;
mapMarkersValues.length = 0;
for (var i = 0, l= data.length; i < l; i++) {
coords= Array();
coords[0]= data[i].lat;
coords[1]= data[i].lng;
console.log(data[i].count);
mapMarkers.push({name: data[i].name, latLng: coords});
}
mapObj.addMarkers(mapMarkers, []);
}
});
the field I want to use is data[i].count which has a value from 0 to 6 based on a count of the occurrences. I didn't find anything useful on the net. Anyone has an idea on how to do it?
A similar approach I've just tested on my own implementation of the map works, however my version is set to alter the markers that have already been set upon creation of the map using, it uses:
mapObj.markers[markerNumber].element.config.style.initial.r = scaleValue;
mapObj.applyTransform();
So for this to work you would have to add this after the mapObj.addMarkers line using another loop over the data, and then use applyTransform() to redraw/refresh the map with the changed marker information after this secondary loop, something like this should work I would imagine:
for (var i = 0, l= data.length; i < l; i++) {
mapObj.markers[i].element.config.style.initial.r = data[i].count;
}
mapObj.applyTransform();
Edit: After looking at your code again and trying something out on mine with the initial marker creation, I think you could do it actually just adding the information to the mapMarkers array like so:
mapMarkers.push({name: data[i].name, latLng: coords, r:data[i].count});
Related
I need help to improve the number of points displayed on the chart line.
With the current code, for 100000 points, only 20 drawn in the graph line.
var elements = new Array(100000);
for (i = 0; i < elements.length; i++) {
elements[i] = i;
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts entry example'
},
tooltip: {},
legend: {
data:['Sales']
},
xAxis: {
data: elements
},
yAxis: {},
series: [{
name: 'Sales',
type: 'line',
data: elements
}]
};
myChart.setOption(option);
You have to modify the xAxis for this. You should take a look at the axisTicks, and play around with the interval option. It either supports auto, a number or a function.
Alternatively, you can also manually show/hide the datapoints, by telling the data elements to display them, but maybe this only works when there's an axis tick available.
For displaying every datapoint, set showAllSymbol to true in the series data.
series: [{
name: 'Sales',
type: 'line',
showAllSymbol: true,
data: elements
}]
However, 20.000 datapoints may be a lot, so you can also create an interval by setting showSymbol within the data elements
for(i = 0; i < elements.length; i++){
elements[i] = {
value: i,
symbol: (i % 100 === 0) ? 'circle' : 'none'
}
}
This will set showSymbol to true for every 100th iteration. You may have to combine this with showAllSymbol: true in the series data to work properly.
Note: % is the modulus operator
Any ideas on JQuery mapping that will return an array of duplicates names, and titles, with their count. So I can create a bar graph in D3 or Chart JS (Chart JS seems easier so far)...
ie, I have (example, using JSON)
obj = {"Chocolate":"Organic", "Chocolate":"Fresh", "Chocolate":"Organic",
"Vanilla":"Regular",
"Vanilla":"Organic","Strawberry":"Fresh","Vanilla":"Regular"};
I want this
var data = {
labels: ["Chocolate", "Strawberry", "Vanilla"],
datasets: [
{
label: "Fresh",
fillColor: "blue",
data: [1,0,1] //(1 Fresh chocolate, 1 Fresh Strawberry, No fresh Vanilla)
},
{
label: "Regular",
fillColor: "red",
data: [0,0,2] //(0 regular chocolate, 0 regular Strawberry, 2 regular Vanilla)
},
{
label: "Organic",
fillColor: "green",
data: [2,1,0] //(2 organic chocolate, 1 organic Vanilla, 0 organic strawberry)
}
]
};
http://jsfiddle.net/u25c7gtj/2/
What have I tried? Well so far I have been able to group the items by Chocolate, Vanilla, or Strawberry, but the next step of getting a count of the items that have matching properties... I don't even know where to begin comparing them. I tried only pulling the "Flavor and Type", to compare those as objects but the comparison only yielded the groups with the individual flavor and type key and value pairs.
function groupBy(propertyName, array) {
var groupedElements = {};
for(var i = 0; i < array.length; i++) {
var element = array[i];
var value = element[propertyName];
var group = groupedElements[value];
if(group == undefined) {
group = [element];
groupedElements[value] = group;
} else {
group.push(element);
}
}
return groupedElements;
}
var result = groupBy("flavor", obj)
console.log(result);
$("#results").html(JSON.stringify(result, null, 4));
I also tried the code below which only seems to count the total
<script type="text/javascript">
$.ajax({
url: "/_api/web/lists/getbytitle('Ice Cream List')/items?$select=ID,Flavor,Type",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function(data){
// $.each(data.d.results, function(index, item){
// console.log(item.Id);
// console.log(item.Title);
// console.log(item.m4gs);
// });
var counts = [];
jQuery.each(data.d.results, function(index, item) {
if (!counts.hasOwnProperty(item)) {
counts[item] = 1;
} else {
counts[item]++;
}
});
console.log(counts[]);
I am working on a project and want to dynamically create highchart by assigning series arrays to the highchart. I use some dummy data to generate the array, however, in the example I provided below, the two columns are excatly the same which is not expected.
examples
$(function () {
var field_result = new Object();
var series = [];
var result_array = [];
var fields = [32, 22]
for (var i=0; i<fields.length; i++)
{
field_result.name = fields[i];
for (var m=0; m<4; m ++) {
result_array[m] = Math.random()*10;
}
field_result.data = result_array;
series.push(field_result);
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: series
});
});
Thank you very much.
You intent to create two distinct series-objects with separate data-arrays and put these in the series-array. But you are initializing these objects outside the loop for each individual series, so you end up overwriting the first data object with the second data.
You just have to move the initialization inside the loop:
$(function () {
var series = [];
var fields = [32, 22];
for (var i=0; i<fields.length; i++)
{
var field_result = new Object(); // <---- moved here
var result_array = []; // <---- moved here
field_result.name = fields[i];
for (var m=0; m<4; m ++){
result_array[m] = Math.random()*10;
}
field_result.data = result_array;
series.push(field_result);
}
[...]
Then in each loop iteration a new object and array will be created and filled with random data.
http://jsfiddle.net/doc_snyder/jgoyynzd/2/
Highcharts is an amazing library, however I need to programatically scroll through the chart as if the cursor itself was hovering across the x-axis. The only way I can think of doing this is by selecting points, unfortunately I could not find options in highcharts api documentation that allows me to put crosshairs/ playheader on selected points.
How can I do this?
This is not part of the API, but you can use point.onMouseOver() to fire mouseover event: http://jsfiddle.net/15dzo23n/1/
Example:
var index = 0;
$('#container').highcharts({
chart: {
events: {
load: hoverAnim
}
},
tooltip: {
crosshairs: true
},
series: [{
name: 'AAPL',
data: [5, 10, 15, 12, 13, 14, 12, 1, 12, 1, 12, 12, 12, 1]
}]
});
function hoverAnim(e) {
var chart = this,
points = chart.series[0].points,
len = points.length;
if (index < len) {
chart.hoverSeries = chart.series[0];
chart.hoverPoint = points[index];
chart.pointer.runPointActions(e); //display crosshair
points[index].onMouseOver(e); // display tooltip and set hover state
index++;
setTimeout(function () {
hoverAnim.call(chart, e);
}, 100);
}
}
Pawel Fus had a good answer, however I found an even better solution which doesn't have the buggy lag behavior when switching to different time points. Also events are not needed in this solution.
var chart = myElement.highcharts();
function select(value) {
// Scroll to some time.
var axes = chart.axes;
for (var i = 0; i < axes.length; i ++) {
var axis = axes[i];
axis.drawCrosshair(null, chart.series[0].points[value])
}
for (i = 0; i < chart.series.length; i++) {
var series = chart.series[i];
// Unset last value
series.points[oldValue].setState('');
// Set new value
series.points[value].setState('hover');
}
oldValue = value;
});
var times = [["1:30pm", "2:30pm"], ["3:30pm", "5:30am"], ["12:30pm", "2:30pm"], ["9:30am", "2:30pm", "4:30pm"], ["3:30pm", "5:30pm"], ["10:30am", "12:30pm"], [] ]; I have a Raphael Line Chart based on one of the examples with the popup tags on rollover. Currently, the tag is populated with data from the Y-axis. X = day of the week, Y = a "safety score", the JSON data is times of reported incidences on each day.
I can't seem to find any documentation about how to call in a third data set to populate the tag, and I can't seem to do it with my code without breaking it. Any suggestions?
Here is my code for the tags:
//tags
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 90, 0).insertBefore(this).attr([{ fill: "#fff"}, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
//end tags
});
And here is my data:
var times = [["1:30pm", "2:30pm"], ["3:30pm", "5:30am"], ["12:30pm", "2:30pm"], ["9:30am", "2:30pm", "4:30pm"], ["3:30pm", "5:30pm"], ["10:30am", "12:30pm"], [] ];
Ok, I figured it out! Here it is.
var times = [["1:30pm", "2:30pm"], ["3:30pm", "5:30am"], ["12:30pm", "2:30pm"], ["9:30am", "2:30pm", "4:30pm"], ["3:30pm", "5:30pm"], ["10:30am", "12:30pm"], [] ];
//tags
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i]-10, times[i].join("\n"), 90, 0).insertBefore(this).attr([{ fill: "#fff"}, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
//end tags
});