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/
Related
Is there any way to highlight the node on search in network chart when using highcharts in angular application
I have filtered the node from the group of nodes on search. Now i have the pillar data and node data. how can I highlight them.?
I don't find any documentation so for for this. also am new to high charts.
Any inputs or references are highly appreciated..!
You can change state of the selected points to select:
selectedPoints.forEach(p => {
p.fromNode.setState('select')
});
Live demo: https://jsfiddle.net/BlackLabel/ufmxpz6L/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#setState
Or just change their appearance, for example:
selectedPoints.forEach(p => {
p.fromNode.graphic.css({
fill: 'red'
});
});
Live demo: https://jsfiddle.net/BlackLabel/0hL34rvx/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
I have a very simple question, which I can't find a solution.
when I use the click event; I log this.id, which return undefined when I am on a rendered HighCharts.
Why is that? How can I actually get the elementID where the chart is, so I can use functions that call that element? The chart is rendered on a div class, which is used for all the charts on my page (each with different ID obviously).
Event.target returns me a rect, which I can use to a certain extent, with document.mouseup, but I would like to learn how you actually identify the chart, fi I want to access it
For example, I would like to use fancybox, but it require an ID to work
$("#ID").fancybox();
EDIT:
I am able to open the chart using the href parameter, where I render the chart; but still; I have no clue how to identify programmatically a chart, once is rendered, in the click event.
Assuming you are using the chart click event and you want the original div container:
chart: {
events: {
click: function (event) {
var myDiv = this.container.parentElement;
}
}
},
This will return the element.
I am drawing various charts on a page, and would like to avoid to have to declare in each chart, the properties that are common to every chart.
I tried an example found online, where the common part was in a {settings}, but when I try to load it, I had no luck.
I am using Highcharts. Any suggestion is more than welcome....with 16 charts on one page, I am just going crazy.
You can use merge function. See the example:
http://jsfiddle.net/nyQ2L/
var defaultOptions = {
chart:{
type:'line'
},
title: {
text:'common title'
}
};
var opt1 = Highcharts.merge(defaultOptions,{
series:[{
data:[1,2,3]
}]
});
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
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
});