chart: {
type: ‘line’,
events: {
load: function () {
var chart = this;
// Custom HTML for date filters
var customFilters = ” +
” +
‘All’ +
‘1 Year’ +
‘3 Year’ +
‘5 Year’ +
‘YTD’ +
” +
”;
document.getElementById(‘container’).insertAdjacentHTML(‘beforeend’, customFilters);
// Event handler for date filter change
document.getElementById(‘dateFilter’).addEventListener(‘change’, function () {
var selectedFilter = this.value;
var newData = getFilteredData(selectedFilter); // Function to get filtered data
chart.series[0].setData(newData[0]);
chart.series[1].setData(newData[1]);
});
}
}
},
title: {
text: ‘Portfolio Performance’
},
xAxis: {
type: ‘datetime’,
title: {
text: ‘Date’
}
},
yAxis: {
title: {
text: ‘Portfolio Size ($)’
}
},
series: [{
name: ‘Fund Performance’,
data: generateRandomData(),
}, {
name: ‘Benchmark Performance’,
data: generateRandomData(),
}]
});
// Function to generate random data for demonstration
function generateRandomData() {
var data = [];
for (var i = 0; i < 10; i++) {
var date = new Date(2021, 0, i + 1);
var value = Math.floor(Math.random() * 10000) + 5000;
data.push([date.getTime(), value]);
}
return data;
}
// Function to get filtered data based on selected date filter
function getFilteredData(filter) {
// Implement logic to return filtered data based on the selected date filter
// For demonstration, returning random data again
var newData = [
generateRandomData(),
generateRandomData()
];
return newData;
}
\n\n[/cs_content_seo][cs_element_text _id="5" ][cs_content_seo][uberchart id="655"]
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
\n\n[/cs_content_seo][/cs_element_layout_column][/cs_element_layout_row][/cs_element_section][cs_element_section _id="6" ][cs_element_layout_row _id="7" ][cs_element_layout_column _id="8" ][/cs_element_layout_column][/cs_element_layout_row][/cs_element_section][/cs_content]