w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
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 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

With nvd3.js/d3.js, how can you have a scatter or line chart with discrete/non-numeric/non-time-series X-Axis values?
The key is to use an ordinal sale for the x axis. Ordinal scales are constructed by calling d3.scale.ordinal(). The domain would be an array of your titles (you can use the native map method on your array of data to pull out the titles dynamically). The range needs to by an array of the same length as the domain array, specifying each xcoordinate in pixels that will correspond to the titles. See this example here: http://tributary.io/inlet/5788637 You can fork it and try adding a yScale (in this case it will be constructed by d3.scale.linear since it is a continous number scale) and making a y axis following a similar pattern as the x axis.

Categories : D3 Js

adding series from existing highcharts chart
this is what you need function redraw(chart) { // Delete all the series. /* while (chart.series.length > 0) { chart.series[0].remove(false); } */ // Add the new series. chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]); chart.redraw();

Categories : Javascript

Highcharts logarithmic chart not displaying series on webpage
It's strange, reported here - thanks! You can workaround this: change from columnrange to column in data change from high to y set min for yAxis: 1 Working example: http://jsfiddle.net/3rcRh/2/

Categories : Highcharts

Highcharts: How to plot Bar Chart where each series is plotted together rather than separated?
You can configure it by groupPadding http://api.highcharts.com/highcharts#plotOptions.column.groupPadding

Categories : Highcharts

highcharts will not chart, it says "Cannot read property 'series' of undefined"
Just place var chart; outside all functions, next to your document ready handler to make it global. EDIT: Also, add a reference inside the load call load: function() { chart = this; // `this` is the reference to the chart requestData(); }

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

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

Highcharts: How to ensure that two column series starts from same point on X-axis ( visually )?
It looks like you want each 4 quarterly columns to line up with the yearly ones. The reason this isn't happening is that the yearly columns are centered on the years, rather that starting on the year. You can adjust this using the pointPlacement option: series: [ { name: 'Yearly Returns', color: 'rgba(167, 169, 172, 0.3)', 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], pointWidth: 62, enableMouseTracking: false, pointPlacement:'between', pointInterval: 365 * 24 * 3600 * 1000 // yearly }, http://api.highcharts.com/highcharts#plotOptions.column.pointPlacement http://jsfiddle.net/wMhJn/

Categories : Highcharts

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

Bubble chart , scatter chart ,candlestick chart using core plot
Core Plot natively supports scatter plots and candlestick charts. You can make a bubble chart easily by using custom plot symbols for a scatter plot and varying the size of the plot symbols to represent the third variable.

Categories : IOS

How can I vary the colour of a point on a scatter-graph in VBA/Excel as a function of the X, Y co-ordinates of the point itself?
Here's a simple example of how to access the x and y value for each point: Sub Tester() Dim s As Series, i As Long, x, y Set s = ActiveSheet.ChartObjects(1).Chart.SeriesCollection(1) For i = 1 To s.Points.Count x = s.XValues(i) y = s.Values(i) If x > 3 And y < 40 Then s.Points(i).MarkerBackgroundColor = vbRed End If Next i End Sub

Categories : Vba

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

Series Hidden when Dynamically Updating Series Type from Column to Line [Highcharts 3.0]
Just adjust the zIndex for each of the series just like you said: series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5], zIndex: 10 },{ name: 'Cleveland', data: [10, 4, 11, 14.5, 18.2, 21.5], zIndex: 20 }] See it running here.

Categories : Highcharts

highcharts series remove function deletes all original series data (even after stored in new variable)
since hChart.series is an array, you can easily clone the array with var backup_series = hChart.series.slice(0); So you can restore the original series when needed.

Categories : PHP

