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/
Related
I'm able to create and configure the series of a Pie chart using the following code:
createPieChart() {
this.options.series = [{
type: 'pie',
labelKey: 'os',
angleKey: 'share',
label: { enabled: true },
}]
this.options.legend = { enabled: false }
},
The labels appear like so, which means that if the label is too long it overflows both onto the chart itself and over the sides of the div it's being contained within:
I am aiming to make it so that if the label has more than 5 characters then it would only show 3 characters and the following symbols: ...
So for example, the label 'Symbian qwerfrwf wfegewdfv fewdf feewdf' for the blue section of the pie chart above would only show 'Sym...'
I know how to do this for column and bar charts where we use a formatter
label: {
formatter: (params) => {
if (params.value.length > 5) {
return params.value.substr(0, 3) + '...';
}
return params.value;
},
}
However, for a pie chart there doesn't seem to be a formatter available in the documentation (API Reference) (https://www.ag-grid.com/javascript-charts-pie-series/)
How can I achieve the style I want for pie chart labels?
legend: {
enabled: true,
item:{
label:{
formatter:(params)=>{
console.log('id',params.id)
console.log('itemId',params.itemId)
console.log('value',params.value)
return 'my legend goes here'
}
}
}
},
I can get the noData overlay working when there are no series data values, and I can get the x-axis displaying along with the noData label by setting a xAxis.max value, but I can't get the x-axis labels displaying.
Any ideas?
Ideally I would be able to do this without any fake series data (as without data I don't have any series names to provide). This is used in a column chart of well defined x values (like in the js fiddle below, with known fruits, where only each series counts are dynamic)
Closest I've been able to get is this jsfiddle:
http://jsfiddle.net/eLdn6Lfc/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
max:3
},
series: [{
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
});
You also need to set min limit to x-axis if there is no data.
Working solution here
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
min: 0,
max: 3
},
series: [{
showInLegend: false,
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
EDIT: Here's a fiddle, thanks to JordanD for getting it displaying something:
jsfiddle.net
EDIT(2): From what I can tell, this is how a single series chart displays. Adding a second series (a second element in the data array) causes the chart to display as I expected it to, but with one series, it is basically centered instead of justified. Therefore, it's not 'broken', it just doesn't behave as I expected it to.
The data series is in the form of an array of objects in the form of:
name: 'string'
data: ['array', 'of', 'data']
As can be seen in the image, my x-axis categories are displaying as a string. It's being set as
categories: dates
Where dates is an array with an array of dates in the first index. It appears that the only thing displaying in the categories is the first element of the array. Even if I try
categories: ['this', 'is', 'a', 'test']
the only thing that will show is 'this'.
and here is the console log to accompany it with a small sample of the data:
and here is the call to instantiate the chart:
$("#chart").highcharts({
chart: {
type: 'column'
},
title: {
text: 'report for ' + result[0].Name
},
xAxis: {
categories: date
},
yAxis: {
title:
{
text: 'Number'
}
},
series: dataSeries
});
What I'm trying to get is for the x-axis labels (and the columns themselves) to be spaced out to take up the full width of the chart.
The problem is that you have 9 series and each point have the same x, so each serie starts on the same tick and you have result which you have.
Solutions:
use one serie and set up a color for each point
use pointStart for each serie
set data as pairs [x,y] but xAxis should be category type.
If I understand your problem correctly an easy fix might be to add a data type to your axis.
type : 'datetime'
$("#chart").highcharts({
chart: {
type: 'column'
},
title: {
text: 'report for ' + result[0].Name
},
xAxis: {
categories: date,
type : 'datetime'
},
yAxis: {
title:
{
text: 'Number'
}
},
series: dataSeries
});
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
In Excel i was able to draw this chart from data
Chart Image
I want to convert this chart to highcharts. Data is in Google spreadsheet and I am using data module to get data directly from Google spreadsheet and show over chart. Here is code doing it.
$('#solar_chart_one').highcharts({
chart: { type: 'column' },
data: {
googleSpreadsheetKey: '0Alz3h5kIx8cWdFNHbmxqbXRILV9kbkd4V0oyX0ZyMWc'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
title: {
text: 'Power Bill Saving Options'
}
});
Here is JsFiddle for this code
Any help on how to make it look alike?
I would use the callback function and set the series you want to be a line to be a line like so:
function (chart) {
chart.series[2].update({
type: 'line',
color: 'blue'
});
}
I changed it to also be a blue line.