I'm using the pie chart and just have a question. I'm filling a couple of arrays with json data like this...
for (var i = 0; i < json.results.length; i++) {
r = json.results[i];
a_dataPerct.push(r.Percentage);
a_dataOptionName.push(r.OptionName);
}
In the series: data: property of the chart (I'm assuming this is where it would go??) when I just do this...
data: a_dataPerct
the percentages show up fine on the chart and the chart displays, but it says "Slice" for each section.
I want the a_dataOptionName values to be the names there instead of "Slice". How do I do that? I thought it might be like this...
data: a_dataOptionName,a_dataPerct
but it didn't like that.
The pie charts data is a twodimentional array with [name, number], like this:
for (var i = 0; i < json.results.length; i++) {
r = json.results[i];
a_dataPerct.push([r.OptionName, r.Percentage]);
}
series: [{
type: 'pie',
name: '',
data:
}],
x:[{
data:<?php echo $jastudentcount; ?>
}]
formatter: function() {
return ''+ this.point.name +': '+'('+ this.y +')'+ Highcharts.numberFormat(this.percentage, 2)+' %';
}
Related
I already know how to draw a vertical line in the chart but it's a static value and I want to be dynamic. So what I want is to get the Index of the current month and year is there a function?.
Example:
Imagine that the current date is now = '27-03-2021'
I need a function that retrieves the current month and year
Note: this.value, this.category, this.point always show undefined why can't I use it in the potLines area?
xAxis: {
categories: ['01-08-2018', '01-10-2019', '31-02-2020', '27-03-2021', '01-01-1900'],
plotLines: [{
color: '#FF0000',
width: 1,
value: index = (function() {
var value;
if (this.category == '03-2021') { //Compare only the month and year
value = //I want the Index of this position date
} else {
value = //the length of the list
}
return value;
})()
}]
}
Here is a dynamic way to set the plotLine
let data = () => {
let data = []
let start = 1609455600000
for(let i = 0; i < 12; i++){
data.push([start + i * 2592000000, Math.floor(Math.random() * Math.floor(30))])
}
return data
}
Highcharts.chart('container', {
xAxis: {
type: 'datetime',
plotLines: [{
color: '#FF0000',
width: 2,
value: Date.now()
}]
},
series: [{
name: 'Installation',
data: data(),
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
I believe as per the API documentation that value only takes a value not a function. If you wish to use a function to you can do so in chart.events.load for example. Then you could try to get the value, category, point from the chart object using this keyword.
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
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});
I'm new to highcharts plugin and I need to set different width for each column if the value is empty.
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
And i need to display it this way
I need this
I have been searching the documentation but i don't find anything that does it, without a lot of code.
I achieved this, but it doesn't upload/resize dynamically.
http://jsfiddle.net/5vgjztk0/
Thanks
You can use something like merimekko chart.
(function(H) {
var each = H.each;
var xStart = 0;
var rememberX = 0;
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
var series = this;
if(series.data.length > 0 ){
each(this.data, function(point) {
point.shapeArgs.width = series.xAxis.translate(point.x) - series.xAxis.translate(xStart);
point.shapeArgs.x = series.xAxis.translate(point.x) - point.shapeArgs.width;
xStart = point.x;
});
xStart = 0;
}
proceed.call(this);
})
})(Highcharts)
Demo:
http://jsfiddle.net/js55fuo1/24
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/