highcharts scatter with 4 quadrants
Just mocked up this example, based on previous work by @jlbriggs. To add the quadrant coloring, I resorted to drawing it with the chart.renderer (I couldn't find a better way using axis plotBands): function(chart) { // on complete var width = chart.plotBox.width / 2.0; var height = chart.plotBox.height / 2.0 + 1; chart.renderer.rect(chart.plotBox.x, chart.plotBox.y, width, height, 1) .attr({ fill: 'lightblue', zIndex: 0 }) .add(); chart.renderer.rect(chart.plotBox.x + width, chart.plotBox.y, width, height, 1) .attr({ fill: 'yellow', zIndex: 0 })

Categories : Javascript

Get json data into Highcharts scatter plot
Not sure about this, but at first glance I think the array returned from the php file requires an additional square bracket outside it in order to be parsed as proper json. Currently it is: [[65,44],[66,37]..][[75,36],[72,42]..] From what I know, this is just two arrays. What you want is to enclose these arrays within an array. Try changing this to: [[[65,44],[66,37]..],[[75,36],[72,42]..]] That is, add an extra square bracket outside and separate the two arrays using a comma. In addition, here: series: [{ name: 'Night', data: json(1) }, { name: 'Night', data: json(2) }); json(1) and json(2) are interpreted as function calls. You should instead use: series: [{ name: 'Night', data: json[0] }, { name: 'Night',

Categories : PHP

Display multiple points with exact same value in scatter HighCharts
To add click events, use plotOptions.scatter.events.click. However, I don't know what is the purpose of displaying the same points in the same place with the same value.

Categories : Highcharts

Highcharts label behind the second series (but above the first series)
Unfortunately dataLabels can be or under series, or above. You can't set different zIndex for different dataLabels, so to set zIndex use: plotOptions: { series: { dataLabels: { zIndex: 1 } } } Second thing is about useHTML. When set to true, HTML tags are used in rendering labels, but HTML tags are always above SVG/VML, so zIndex won't work. Example: http://jsfiddle.net/YHwMf/17/

Categories : Highcharts

Highcharts piechart with slice animation and drilldown on click together throws exception in chart and breaks the pie chart
The problem is with actual running animation. I advice to not use setting translation to a pie chart until all animations for a slice are don, see: http://jsfiddle.net/5H675/5/ function setTranslation(p, slice) { p.sliced = slice; if (!$(p.graphic).is(':animated')) { if (p.sliced) { p.graphic.animate(p.slicedTranslation); } else { p.graphic.animate({ translateX: 0, translateY: 0 }); } } }

Categories : Highcharts

Remove extra chart area on Highcharts Gantt chart
It looks like you are forcing this area by having y axis padding and the lines by having a tick interval of 1. yAxis: { tickInterval: 1, .. // minPadding: 0.2, // maxPadding: 0.2 Going back to the default padding gives pretty good results, but the default of .01 may still be too much if your chart grows taller.

Categories : Javascript

Highcharts scatter plot - make tooltip not follow pointer
for this you can go with a fixed tooltip like here for this you need positioner: function () { return { x: 80, y: 50 }; } this will make the tooltip render at afixed position always. Hope this is what you need

Categories : Javascript

Flag a line chart series if it is over another series
This seemed to work fine for me. Sub tester() Dim co As ChartObject For Each co In ActiveSheet.ChartObjects CheckChart co.Chart Next co End Sub Sub CheckChart(cht As Chart) Dim s As Series, sForecast As Series, sShould As Series Dim i As Long 'see if we can find the required series on this chart For Each s In cht.SeriesCollection Debug.Print s.Name If s.Name = "forecast spendings" Then Set sForecast = s If s.Name = "spendings should-be" Then Set sShould = s Next s 'series located? If sShould Is Nothing Or sForecast Is Nothing Then MsgBox "required series not found!" Else 'found the series, so compare the point values 'assumes same # of points in both lines ' and same start/en

Categories : Excel

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, Selecting a second Point within the Point.select event
In the button action you select only one point from one chart, because use use chart.series[0].data[i].select(); in first object. Only what you need is add the same action for second chart. http://jsfiddle.net/rphne/1/ EDIT: You can also use setState() function to sychronise both charts. http://jsfiddle.net/rphne/6/

Categories : Javascript

Zoomable scatter chart
From what it looks like, I would guess that the scatter plot has hard coded axis max and mins. Check the "Axes" tab under chart properties, and uncheck the scale boxes. That should allow the chart to zoom in.

Categories : Misc

Kendo UI Scatter Chart Grouping
I'm pretty sure the stock chart doesn't support x/y (i.e. scatter) data - if you look at the docs (http://docs.kendoui.com/api/dataviz/stock-chart) there are category- and value-axis config parameters, but nothing for x- and y-axes.

Categories : Kendo Ui

Sample Scatter Excel Chart using OpenTBS
Create a basic XY chart using the wizard in Ms Word. Save the chart without changing it. Let the values and the design. Select the chart, and in the contextual menu, chose "Format of the zone" or something like this. In the "Alt Text" tab, in zone "Title", enter "a nice chart". Save the template. At the PHP side: $template = 'demo_ms_word.docx'; $TBS->LoadTemplate($template); $ChartNameOrNum = 'a nice chart'; // Title of the shape that embeds the chart $SeriesNameOrNum = 1; $NewValues = array( array( 1.5, 2.0, 3.2, 33), array(1.77, 2.88, 2.88, 2.99) ); $NewLegend = "OpenTBS is so strong"; $TBS->PlugIn(OPENTBS_CHART, $ChartNameOrNum, $SeriesNameOrNum, $NewValues, $NewLegend); $TBS->Show(OPENTBS_FILE+TBS_EXIT, 'result.docx'); After it works, change the chart properties and the

Categories : PHP

a better way to color many individual markers in a scatter chart?
It is related to the fact that each call to update() redraws the chart. It would be better to disable redraw (false parameter). http://api.highcharts.com/highcharts#Point.update()

Categories : Highcharts

d3.js: click event in a bubble/scatter chart
Transitions in D3 don't support the 'on' function They only exist on selections. So you'll need to move that event listener above your transition and after your append. Like this: svg.selectAll("circle") .data(data) .enter() .append("circle") .on("click", function(d){click(d)}) .attr("class", "bubble") .attr("cx", function (d) { return x(d.Number);}) .attr("cy", function (d) { return y(d.Avg);}) .transition() .duration(800) .attr("r", function (d) { return r(d.Size); }); This should be the behavior you want anyways as you wouldn't want to add a click event listener each time you re-render your circles if you were to call renderBubbleGraph at a later time with different drawing parameters.

Categories : D3 Js

Creating scatter points on a multi line chart
You need nested selections for this. Assuming that data is a two-dimensional array, you would do something like this. var groups = svg.selectAll("g").data(data).enter().append("g"); groups.data(function(d) { return d; }) .enter() .append("circle") // set attributes

Categories : D3 Js

parameters passed when clicking a point on a NVD3 line chart or a slice in a pie chart
here you can see the plunker example ,may be you can get some help . this example is for the pie chart drill down using angularjs and Nvd3 charting lib. http://plnkr.co/edit/UjOP0k5Jo3OvQ6A79Qv9?p=preview

Categories : D3 Js

Highchart, I want to fill between some values(point to point). in areaspline chart
You need to use two series, first spline and second with area. series: [{ data: [3, 4, 3] }, { type: 'areaspline', data: [null,null,3, 4, 3, 3, 5, 4] }] http://jsfiddle.net/7wSuT/

Categories : Javascript

Formatting Highcharts Series
1) Set thousandSep to '.' and will work, see: http://jsfiddle.net/3bQne/310/ Highcharts.setOptions({ lang: { thousandsSep: '.' } }); 2) Well, you can just hide that labels - for such thing use dataLabels.formatter and check if value is below something like 5% of total, and decide to display or not that dataLabel.

Categories : Jquery

Add new series to category highcharts
see here and apply this in your high-chart i am giving just an idea by this you can resolve your problem

Categories : Javascript

how to place same highcharts series beside each other
In general something like this is not supported, however you can split data into different arrays, as each column will be one series, just linked to 'master' one, see: http://jsfiddle.net/CVvjZ/ Of course this has limitations, since you need to pre calculate values for for x: xAxis: { min: 0, startOnTick: true, max: 1, endOnTick: true, categories: ['Jan', 'Feb', 'Mar'] }, plotOptions: { column: { grouping: false, pointWidth: 20 } }, series: [{ color: colors[0], name: 'Tokyo', id: 'tokyo', data: [[0.3, 15]] }, { color: colors[0], name: 'Tokyo', linkedTo: 'tokyo', data: [[0, 10]] }, { color: colors[0], na

Categories : PHP

Highcharts add series dynamically
Set for your yAxis: yAxis: { type: 'datetime' } See fiddle EDIT: Timeline / zoom http://jsfiddle.net/DGdaf/5/ Edit: Use callback to add series, when chart is ready. However, why don't you add these series when chart is created? chart = new Highcharts.Chart(options, function(ch) { $.each(seriesOptions, function (itemNo, item) { ch.addSeries({ name: item.name, data: item.data }, false); }); chart.redraw(); });

Categories : Json

Highcharts series data
You need to use object, instead of array, { x: 1371563990000, y: 1, customParam1: 530, customParam2: 100 } Paramaters will be available in point.options.customParam1

Categories : Highcharts

Moving of series in Highcharts
Check this: http://jsfiddle.net/VXTeR/10/ Fixed step function: var step = function(e) { line.translate(-40, e.pageY - clickY); var y1 = grafico.toValue(clickY), y2 = grafico.toValue(e.pageY); move = y1 - y2; grafico.setExtremes(-100 + move, 400 + move, true, false) }

Categories : Highcharts



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