I want to show arrow like speedometer in Highcharts solidgauge graph. Is it possible?
Plugin Link: http://www.highcharts.com/demo/gauge-solid
Version: 4.1.9
Given the example from http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
you just have to add a second Series with the type 'gauge' like this:
{
name: 'Whatever',
type: 'gauge',
data: [80]
}
JSFiddle: http://jsfiddle.net/doc_snyder/j5owogor/
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 have a chart that works very well when using the data module with Google spreadsheets. However I need to stop using Google sheets and use CSV on my own server instead. Some of my charts are working, but some aren't. Here's one that is not working. It uses the second column to set the point color, but it's not recognizing it. Any idea what might be wrong here? I edited some of the csv entries to try to make it work, but it's not working much:
http://jsfiddle.net/jmunger/cf6L4bmk/20/
var chart = Highcharts.chart('gfx', {
chart: {
type: 'bar',
},
data: {
csv: document.getElementById('csv').innerHTML,
itemDelimiter: ',',
seriesMapping: [{
color: 2,
label: 3
}]
}
});
console.log(chart);
That problem seems to be a bug in a data module, so I reported it here: https://github.com/highcharts/highcharts/issues/13283
As a workround you can use other color formats:
0;1;blue
1;2;rgb(155,155,55)
2;3;red
Live demo: http://jsfiddle.net/BlackLabel/0gjbn4m6/1/
i need to do something, i tried everything but i cannot get what i want.
I have one chart in one container, and at some point a have to render that chart to another div, but without losing the first one, so... i need to duplicate that chart but in a new container.
Im able to get the chart that im refering to, but i need something like getting the options of this chart so i can initialize another chart, with same options but in a different container.
The chart is generated dinamically, so i do not have the options before it is rendered, so the only way i can get the option in order to replicate the chart i getting the options of an already painted chart.
Is there any way to achieve that?
Thank you.
You can use chart.userOptions property to get the options needed to create a second chart:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
xAxis: {
max: 10
}
});
$('#duplicate').on('click', function() {
Highcharts.chart('container2', chart.userOptions);
});
Live demo: http://jsfiddle.net/BlackLabel/9q70mvky/
When I am using the mapbubble I get an error 17
without it I see the map fine but of course no bubbles on the map :(
the data is
series : [{
name: 'Countries',
mapData: mapData,
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
name: 'Population 2013',
data: data,
maxSize: '12%',
mapData: mapData
}]
and again, if I remove mapbubble I see the map, but with the type, I receieve error 17
tx for any assistance
regards
Sean
'mapbubble' is Highmaps series type. For Highcharts use 'bubble'. You will need to load highcharts-more.
Demo: http://www.highcharts.com/demo/bubble
Error 17 means:
The requested series type does not exist
This error happens when you are setting chart.type or series.type to a
series type that isn't defined in Highcharts. A typical reason may be
that your are missing the extension file where the series type is
defined, for example in order to run an arearange series you need to
load the highcharts-more.js file.
Is it possible that you have highcharts-more.js missing?
Check this SO answer: HighCharts and Map Bubble are not compatible
I am trying to export a Pie chart with data labels. I'm using the Phantomjs server side export functionality. I get the chart image back correctly but the datalabels don't show up. The sample data structure in the web version adds the data labels as expected.
Is there specific configuration requited to get the data labels to show up?
I'm on HIghcharts 4.0.1
The JSON I'm sending over to the phantom server is:
{"infile":"{ legend: {enabled: false},chart: {borderWidth: 0},colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],credits: {text:'CannLabs'},title: {text: 'Potency results'},plotOptions: {pie: {dataLabels: {enabled: true,color: 'black',format: '<b>{point.name}</b>: {point.percentage:.1f} %'}}},series: [{type: 'pie',name: 'Potency Results',data: [{name: 'CBD-V', y: 0.00},{name:'CBD-A',y: 0.00},{name:'CBG',y: 0.00},{name:'CBD',y: 0.01},{name:'THC-V',y: 0.00},{name:'CBN',y: 0.01},{name:'THC',y: 0.87},{name:'CBC',y: 0.02},{name:'THC-A',y: 0.00}]}]};"}
This appears to be a bug in the 4.0.1 version of highcharts. I upgraded to the master version of the highcharts.js file and the labels are now rendered correctly.
If the accepted answer above doesn't help you, try adding animation: false to your series configuration, like so:
plotOptions: {
series: {
animation: false
}
},