I have a large CSV file from which I need to select data from various columns and put them on a highmaps map.
How can I select the columns to use for the map? Lets say that I have country names at column 0, country codes at column 8 and number of things at column 1. How can I pass them to the map.
This is the CSV reader I use:
$.get('downloads/dg_mare_piwik_countries.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if(lineNo !== 0) {
var iso_country = items[9],
name=items[0],
no_items = parseFloat(items[1]);
//options.series[0].data.push([visits]);
options.series[0].data.push({
name: name,
code3: iso_country,
value: no_items
});
}
});
var chart = new Highcharts.Map(options);
});
And the Map, copied from the highmaps example
var options = {
chart: {
renderTo: 'chart_container'
},
title: {
text: 'Fixed tooltip with HTML'
},
legend: {
title: {
text: 'Population density per km²',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
pointFormat: '<span class="f32"><span class="flag {point.flag}"></span></span>' +
' {point.name}: <b>{point.value}</b>/km²',
positioner: function () {
return { x: 0, y: 250 };
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series: [{
data: [],
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
}
}]
};
Sorry for being perhaps too ignorant. I cannot short it out and any help will be deeply appreciated.
Thank you.
Related
I'm working with highchart and I have the following chart working.
However, I need the next value starts at the point of the previous value.
Can someone help me please?
I use this function to generate chart
function generateChart(chartUrl, id) {
let options = {};
$.ajax({
url: chartUrl,
data: {name: id},
success: function (data) {
options.series[0].data = data;
// Get categories dynamicaly, not harcoded
for(let i=0;i<data.length;i++){
options.xAxis.categories.push(data[i][0]);
}
$(`#${id}`).highcharts(options);
}
});
}
And this code to Generate Data and Efects on chart
function generateEfectsChart() {
let options = {
chart: {
type: 'column'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
categories: [],
},
yAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
plotBands: [{
color: '#000000', // Color value
from: 0, // Start of the plot band
to: 0 // End of the plot band
}],
title: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: '#000000'
},
colorByPoint: true,
pointWidth: 150
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
turboThreshold: 0
}
},
series: [{
negativeColor: '#ED4D5F'
}]
};
return options;
}
Use the waterfall series type.
Highcharts.chart('container', {
chart: {
type: 'waterfall'
},
...,
});
Live demo: https://www.highcharts.com/demo/waterfall
Docs: https://www.highcharts.com/docs/chart-and-series-types/waterfall-series
High everyone,
I am trying to get two things to happen. First, I want to create a custom tooltip for a columnrange-type series where the tooltip shows something like HIGH: 'this.point.high' and on a new line "LOW:" 'this.point.low'. Second, I would like these 'low' and 'high' values to populate a form field dynamically. For example, when a user drags the high value for the columnrange entry, I want this to dynamically update a number in the corresponding formfield that collects user input.
Here is a fiddle: https://jsfiddle.net/e9zqmy12/
Code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
var myChart;
Highcharts.setOptions({
plotOptions: {
series: {
animation: false
}
}
});
// draw chart
myChart = Highcharts.chart('container',
{
chart: {
type: "line",
events: {
click: function (e) {
// find the clicked values and the series
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
},
drag: function (e) {
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
}
}
},
title: {
text: "Forecasting History"
},
xAxis: {
type: 'category',
allowDecimals: true,
title: {
text: "Quarter"
},
plotBands: [{
color: 'rgba(204,153,255,0.2)', // Color value
from: 11.5, // Start of the plot band
to: 12.5, // End of the plot band
label: {
text: 'Forecast'
}
}]
},
yAxis: {
title: {
text: "Inflation (%)"
},
plotLines: [{
value: 0,
width: 2,
color: '#aaa',
zIndex: 10
}]
},
tooltip: {
style: {
color: 'black',
fontWeight: 'bold',
fontSize: 13
},
positioner: function () {
return { x: 80, y:0 };
},
shared: true,
headerFormat: '',
valueDecimals: 2,
shadow: false,
borderWidth: 2,
borderColor: '#000000',
shape: 'rect',
backgroundColor: 'rgba(255,255,255,0.8)'
},
series: [
{
name: 'Inflation',
data: [3.9,4.98,5.72,5.73,3.61,3.68,3.72,2.64,2.1,1.94,1.99,1.87,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Central Bank Forecast',
data: [2,3.47,4.2,4.62,4.51,3.079,3.13,3.15,2.43,2.17,1.7,2.17,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Your Forecast',
showInLegend: false,
data: [null,null,null,null,null,null,null,null,null,null,null,null,2],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
marker: {
radius: 2.5,
fillColor: 'red'
},
},{
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
}
}
},
name: 'Forecast Range',
color: 'rgba(255,0,0,.1)',
type: 'columnrange',
data: [[12,1,3]],
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: "+this.point.low + " HIGH:" +this.point.high;
}
},
dragDrop: {
draggableY: true,
groupBy: 'GroupId',
dragMinY: -10,
dragMaxY: 10,
dragPrecisionY: .01,
liveRedraw: false
},
}
],
});
It seems that your code was almost good except this callback pointFormatter callback - notice that this calls for point already, so this.point refers to undefined, it should be:
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: " + this.low + " <br>HIGH:" + this.high;
}
},
Demo: https://jsfiddle.net/BlackLabel/vbo6j9em/
I want to access another series row data in series dataLabels. Here is my code.
categoriesarr = [1,2,3,4,5];
noofloandisbursed = [10, 20, 30, 40, 50];
pdo = [9, 18, 27, 40, 49];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'disbursement'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: categoriesarr
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#fff'),
shadow: true
},
series: [{
name: 'No. Of Loan Disbursed',
type: 'column',
data: noofloandisbursed
},
{
name: 'Pre-Disbursement Orientation',
type: 'column',
data: pdo,
dataLabels: {
enabled: true,
formatter: function(e) {
//return ((this.point.y/series[0].point.y)*100) + '%';
}
}
}]
});
I want to show the result of (series 2 value / series 1 value) * 100 in the dataLabels concatenation with % only in second series. Unfortunately i can't access the series 1's y point values. When i tried series[0].yData, it returns the whole array, not the specific row matched with second row. I also tried to pass array, but it wasn't working. Need solution of this problem.
You can find the point from the first series by index:
series: [{
...
},
{
...,
dataLabels: {
enabled: true,
formatter: function(e) {
return (
(this.point.y /
this.series.chart.series[0].points[this.point.index].y) *
100) + '%';
}
}
}
]
Live demo: http://jsfiddle.net/BlackLabel/rdwxc382/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels.formatter
I want to use my series names as xAxis. I have tried it like the code below. This code is creating multiple series but only one x axis value. Let's say in my code I want to create series for every fund and plot fund values in xAxis as well.
function draw(fund, zreturn) {
zreturn = [12.75, 11.77, 13.76];
fund = ['abc', 'xyz', 'pqr'];
var options = {};
options = {
chart: {
renderTo: 'graphDiv',
type: 'line',
Height: '400px'
},
credits: {
enabled: false
},
title: {
text: 'Fund Performance Graph',
x: -20
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: fund
}
},
yAxis: {
labels: {
enabled: true,
format: function () {
return (this.value + '%')
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
},
series: zreturn.filter(function (zreturn, i) {
return fund[i]
}).map(function (zreturn, i) {
/* Then return as series */
return {
//type: 'line',
name: fund[i],
data: zreturn,
dataLabels: {
align: 'center',
enabled: true,
format: "{y:.2f}" + '%',
style: {
fontSize: "8px",
fontFamily: 'Arial',
},
}
}
})
}
var chart = new Highcharts.Chart(options);
};
I think that right now you have small mistakes in your code.
First of all you are using yAxis.labels.format as a function. It should be formatter if you want to use it as a function:
yAxis: {
labels: {
enabled: true,
formatter: function() {
return (this.value + '%')
}
}
},
Next, you have mistake in your data, it should be an array:
data: [
[i, zreturn]
],
I am here adding x value of your point as well as y value. If I will not add x value, points will always start from 0 and because you have added only one point to every series, all of them will be on the first category.
Here you can find an example how your chart may work with these small corrections:
http://jsfiddle.net/worg6jLz/29/
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();
}
});
});
});