w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Highcharts column + line combination chart with multiple series. Issue aligning line over the column
What about setting the x values for those lines? http://jsfiddle.net/qPqCW/ , { name: "Revenue", data: [ {x:-0.2, y:49}, {x:0.8, y:71.5}, {x:1.8, y:106.4}], type: "line" }, , { name: "Operating Expenses", data: [ {x:.2,y:48.9}, {x:1.2, y:38.8}, {x:2.2, y:39.3}], type: "line" } To calculate the X values, I looked to the source code. The following assumes you are using the default values of groupPadding .2, and pointPadding .1. I modified the getColumnMetrics function to get the general solution. Here's what I came up with: var columnMetrics = []; for (j=0;j<index;j++) { var categoryWidth = 1, groupPadding = categoryWidth * .2,

Categories : Javascript

Highcharts Combination Chart: Column covering line series marker
JSFiddle Just change the order of the charts. I think thats what decides whats on top. function fill_series() { nu_series = { name: "NU", type: "column", data: nu_data, stack: 0 }; all_series[0] = nu_series; dau_series = { name: "DAU", type: "column", data: dau_data, stack: 0 }; all_series[1] = dau_series; accu_series = { name: "ACCU", type: 'spline', data: accu_data, yAxis: 1, marker: { lineWidth: 2, lineColor: Highcharts.getOptions().colors[3], fillColor: 'white' } }; all_series[2] = accu_series; }

Categories : Javascript

Line chart alignment with different data sets
The graph is actually correct. Thanks to Lars for pointing out. December mark is beginning of December. There are data points from December 1 to 31. So the graph is drawn beyond December mark on x-axis.

Categories : D3 Js

Highcharts: Column chart with empty data
You will need to remove the entries in your data with null y values. This is basic javascript programming, but one way is to create a new array using the non-null entries in the old data array: newdata = []; for (i=0 ; i<data.length ; i++) { if (data[i].y != null) { newdata.push(data[i]); } } You can then use newdata in your chart in place of the data variable: http://jsfiddle.net/fYcb9/

Categories : Javascript

how do you chart multiple variables as line chart using highcharts
You need parse your dates "1/2/2013 12:00:00" to JS timestamp (time in milisecods). You can use i.e. Date.UTC() function. Secondly you have to use numbers to display chart (not strings) for CPU values.

Categories : Highcharts

Highcharts - combining column chart with scatter chart
It's not solution in .net but general idea is to calculate x-value for each of scatter points, for example: http://jsfiddle.net/3bQne/206/ var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column', }, xAxis: { categories: ['+', '-'] }, series: [{ data: [1,2], id: 'first', stack: 0 }, { data: [3,5], id: 'second', stack: 0 }, { data: [[-0.15,1],[0.85,2]], linkedTo: 'first', type: 'scatter' }, { data: [[0.15,3],[1.15,5]], linkedTo: 'second', type: 'scatter' }] });

Categories : Asp Net Mvc

HighCharts : Basic column chart, but not showing correct colors in column
I came across some syntax errors, but as a result I reproduced your example here: http://jsfiddle.net/WVgDM/ Colors are as you described.

Categories : Highcharts

Column chart overlaps to one line when there's just a group of data
The problem is that each series has exactly one point, so Highcharts aren't able to calculate required space for each series. For such cases you need to use pointRange, see: http://jsfiddle.net/Fusher/EwZsS/3/ Ref: http://api.highcharts.com/highcharts#plotOptions.column.pointRange

Categories : Highcharts

y-axes of Highcharts line chart
A solution is to put the min value to something below zero like this: yAxis: { min: -0.1 } so you will now see the values that are at 0. And set startOnTick to false

Categories : Javascript

Highcharts - position column chart from the top
You could always set your drop-off series as a columnrange type. series: [ { data: [300, 150, 85, 75, 35], pointWidth: 60, dataLabels: { enabled: true, rotation: 90, color: 'white', align: 'right', inside: true, x:-10, style: { fontSize: '25px', } } }, { type: 'columnrange', data: [[0.5,150,300],[1.5,85,150],[2.5,75,85],[3.5,35,75]], color: '#ff8546', pointWidth: 20, groupPadding: -0.2 } ] See update fiddle here.

Categories : Javascript

Highcharts line chart, hover over point selects another point on chart
Highcharts should be able to handle this without resulting in your issue, but you need to switch the order of the data: data: [ [1373932800000, 69.67575704891426], [1374537600000, 69.67575704891426] ] Fiddle

Categories : Javascript

Highcharts reversed line chart is partially hidden at min value
I'm not sure why this is a problem - you have set strict min value for yAxis, so chart is forced to cut off that line, remove that option, and this will work perfectly fine: http://jsfiddle.net/DruGa/5/

Categories : Highcharts

