i try to get image of a three axial google chart but don't display any line chart , like below :
http://chart.googleapis.com/chart?chxt=x,y,r&chxr=1,734238,882088|2,993,1431&cht=lc&chd=t:850751,852364,828412,801830,772874,734238,768322,804502,844117,882088,839063,832920|&1364,1431,1380,1263,1168,1093,993,1099,1285,1261,1330,1261,1175&chco=76A4FB&chls=2.0&chs=200x125
we have three axial and different range numbers and want to show this two data series in one google line chart image
with something like below you can draw two different range series :
http://chart.googleapis.com/chart?cht=lc&chd=t:2768,2538,2439,1205,1367,1694,1897,2011|2722,2686,2669,2669,2669,2667,2666,2666&chxt=x,y,r&chs=450x200&chds=1205,2768,2666,2722&chxr=2,2666,2722|1,1205,2768|0,1,8,1&chg=3,50,1,0,3&chco=0a6cff,ff9e0c&chdl=visit|price&chdlp=r
Related
I have three graphs:
A line graph time series with only 1 line on it
A line graph time series with n lines on it (n could be 5 could be 50)
A histogram (actually a stacked column chart)
Graph 1 & 2 have the same timeseries axis and therefore they should have a shared zoom (accomplished) and same tooltip.
I have used this demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/
and this jquery: Highcharts Synchronized charts display tooltip
to get exactly what I wanted for graph 1 & 2.
However when I added graph 3 a few strange things happened:
The tooltip is now shared with the histogram (it shouldn't be -- histograms aren't time-series)
The x-zoom now zooms on the histogram creating a time-series axis?
The shared tooltip doesn't work between graph 1 & 2 now
The perfect solution would be to have a histogram that also filtered as the histogram is measured off graph 1. (NB: lots of data is clipped for the jsfiddle)
pretend this is a code snippet so I can link jsfiddle
Fiddle:
https://jsfiddle.net/cj2tdy7v/1/
function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle
I'm trying to use Highcharts.js to create a chart made up of two types: a box plot and a column inside the same cartesian axis system.
I've got two y axes with different scales (the one for the box plot data on the left and the one for the columns on the right).
The series share the same categories on the x-axes.
Can I combine this two rapresentations in the same chart? The results should be something like this: Boxplot combined with Columns example.
You could use both series types without any problems. To set each point of boxplot series on left side of each column you could use pointPadding and pointGroupping for columns and pointPlacement for boxplot.
Example: http://jsfiddle.net/zyy2g6xs/
I am trying to create a highmaps chart that contains two mapbubble series so that it will show two bubbles in each country rather than just one. I am however struggling to understand how I can manipulate the x coordinates of the series so that they are not drawn on top of each other.
You need to manipulate second serie's data and change x/y values, because points are printed according to these values.
I have plotted chart bars as Stacked, but overlapped one on another. but only last two series need to overlap, not first one. First series(additional income) need to be plot as same as 'stacked : "normal"' do.
Here is the jsfiddle to explain my experiment with highchart.
Is there any option for Series object to achieve that?
Thanks
Peter
You should disable gruping or set pointWidth http://api.highcharts.com/highcharts#plotOptions.column.pointWidth