We Keep Coding

How to plot new chart from already displayed highchart series

I am tried to get the series from the already displayed highchart and use that series to plot a new chart in another one html div, i have written below code to achieve this,finally i get the series from existing graph but can't render to the new html div
var data = chart.series; // series from already displyed
jQuery('#commonModal_res').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series: data,
});
note : throwing too many recursion error

The problem occurs because you're trying to assign the complete and already built series object, instead of configuration object which is required. In order to make it work, you need to assign the configuration object by this way:
$('#new_con').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series:charts[0].userOptions.series,
});
Then your chart should be rendered properly.
Additionaly, you can access appropriate chart by the Highcharts.charts array on global Highcharts object, where all charts are stored, just like that:
series: Highcharts.charts[0].userOptions.series,
In this case creating new charts array is unnecessary.
Live example: http://jsfiddle.net/cqfj5t34/

Highcharts Stacked Percentage Column Hyperlink

I have a Stacked % Column Highchart which without Hyperlinks on data sets works perfectly, however I need to link away to another page from the chart, If it was a standard column chart, I would have no issue (I have one already). But i cannot seem to work out why I'm getting an undefined error on the link.
Ive searched around for a working example but havent been able to find one matching the stacked percentage column.
I've setup a fiddle to indicate where im up to, any help appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Space Overview'
},
xAxis: {
categories: ['a', 'b', 'c', 'd']
},
yAxis: {
min: 0,
title: {
text: 'Total Space (%)'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
location.href = this.options.url;
}
}
}
}
},
subtitle: {
text: '+ Items relate to items in the dispay cabinets.',
align: 'left',
x: 10
},
series: [{
name: 'Free',
data: [1498, 1123, 556, 1176],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}, {
name: 'Used',
data: [1234,233,23,759],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}]
});
http://jsfiddle.net/Mooglekins/qv8z5a2o/

This is a great question! I did some digging and think I've found a good solution for you.
First, I needed to update how you defined the custom value in your series. To capture certain values in events, I moved the url attribute within each data point. So now, each point has their y value and the new url value.
(Note: I used dummy URLs here since I wouldn't be able to connect to the ones you provided outside your website.)
series: [{
name: 'Free',
data: [
{ y: 1498, url: 'http://www.google.com' },
{ y: 1123, url: 'http://www.yahoo.com' },
{ y: 556, url: 'http://www.bing.com' },
{ y: 1176, url: 'http://www.msn.com' }
]
}, {
// second series here
}
]
Next, I updated your events call. Now that we've moved the url attribute to each point, we can refer to that value as point.url (as you could the y value using point.y).
What I also did here is use window.open vs. window.location. This will be a better experience for your users so they don't lose sight of the chart. Keep this if you wish.
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function (event) {
window.open(event.point.url);
}
}
}
}
}
Here's your updated fiddle with these changes: http://jsfiddle.net/brightmatrix/qv8z5a2o/5/
I hope this helps!

How To Load CSV File Data On HighChart?

I am trying to using highchart library into Xcode for showing chart In mobile application. Objective C to calling highchart library. For data load I have Included local .CSV file Into Xcode. Now If I am using below code to read the data from CSV file, I cant print the data and chart data also not loading.
My Code Below
$(function () {
$.get('data.csv', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : ''
},
rangeSelector : {
enabled : false
},
scrollbar : {
enabled : false
},
navigator : {
enabled : false
},
plotOptions: {
line: {animation: true},
series: {
marker: {
enabled: true,
fillColor: '#FFFFFF',
lineWidth: 2,
symbol: 'url()'
},
enableMouseTracking: true
}
},
series : [{
name : 'AAS Stock Price',
csv:data,
/*data : [
[1233705600000,13.36],
[1233792000000,13.78],
[1233878400000,14.25],
[1234137600000,14.64],
[1234224000000,13.98],
[1234310400000,13.83],
[1234396800000,14.18],
[1234483200000,14.17],
[1234828800000,13.50],
[1234915200000,13.48],
[1235001600000,12.95],
[1235088000000,13.00],
[1235347200000,12.42],
[1235433600000,12.89],
[1235520000000,13.02],
[1235606400000,12.74],
[1235692800000,12.76]],*/
tooltip: {
valueDecimals: 2
}
}]
});
});
});

data: {
csv: data // data is your param you set in get csv call
},
,
refer Documentation here

For loading data directly from CSV file you should add Highcharts data module and then set the data like:
$.get('data.csv', function(csv) {
$('#container').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
More info about data module can be found in Highchars Docs - here.

Forcing two xAxis to be the same in Highcharts

At the moment I have two entirely different charts
$(div).highcharts({
title: {
text: ""
},
credits: {
enabled: false
},
xAxis: {
type: "datetime",
},
legend: {
enabled: false
},
yAxis: yAxis.ranking,
series: data.rankings
});
and
$(div + "Count").highcharts({
chart: {
type: 'column',
},
title: {
text: ""
},
credits: {
enabled: false
},
xAxis: {
type: "datetime",
},
yAxis: yAxis.count,
series: data.counts
});
I need the xAxis of both to match up identically. Both charts ordinarily have 4 series and tend to line up quite nicely, however in the scenario where they have between 1 and 3 series, then the second chart goes out of sync with the top one and centres in the middle with a big amount of whitespace on either side.
I was wondering if there was a way to force the second graph to take on the exact xAxis of another graph.

xAxis is an object
Maybe can you just declare this object outside highcharts methode.
Inside both highcharts methode use the declared object.

Yes, you can use linkedTo option http://api.highcharts.com/highcharts#xAxis.linkedTo

Adjusting the appearance of a javascript- Shield UI Chart

I have a problem with Shield UI Chart. I need to hide all text on my X axis, that is dateTime. But i can't visualize the chart when I add the code that hides the axis.
Below is the code that I am using. Will appreciate any assistance fixing it.
<script type="text/javascript"> $(function () { $("#chart").shieldChart({
axisX: {
axisTickText: {
enabled: false
}
axisType: 'datetime'
},
axisY: {
title: {
text: "Total Sales statistics"
}
},
primaryHeader: {
text: "Aaron's cars sales"
}, dataSeries: [{ seriesType: 'bar',
collectionAlias: 'New Cars Sales Volumes',
data: [325000, 425000, 316000, 378000, 390000]
}, {
seriesType: 'bar',
collectionAlias: 'Used Cars Sales Volumes',
data: [125000, 175000, 158000, 130000,101000,98000]
}]
});
});
</script>

You have forgotton to put a comma between the different properties. You have axisTickText:{} and there must be a comma, because there is one more property following- axisType.
axisX: {
axisTickText: {
enabled: false
},
axisType: 'datetime'
},