Highcharts - How to force line chart to be visible above X Axis
Remove the min: 0 and add startOnTick: false. That will make Highcharts compute the min value automatically and since it's no longer starting on the tick it'll draw the 0 yAxis line just a few pixels above the xAxis. See it running here.

Categories : Highcharts

Highcharts line chart with multi colored areas
Highcharts use timestamps (time in miliseconds) not dates as you have. In series / data objects should have x/y parameter, not i.e "Speed". As a results your json should looks like: {y: Date.UTC(2012,12,2), y: 42.89, "StatusCode": "1"} Date.UTC allows ot return time in miliseconds. In case when you need to have different color of part chart, you need to use additional serie. EDIT: Example: http://jsfiddle.net/D4sbc/

Categories : Javascript

clip path in highcharts chart makes line invisible
Well, I opened your example and line series is visible, but has gaps, because you use null values, so I'm not sure what is wrong? http://jsfiddle.net/eunLz/

Categories : Javascript

Highcharts column chart rendering transparent columns in IE8
I figured out the problem. It seems highcharts is having trouble rendering when I have multiple series in the small column chart. It rendered properly when I removed the second series from the column chart.

Categories : Cakephp

Hide 0 values in Stacked Column Chart in Highcharts
You can use label.formatter, for example: http://jsfiddle.net/Fusher/4NxYh/4/ formatter: function(){ console.log(this); var val = this.y; if (val < 6) { return ''; } return val; },

Categories : Highcharts

Is it possible to combine two column charts in a single Highcharts chart?
Remove groupPadding and set: plotOptions: { series: { grouping: false } } And live example: http://jsfiddle.net/rqrQ4/1/

Categories : Javascript

Highcharts spacing issue on xAxis in column chart
You can try to use groupPadding / pointPadding / pointWidth parameters and adapt columns correct with your expectations. All parametsers are documented here: http://api.highcharts.com/highcharts

Categories : Javascript

Highcharts Polar Stacked Column chart - Legend is cut off
Flow control of text in SVG:s are difficult. Increasing the with of the graph and #container would help. However this might not be possible in the design. So if that is not possible I would use javascript to split the words with the formater function. That is check each word, if it's to long split the word. That is alongword becomes along- word. There is also another hack that can be done and that is to set useHTML: true and inject a space character in the strings that are to long. However, this can mess up the formatting. Here is an example when that is done. http://jsfiddle.net/vz8nR/1/

Categories : Javascript

Highcharts (highstock) plotting incorrect date on x-axis line chart
The solution is to not use Date.UTC and just use php's date format like so: echo " [" . 1000 * date("U", strtotime($date)) . ", " . $value . "]"; This will output the epoch timestamp as defined in the manual in seconds. Times by 1000 to get milliseconds as javaScript requires.

Categories : Javascript

Stop HighCharts tooltip y-value conversion on 'area range with line' chart
You can use formatter() and return y value. http://jsfiddle.net/77mZz/1/ formatter:function(){ return this.y + '°C'; }

Categories : Highcharts

Highcharts: Change hover style in line chart when hovering over legend
Probably this API might help you. API: plotOptions.line.states.hover.lineWidth Link: http://api.highcharts.com/highcharts#plotOptions.line.states.hover.lineWidth Jsfiddle link: jsfiddle

Categories : Javascript

Highcharts column percentage stacked chart worked in v 2.3.5 broken with v 3.0.2
Colors define order of series colors, not each point. So in your case, I advice to set color for each point in second serie. { y: row1values.Black, color:'#282521' } http://jsfiddle.net/KDG5y/7/ http://api.highcharts.com/highcharts#colors

Categories : Highcharts

Highcharts: basic column chart not showing correct color
The points are showing the same color as they are in the same series. You can specify indivual point colors like this: data: [{y:49.9,color:'#f89422'}, {y:71.5,color:'#8cc641'}] http://jsfiddle.net/Zhmw2/ An alternative would be to put the two points in separate series series: [{ name: 'Jan', data: [49.9] },{ name: 'Feb', data: [71.5] } http://jsfiddle.net/H5KmK/

Categories : Highcharts

How to make stacked column chart percentages exceed 100% in highcharts
Just for anyone elses future reference, there was not "built in" solution to this problem using the stacked percentage feature of highcharts. I had to build a normal stacked chart and just convert the data and Y axis label to percentage format.

Categories : PHP

highcharts jquery dynamic change chart type column to bar
You can use inverted parameter in chart and update yAxis. http://jsfiddle.net/n9xkR/8/ $('#bar').click(function () { chart.inverted = true; chart.xAxis[0].update({}, false); chart.yAxis[0].update({}, false); chart.series[0].update({ type: 'column' }); });

Categories : Jquery

Bold X-Axis Label on Point Hover in Highcharts Column Chart
Here's a quick sample I just created. I'm tired and it could be improved. It links the axis label to the mouseover by point index: series: { point: { events: { mouseOver: function() { $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black'); }, mouseOut: function() { $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#999999'); } } } } Fiddle here.

