See topic here: http://highslide.com/forum/viewtopic.php?f=9&t=22151&p=87009&hilit=13701#p87009
and the link which refers to the answer (which no longer works):
http://highslide.com/forum/viewtopic.php?f=10&t=13701
Could someone help me find/reproduce the answer, I'd like to add flags to highcharts just as is possible in highstock charts.
You should use Highstock library and Highcharts chart like in this example:
http://jsfiddle.net/SUH26/1/
<script src="http://code.highcharts.com/stock/highstock.js"></script>
var chart = new Highcharts.Chart({
//parameters
});
Related
I am looking for a highchart that looks like the following:
Select category
I have a highchart license to highchart library of visualizations. Any suggestions?
Thanks
Shuree
You can use HTML select element to control chart, at this example I change data.
var select = document.getElementById('select');
The chart is updated by this method --> Highcharts.Series#update
select.addEventListener('change', function() {
chart.series[0].update({
data: data[this.value]
});
});
Demo: https://jsfiddle.net/BlackLabel/m84f3spx/4/
I added 2 series in chart with "addSeries". Set property navigator.adaptToUpdatedData to false. Then I update data for series with "setData", if user zooms chart, but navigator is updated. If I update only 1 serie all works right. How fix it?
Example:
<https://jsfiddle.net/zrxv30sh/1>
Y̶o̶u̶ ̶s̶h̶o̶u̶l̶d̶ ̶d̶e̶f̶i̶n̶e̶ ̶b̶o̶t̶h̶ ̶s̶e̶r̶i̶e̶s̶ ̶a̶s̶ ̶i̶n̶i̶t̶i̶a̶l̶s̶ ̶i̶n̶ ̶t̶h̶e̶ ̶n̶a̶v̶i̶g̶a̶t̶o̶r̶ ̶c̶o̶n̶f̶i̶g̶.̶
n̶a̶v̶i̶g̶a̶t̶o̶r̶:̶ ̶{̶
a̶d̶a̶p̶t̶T̶o̶U̶p̶d̶a̶t̶e̶d̶D̶a̶t̶a̶:̶ ̶f̶a̶l̶s̶e̶,̶
s̶e̶r̶i̶e̶s̶:̶ ̶[̶{̶
d̶a̶t̶a̶:̶ ̶d̶a̶t̶a̶
}̶,̶ ̶{̶
d̶a̶t̶a̶:̶ ̶d̶a̶t̶a̶2̶
}̶]̶
}̶,̶
D̶e̶m̶o̶:̶ ̶h̶t̶t̶p̶s̶:̶/̶/̶j̶s̶f̶i̶d̶d̶l̶e̶.̶n̶e̶t̶/̶B̶l̶a̶c̶k̶L̶a̶b̶e̶l̶/̶n̶v̶m̶r̶y̶z̶L̶g̶/̶
After dig deeper into I found that the problem is with this part of the code:
data.forEach(function(item){
data2.push([item[0],item[1]+50,item[2]+50,item[3]+50,item[4]+50])
})
chart.series[0].setData(data);
chart.series[1].setData(data2);
chart.hideLoading();
Because chart.series[1] is defined as a navigator series which means that this setData config updates the navigator series.
Changing to chart.series[2] fix the issue.
Demo: https://jsfiddle.net/BlackLabel/w3cfLmqt/
I'm trying to make a chart where a couple of the columns need to be floating. How can this be achieved?
Thanks.
This is a waterfall chart, which is not available in Chart.js. See the issue on Github.
However, someone has made such a plugin for Chart.js, available here.
Usage of this plugin is simple, like so:
import waterFallPlugin from 'chartjs-plugin-waterfall';
var chart = new Chart(ctx, {
plugins: [waterFallPlugin]
});
I am working on Highcharts highmaps rich information on click chart.First time load the information by json array and its working fine.But when I am filter data using filters and load chart again it`s give me same error array.prototype.foreach called on null or undefined highcharts at below lines.What is solution for this?
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var points = mapChart.getSelectedPoints();
Below link I am using as reference:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/rich-info/
I will answer this question in case someone else bumps into this problem in the future (even though I saw your problem is solved in github).
I encountered this issue with Highcharts when resizing the website (having 2 pie charts and one bar graph). I managed to solve it by wrapping the initialization of the graphs in a document.ready:
$(() => {
controller.initializePieHighChart();
controller.initializeBarHighChart();
});
I want to get minortickmark value when i click on minortickmark in axis of barchart. I am getting all tickmark positions using getMinorTickPositions() in barchart. I have searched all js code in highcharts i am unable to find it.can anyone please help me. here is my code.
$('.highcharts-axis').hover(function(event) {
alert(this.x);
getAxisValue();
return false;
});
function getAxisValue(){
var chart = $('#container').highcharts();
var data= chart.xAxis[0].getMinorTickPositions();
//alert(chart.value());
alert(data);
};
In general to add click event to minor ticks will require some JS and Highcharts skills. I will try to guide you a little:
chart.xAxis[0].minorTicks - this is where all minor ticks are stored
to add click event to minorTick, use: chart.xAxis[0].minorTicks['value'].mark.on('click', callback)
now in callback you can do your stuff for specific minor tick