I have the following gauge chart, the store is loaded from xml file.
var gaugechart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
width: 600,
height: 200,
insetPadding: 20,
flex: 1,
renderTo: 'gaugeDiv',
store: store,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: 7
}],
the maximum value is 100, but I want to use a maximum value from the value in the store.
Note: in the store there is actual and max value such as
[{actually:5},{max:10}]
I want a gauge using these value. How can I change this max value?
Use the gaugechart.axes to enumerate and set minimum and maximum values for any axis.
Related
Here is my partial code:
plotOptions: { scatter: { width: 2, height: 2, depth: 2 } },
yAxis: { min: -1.50, max: 1.50, title: null },
xAxis: { min: -1.50, max: 1.50, gridLineWidth: 1 },
zAxis: { min: -1.50, max: 1.50, showFirstLabel: false },
legend: { enabled: true }
where XYZ have fixed sizes. My data is always different: sometimes max value could be 60, sometime max value = 0.89
It makes 3D graph not useful, if i setup XYZ for 50 MAX and MIN for small data.
So, my idea is create 3D graph based on data coming on that time.
I am very new to Highlight chart and have no idea how to make charts dynamic. I googled, but could not find solution. Maybe, anyone has idea?
I want my Y-Axis on my grid to increment by 1 (for example: 1,2,3,4,5 and so on).
Currently I have it set like this:
axes: [{
type: 'numeric',
position: 'left',
minimum: 0,
increment: 1,
title: {
text: '',
fontSize: 15
},
fields: 'total',
grid: true
},
In my test data, the field 'total' current largest value is 3. If I set the 'maximum' on the axes to 3, it goes into decimal places and its increment changes to 0.2, but if I set it to 10, it increments correctly.
Set both minimum and maximum property. Add property majorTickSteps and set that to the difference between minimum and maximum. So: minimum: 0, maximum: 3, majorTickSteps: 3.
$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 0.5
},
title: {
text: 'Number'
},
xAxis: {
categories: [ .......... ]
},
yAxis: {
categories: [ .......... ],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '' +
this.series.xAxis.categories[this.point.x] +
'<br>' +
this.series.yAxis.categories[this.point.y] +
'<br>' + this.point.value;
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ .......... ],
http://jsfiddle.net/Slate_Shannon/0mvgmhLb/6/
This is a heatmap chart. The chart looks okay as-is, but should have more data. However, if I add any additional data, the chart breaks.
Note that a large part of the data is commented out. This starts with the data that begins with
[50,0,null],
[50,1,8380],
[50,2,37430],
(note that I removed the axis labels and the data in the code shown above.)
If you change the position of the beginning of the comment tag to so that the "50" data gets charted, then the chart fails.
Is this just too much data, or is there a way to create a heatmap that needs to be approx 20 x 90 cells?
Set turboThreshold to 0, from the Highcharts API:
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
http://api.highcharts.com/highcharts/plotOptions.heatmap.turboThreshold
Example: http://jsfiddle.net/0mvgmhLb/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
turboThreshold: 0,
...
Try loading the Highcharts Boost module.
The boost.js module is a module to allow quick loading of hundred
thousands of data points in Highcharts.
Instead of relying solely on SVG to display the graph, this module does the following to boost performance:
... drawing the graph on a canvas, then copying over the contents to
an image tag inside the SVG, using a data URL.
Link to official blog post.
Just load the module after highcharts.js (lib/modules/boost.js).
This can be solved by providing the colorAxis with a min and max value. Highcharts has issues with calculating the max value with extremely large data sets.
I have a problem with Highcharts where the Ceiling of one of my two y-axes is not being respected.
Y-axis "1" represents percentage values, so has a Floor of 0 and a Ceiling of 100.
Y-axis "2" represents monetary values, so has a Floor of 0 and a Ceiling of null.
For some reason, the labels for y-axis "1" go up to 150.
If I change the corresponding series data so that the value 0 is changed to 20, the problem seems to go away and the labels stop at 100 as they should.
var dataX = [0, 67, 43, 100, 100, 80];
var dataY = [950, 900, 807, 650, 600, 450];
$(function () {
$('#container').highcharts({
series: [{
name: 'Series 1',
data: dataX,
yAxis: 0},
{
name: 'Series 2',
data: dataY,
yAxis: 1}],
yAxis: [{
floor: 0,
ceiling: 100,
title: {
text: '1'
},
},
{
floor: 0,
ceiling: null,
title: {
text: '2'
},
opposite: true}]});});
http://jsfiddle.net/2bzew/2/
Can anyone explain why this is happening?
I had a similar problem, but I found that using the following solves the issue:
maxPadding: 0,
minPadding: 0,
The default for these values are both 0.05 so that will be added to your data and cause highstock to make the y axis bigger than intended. Zeroing them out seems to fix the problem for me.
I also recommend to set the following so that maximum value still has a label:
showLastLabel: true,
http://jsfiddle.net/M4bVz/
From Highcharts API:
When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks. This can be prevented by setting alignTicks to false. If the grid lines look messy, it's a good idea to hide them for the secondary axis by setting gridLineWidth to 0. Defaults to true.
I have updated your fiddle with these corrections.
chart: {
alignTicks: false
},
...
yAxis: [{
...
gridLineWidth: 0,
...
http://jsfiddle.net/2bzew/3/
You can always create your own tickPositioner, or set directly tickPositions: http://jsfiddle.net/2bzew/4/
See docs and more examples:
tickPositioner
tickPositions
For my highchart, I want to set maximum value of 100 and minimum value of 1.
When I try to code like this, it outputs is 0-100 not 1-100.
If I change or remove max range, it works fine for small values of y.
yAxis: {
min:1,
max:100,
reversed: true,
title: {
text: 'Rank'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
You can try
chart.yAxis[0].setExtremes(1,100);
http://api.highcharts.com/highcharts#Axis.setExtremes
If it is dynamic data/tick data you can set
startOnTick : false
This problem is discussed here also http://forum.highcharts.com/viewtopic.php?f=9&t=6862
You can force the y-axis to have specific tick intervals using the tickPositioner function in the y-axis e.g.
tickPositioner: function () {
var positions = [1, 25, 50, 75, 100];
return positions;
}
http://jsfiddle.net/cU2md/