FAQ Database Discussion Community


dragging cannot get to the beginning of chart highcharts

highcharts,highstock
when I drag highchart and pull the chart to right ,I can not reach to left corner of chart like this image below always remain space between navigator and the left arrow here is fiddle http://jsfiddle.net/ne1xwc2n/...

Highcharts variable threshold

variables,highcharts,threshold,adaptive-threshold
Is it possible to set a threshold that changes across the series? like the picture attached? I already went through this link ( http://api.highcharts.com/highcharts )and couldn't find anything similar, only static thresholds. Thanks in advance...

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

javascript,colors,highcharts
I have a single series column graph with x-axis as datetime and y-axis as some constant value. I would like to show the columns in different colors based on some information I have , is this possible ? e.g. I have dynamic data coming in to plot my graph,I use...

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

c#,asp.net-mvc,highcharts
I'm using DotNetHighCharts to make HighChart's charts. This example I found makes a line chart of monthly data: Highcharts monthlyChart = new Highcharts("chart") .SetXAxis(new DotNet.Highcharts.Options.XAxis { Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" } }) .SetSeries(new DotNet.Highcharts.Options.Series { Data = new...

Removing and re-adding series while keeping the same markers

javascript,highcharts
I want to have my series redraw with the initial draw animation, to accomplish this I'm changing the "show()" method for my series to something like this: plotOptions: { line: { marker: { } }, series: { events: { show: function () { var chart = $('#container').highcharts(); var options =...

how can i add popup to flags in highchart?

javascript,jquery,highcharts,highstock
How can I add popup to flag`s of highchart ? for example for this http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/flags/ when I click on A flag the popup appear How can i add that type: 'flags', data: [{ x: Date.UTC(2011, 1, 14), title: 'A', text: 'Shape: "squarepin"' } ...

Open Highcharts xAxis link in new window

javascript,jquery,highcharts
I'm trying to create a link for the categories listed in xAxis in Highcharts $(function () { $('#container').highcharts({ xAxis: { categories: ['Jan', 'Feb', 'Mar'], title: { text: 'Day of Month' }, labels: { formatter: function () { return '<a href="http://www.google.com?q=' + this.value + '">' + this.value + '</a>'; } }...

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

javascript,jquery,highcharts,click
I have one simple column highchart. When i clicked on any bar from column chart then it is selected. But i also want by default 1st bar should be get selected. var chart = $('#container').highcharts(); I got this object on page load chart.series[0].data[0] How to make 1st bar selected as...

Highcharts GANTT Chart Tooltip Mouse-over Tracking Issue

javascript,jquery,charts,highcharts
By default, mouse-over tracking in Highcharts tracks to the closest point on the x-axis. This works well for other types of charts, however, with my GANTT chart [ http://jsfiddle.net/2xkfm87e/11/ ], this results in non-intuitive results for end users. In the sample image below, note that the cursor is closest to...

highcharts datatable - function parameters

javascript,highcharts,datatable
I want to display a datatable below my highcharts graphs. I found on the Highcharts FAQ a running example. Highcharts.drawTable = function() {...} I need to display many datatables, so i want to refactor my code in order to be able to give display parameters to the Highcharts.drawTable function. (this...

rCharts HighCharts X-axs grouping

javascript,jquery,r,highcharts,rcharts
Basically I would like to use scatter plot to show a person use how many hours to perform a task. So, the Y-axis is Time (hour) and X-axis is Day (irregular dataset). My question is, can I do X-axis category Day grouping so the data (Time) can be populated correctly?...

Highcharts : Plotting Data versus Date

highcharts
I am having some data which looks like [{"data":[22,27,22,13],"name":"Data1"},{"data":[31,31,31,50],"name":"Data2"}. Every value corresponds to a progressing day. How do I plot this data versus date, while the length of data being dynamic. I don't want to specify the "Categories", because my data is dynamic. Range varies everytime. I can supply the...

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

javascript,jquery,arrays,highcharts
I have set of two arrays like this: ["Arrear Bonus","HRA","Rent",....] [58880,25211,21355,12341,.....] and in Highcharts Pie i need to show the series like this: $(...).highcharts({ .... .... series: [ ["Arrear Bonus",5880], ["HRA",25211], ["Rent",21355], ] }); So basically i need to create a chunk of arrays by my two arrays set; i...

Highcharts - Line disappears when using logarithmic axis

highcharts,axis,logarithm
If I change the y-axis type to logarithmic on the meteogram example of the highcharts demo, the temperature line stops being visible. Is this a bug or is there something in the code preventing it from displaying when in logarithmic mode? The only change I made to the demo was...

How to remove year from Highchart

javascript,highcharts
i am very new to use Highchart http://jsfiddle.net/ktmfy6qe/1/ Here i want to remove year listening. first i want listen old data ( name: 'Random data', 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]) after that directly listen current time without showing year. Please help me...

Extending Highmaps Side Effect

javascript,jquery,highcharts,geojson
I am trying to create a dot density map of the state of Florida. While I know that Highmaps doesn't support color axis with mappoints. I extended it and it works but it comes with a side affect. When I click on one of the categories in the legend no...

Highcharts solid gauge with multiple series

highcharts
With a bit of fiddling, I can get multiple series to display nicely in a Highcharts solid gauge: series: [{ data: [50], innerRadius:'120%', }, { data: [83], innerRadius:'110%' }, { data: [19], innerRadius:'90%' }] http://jsfiddle.net/gc323yu6/1/ But this only looks right if the data is carefully arranged. When I try to...

Get all points in Highcharts scatter plot?

javascript,highcharts
Working with Highcharts, I know how to get one point by ID: var chart = new Highcharts.Chart(options); var point = chart.get(code); But how do I get all the points in a chart as an array? The reason I want this is so that I can set selected state on the...

multiple Highcharts using PHP include command

php,highcharts
How can I include multiple highcharts to the same page using php include command? I've tried this but it doesn't work : $y=$objective; $n=count($objective); for($i=0; $i<$n; $i++){ $count[]=$i; } $x=$count; include("graph.php"); $y=$temp; $n=count($temp); for($i=0; $i<$n; $i++){ $count[]=$i; } $x=$count; include("graph.php"); in "graph.php" I've this: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type"...

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

javascript,jquery,html,css,highcharts
I have pie chart representation of user locations as below in figure 1,i have successfully made the representation working but how can i make the rest of users hidden as figure 2 when click any particular sector ? Figure 1: Figure 2: Javascript : $(function () { $('#container').highcharts({ chart: {...

Highcharts issue updating chart type: not recognizing highcharts functions

javascript,jquery,charts,highcharts
I am trying to update my current highchart that I have to a new chart type, however I am having difficulty doing so. I have embedded javascript in my page, the following is below <script> chart = $(function () { $('#chart_example').highcharts({ chart: { type: 'line' }, title: { text: 'Traffic'...

Highcharts multiple charts, each with live data

javascript,jquery,highcharts,live
I have the following files: rsrp.txt, sinr.txt, rssi.txt each of them containg information like this: [1433289760000,-83.5] I want to use multiple charts on the same page. I tried to use the sample script from the Highcharts page: var chart; // global /** * Request data from the server, add it...

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

javascript,highcharts,ordinal
I am using the highstocks library for JavaScript to render some data collected as part of a school project. While highstocks has proven great, the x-axis is acting up. Due to interference, the collected data does not always come with neat intervals, and I would like the graph to reflect...

Changing highcharts options with buttons

javascript,jquery,highcharts
I have a kind of complicated first-time project going on and I'm still learning highcharts. I'm using highcharts to show data from a webserver. the user selects what data series he wants to see and it's presented in the chart. I want to have a couple of checkboxes and drop...

Unable to set xAxis min for Highstock (Highcharts)

javascript,highcharts,highstock
I have a chart very similar to this fiddle below: http://jsfiddle.net/yse0Lkq2/ And I am trying to set a xAxis.min even if the min has no value (I'm hoping it could show blank white space rather than nothing at all). I tried setting: xAxis: { min: 1147284425000, minRange: 30 * 1000,...

Highchart Treemap: forcing layout on 3 lines

javascript,highcharts
I'd like to force the layout of a Highcharts treemap to be on 3 lines (just as in a normal html table). All the items in the treemap have the same values but the jsfiddle displays boxes like row1:ACEG row2:BDFH and box I height is much bigger than the others....

Highcharts GANTT chart - need to allow category with no data

javascript,jquery,highcharts
I am trying to build a GANTT chart as in this JSFiddle example [ http://jsfiddle.net/2xkfm87e/11/ ] (I have now updated this fiddle to the working version using jlbriggs' input below. It also includes some other options I needed -i.e. tooltip on each interval.) However, I need to display all the...

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

javascript,plot,highcharts
I have a Highcharts column plot that shows four series. I would like series one and two to be touching each another (the two blue ones), then have a small gap, and then have series three and four touching each another (the orange ones). Can this be done? I haven't...

Highcharts Gauge chart is rounding down max number

javascript,math,highcharts
The problem occurs when max is set to a very large number such as 666772. Highcharts will take the number and round it down depending on what tickPixelInterval is set to. If I set the tickPixelInterval value closer to 0, then the max number on the Gauge chart starts getting...

Full width arearange

javascript,highcharts
It is possible to extend an arearange series to fill the full width of the x axis when using categorical variables? $(function() { var min = 80, max = 100; new Highcharts.Chart({ chart: { renderTo: 'chart' }, credits: { enabled: false }, legend: { enabled: false }, title: { text:...

Highcharts Control Basic DrilDown Using Dom

javascript,highcharts
I have the answer of my previous question on how to use DOM to do the drilldown and up at This Post. But I found a simple and easy to understand version of highcharts.js at Here which as you can see the code is more clear to understand. Now can...

Tooltip is not hidden after formatting in highchart

javascript,jquery,css,highcharts
I'm hiding the datalabels with 0 values by formatting it. It's working fine. But After formatting the tooltips with 0 valued data, when I hover in 0 valued part in pie chart, it show the whitebox as the mentioned in picture. I'm returning null as tooltip for 0 values. here...

Highcharts Heatmap Legend Max

javascript,highcharts,heatmap
I have a highchart heatmap and I make sure my data is between 0 and 100 (kinda percentage) However in this case, the heatmap tries to be smart and shows the legend up to 120 I understand why it works this way but in my case it is not really...

The data is not completely displayed in the stack bar Highcharts

javascript,highcharts
I have a problem with highcharts, The data is not completely displayed in the stack bar $(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Stacked column chart' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }, yAxis: { min: 0, title: { text: 'Total fruit...

EmberJS Component With Graph

javascript,jquery,ember.js,highcharts
I have an emberjs component that I was hoping to use to generate Highcharts graphs with. For example, I want to be able to do {{component-name xy_data=data}} and have a graph generate with that data. Currently, my template for the component is simple, it looks like <button {{action "confirm"}}>Click again...

Highcharts ColumnRange - Display time range on yAxsis instead of Date

javascript,highcharts
I have highchart issue . Currently it disaplys Months on yAxsis as variable but in my arraylist [you can find it in jsfiddle] there is a variable called time duration which is normal hh:mm:ss format . I want to display this on yAxis and let the bars display on this...

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

angularjs,highcharts
I've been searching for the best approach to this problem for a while and I haven't been able to find a solution. Hopefully someone can steer me into the right direction. The problem: When I change my dropdown to filter by Gender, my HighCharts directive complains: 10 $digest() iterations reached....

PHP in Javascript for PhantomJS + Highcharts

javascript,php,highcharts,phantomjs
I have just configured phantomjs which is working fine. I have it installed in order to create charts from highcharts and include them in automated email through cronjobs, based on user's info. This will be done in php and right now I have the execution running perfectly. My php is:...

Show only some series in HighCharts spline chart

javascript,charts,highcharts
I have a highchart with chart type as spline In this chart, I have about 36 series data, but the problem is that showing 36 series in one single chart is really difficult to understand and moreover almost all have almost similar data. My question is that how can we...

Highchart Polar chart multiple background colors to SVG

javascript,jquery,canvas,svg,highcharts
I'm trying to create a Quinn model with the highchart library. With all the samples from highchart and multiple pane segment colors , I could create something thats semi working. But the problem I'm getting is if I try to write the SVG to a canvas (creating a fixed image),...

Highcharts custom export hidding on Reset

javascript,jquery,highcharts
I am facing one issue with the highcharts. I have this code which renders the custom download instead of highcharts default print and download : $('#container').highcharts({ exporting: { buttons: { contextButton: { enabled: false }, exportButton: { text: 'Download', y:30, //x: 1, //y: 5, // Use only the download related...

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

highcharts
I have 2 highcharts like this:http://jsfiddle.net/bqnkeLx9/ And I want to be able combine them into something like this: http://jsfiddle.net/gy2yo184/ Basically, is there an easy way to join 2 arrays together based on another array? var category1 = [1,2,4,6,9] var arr1 = [1,2,3,4,5] var category2 = [1,3,6,8] var arr2 = [6,7,8,9]...

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

jquery,javascript-events,highcharts
I am working with Meteor (means jQuery ok) and Highcharts. For data analysis purposes, users need to be able to set markers between two initial markers by clicking on the chart. I want them to be able do that as long as shift key is hold down. Here the algo:...

How to display no data found in highcharts

javascript,highcharts
In highcharts, if there is no data found in the json value, I want to display an error message. I used this code: if(options.series[0].data.length == 0) { alert('nodatafound'); } else { var chart = new Highcharts.Chart(options); } This error appears: TypeError: options.series[0].data is undefined Data from JSON: { "chart": {...

Trying to inject datapoints into iOS webView using highcharts

javascript,ios,swift,highcharts,uiwebview
While porting an android app to iOS we hit a barrier: We have a UIwebView set up to run HighCharts (it works with their provided sample), but we can't figure out how to pass variables to Javascript in order to display real time changes. The android-equivalent of what we're trying...

Center of chart(pieChart)

javascript,css,charts,highcharts,typescript
I want to set title of pieChart in the middle of circle like this http://jsfiddle.net/NVX3S/1036/ . title: { text: 'aSD<br>500 ASD.', align: 'center', verticalAlign: 'middle', } But: title.align is the option of the svg container, not the chart align! (Imagine what will happen if left of chart will be legend...

How to connect js array to highcharts

javascript,html,highcharts
I am new to Java Script and Highcharts have a question that may be basic but have not been able to find a response in the internet. Basically, I want to connect the data generated by a user to a highchart and the question is how that linkage is done...

Highcharts (grouped_category styling) and tooltip formatter not working

javascript,highcharts,scatter
I am trying yet to build a complex dashboard which displays a project phases options (grouped by subphase) and the milestone for each. The problems I am having are as below: When I hover over the Milestone (gold diamond - scatter chart), I need to display a specific value which...

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

highcharts,highstock
I have implemented similar chart than this demo: http://www.highcharts.com/demo/area-inverted How can I reverse the series the date axis so that dates ascend towards top? EDIT: Actually I got the demo's fiddle working but not this real one. I will try to mirror it to fiddle and post a link here......

Highcharts: Multiple Columnrange with point inside of each of them

highcharts
Let's say I am doing temperature graph for 2 cities. I want to have minimum and maximum temperature for each month and average month temperature in one bar. I have found (and changed a bit) an example which works perfectly for one city (jsfiddle here). That's the result I want....

Add dataLables to pie Highchart

javascript,highcharts
I want to add labels to my pie Highchart so that the label shows the category and amount like in this example Here is my code: $('#ro-tier-1').highcharts({ chart: { type: 'pie' }, data: { googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U', startColumn: 0, endColumn: 1, startRow: 0, endRow: 3, googleSpreadsheetWorksheet: 16 }, plotOptions: { dataLabels:...

Show more data on Gauge chart with Highcharts

javascript,highcharts
I draw chart by Canvas manually like this: However, canvas is not compatiable on IE8. Now, I'd like to use HighCharts. I found the similar chart at jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/ How can I show the additional values (in sample: 76.38 and 93) and draw the needle also? UPDATE: Basically, Kacper's answer solve...

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

javascript,jquery,highcharts
I'm currently using a combination of pie charts and stand alone SVG images in a chart but I have encountered a positioning problem with the pies. The pies are linked to each other and as the chart is resized, I want them to remain the exact distance away from each...

Highcharts Boxplots How to get five point summary?

javascript,highcharts,boxplot
I want to use HighCharts to create boxplots. As I can see in the docs I need to already provide Highcharts with the required five-point-summary, i.e., min, max, q1, q3, median values for creating the boxplot. Given an arbitrary-length array constisting of numbers, how can I calculate these five numbers...

Highcharts failing to display data

php,html,ajax,json,highcharts
I am trying to create a simple program that takes weather data from my database that I have setup, and display it on a webpage. The way I have it setup right now is that you have to enter a value in the text box in order to get the...

mysql_fetch_assoc() expects parameter 1 to be resource , array given {Laravel}

laravel,highcharts,laravel-5,highstock
$result=DB::table('Table_26') ->select('id','data','((unix_timestamp(time) * 1000) as datetime) ->order_by('datetime') ->get(); $rows = array(); while($r = mysql_fetch_assoc($result['sql'])) { $rows[] = $r; } print json_encode($rows); a get problem of mysql_fetch_assoc() expects parameter 1 to be resource, i want to get like this i need this to working with highstock ...

Highcharts X-Axis value on top of stacked column

highcharts
I'm using some PHP loops generate a series of charts for individuals.I'm trying to place the X-Axis category point on top of my column for each point. The relavent code is: xAxis: { categories: [<?php echo implode(',', $year); ?>], title: { text: 'Year' } }, yAxis: [{ min: 0, title:...

Library duplication issue using Highcharts in Jaspersoft Studio

javascript,highcharts,requirejs
I have a problem with Highcharts libraries. I have created various charts with the Custom Visualization tool available in Jaspersoft Studio. They do not use all the same library, e.g. I have a Bubble Map chart which uses Highmaps.js and a Stock chart which uses Highstock.js. Every report seems to...

Custom tooltip names Pie Chart

javascript,charts,highcharts
I'm using Highcharts pie chart and I want to add custom suffix for each point. For example now I have this in the tooltip formatter: tooltip : { formatter : function() { return 'Daily KB: <b>'+ this.point.y +'</b>'; } }, and the way the pop up is displayed is something...

PHP + mysql + highcharts

php,mysql,highcharts
I want to display mysql database in highchart. I found an example where take data from document, but I want to use function. When i use function the program doesn't work. The output of the function are the same as the document before the change. Perhaps there is some error...

Wrong x-dots in Highcharts

javascript,jquery,highcharts
I need render graph with the same placement dots and x-axis labels. If minimum date matches with start of week - all ok (graph1), otherwise dots and x-axis label differ (graph 2) Sample...

Formatting JSON data monthwise for HighCharts using MySQL

php,mysql,sql,json,highcharts
There are two tables. First table shows me the number of pregnant women under one nurse. Keep in mind that there are many nurses who come under one doctor. Each pregnant woman is mapped to a single nurse and each nurse is mapped to a single doctor. So the hierarchy...

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

highcharts
Hi Highcharts community, I'm curious to know if there is a way to disable a single legend item by default. For example, if there were 3 legend items- "Accepted" "Ideal" "Prediction", is it possible to have ONLY the "Prediction" legend item disabled after the chart loads without having to click...

EXPLAINE : Highstock Displaying 1.7 million data points in Highcharts Stock

javascript,json,charts,highcharts,highstock
Hello everyone i'm a beginner in highstock i want to work with this to convert my data to graph then i find some problem in this example of Lazy Loading i have much question : need to change this highstock to my data just use a simple data like this...

Highcharts scatter set markers

javascript,highcharts
How can I specify the marker shape per population in a Highchart scatter plot? It seems to me that they are selected randomly or from a list ?

Highcharts Density Dot Map Support?

javascript,jquery,highcharts
At my work my boss is asking me to implement a dot density map . Now I can't get into the details but I have implemented a simple lat/lon map as shown in this link: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/mappoint-latlon/ I am using the state of Florida because that is the point of interest...

Prevent strtotime being encoded as string by json_encode

php,json,highcharts
I am building data for a status dashboard that uses Highcharts.js, and loading it with ajax, however when using json_encode my timestamps are getting quoted, which means Highcharts chokes on them. The code is: $responseData = array(); foreach ($monitors as $monitor => $data) { foreach (array_reverse($data['responsetime']) as $responsetime) : $responses[]...

Easier way to draw a bar chart using highcharts?

javascript,highcharts
I started to try to use Highcharts. It seems that in order to draw a bar chart, I need to fill up these two properties like this: xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], crosshair: true }, series: [{ name:...

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

events,highcharts,polygon
I have a chart <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> $(function () { $('#container').highcharts({ series: [{ type: 'polygon', data: [[153, 42], [149, 46], [166, 45]], color: '#ff0000', enableMouseTracking: true, events: { click: function(event) { alert("I am clicked"); } } }] });...

Prevent y-zoom for specific series/y-axis on highcharts

highcharts,data-visualization
I've got a spline chart with two y-axis which both use the same x-axis cycles (seconds). Zoom (xy) is enabled and works fine but now i want to zoom xy only on one series that is connected to one of the two y-axis. The other series should be static for...

x Axis Labels are cut off from Highcharts Column Chart

javascript,highcharts
I am attempting to get the full label displayed in the x axis, but highcharts keeps on cutting it off. I tried using the crop, overflow, and margin options discussed in other posts to no avail. The only option that worked was to make the div height of the chart...

Increment x axis value by 10 instead of 1

javascript,html,charts,highcharts
I'm using highcharts and I got my x axis which is incremented like that: My axis is incremented by 1 like that: 1,2,3,4,5,...,200 but I would like an axis with the value: 10,20,30,40,50,...,2000 So I would like to increment the x axis by 10 instead of 1....

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

highcharts
I'm using Highcharts, I want to have a legend like Maps instead of default Line graph's legend, for specific line only. For example, using this legend http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/ legend: { layout: 'horizontal', borderWidth: 0, backgroundColor: 'rgba(255,255,255,0.85)', floating: true, verticalAlign: 'top', y: 25 }, instead of http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/ legend:...

Multiple Boxplots in one HighCharts chart

javascript,angularjs,highcharts,boxplot
I am trying to show two different boxplots in one chart. This should be possible as can be seen here: http://jsfiddle.net/maw3rd18/3/ In my actual code I have the exact same code as in the fiddle, however it does not work. The result looks like this. Totally not like a boxplot....

Chartkick gem, limit group in pie chart and multiple series

sql,ruby-on-rails,activerecord,charts,highcharts
I have small problem with grouped records. Chart code: <%= pie_chart CountChatLine.group(:channel).count %> The problem is, that I have more than few :channels in database, and chart looks like this: Can I somehow take only N top :channels and sum rest of it as others or something? Or add to...

limit Highcharts x-Axis grouped categories and labels style

css,highcharts
I am trying to draw a chart as below but the x axis stops at end of year 11 which it does not at the moment. I set max to 19 but it did not work.How can I get rid of those grey lines after end of Year 11? Also...

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

javascript,php,arrays,json,highcharts
So basically I am stuck over a problem where I have an array in the format given below. I want to create a highcharts line chart using this data. Everything works well, just that I am unable to convert this JSON into a highcharts recognized JSON. { name: [ 1000,...

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

jquery,highcharts,highstock
basically i want that the image that is exported by Highchart should display some custom message along with the chart

Legend title position in

highcharts,legend
I'm using the legend title, but it's being positioned to the left and above the legend items: While I need it to be to the right, and on the same line as, the legend items: Legend title only accepts 2 properties - title and style,. Using style - I couldn't...

Highcharts Bar Chart - Labels Not Appearing in Bar

javascript,jquery,highcharts
I've been playing around with a highcharts bar chart and noticed some strange behavior. If I have a long name in the x axis (the categories), and if I have labels enabled to show up on the bars, not all the labels will appear. If I remove the long x...

How can I have same hover point color in highcharts?

javascript,angularjs,highcharts
I want to have same hover point color as when point was in hover off state. Plunker link here For example: for success tasks I have green colored point so on hover also point color should be green but instead it turns blue. Please help Code plotOptions: { ... series:...

Highcharts context menu hidden behind series

highcharts
The context menu is hidden behind the series when the bar chart series spans across the entire chart. How can I get the menu to not be hidden behind the series? http://jsfiddle.net/kadams/uy05zby3/2/ $('#container').highcharts({ "chart": { "type": "bar", "zoomType": "x" }, "title": { "text": "" }, "xAxis": { "title": { "text":...

Highchart Z-Index practice not functioning

javascript,jquery,charts,highcharts
I have a highcharts scenario wherein my outer PIE and Inner PIE labels are getting overlapped for few cases. Now, my requirement is that person can click on PIE labels can click on Outer Pie also. Now the problem is that when someone click on overlapped area of OUTER PIE...

Adding call outs to a Highcharts - Stacked Bar

css,highcharts
I am trying to make an age timeline using a Stacked Bar from Hightcharts. I want to have multiple call outs that point to a data point in the timeline. I was going to use the tooltips but I need all the tooltips to always show and I need different...

Change color of different points in same series Highcharts

javascript,jquery,angularjs,charts,highcharts
I have recently been working with highcharts alot, and originally I got a finished product using a bar chart, but all of the different variables were in different series so it was kinda crammed. I am now trying to put stuff all in the same series (just trying different things)...

HighCharts JS - Getting multiple linear underlays on a scatter plot

javascript,highcharts,visualization
I'm trying to make some visualisations using the HighCharts javascript library, mainly I'm hoping to make something very similar to what these guys have on their page: Research Affiliates - 10Yr Expected Risk & Return Mainly, I'm trying to work out how they managed to get the 2 solid linear...

How to programmatically set navigator handles in highstock?

css,angularjs,highcharts,highstock
Is there a way I can programmatically set the markers in highstock navigator, even though I want to keep marker to be set to { type: "day", count: 1, text: "1d" } but not display Zoom 1d.

How to set Month In Highchart same to database

php,jquery,html,mysql,highcharts
I want create report visitor using highchart, but i have a problem when i show data, this month in highchart not same in month in database you can see my screenshot Screenshot : "Highchart". Screenshot : "Database" you can see field in "month_visitor" this values is 05-2015 (May 2015) and...

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

javascript,jquery,css,charts,highcharts
I am new to charts and I have a question: how do I find the width of a single cell in the x-axis? ...

Issue on Drilling Down and Up in Highcharts.js Using External Dom Buttons

javascript,highcharts
Can you please take a look at This Demo and let me know how I can do the drilldown and drillup by using dom buttons in highcharts.js? As you can see I have 3 btns as <button type="button" id="msie-details" class="btn btn-default">MSIE Details</button> <button type="button" id="firefox-details" class="btn btn-default">Firefox Details</button> <button type="button"...

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

jquery,highcharts,highstock
As you know Highcharts automagically calculate the max and min for yAxis unless you specifically set something like yAxis: { min: 0, max: 100}. However in my case, I am not always sure what the max of my data is going to be, and I wanted to set the yAxis.max...

Highcharts error loading maps plugin

javascript,jquery,highcharts,highmaps
Load jQuery Load Highcharts 4.0.1 Load Highmaps 1.1.6 (which says it is compatible with 4.0.x) seeing this error: Uncaught TypeError: HighchartsAdapter.addAnimSetter is not a function === <html> <head> <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script> <script type='text/javascript' src='https://code.highcharts.com/4.0.1/highcharts.js'></script> <script type='text/javascript'...

Return Highcharts using Ajax and Python

javascript,jquery,python,ajax,highcharts
I am trying to return a highchart using AJAX from python bottle web service. The code for the web service: app.get('/getmyname/<jsonstring>') def getmyname(db, jsonstring): ret = """{ "chart": { "type": "column" }, "colors": [ "#00B7DE" "#00539E" ], "title": { "text": "SALES - VOLUME" }, "xAxis": { "categories": [w,w,w,w,w,w,w,w,w,w,w,w,w,w], "tickLength": "0"...

Legend same colour as bullet

highcharts
Working on a project where Highcharts is used to display charts. However, I want the legend to have the same colour as the bullets. Here is an image as reference: I want the '0 - 2 sec' to be purple and the '3 - 5 sec' to be orange....

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

javascript,html,charts,highcharts
while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below. But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to...

Highchart - Changing label text of the yaxis programatically

javascript,jquery,charts,highcharts
I have searched over the net and the highchart documentation, for the option required to change the label of the yaxis for a graph (let's say spline). I have gotten close to chart.yAxis[0].options.label Which seems to be valid, but could not figure out how to use it. Also, if you...

How to instruct highcharts scatter chart to print all dataLabels

javascript,charts,highcharts,overlap
I have a scatter-chart which uses dataLabels on certain elements to quickly show information about the item. This is chart-definition: chart: { type: 'scatter', height: 700 }, series: [ { data: [ { marker: { enabled: true }, x: 1, y: 18 , dataLabels: { enabled: true, formatter: function ()...

Update Stockchart yAxis Labels Changes Positions and Label Precision

javascript,highcharts,highstock
I am working on a stock chart that is using compare: 'percent' or 'value' or 'none'. The user can toggle these settings. That works except trying to update the yAxis labels such that the "%" character is not appended. I can remove this by doing: chart.yAxis[0].update({ labels: { formatter: function...

Format data to be used in Highcharts series

javascript,json,angularjs,highcharts
Hi I am trying to make a stacked bar chart using Highcharts, but the way the data has to be formatted to be consumed as a a series is tripping me up. series: [{ name: 'John', data: [5] }, { name: 'ee', data: [2] }, { name: 'aa', data: [7]...

Format categories (x-axis) for highcharts

javascript,jquery,angularjs,highcharts
I have a workingHighcharts stacked area chart I am working with. The x-axis consists of epoch timestamps, but I would like to translate them into human readable times. In the past I have done something like this: tooltip: { formatter: function() { return Highcharts.numberFormat(this.y) + ' packets<b> | </b>' +...