score:0
if you need 3 charts you can copy-paste the initialization and just change the data and container name.
or you can make a function, that populate a chart by given data and container name. something like this:
function populatechart(renderto,data,title) {
var chart = new highcharts.chart({
chart: {
renderto: renderto,
type: 'column'
},
title: {
text: title
},
xaxis: {
categories: ['apples', 'oranges', 'pears', 'grapes', 'bananas']
},
yaxis: {
allowdecimals: false,
min: 0,
title: {
text: 'number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'total: ' + this.point.stacktotal;
}
},
series: [{
name: 'john',
data: data,
stack: 'male'
}]
});
}
and then just call it when needed:
$(function(){
populatechart('container1',[5, 3, 4, 7, 2],'title 1');
populatechart('container2',[3, 4, 4, 2, 5],'title 2');
populatechart('container3',[2, 5, 6, 2, 1],'title 3');
});
you can check my example
score:1
by setting a second container and add 3 new arrays: data2, browserdata2 and versionsdata2, don't forget to add the last two arrays (browserdata2 and versionsdata2) to the series option in the second container:
series: [{
name: 'browsers',
data: browserdata2,
size: '60%',
datalabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'versions',
data: versionsdata2,
size: '80%',
innersize: '60%',
datalabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
please check the following example (jsfiddle):
$(function () {
var colors = highcharts.getoptions().colors,
categories = ['msie', 'firefox', 'chrome', 'safari', 'opera'],
data = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'msie versions',
categories: ['msie 6.0', 'msie 7.0', 'msie 8.0', 'msie 9.0', 'msie 10.0', 'msie 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'firefox versions',
categories: ['firefox v31', 'firefox v32', 'firefox v33', 'firefox v35', 'firefox v36', 'firefox v37', 'firefox v38'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'chrome versions',
categories: ['chrome v30.0', 'chrome v31.0', 'chrome v32.0', 'chrome v33.0', 'chrome v34.0',
'chrome v35.0', 'chrome v36.0', 'chrome v37.0', 'chrome v38.0', 'chrome v39.0', 'chrome v40.0', 'chrome v41.0', 'chrome v42.0', 'chrome v43.0'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'safari versions',
categories: ['safari v5.0', 'safari v5.1', 'safari v6.1', 'safari v6.2', 'safari v7.0', 'safari v7.1', 'safari v8.0'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'opera versions',
categories: ['opera v12.x', 'opera v27', 'opera v28', 'opera v29'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'proprietary or undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
categories2 = ['a', 'b', 'c', 'd', 'e'],
data2 = [{
y: 56.33,
color: colors[0],
drilldown: {
name: 'msie versions',
categories: ['msie 6.0', 'msie 7.0', 'msie 8.0', 'msie 9.0', 'msie 10.0', 'msie 11.0'],
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
color: colors[0]
}
}, {
y: 10.38,
color: colors[1],
drilldown: {
name: 'firefox versions',
categories: ['f7', 'f6', 'f5', 'f4', 'f3', 'f2', 'f1'],
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'chrome versions',
categories: ['cn', 'cm', 'cj', 'ct', 'cb',
'cc', 'cf', 'cy', 'ct', 'cr', 'cr', 'ce', 'cw', 'cq'
],
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
color: colors[2]
}
}, {
y: 4.77,
color: colors[3],
drilldown: {
name: 'safari versions',
categories: ['s7', 's6', 's5', 's4', 's3', 's2', 's1'],
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
color: colors[3]
}
}, {
y: 0.91,
color: colors[4],
drilldown: {
name: 'opera versions',
categories: ['o1', 'o2', 'o3', 'o4'],
data: [0.34, 0.17, 0.24, 0.16],
color: colors[4]
}
}, {
y: 0.2,
color: colors[5],
drilldown: {
name: 'proprietary or undetectable',
categories: [],
data: [],
color: colors[5]
}
}],
browserdata = [],
versionsdata = [],
browserdata2 = [],
versionsdata2 = [],
i,
j,
datalen = data.length,
datalen2 = data2.length,
drilldatalen,
brightness;
// build the data arrays
for (i = 0; i < datalen; i += 1) {
// add browser data
browserdata.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drilldatalen = data[i].drilldown.data.length;
for (j = 0; j < drilldatalen; j += 1) {
brightness = 0.2 - (j / drilldatalen) / 5;
versionsdata.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: highcharts.color(data[i].color).brighten(brightness).get()
});
}
}
// build the data arrays
for (i = 0; i < datalen2; i += 1) {
// add browser data
browserdata2.push({
name: categories2[i],
y: data2[i].y,
color: data2[i].color
});
// add version data
drilldatalen = data2[i].drilldown.data.length;
for (j = 0; j < drilldatalen; j += 1) {
brightness = 0.2 - (j / drilldatalen) / 5;
versionsdata2.push({
name: data2[i].drilldown.categories[j],
y: data2[i].drilldown.data[j],
color: highcharts.color(data2[i].color).brighten(brightness).get()
});
}
}
// create the chart
$('#container2').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'browser market share, january, 2015 to may, 2015'
},
subtitle: {
text: 'source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
},
yaxis: {
title: {
text: 'total percent market share'
}
},
plotoptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valuesuffix: '%'
},
series: [{
name: 'browsers',
data: browserdata,
size: '60%',
datalabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'versions',
data: versionsdata,
size: '80%',
innersize: '60%',
datalabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'second chart'
},
subtitle: {
text: 'source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
},
yaxis: {
title: {
text: 'total percent market share'
}
},
plotoptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valuesuffix: '%'
},
series: [{
name: 'browsers',
data: browserdata2,
size: '60%',
datalabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'versions',
data: versionsdata2,
size: '80%',
innersize: '60%',
datalabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
});
Source: stackoverflow.com
Related Query
- How to add another same chart but with different data?
- how do you create muliple charts with the same options but with different data
- Add different symbols to highcharts chart with dynamic data
- Highcharts : using same div to load a chart multiple times with different series data
- How to have multiple highcharts with different series data in vuejs without repeating code
- FusionCharts Failed to draw different chart on same data source
- Why does highcharts sankey chart sometimes combine multiple nodes with same node name but different Id into one and hide the lines?
- How to add different series data for each categories in Stacked Column chart in Highcharts?
- A few histograms, each with different data but all of them having the same bin width and no gaps between bins
- How to draw two series in the same chart that has different data time in xAxis
- Highstock - How to add point if I have different data on main chart and navigator
- Add dynamic data to line chart from mysql database with highcharts
- Create six chart with the same rendering,different data (highchart )
- Highcharts: make y-axis extremes the same for two data series with different units
- How to Build a Column Chart in Highcharts with Data Entered Dynamically Within a CMS
- How to use Highcharts React to create chart with multiple lines for same XAxis?
- Highcharts - how to export chart with different scale in one click
- How to put two charts on the same page with different modules?
- How to show relation between two boxes containing same data in two different treemaps
- Pie Chart for Data on Different Things with HighChart
- How make a growth baby chart with data in mysql +PDO
- How to add different click events on each pie of a pie chart created by highcharts usin jquery
- Highcharts column chart color by single color but with different brightness level as per respective column value
- Chart data of object gets overwritten, but only the first object that is interacted with is affected
- how to show column and area charts with different y axis with same category and same x axis in highcharts
- How can I have both a legend and data labels, with different labels, in Highcharts?
- How to change color of bar in column chart with different level of percentage in highcharts
- How to make a chart with highcharts, load data from API
- How to create pie chart with only 1 series data and have background be a circle
- How to add percent symbol with data inside column in highchart?
More Query from same tag
- Adding Rails data to Highcharts series
- Official Typescript support for Highcharts
- How to draw disconnected straight lines over a graph?
- Javascript HighCharts Math Operations in ToolTip
- How linked/shared legend with pie and column?
- Highcharts reflow does not work on class selector
- How to extend or highlight a horizontal line in Highcharts?
- Line Chart Highcharts
- Trying to set a minimum height on bars in HighStock
- highcharts multi curved for different x value
- Rounded edges Gauge with Highcharts.js
- Color columns based on x axis and not on values (y axis) in highcharts
- Show spinner while export is generated in highcharts
- Highstock table data: navigable with the range selector and the navigator - scrollbar
- IE only loads remotely hosted .js files
- Highcharts - Guage - Changing the color and radius of the center black dot(circle)
- How to create multiple highchart and print in HTML page by using for loop?
- Highcharts: when having multiple columns for the same X axis value, how can I get 1 tooltip per column?
- How to reference yData from another series in each category of a highcharts column chart
- Drilldown in HighChart on Double Click
- Where can I get HighStock old versions?
- How do you reduce the space between pie chart and legend? (highcharts.js)
- Highcharts in Angular - accessing the API
- Highstock charts with Google Spreadsheet JSON
- Sliced Pie in Highcharts
- How can I set the alignment for individual axis labels in highcharts?
- Highcharts Weird Vertical Lines
- Get current visible chart data after scroll
- Update text dynamic via tooltip in Highcharts Piechart
- Highcharts - Overlapping scatterplot labels are not readable