Categories : Jquery

Creating a drilldown chart with Highcharts that contain double(multiple) columns for each column (see example for better explanation)
Check out this answer Highcharts drilldown from a series which is just a modification of the stock drilldown demo http://www.highcharts.com/demo/column-drilldown

Categories : C#

Highcharts Pie chart data Format via php
The problem is your are passing your data as a String when you are using chart.series[0].setData("["+graphData+"]"); You need to set your data as an Array. You could do that by converting your String using eval: chart.series[0].setData(eval("["+graphData+"]")); You could also use jQuery to convert your String to JSON, but in that case you must use double quotes to open and close Strings: $.parseJSON("[["www.quora.com", 0.23],["www.slideshare.net", 0.25],["me", 99.52]]");

Categories : Javascript

Highcharts chart is not loading data
Passing your data to plotOptions.series won't do anything. Your result should go inside "series", e.g: chart = new Highcharts.Chart({ chart: {}, title: {}, xAxis: {}, yAxis: {}, legend: {}, tooltip: {}, plotOptions: {}, series: result }); Providing that your "result" has a format similar to: result = [{ name: "One", data: [1, 2, 3, 4] }, { name: "Two", data: [1, 2, 3, 4] } ];

Categories : Javascript

Highcharts - rewrite data from one chart to another
You cannot update zoom type in highcharts, without destroy() chart and create new instance. In other words, you should use chart1.destroy() var chart2 = $('#container').highcharts(chartOptions); In case when you would like set range on any axis (zoom chart) you can use setExtremes() function http://api.highcharts.com/highstock#Axis.setExtremes() When chartOptions or chart2.series is undefinded you need to use $.extend({},chartoptions) $('#container').highcharts($.extend({},chartoptions);

Categories : Javascript

how to add values from a database output to the data field in Line Chart of Chart.js
First thing first You need to replace data : [0,9,0,8,56,55,40] with data : [data_array1] data_array1 is an data_string came from database, all you need to do is just convert that data array into highchart acceptable format. For that you need to fetch the data from database, implode it with comma(,), that it will return a string which will be something like this 0,9,0,8,56,55,40 Just echo it data : [data_array1]

Categories : Javascript

Rails - Create array for Highcharts Chart data
Initialize a variable before the definition of the series: array_of_records = ServerStatus.success.find(:all, :select => 'generated_at, count', :conditions => {:generated_at => DateTime.strptime("07/25/2013", '%m/%d/%Y').beginning_of_day..DateTime.strptime("07/25/2013", '%m/%d/%Y').end_of_day}, :order => 'generated_at ASC').to_json and then, inside the series definition, define data as follows: data: <%= array_of_records.map { |record| [record["generated_at"], record["count"]] } %>

Categories : Ruby On Rails

Highcharts:Legend and title overlap pie chart when updating data
That looks like a bug to me. You can work around it by adding size : 300 to your pie options. chart = new Highcharts.Chart({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, renderTo: 'container', type: 'pie' }, title: { text: '' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, legend: { verticalAlign: 'bottom' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true,

Categories : Highcharts

Highcharts stacked bar chart hide data labels not to overlap
You can iterate in each point in each serie, then check width of bar and destroy label if widht is smaller than ie.15px . http://jsfiddle.net/HA5xE/1/ $.each(chart.series,function(i,serie){ $.each(serie.data,function(j,data){ if(data.yBottom - data.plotY < 15) data.dataLabel.destroy(); }); });

Categories : Highcharts

how do you call function to pull data automaticall to chart in highcharts
events: { load: function() { // set up the updating of the chart each second var series = this.series[0]; setInterval(function() { $.getJSON('db.php', function(data) { series.setData(data); }); }, 1000); } }, 1st, series is an array, so you'll want series[0]. 2nd, you need to use setData to change the series data after the chart is drawn (http://api.highcharts.com/highcharts#Series.setData()) It's not clear from your code if you're already doing it, but you will need to set the original series : [{data:[...]}]

Categories : Javascript

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

How to hardcode chart data in my Model then have my Controller pull it from there to display it. Using Highcharts
yes you can do it in this way. have a method something like generateChart(data){ //all the chart related stuff } in ajax call success call back make a call to the generateChart method with the data you have got $.ajax({ type: "POST", url: "/chart/ajax_get_chart", // the URL of the controller action method data: null, // optional data success: function(response) { generateChart(response) }, error : function(req, status, error) { // do something with error } }); so fially the data in the model, ajax call in the controller and the gerateChart will give you the view. hope this will help.

Categories : Jquery

Highcharts display label for pie chart using html table as data source
Did some more searching and found a couple of sample that was was able to use. In case any one else is looking for the same thing here is the link to the jsFiddle www.jsfiddle.net/codedecks/KB6Zy/.

Categories : Highcharts



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