Related
I'm trying to populate a map of the U.S. in HighMaps with data from an html table. The map is showing but the data point is not. It's a latitude/longitude point. The documentation is sparse, so I'm not sure what I'm doing wrong. Here's a JSFiddle: https://jsfiddle.net/sfjeld/1wjm04fc/6/
Highcharts.mapChart('container', {
chart: {
map: 'countries/us/custom/us-all-territories'
},
series: [{
name: 'Basemap',
dataLabels: {
enabled: true,
format: '{point.name}'
}
},
{
// Specify points using lat/lon
type: 'mappoint',
data: {
table: 'pvsoiling-table',
startRow: 1,
startColumn: 1,
endColumn: 2
},
name: 'PV',
marker: {
fillColor: 'white',
lineColor: 'black',
lineWidth: 2,
radius: 10
},
color: Highcharts.getOptions().colors[1]
}
]
});
thanks,
Shauna
You can make the following changes to your code:
At the start of your <script> section, load your HTML table data into a JavaScript array:
var mapData = [];
Highcharts.data({
table: document.getElementById('pvsoiling-table'),
startColumn: 1,
endColumn: 2,
firstRowAsNames: true,
complete: function (options) {
options.series[0].data.forEach(function (p) {
mapData.push({
lat: p[0],
lon: p[1]
});
});
//console.log(mapData);
}
});
We will refer to this mapData array later on. Here is what it contains:
[
{ "lat": 33.3, "lon": -111.67 }
]
Make changes to the series section in your Highcharts.mapChart.
series: [{
name: 'Basemap',
nullColor: '#e0f9e3',
dataLabels: {
enabled: true,
format: '{point.name}'
}},
{
// Specify points using lat/lon
data: mapData,
type: 'mappoint',
name: 'PV',
marker: {
fillColor: 'white',
lineColor: 'black',
lineWidth: 1,
radius: 3
},
color: Highcharts.getOptions().colors[1]
}
]
The key part to note is the data: mapData option. The JavaScript mapData variable is the exact array that we need to represent a set of points on the map. In our case the array only contains one point - but that's because there is only one relevant row of data in the HTML table.
My map ends up looking like this:
It looks like the marker is in or near Phoenix, AZ.
Final notes:
(a) I also adjusted the marker to have lineWidth: 1 and radius: 3 (a bit smaller).
(b) I added a document ready function around everything, to ensure the DataTable is loaded before you try to read its data.
(c) There may be a more elegant way to do this, but I followed the approach in this demo. The demo actually shows how to join 2 different sets of data - not what you need. But it does show a good approach for extracting the HTML data so it can be used in the map.
Using the the Highcharts.data({...}) approach lets you access any HTML table. But since you are using DataTables, you can choose to do the following, instead. It uses the DataTables API to access each row of data:
var mapData = [];
$('#pvsoiling-table').DataTable({
"initComplete": function(settings, json) {
var api = this.api();
api.rows().data().each(function (p) {
mapData.push({ lat: Number(p[1]), lon: Number(p[2]) });
});
// your Highcharts.mapChart() logic, in a function:
buildChart();
}
});
I'm using HighCharts, I have this array,
I would like to create a chart like this:
As I know, the format of series is like this:
series:[{
name: 'Production',
data: [0.074, 0.040,0.034,0.036,0.068]
}, {
name: 'Reprise',
data: [0.024,0.022,0.029, 0.055, 0.052]
}]
with categories array:
['Mario', 'Andre', 'Jean Jacques', 'Fidy', 'Judith']
How could I do if I want to paste each value of column Volumes to each Production Stacked Bar value like the chart above ?
Thanks!
you can see an example here: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-stacked/
series: [{
name: 'Volume',
data: [1, 0.16, 0.46, 0.37, 0.24]
}, {
name: 'Reprise',
data: [0.024, 0.0.....]
}, {
name: 'Production',
data: [....]
}]
Later edit: to display volume as data label you can use the formatter function:
column: {
stacking: 'normal',
dataLabels: {
formatter: function () {
return this.x;//you can have a little logic here if (thix.x == 'Production) return myVariable[y];myVariable will contains values from volume or something similar
}
}
}
Define volume in your data array:
data: [{y:0.074,volume:1}, {y:0.040,volume:0.15}]
And use formatter in datalabels options to get custom value:
formatter: function () {
return this.point.volume + ' km';
}
jsfiddle
I have been able to control the stacking order of highchart by setting the index field in the series objects like this:
series: [
{
name: 'My Products',
data: randomRange(12, 7, 61), // Just random test data for now.
stack: 'ProductType',
index: 1 // Here index sets the stacking order in the bar. This will be on the bottom.
}, {
name: 'Total',
data: randomRange(12, 233, 240), // Just random test data for now.
stack: 'ProductType',
index: 0 // This will be on the top.
}
]
As you can see, a lower index number will be stacked higher in the bar.
Now I am trying to refresh the series, but the stacking order gets lost and I cannot set the index:
var chart1 = $('#quantityPerMonthChart1').highcharts();
chart1.series[1].setData(randomRange(12, 233, 240), false);
chart1.series[1].index = 0; // Doesn't work.
chart1.series[0].setData(randomRange(12, 7, 61), false);
chart1.series[0].index = 1; // Doesn't work.
chart1.redraw();
index is option of a series that can be update using Series.update() - it can be also used to update data of the series as data is another option.
$(function() {
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [1, 2, 3, 4, 5, 4],
index: 1
}, {
data: [6, 4, 5, 6, 7, 4],
index: 2,
id: 's2'
}]
});
$('#button').click(function() {
chart.get('s2').update({index: 0});
});
});
Example: http://jsfiddle.net/ae7Ljmc7/
There seemed to be no documentation or other examples on the net on how to do this. So I experimented and found out that the index is set naturally by the order in which you add to the series array. So I could change my seed series to this:
series: [
{
name: 'Total', // The series you add first will get stacked on the top
data: randomRange(12, 233, 240),
stack: 'ProductType'
}, {
name: 'My Products',
data: randomRange(12, 7, 61),
stack: 'ProductType'
}
]
Then when I refresh the chart data with different options, I do this:
$('#productType').on('change', function() {
var chart1 = $('#quantityPerMonthChart1').highcharts();
// These series already have an index (which affects stack order).
// Here it is unchanged.
chart1.series[0].setData(randomRange(12, 233, 240), false);
chart1.series[1].setData(randomRange(12, 7, 61), false);
chart1.redraw();
});
I am in the process of moving from a built in graph library to HighStock.
I have to comply to crasy implementations. So at the end I got this configuration :
$(function() {
chart = new Highcharts.StockChart({
chart : {
renderTo : 'div_#divid#'
},
rangeSelector : {
selected : 0,
buttons: [{
type: 'day',
count: 7,
text: '7j'
}, {
type: 'day',
count: 15,
text: '15j'
}, {
type: 'day',
count: 30,
text: '30j'
}, {
type: 'all',
text: 'Tous'
}]
},
series : [{
type : 'column',
name : 'valeur',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
Here is the fiddled version.
I don't get whats wrong with my data. (but I think I did correctly the conversion for the dates.)
[[1362355200000,672],[1362441600000,9764],[1362528000000,9839],[1362614400000,9906], [1362700800000,9973],[1362787200000,9906],[1362873600000,10592],[1362960000000,11236], [1363046400000,13233],[1363132800000,0],[1363219200000,0],[1363305600000,0],[1363392000000,0],[1363478400000,0],[1363564800000,0],[1363651200000,0],[1363737600000,0],[1363824000000,0],[1363910400000,0],[1363996800000,0],[1364083200000,0],[1364169600000,0],[1364256000000,0],[1364342400000,0],[1364428800000,0],[1364515200000,0],[1364601600000,0],[1364688000000,0],[1364770800000,0],[1364857200000,0],[1364943600000,0],[1365030000000,0],[1365116400000,0],[1365202800000,0],[1365289200000,0],[1365375600000,0],[1365462000000,0],[1365548400000,0],[1365634800000,0],[1365721200000,0],[1365807600000,0],[1365894000000,0],[1365980400000,0],[1366066800000,0],[1366153200000,0],[1366239600000,0],[1366326000000,0],[1366412400000,0],[1366498800000,0],[1366585200000,0],[1366671600000,0],[1366758000000,0],[1366844400000,0],[1366930800000,0],[1367017200000,0],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]]
Thanks for your help.
I'm not sure, the problem is that you can't see the chart? That's cause your data contains '
Check the jsFiddle: http://jsfiddle.net/SqZY2/1/
You have this:
data = '[[1362355200000,672],[1362441600000,9764],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]]';
Must be this:
data = [[1362355200000,672],[1362441600000,9764],[1362528000000,9839],[1362614400000,9906],[1367103600000,0],[1367190000000,0],[1367276400000,0],[1367362800000,0],[1367449200000,5490]];
I'm working on project to display stock information using Highstock.
Question 1:
I tried to display ohlc data using ohlc graph, high and low using areasplinerange graph, and volume using column chart.
Everything works fine, if i zoom 1m, 3m, 6m, YTD, and 1y. Here is the snapshot. link1. But if zoom to All, The graph messed up like this link2.
Am i wrong in my coding or it's bug?
Question 2:
In the same chart, I have code to change the type of graph from ohlc to line. It works fine when I zoom to 1m, 3m. Here is the snapshot link3. But it show me no line chart when i zoom to 6m, 1y, and All. Here is the snapshot link4.
How can this happen?
Thank you for your help.
The Code:
Here is the code that i used to display the chart
$.getJSON(url, function (data1) {
$.getJSON(urlprediction, function (data2) {
var ohlc = [],
volume = [],
closed = [],
forecast = [],
dataLength1 = data1.length;
dataLength2 = data2.length;
for (i = 0; i < dataLength1; i++) {
ohlc.push([
data1[i][0], // the date
data1[i][1], // open
data1[i][2], // high
data1[i][3], // low
data1[i][4] // close
]);
closed.push([
data1[i][0], // the date
data1[i][4] // close
]);
volume.push([
data1[i][0], // the date
data1[i][5] // the volume
])
}
for (i = 0; i < dataLength2; i++) {
forecast.push([
data1[i][0], // the date
data1[i][1],
data1[i][2], // close
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: title
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 360,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 433,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'ohlc',
name: stockname,
data: ohlc,
}, {
type: 'areasplinerange',
name: stockname,
data: data2,
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
}]
});
});
});