How to Programming with Highcharts

Not a perfect solution, but should be good starting point: (function(H) { H.wrap(H.seriesTypes.columnrange.prototype, 'drawPoints', function(p) { var s = this, chart = s.chart, xAxis = s.xAxis, yAxis = s.yAxis, path, x, y, r = chart.renderer, radius = s.barW / 2; p.call(this); H.each(this.points, function(p) { if(p.options.avg) { y = yAxis.toPixels(p.options.avg *...

Highcharts failing to display data

php,html,ajax,json,highcharts

To answer my own question, I found that I needed the code: header("Content-type: text/json"); At the top of my .php file....

How can I combine highcharts with different but similar x-axis categories?

I don't think there is an easy way to do it. Or rather easier than: making unique array of categories manually filling up array with 0 values, when category is missing For example: // union without diplicates: // taken from: // http://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items Array.prototype.unique = function() { var a = this.concat();...

multiple Highcharts using PHP include command

php,highcharts

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> Try to make id value different for each include, e.g. $divId = 'container_' . mt_rand( 1, 1000 ); $('#<?php echo $divId;?>').highcharts... <div id="<?php echo $divId;?>" style="min-width: 310px; height: 400px; margin: 0 auto"></div>...

limit Highcharts x-Axis grouped categories and labels style

css,highcharts

Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/ In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values: var...

Legend same colour as bullet

javascript,charts,highcharts

You can use the legend labelFormatter function to accomplish this. legend: { labelFormatter: function () { return '<span style="color:'+this.color+';">'+this.name+'</span>'; } } Reference: http://api.highcharts.com/highcharts#legend.labelFormatter Example: http://jsfiddle.net/jlbriggs/mcffqo1x/ ...

Legend title position in

highcharts,legend

Wouldn't be easier to control that title using $(".highcharts-legend-title text") ? Then set new transform attribute. But be careful with IE8 - it's using VML, not SVG. Or in a Highcharts way: var title = chart.legend.title; title.translate(x, y); // translate legend's title Demo: http://jsfiddle.net/rum1rcum/...

Show only some series in HighCharts spline chart

I would just manipulate the JSON data before injecting it into Highcharts. Assuming your JSON API returns the array of series data... // var series = getSeriesDataViaAjax(); var showTheseIndexes = [0,2,4]; for (var i = 0; i < series.length; i++) { if (showTheseIndexes.indexOf(i) === -1) { series[i].visible = false; }...

Chartkick gem, limit group in pie chart and multiple series

sql,ruby-on-rails,activerecord,charts,highcharts

Some heavy thinking and @Agazoom help and I've done this. Code: @top_count = 5 @size = CountChatLine.group(:channel)[email protected]_count @data_top = CountChatLine.group(:channel).order("count_all").reverse_order.limit(@top_count).count @data_other = CountChatLine.group(:channel).order("count_all").limit(@size).count @data_other_final = {"others" => 0} @data_other.each { |name, count| @data_other_final = {"others" => @data_other_final["others"]+count }} @sum_all_data = @data_top.reverse_merge!(@data_other_final) IDK if there is a...

Highchart Z-Index practice not functioning

You can disable events for dataLabels in CSS: .highcharts-data-labels { pointer-events: none; } And demo: http://jsfiddle.net/gdkazb9q/4/ Full solution for the above case by @Gags : events:{ mouseover: function() { $(".highcharts-data-labels").css("pointer-events","none") }, mouseout: function() { $(".highcharts-data-labels").css("pointer-events","visibleStroke") } } } ...

Easier way to draw a bar chart using highcharts?

javascript,jquery,highcharts,highstock

Yes, there is one thing which is redundant in your case - it's about filling up zeros. Instead provide index category and change data format a bit. For example: name: 'S2', data: [0, 5, 0] Can be changed into: name: 'S2', data: [ [1, 5] ] And number 5 will...

how can i add popup to flags in highchart?

Just add click events to your flag series, for example: point: { events: { click: function() { alert("clicked!"); } } } And example here. Just click on any "B" flag....

Formatting JSON data monthwise for HighCharts using MySQL

php,mysql,sql,json,highcharts

I would do this way: For every doctor do a query like this: /* get all pregrant women for a doctor, group by month and count records */ SELECT MONTH( p.reg_date ), COUNT(*) FROM nurse_dets n INNER JOIN preg_reg_other p ON n.nurse_id = p.nurse_id WHERE n.doctor_id = 1301 AND n.reg_date...

Highcharts Control Basic DrilDown Using Dom

javascript,angularjs,highcharts

Well, this is not part of the API, but as you noticed, to drill up, you need to call chart.drillUp(). To drilldown, it's a bit different and depends where you want drilldown. In short call method: chart.xAxis[0].drilldownCategory(category_index);, see: http://jsfiddle.net/vncnwd66/2/ However, there is one limitation: you can't drilldown from second level...

Highcharts inverted line where dates go upwards, not downwards (reversed series)?

highcharts,highstock

Got it working. Here is a demo of dates going upwards and the dataset is timestamped data, dateformat is weekday and no categories used: http://jsfiddle.net/ryfssm1u/ $('#container').highcharts({ chart: { type: 'spline', inverted: true }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -150, y: 100, floating: true, borderWidth: 1 },...

Prevent strtotime being encoded as string by json_encode

php,json,highcharts

http://json.org/ From Objects An object structure is represented as a pair of curly brackets surrounding zero or more name/value pairs (or members). A name is a string. and from Strings A string begins and ends with quotation marks. So I would say that according to the standard: yes, you should...

How can I have same hover point color in highcharts?

well as a roundabout to your problem you could try something like this plotOptions: { .... series: { cursor: 'pointer', dataGrouping: { enabled: false }, marker: { radius: 4, states: { hover: { fillColor: function(){ return true; } } } }, turboThreshold: 1000000 } }, ...

Is it possible to have different colored graphs in a single series in HighCharts?

javascript,colors,highcharts

Try out the following plotOptions: { column: { colorByPoint: true } }, colors: [ '#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1' ], Fiddle link :) Update 1: Dynamic series fiddle:) Update 2: Use the following code to have specific color for specific bar chart.series[0].addPoint({y: Math.random() * 100,...

Highcharts (highstock) anyway to detect maximum value in a series

jquery,highcharts,highstock

This can be done by scanning you data in the events.load: events: { load: function () { var points = [] this.series.forEach(function (entry) { entry.data.forEach(function (theData) { points.push(theData.y); }); }); this.yAxis[0].update({ max: Math.max.apply(Math, points) }); } } This is a very verbose way to do it and you could probably...

Extending Highmaps Side Effect

javascript,jquery,highcharts,geojson

Use setVisible method from default map series. Like this: http://jsfiddle.net/4mabw6zr/3 (function (H) { H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; H.seriesTypes.mappoint.prototype.pointClass.prototype.setVisible = H.seriesTypes.map.prototype.pointClass.prototype.setVisible; // use the same setVisible method as map type. H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) { p.call(this); H.seriesTypes.mappoint.prototype.translateColors.call(this); });...

EmberJS Component With Graph

javascript,jquery,ember.js,highcharts

Just go ahead and initialize the graph when you load the component: component.js import Ember from "ember"; export default Ember.Component.extend({ confirmed: false, actions: { confirm: function() { var component = this; component.set("confirmed", true); } }, initializeGraph: function() { var component = this; // code to initialize highcharts graph here }.on('didInsertElement')...

Change color of different points in same series Highcharts

javascript,jquery,angularjs,charts,highcharts

All you need to do is to replace array form of your data to object. This case you can set your color explicitly for (x = 0; x < 5; x++) { var item = $scope.jsondata[x]; newdata.push({name:setName(item.name), y:item.data, color: getColor(item.data)}); } Here's my update to your plunker http://plnkr.co/edit/UaW6RqM4PsGoy5IdpXDR...

Highcharts ColumnRange - Display time range on yAxsis instead of Date

javascript,charts,highcharts

I resolved the issue . All I changed is I assigned "from": 1 for all the varialbes data in arraylist and it starts from bottom of the chart till to reach to the end point to:... Here is jsfiddle Thanks...

Custom tooltip names Pie Chart

How about changing format fo data to array of objects? For example: [{y: 300, suffix: ""}, {y: 700, suffix: " remaining" }] Then in tooltip set add suffix info: return 'Daily KB: <b>'+ this.point.y +'</b>' + this.point.options.suffix; ...

Removing and re-adding series while keeping the same markers

javascript,angularjs,highcharts,boxplot

You need to store symbol property. For example: options.marker.symbol = this.symbol; Demo: http://jsfiddle.net/ax3o8uf3/22/...

Multiple Boxplots in one HighCharts chart

okay, problem was related to declaring the chart-type as a boxplot. in native highcharts it's done like this (as can be seen in the fiddle): chart: { type: 'boxplot' }, However, when using angularjs highcharts-ng module, we need to use the following code: options: { chart: {type: 'boxplot'} }, That's...

HighCharts JS - Getting multiple linear underlays on a scatter plot

javascript,highcharts,visualization

Basically, you can combine any kind of chart type. See their demo of a scatter plot with a regression line. As an example of a scatter plot combined with a stacked area chart, see the following code and fiddle: var Y_MAX = 6; var X_MAX = 5; $(function () {...

How to display no data found in highcharts

You can use no-data module which allows do that. Ref: http://code.highcharts.com/modules/no-data-to-display.js Example: http://jsfiddle.net/6o8o03fe/1/...

Highcharts scatter set markers

jquery,javascript-events,highcharts

They may be selected randomly by default, but to set them explicitly, try something like this: series: [{ name: 'Predefined symbol', data: [316.4, 294.1, 195.6, 154.4], marker: { symbol: 'triangle' } }], Where the symbol attribute can specify a shape or link to an icon. There are some pretty cool...

Highcharts & jQuery: add a mark by clicking with Shift key pressed, then process on release

You could try this: you create an event to catch keydown. If it is shift key code, you set a reactive variable to true. Don't use a session variable, get reactive dict if you can. (you add var pageSession = new ReactiveDict(); at the beginning of your js file) you...

How to Hide rest of the region when user clicks pie chart?

javascript,jquery,html,css,highcharts

You can use plotOptions.series.point.events.click function to tell the chart exactly what to do after the click of a slice: series: { point: { events: { click: function () { var index = this.x; $('.highcharts-series-group g path').toggle(); $('.highcharts-series-group g path:nth-child(' + (index+1) + ')').toggle(); $('.highcharts-data-labels path').toggle(); $('.highcharts-data-labels path:nth-child(' + (index+1) +...

How do I create a bar chart instead of line chart with HighCharts?

c#,asp.net-mvc,highcharts

I installed Highcharts using following command using Package manager console of Visual Studio, this install new version of DotNet.Highcharts - 4.0.0 Install-Package DotNet.Highcharts Then I Created following view (Don't forget to include JS Files). @{ ViewBag.Title = "Sample"; } @using DotNet.Highcharts; @using DotNet.Highcharts.Options; @using DotNet.Highcharts.Helpers; <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"...

Highcharts context menu hidden behind series

javascript,jquery,highcharts,click

I see two solutions for your case: display button in front of the series: http://jsfiddle.net/uy05zby3/7/ events: { load: function() { if(!this.options.chart.forExport) { this.exportSVGElements[0].toFront(); } } } make space for the button: http://jsfiddle.net/uy05zby3/5/ "chart": { "type": "bar", "zoomType": "x", "marginTop": 30 // make more space on top edge }, ...

How to make 1st bar selected in column highchart on page load?

You can use the point.select() function. So in your case, either in the chart load event, or externally after loading the chart, use: chart.series[0].data[0].select(); Example: http://jsfiddle.net/jlbriggs/j8m8d9vd/ References: Chart Load Event: http://api.highcharts.com/highcharts#chart.events.load Point Select Function: http://api.highcharts.com/highcharts#Point.select ...

Changing highcharts options with buttons

javascript,css,charts,highcharts,typescript

Since this is a broad question and there are multiple API calls I will just point you to the series options changes you can do via series\[N\].update(). It depends on what you are trying to update. Your issue with the marker on the line not showing is a syntax error:...

Angular Highcharts 10 $digest() iterations reached when object is replaced

angularjs,highcharts

It's the filter in the markup that is causing your $digest() errors.You can work around it by e.g. filtering the data in your controller. So you could have the following template. <select data-ng-model="gender" ng-change="genderChanged()" class="form-control"> <option value=""> - Select all -</option> <option value="m">Male</option> <option value="f">Female</option> </select> <salary-chart data="filtered"></salary-chart> And in...

In PHP , How to convert JSON into highchart supported format [closed]

javascript,php,arrays,json,highcharts

Use foreach to loop through one of the properties, and build an associative array using that element and the values from the corresponding element in the other property. $result = array(); foreach ($input['name'] as $i => $name) { $result[] = array('name' => $name, 'data' => array_map('intval', array_values($input['data'][$i]))); } ...

Highchart Polar chart multiple background colors to SVG

javascript,jquery,canvas,svg,highcharts

The problem is you that created backgrounds are not part of the chart. In fact, add them in the chart.events.load event, and will be included in the exported SVG: http://jsfiddle.net/9eqh0xrj/5/ chart: { polar: true, renderTo: 'container', events: { load: modelMe } }, And example for function: function modelMe() { var...

Center of chart(pieChart)

Pie center can be calculated using pie series center array (x and y coordinates), plotLeft and plotTop. Using renderer.text it is possible to add text. In redraw event additionally rendered text should be adjusted to stay in the center of pie. Example: http://jsfiddle.net/1917s4pL/ $(function () { var chart = new...

Tooltip is not hidden after formatting in highchart

javascript,jquery,css,highcharts

Figured it out. Returning false instead of null is working tooltip: { formatter:function() { if(this.y != 0) { return this.point.name + ':' + this.point.sizeText; } else { return false; } } } ...

Open Highcharts xAxis link in new window

If you want to manage labels yourself you might want to use plain HTML for them labels: { formatter: function () { return '<a href="http://www.google.com?q=' + this.value + '" target="_blank">' + this.value + '</a>'; }, useHTML: true } However this case you'll have to manage your styles youself as well...

Highcharts solid gauge with multiple series

javascript,plot,highcharts

Now simply add radius option: http://jsfiddle.net/gc323yu6/2/ series: [{ data: [83], innerRadius:'120%', radius: '110%' }, { data: [50], innerRadius:'110%', radius: '100%' }, { data: [19 ], innerRadius:'90%', radius: '80%' }] ...

How to find the width of single cell in xaxis ? ( Refer screenshot )

javascript,jquery,css,charts,highcharts

You can extract that information from xAxis object, by translationSlope param. chart.xAxis[0].translationSlope Example: http://jsfiddle.net/y5Lob9f3/...

rCharts HighCharts X-axs grouping

javascript,jquery,r,highcharts,rcharts

This forum seems not really many active users. : ) I managed to solve my own problem after did some further study on the behavior of the rcharts and highcharts for both method above. Here is the approach for the benefits of everyone who interested to do the same thing....

Add a gap between the second and third series in a Highcharts column plot with four series displayed

You need to use pointPlacement option with number value. For example: http://jsfiddle.net/9phfzewj/34/ Play around with values, which in my case are -0.1 for lefts and 0.1 for rights. As long as series.grouping is enabled, pointPlacement refers to the previous series position....

How to programmatically set navigator handles in highstock?

css,angularjs,highcharts,highstock

It's possible to set extremes without rangeSelector using xAxis.setExtremes() method: http://plnkr.co/edit/bRnV1lyJHmmx7YURTggq?p=preview chart: { renderTo: 'container', height: 600, events: { load: function() { var max = this.xAxis[0].max, range = 24 * 3600 * 1000; // one day this.xAxis[0].setExtremes(max - range, max); } } }, ...

Increment x axis value by 10 instead of 1

javascript,html,charts,highcharts

I was looking for pointInterval, which not only set the value of the tick but also of the value.

How to remove year from Highchart

you can use xAxis-> labels -> formatter function to foramt the date as you want. Here in your case since you have not mentioned the start of the time and interval for those value , Library started the plotting from its default values. now the same way as you did...

Get all points in Highcharts scatter plot?

in the chart object which you got i.e var chart = new Highcharts.Chart(options); you have every aspect about the chart in it Here is the part where you can find the plotted data chart.series[0].data ...

Highchart - Changing label text of the yaxis programatically

Have a look at axis.update(). This will let you modify just about anything about an axis. To get which axis to update you can specify by the index (the order in which you added he axis starting at 0).

Is there a way to disable a legend item by default?

javascript,math,highcharts

Yes, you can do this. In the series options for the data element you do not want to show set the visible property to false. 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], visible: false }, { data: [144.0, 176.0, 135.6, 148.5, 216.4,...

Highcharts Gauge chart is rounding down max number

Add endOnTick:false (http://api.highcharts.com/highcharts#yAxis.endOnTick) to your axis. For example yAxis: { min: 0, max: 666772, title: { text: 'Quarter 1' }, endOnTick:false } Here's the working sample http://plnkr.co/edit/Vbn1lpMIv8qvSfs65jL4...

Highcharts error loading maps plugin

javascript,jquery,highcharts,highmaps

Use following libraries in the following order <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script> ...

Full width arearange

javascript,html,highcharts

You can manage your x-values for arearange series: data: [ [-0.5, min, max], // 0 = index for the first category, so start before [2.5, min, max] // 2 = index for the last category, so end after ], Now just set min and max for xAxis: xAxis: { type:...

How to connect js array to highcharts

try this, you can change the time interval of setTimeout function based on the number of for loops or iteration. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> Diameter: <input type="number" id="TreeDiameter" value=""> <button onclick="myFunction()">Calculate</button> <p id="demo"></p> <div...

Highcharts Bar Chart - Labels Not Appearing in Bar

javascript,highcharts,requirejs

Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category. Demo with all labels: https://jsfiddle.net/p55t0bmf/1/...

Library duplication issue using Highcharts in Jaspersoft Studio

Finally, I have solved the problem by merging all Highcharts files I needed to draw my Bubble map chart, as suggested by @PawełFus, and enclosed the code with a condition on Highcharts variable : if (typeof Highcharts == 'undefined') { /* Optimized merge files containing both highstock.js, highcharts-more.js and map.js...

dragging cannot get to the beginning of chart highcharts

highcharts,highstock

I set ordinal:false in xAsix and the problem was resolve

Highcharts Heatmap Legend Max

javascript,highcharts,heatmap

It's another option to colorAxis. Documentation Make your colorAxis object in options like this: colorAxis: { min: 0, max: 100, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }, Full fiddle...

Highcharts - Line disappears when using logarithmic axis

highcharts,axis,logarithm

It seems like this is a (solvable and unknown?) bug indeed. Somehow a logarithmic y-axis is not compatible with a negativeColor attribute. Go to line 594 of your meteogram example and remove the negativeColor: '#48AFE8' attribute: 592| zIndex: 1, 593| color: '#FF3333', 594| negativeColor: '#48AFE8' << remove this line Now...

PHP in Javascript for PhantomJS + Highcharts

javascript,php,highcharts,phantomjs

So I've figured it out. To anyone having the same issue here's the answer: in php file calling myscript.js use the following format for passing arguments through exec(): exec('/usr/bin/phantomjs myscript.js param1 param2',$op,$er); Then in the js file do the below to get the parameters passed: var args = require('system').args; var...

Add dataLables to pie Highchart

javascript,json,charts,highcharts,highstock

All you need is to place your dataLabels in correct plotOptions and use point plotOptions: { pie: { dataLabels: { enabled: true, format: '{point.name}:{point.y}', } } } You can see a working sample here http://plnkr.co/edit/5VI6cAqVoIibhAJ8pYfP UPDATE Formatting can also work with {y} format: '{y}', but if you want more advanced...

EXPLAINE : Highstock Displaying 1.7 million data points in Highcharts Stock

You cannot load form filesystem (security reasons in browsers) so you need to have a webserver. Please check our article how to load data and process

Highcharts issue updating chart type: not recognizing highcharts functions

http://jsfiddle.net/2j1g200g/29/ var options = { chart: { type: 'line', renderTo: 'chart_example' }, title: { text: 'Traffic' }, xAxis: { categories: ['November', 'December', 'January'] }, yAxis: { title: { text: 'Views' } }, series: [{ name: 'Hello', data: [50, 30, 60] }] }; chart = new Highcharts.Chart(options); options.chart.type = 'bar'; chart...

Highcharts GANTT chart - need to allow category with no data

Highcharts default behavior will show the category even if there is no data, unless it is the first or last category. You can just change your input array to have an empty intervals array in your case: http://jsfiddle.net/jlbriggs/2xkfm87e/1/ If you need the first or last category to be empty, you'll...

Show more data on Gauge chart with Highcharts

You are trying to use features of two Highcharts type of charts - solidgauge and gauge. It is possible to place both of them in one chart and set same (or almost the same) values for both series. Example: http://jsfiddle.net/2L1bmhb5/ $(function () { $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBackgroundImage: null,...

Highcharts GANTT Chart Tooltip Mouse-over Tracking Issue

It should be already fixed on the master branch: http://jsfiddle.net/2xkfm87e/14/ And fix will be included in the next release. URL to the branch's CDN: <script src="http://github.highcharts.com/highstock.js"></script> ...

How to show legend like Maps' in Line diagram in Highcharts?

javascript,highcharts,highstock

In general, it's not supported, but you can try to add such functionality from maps to the standard charts: http://jsfiddle.net/w9nuha8n/ (function (H) { // add colorAxis H.seriesTypes.line.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; H.seriesTypes.line.prototype.optionalAxis = 'colorAxis'; // draw points and add setting colors H.wrap(H.seriesTypes.line.prototype, "translate", function (p) { p.call(this); H.seriesTypes.heatmap.prototype.translateColors.call(this); }); //...

Unable to set xAxis min for Highstock (Highcharts)

Three things to mention: rangeSelector.selected option prevents min, remove that one xAxis.min is not enough, add also xAxis.max to see the change it won't work until you will set xAxis.ordinal to false. Ordinal option displays points equally on the available space, so there is no place for "empty space" And...

How to add custom message in Highchart's printed image?

jquery,highcharts,highstock

I see two options, both are based on load event. One is to check chart.options.chart.forExport flag. When flag is set to true, then add extra elements on the chart using chart.renderer. See demo and more info about the Renderer. Second option, is to do the same, but in exporting.chartOptions.chart.events.load callback....

Highcharts Boxplots How to get five point summary?

javascript,highcharts,boxplot

Although you have a solution for doing it server side, I took a few minutes to convert my PHP solution to a Javascript solution, to address the initial question. step 1) function to calculate percentiles: //get any percentile from an array function getPercentile(data, percentile) { data.sort(numSort); var index = (percentile/100)...

Highcharts X-Axis value on top of stacked column

The stack is a separate entity from the series or the point, so doesn't have direct access to the same properties. But with a little digging, you can make the link from the stack to the x axis categories (I always just do a console.log(this) within the formatter to see...

Highcharts : Plotting Data versus Date

javascript,jquery,angularjs,highcharts

You can set pointInterval / pointStart, like here. plotOptions:{ series:{ pointStart: Date.UTC(2015,4,1), pointInterval: 24 * 3600 * 1000 } }, Example: http://jsfiddle.net/978svgc9/2/...

Format categories (x-axis) for highcharts

To do this on your xAxis use the labels.formatter function: labels: { formatter: function() { return Highcharts.dateFormat('%H:%M:%S', parseInt(this.value, 10)); } } You can use this same formatting in your tooltip as well using tooltip.formatter....

x Axis Labels are cut off from Highcharts Column Chart

javascript,charts,highcharts,overlap

The "make the div height of the chart an absurd size" is why the truncated view was added. If you hover over the xAxis labels the full text is shown. If you want to increase the available size for the xAxis labels you can. Another recommendation would be to use...

How to set Month In Highchart same to database

php,jquery,html,mysql,highcharts

Look at this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/ with 12 column names categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] and 12 points of data data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] if you...

How to instruct highcharts scatter chart to print all dataLabels

You can set allowOverlap: true, like this: plotOptions: { series: { dataLabels: { allowOverlap: true } } } See this updated JSFiddle demonstration....

Highcharts custom export hidding on Reset

javascript,html,charts,highcharts

That line is the culprit: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2) splice modifies array. So after first call, menuItems isn't the same. So use slice() instead: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.slice(2) ...

Spline chart drawn on the xaxis in case of single value or constant values - highchart

I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

combine and merge two array into set of arrays for Highchart Pie

javascript,jquery,arrays,highcharts

Set your arr3 var as an array and push elements into it : var expense_name = amounts.expense_name; var expense_amount = amounts.expense_amt; var arr3 = []; $.each(expense_name, function(i, value){ arr3.push([value,expense_amount[i]]); }); ...

The data is not completely displayed in the stack bar Highcharts

events,highcharts,polygon

Check this fiddle: http://jsfiddle.net/vwmcuvwd/1/ Combination of these 3 properties can help you: crop: false, overflow: 'none', allowOverlap: 'true' ...

How do I catch a click event on a polygon in HighCharts without having the tooltip popping up

Polygon series can be accessed via event.currentTarget. Example: http://jsfiddle.net/ow72qjaw/ Tooltip can be disabled by setting: tooltip: { enabled: false } Hover effects can be disabled for series by using proper settings: states: { hover: { enabled: false } } If you want to disable tooltip for selected series only you...

Adding call outs to a Highcharts - Stacked Bar

css,highcharts

Live demo: http://jsfiddle.net/5joufkwa/9/ Solution is to use series.dataLabels and generate there callouts: plotOptions: { series: { stacking: 'normal', dataLabels: { align: "right", // right align for label enabled: true, useHTML: true, allowOverlap: true, overflow: "none", crop: false, y: -50, x: 145, formatter: function () { return '<div class="callout top" data-name="Jane">I...

Update Stockchart yAxis Labels Changes Positions and Label Precision

javascript,highcharts,highstock

Looks like default options are lost when updating axis. Simple workaround: http://jsfiddle.net/33cu0o9c/3/ chart.yAxis[0].update({ labels: { align: "right", x: 0, formatter: function () { return this.value; } } }); And bug is reported here....

Return Highcharts using Ajax and Python

javascript,jquery,python,ajax,highcharts

Now sure how but changing the return method helped and also the some changes with the JSON format. Every (, ' "") matters. The corrected code is bleow: @app.get('/getmyname/<jsonstring>') def getmyname(db, jsonstring): ret = """{ "chart": { "type": "column" }, "colors": [ "#00B7DE", "#00539E" ], "title": { "text": "SALES -...

highcharts datatable - function parameters

javascript,highcharts,datatable

Call drawTable function in load function, instead of reference. load: function(){ Highcharts.drawTable(this, 310, 100, 0, '', 20, 20, 2.5) } Example: http://jsfiddle.net/z9zXM/1035/...

Highcharts (grouped_category styling) and tooltip formatter not working

javascript,highcharts,scatter

1) There's not such option like series.tooltip.formatter. Only series.tooltip.pointFormat or other formats. For example: tooltip: { pointFormat: "{point.value}" } Example: http://jsfiddle.net/TFhd7/367/ 2) I think this is connected to the design changes between Highcharts 2.x and 4.x. See more in this ticket. And example after setting labels.x to -5: http://jsfiddle.net/TFhd7/368/ Regarding...

Trying to inject datapoints into iOS webView using highcharts

javascript,ios,swift,highcharts,uiwebview

UIWebView has a method called stringByEvaluatingJavaScriptFromString that you can use to run a script. I think that you can also use it to just pass and initialize any variable that you like.

Highchart Treemap: forcing layout on 3 lines

javascript,jquery,highcharts,live

That's not really how treemaps are intended to work. I would try a heatmap instead. Example: http://jsfiddle.net/jlbriggs/vk6sfdLs/ ...

PHP + mysql + highcharts

php,mysql,highcharts

Look to documentation of jQuery.get() : https://api.jquery.com/jquery.get/ First parameter of this function is URL for GET request. In Your code is data from method: MysqlDatabase->find_all_for_charts() In HighCharts package, You can find examples how to use it. Just download it from http://www.highcharts.com/download, and look for: "Ajax loaded data, clickable points" demo....

Highcharts multiple charts, each with live data

In Highcharts-land, each chart needs to be its own object. It's certainly possible to have multiple charts on the same page, but you'd have to make sure that: Each chart is instantiated separately (in this case, if you're just copying/pasting the $(document).ready part, you're probably stepping on your chart variable....

How to make a Highstocks x-axis even and regular?

javascript,highcharts,ordinal

The relevant code isn't included in the question, but I'll address the issue. You are using a baseSettings object and a custom settings object (lets call them customSettings) to form a chart. These two separate settings are merged using the jQuery extend function. Your problem here is that when both...

How to use a 'plotWidth' calculation to position a highcharts pie

I ended up doing this by editing the SVG object and calling the redraw() method on the pies. function ChartLoad() { var chart = this, centerX = chart.plotWidth * 0.5, Pie1CenterX = centerX * 1.5; var Pie1 = chart.get('Pie1'); Pie1['chart']['plotLeft'] = Pie1CenterX; Pie1.redraw(); var Pie2 = chart.get('Pie2'); Pie2['chart']['plotLeft'] = Pie1CenterX+90;...

Highcharts Density Dot Map Support?