w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Highcharts: Avoid showing extra x axis points when max x-axis value defined
You can simply get length of data, and then set proper max, see: http://jsfiddle.net/Fusher/fj6d2/2378/ var data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], len = data.length; len = len < 6 ? len : 6; Then in options for Highcharts: xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], min: len }, series: [{ data: data }]

Categories : Highcharts

Highcharts line chart 2 y axis to one x axis
Use scatter <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sample title</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script> $(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, title: { text: 'Predicted Population Peaks'

Categories : Highcharts

How to set variable as categories in Highcharts
You can simply put it like this : var country = ['Africa', 'America', 'Asia', 'Europe', 'Oceania']; $(function () { $('#container').highcharts({ chart: { type: 'bar' }, title: { text: 'Historic World Population by Region' }, subtitle: { text: 'Source: Wikipedia.org' }, xAxis: { categories: country, title: { text: null } }.... ...... }); Here is the working fiddle : http://jsfiddle.net/3gGYK/ I hope, you want to know the same.

Categories : Javascript

Highcharts hide categories that don't fit
you need to pass catagories as a json from your server side and replace with the catagories array you have categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] that will solve your problem . categories: {catagories_json}

Categories : Javascript

Highcharts add points but not to all categories
You can use the indexes into your categories: http://jsfiddle.net/BwyAj/ var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] ... series: [{ name: 'John', data: [[categories.indexOf('Apples'),5], [categories.indexOf('Oranges'), 6]] }, { name: 'Jane', data: [[categories.indexOf('Grapes'),2]] }, { name: 'Joe', data: [[categories.indexOf('Grapes'),2], [categories.indexOf('Bananas'), 4]] }]

Categories : Highcharts

Highcharts -- Getting categories from mysql
You can use something like this: $.getJSON("averageBytesPerPort.php", function(json) { var options = { chart: { renderTo: 'avgbytes' }, title: { text: 'Average Bytes Per Port' }, pane: { size:'80%' }, xAxis: { title: { text: 'PORTS' }, categories: data.categories }, yAxis: { min: 0, title: { text: 'Bytes' } }, series: [{ type: 'bar', name: 'Average Bytes', data: data }] } chart = new Highcharts.Chart(options); });

Categories : PHP

Highcharts - Categories and X,Y data
The problem is that you are assuming Highcharts will start from 1, while they start from 0. If you will remove all x-values from data, you will see that are starting from 0. Unfortunately this is part of Highcharts logic (based on Javascript arrays) and won't be changed. And just in case - don't try to use logarithmic axis with categories.. ;)

Categories : Highcharts

HighCharts setting categories and series using JSON
data:[impressionsArray] is wrong, just give data: impressionsArray and same goes with data: [intsArray], which shall be data: intsArray also, the categories: [WidgetNameArray] shall be categories: WidgetNameArray

Categories : Jquery

Highcharts: minorTickInterval doesn't work with specified categories
It is stated in the API that (bolding mine): minorTickInterval: Number Tick interval in scale units for the minor ticks. On a linear axis, if "auto", the minor tick interval is calculated as a fifth of the tickInterval. If null, minor ticks are not shown. On logarithmic axes, the unit is the power of the value. For example, setting the minorTickInterval to 1 puts one tick on each of 0.1, 1, 10, 100 etc. Setting the minorTickInterval to 0.1 produces 9 ticks between 1 and 10, 10 and 100 etc. A minorTickInterval of "auto" on a log axis results in a best guess, attempting to enter approximately 5 minor ticks between each major tick. On axes using categories, minor ticks are not supported. Try it: Null by default, "auto" on linear Y axis, 5 units on linea

Categories : Highcharts

Highcharts : categories in format with double quotes
According to comment discussion: You should change your code from: for(i=0;i<arrayCodeSeries.length;i++) { var temp = arrayCodeSeries[i]; temp = '['.concat(temp,']'); arrayCodeSeries[i] = temp; } to: var temp = []; for(i=0;i<arrayCodeSeries.length;i++) { var items = arrayCodeSeries[i].split(','); temp.push(items); }

Categories : Highcharts

How to retrieve parent category when using grouped categories in Highcharts?
You almost got it. Talking about tooltip, you can reach parent category name with this.x.parent.name. Looks like that you can get any parent level this way; Try it: jsFiddle

Categories : PHP

Highcharts: Stacked bar chart display categories data, not series
Why don't you just use shared tooltip? Just set tooltip.shared = true and everything will work fine. See example how to format shared tooltip here.

Categories : Highcharts

Highcharts series and categories not adding dynamically from ajax request
You're modifying the categories and the data but the chart has no way to be notified of that. You need to do categories.push() and then redo chart.xAxis[0].setCategories(categories,true) again, and same with the data, chart.series[0].setData(trend_series,true) in your success function in the ajax call. The true option triggers the chart.redraw()

Categories : Javascript

Highcharts min y-axis value
You can manually set the min and max on the X axis. yAxis:{ min: 0, max: .001 }, http://jsfiddle.net/6hyfk/2/

Categories : Javascript

Get corresponding y-axis value for x-axis in HighCharts
You should be able to look through the series data points to find the point with the correct x value, and then just read it's y value. The points can be obtained using chart.series[0].data This returns an array of points. Iterate through the array until you find the point corresponding to your required x value.

Categories : Highcharts

Set x-axis range in highcharts
Min and max should be timestamps, not date objects. Proper code: xAxis: { min: new Date('2000/10/22').getTime(), max: new Date('2010/10/22').getTime(), }, http://jsfiddle.net/34CZK/3/

Categories : Highcharts

Highcharts Y-axis per serie
yAxis starts with 0, not with 1, so you are trying to set last series to non existing series. [{ ... } ,{ type: 'line', name: 'data4', yAxis: 4, // max is 3 data: data4 }] Second issue is to change options to proper format (mistaken by series name): [{ ... } ,{ type: 'line', name: 'data4', yAxis: 3, data: data[3].data // }]

Categories : Json

Highcharts Series name on X-Axis
Complete the categories as: categories: [ 'Tokyo', 'New York', 'London', 'Berlin' ] then the stacking option as: plotOptions: { column: { pointPadding: 0.2, borderWidth: 0, stacking: 'normal' } } Then your data in series as: series: [{ name: 'Tokyo', data: [49.9,null,null,null] }, { name: 'New York', data: [null,83.6,null,null], }, { name: 'London', data: [null,null,48.9,null] }, { name: 'Berlin', data: [null,null,null,42

Categories : Javascript

Highcharts Datetime axis
You can use formatter to implement correction of the month. One fix for xAxis to display correct month: xAxis: { type: 'datetime', labels : { formatter: function() { var myDate = new Date(this.value); var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate()); return Highcharts.dateFormat('%e. %b',newDateMs); } } } And similar one for tooltip: tooltip: { formatter: function() { var myDate = new Date(this.x); var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate()); return '<b>'+ this.series.name +'</b><br/>'+Highcharts.dateFormat('%e. %b', newDateMs) +': '+ this.y; }

Categories : Jquery

Highcharts: X-axis off by 2 hours
this might be a time zone issue highcharts by default assumes timestamps are supplied in UTC you may try to using Highcharts.setOptions({ global: { useUTC: false } }); this would make highcharts display data in your browsers timezone

Categories : Javascript

How to align two pie graphs (highcharts) next to each other
You can have multiple series of pie chart data on the same chart var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie' }, title: { text: 'Group Name' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], center: ['20%'], name: 'foo' }, { data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], center: ['80%'], name: 'bar' }], plotOptions: { pie: { dataLabels: { enabled: false } } } }); jsfiddle: http://jsfiddle.net/4NtBw/

Categories : Highcharts

HighCharts one y axis automatic for each serie
Something like this should work: var yAxis = new Array(); yAxis[0] = opts.yAxis; for (var i=1; i<opts.series.length; i++) { yAxis[i] = $j.extend(true, {}, opts.yAxis); //Change offset, color, opposite... yAxis[i].title.text = opts.series[i].name; } opts.yAxis = yAxis;

Categories : Javascript

Highcharts Date/Time and X-Axis
After playing with an official example and the documentation, I found a way to get interval every two hours but you can get easily interval every hours. Here is the options you have to define in your Highcharts creation : $(function () { $('#container').highcharts({ chart: { ... }, title: { ... }, subtitle: { ... }, xAxis: { type: 'datetime', tickInterval: 3600 * 1000, ... }, yAxis: { ... }, tooltip: { ... }, legend: { ... }, plotOptions: { ... }, series: [{ ... pointInterval: 3600 * 1000, pointStart: Date.UTC(2006, 0, 01, 0, 0, 0, 0), data: [ ... ] }] }); }); Playing with the tic

Categories : Highcharts

Highcharts x-axis category overlap
have modified your code, tickInterval : 2, labels : { y : -15, rotation: -45, align: 'right' } FIDDLE DEMO Just check is that acceptable, you can do the same for Y axis too. just play with labels : { y : -15, rotation: -45, align: 'right' } values. you should be done.

Categories : Jquery

How to align highcharts legend to bottom right?
In addition to specifying the alignment of the legend, you can also offset it using x and y offsets. For instance, in your case you could move it down a bit like this: legend: { enabled: true, floating: true, verticalAlign: 'bottom', align:'right', y:40 }, http://jsfiddle.net/kqvNJ/ The other legend options are specified here: http://api.highcharts.com/highcharts#legend.y

Categories : Highcharts

Highcharts - how can I center labels on a datetime x-axis?
The trick is to use the x-axis labels object like this: xAxis: { type: 'datetime', labels: { useHTML: true, align: 'center', formatter: function () { //using a specific class for the labels helps to ensure no other labels are moved return '<span class="timeline_label">' + Highcharts.dateFormat(this.dateTimeLabelFormat, this.value) + '</span>'; } } You can see that the formatter will keep whatever dateTimeLabelFormat has been set by the user or default. Then have a callback that does something like this: function (chart) { var $container = $(chart.container); var $labels = $container.find('.highcharts-axis-labels .timeline_label'); var $thisLabel, $nextLabel, thisXPos, nextXPos, delta, newXPos; $labels.each(function () { $thisLa

Categories : Javascript

Highcharts double y axis constant 0 value on both sides
Example for you: http://jsfiddle.net/5m9JW/343/ Compare pixelPosition until setting extremes will get the same result. var i = 15; while (chart.yAxis[1].translate(0) != chart.yAxis[0].translate(0) && i > 0) { chart.yAxis[0].setExtremes(chart.yAxis[0].getExtremes().min - chart.yAxis[0].translate(chart.yAxis[1].translate(0), true)); i--; };

Categories : Javascript

Can a Highcharts Polar chart have a logarithmic y-axis?
Yes, this is possible but with one limitation: yAxis.min have to be higher than 0, for example: http://jsfiddle.net/XPZhe/3/

Categories : Highcharts

Inclined x-axis and grid lines in highcharts
I'm note sure if this what are you needed: http://jsfiddle.net/Ff2nW/42/ You can use arearange to achieve this: $('#container').highcharts({ chart: { }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 144.0, 176.0] },{ type: 'arearange', data: [[3,0,100],[11,25,125]] }] });

Categories : Highcharts

Highcharts - Keep Zero Centered on Y-Axis with Negative Values
You can do this with the getExtremes and setExtremes methods http://api.highcharts.com/highcharts#Axis.getExtremes%28%29 http://api.highcharts.com/highcharts#Axis.setExtremes%28%29 example: http://jsfiddle.net/jlbriggs/j3NTM/1/ var ext = chart.yAxis[0].getExtremes();

Categories : Highcharts

How do I force highcharts to pay attention to min and max on my secondary axis?
You could try setting your tickInterval to 10 in your y-axis definition: "tickInterval": 10 http://jsfiddle.net/2s6kK/1/

Categories : Highcharts

Graph issue when y-axis has only '0' as values in highcharts
The chart is unable to calculate a sensible y-axis scale as it has no min/max values to go on. If you tell it a max, then it renders as you want: yAxis: { endOnTick: false, minPadding: 0, max:1 }, If you don't want to iterate through your data to work out if all the points are zero, let highcharts do the work for you as it has to calculate the min/max anyway. You can call getExtremes to work out the max y value, and use setExtremes to force a particular max: chart: { plotBorderWidth: 1, type: 'column', events: { load: function (event) { var extremes = this.yAxis[0].getExtremes(); if (extremes.dataMax == 0) { extremes.max = 1; this.yAxis[0].setExtremes(0, 1);

Categories : Highcharts

add new axis to highcharts dynamically, on selection from dropdown
chart.addAxis({ // Secondary yAxis title: { text: 'Rainfall' }, lineWidth: 2, lineColor: '#08F', opposite: true }); chart.addSeries({ name: 'memory', type: 'spline', color: '#08F', **yAxis: "memory usage ",** data: itemdata }); Looking at this code. You are adding an Axis, but you are not setting the id and then you try to access the yAxis by id in the addSeries call. So, either access the yAxis by number or add an id to your Axis definition.

Categories : Jquery

Highcharts - Why is column so narrow on datetime axis?
The problem is in the maxZoom xAxis. Try to change the value. maxZoom: null fiddle Hope that solved you problem solved.

Categories : Javascript

How to align text along an axis?
try this.. <div class="line"> <div style="width:50%;float:left;text-align:right;" class="date">16 January 2013</div> <div style="width:50%;float:left;text-align:left;" class="text">Here is a line of text.</div> </div> div-s ok for you? :D

Categories : CSS

Highcharts How to get decimal point values on y-axis with big numbers
You will need to set the y-axis label format. For example: $("#container").highcharts({ // ... yAxis: { labels: { format: '{value:.2f}' } } }); More information on how the axis can be formatted can be found in the formatting documentation.

Categories : Highcharts

Highcharts - x axis incorrect date labels appearing
Sebastian Bochan - "It related with fact, that in Date.UTC you should use 3 as index of months, instead of 4, because months are indexed from 0, not 1." Cheers for the answer!

Categories : Jquery

Javascript - Convert timestamp into milliseconds for Highcharts Y axis
As I said in comments, convert series into seconds: var hms = val.split(':'); var secs = hms[0] * 3600 + hms[1] * 60 + hms[2]; series.push(secs); Then set the yAxis.formatter to this function to restore the H:M:S on the axis: function() { var h = Math.floor(this.value / 3600); var m = Math.floor(this.value / 60) % 60; var s = this.value % 60; if (h < 9) h = "0" + h; if (m < 9) m = "0" + m; if (s < 9) s = "0" + s; return [h, m, s].join(':'); } Messing about with datetime is counterproductive, since it is never meant to hold dateless time. (Disclaimer: all this deduced from the API description, I have no familiarity with Highchart.)

Categories : Javascript

Dojo + Highcharts: showAxes property moves the x and y axis
With the Dojo adapter, I have not found any solution, but I replaced this: <script type="text/javascript" src="http://www.dojotoolkit-fr.org/wp-content/uploads/dojo-adapter.js"></script> for this: <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script> and now goes correctly. See --> http://www.highcharts.com/component/content/article/2-news/58-highcharts-standalone-framework

Categories : Javascript

Highcharts - Multiple Axis Graph not displaying labels
It doesn't display any values, because no linked parameter is set for yAxis or no series is linked to this yAxis. You need to set yAxis parametr for first or second series http://jsfiddle.net/9MrYd/4/ or use linkedTo parameter: http://jsfiddle.net/9MrYd/5/ http://api.highcharts.com/highcharts#yAxis.linkedTo http://api.highcharts.com/highcharts#series.yAxis

Categories : Javascript



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.