I have a page with several charts, and I need to be able to add specific options to the exporting context menu for each chart. This is the code I am using:
myChart.options.exporting.buttons.contextButton.menuItems.push({
text: "Custom Option",
onclick: someFunction
});
Unfortunately, this adds the option to every chart, not just the chart myChart references. I'd like to be able to add an option and have it appear on only one chart.
Here is a fiddle which demonstrates: http://jsfiddle.net/4uP5y/2/
Thanks!
To add button use options for chart. Then you can set for each chart different set of options: http://jsfiddle.net/4uP5y/4/
Get default buttons:
var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
buttons.push({
text: "Tokyo Only Option",
onclick: HelloWorld
});
And set them for a chart:
exporting: {
buttons: {
contextButton: {
menuItems: buttons // or buttons.slice(0,6)
}
}
},
See the updated fiddle with result : http://jsfiddle.net/4uP5y/3/
You just needed to mark the newYork chart with exporting enabled false, like this :
exporting: {
enabled: false
}
Starting from Paweł Fus answer, I found out a cleaner solution for the general case. The main issue is you need not to mess around with original object and extend it. Instead, you'd be better cloning it. Please note that my solution requires jQuery.
function appendExportButton(mytext, myfunction){
var defaultButtons = Highcharts.getOptions().exporting.buttons; // get default Highchart Export buttons
var myButtons = $.extend(true, {}, defaultButtons);
myButtons.contextButton.menuItems.push({
text: mytext,
onclick: myfunction
});
return {buttons: myButtons};
}
To insert this button in the desired chart, define the chart this way:
var mychart = new Highcharts.Chart({
chart: {
...whatever...
},
plotOptions: {
...whatever...
},
series: {
...whatever...
},
exporting: appendExportButton("Save data in CSV format", saveCSV)
});
In the case of OP problem, this is the line you have to use:
exporting: appendExportButton("Tokyo Only Option", HelloWorld)
JSFiddle
I found another possiblity to add it only to one chart. Add following to the chart where you want to extend the context menu
exporting: {
buttons: {
contextButton: {
menuItems: [
]
}
}
},
.
Now you are able to extend the chart dynamicly with a method like
function (button) {
var userMenu = this.chart.userOptions.exporting.buttons.contextButton.menuItems;
if (userMenu.length === 0) {
var menuItems = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
for (var itemIndex in menuItems) {
userMenu.push(menuItems[itemIndex]);
}
}
userMenu.push(button);
};
. Where this.chart points to the chart which context menu should be extended
Related
I am writting this highchart in angular and I want to create my own range selector dynamically using this.chart.update. However it keeps saying undefined update not a function. How can I fix the code. Also, I am trying to export the dataTable into the graphTable div which is into a differnt tab. I have attached a image please help. [graph/tableview image][1]
You can try to get the data from the range selector events rangeSelector.buttons.events, you can also set your own datagrouping with rangeSelector.buttons.dataGrouping.
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m',
events: {
click: function () {
console.log(this);
}
}
},
}
Demo:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/rangeselector/button-click/
API References:
https://api.highcharts.com/highstock/rangeSelector.buttons.events
https://api.highcharts.com/highstock/rangeSelector.buttons.dataGrouping
Implement inside chart.events.load() with this you are already close to getting data from other variables/sources and passing it inside the rangeSelector button events.
chart: {
events: {
load: function() {
let chart = this,
rangeSelector = chart.rangeSelector;
console.log(chart);
rangeSelector.update({
buttons: [{
Demo:
https://jsfiddle.net/BlackLabel/Lgdhokfy/
API References:
https://api.highcharts.com/highcharts/chart.events.load
basically, I have made a Graph that looks like this Image.
I want to make the Graph update whenever I choose an option ( a location in this example). Any idea how could I go on about this?
It sounds like you need to update the chart data whenever the user selects a value from the dropdown. So, add an event listener to the location selector dropdown element, then replace the chart data with the data for the selected location, then call chart update. That part is very simple. It's explained in the chart.js docs under Updating Charts. https://www.chartjs.org/docs/latest/developers/updates.html
For example, if you had location data in an object and a transformData function to convert it to x/y coordinates, you might do something like this for a line chart:
const defaultLocation = 'munchen';
const chart = new Chart(chartCanvas,
{
type: 'line',
data: transformData(locationData[defaultLocation]),
options: {
animation: false,
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
},
x: {
type: 'timeseries',
},
},
},
});
const locationSelector = document.getElementById("location-selector");
locationSelector.addEventListener('change', ({ target }) => {
chart.data = transformData(locationData[target.value]);
chart.update();
});
I want a Javascript function that will build different Highcharts when I send the charts as a variable. This is because my users can draw and redraw charts with triggers. My question is similar to this one except I want to pass all the chart parameters to the function and I want to call the function onload and when certain buttons are clicked.
How to create highcharts dynamically on click buttons
After doing more reading, I think this will work:
<script>
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}]
};
function draw() {
new Highcharts.Chart(options);
}
jQuery( document ).ready(function() {
draw();
});
I use Chart.js for making charts. I discovered today new plugin for the original Chart.js.
Plugin
After i added <script> tags with the plugin, it applied automatically values to all my charts. It looks great, but it shows number values. How do i make it show labels instead of values on the pieces of the pie? I have found some posts about the subject, but they contain different commands, and i tried all i could but it didn't change anything. Also for the future, tell me please how to turn off showing values for specific chart :)
fillPie()
{
// Three arrays have same length
let labelsArr = []; // Array with some names
let values = []; // Array with values
let randomColor = [];
var ctx = document.getElementById('pie-chart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: labelsArr, // I want it to show these labels
datasets: [{
backgroundColor: randomColor,
data: values, // It shows these values
hoverBackgroundColor: "#fba999"
}]
},
// Configuration options go here
options: {
legend: {
display: false
}
}
});
}
You can find the answer in the docs of the plugin:
https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#custom-labels
options: {
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
}
}
The dev simonbrunel explained on GitHub how you can disable the plugin globally or for specific datasets. The following is a quote from the GitHub link:
That should be possible by disabling labels for all datasets via the plugin options at the chart level using the display option, then enable labels per dataset at the dataset level (dataset.datalabels.*):
new Chart('id', {
data: {
datasets: [{
// no datalabels for this dataset
}, {
datalabels: {
// display labels for this specific dataset
display: true
}
}
},
options: {
plugins: {
datalabels: {
// hide datalabels for all datasets
display: false
}
}
}
})
You can also globally disable labels for all charts using:
// Globally disable datalabels
Chart.defaults.global.plugins.datalabels.display = false
I draw a plot like this:
var items = $.get("./moonlight_sonata_diameter.data", function(data) {
items = data.split(/\r?\n/).map( pair => pair.split(/\s+/).map(Number) );
$(function () {
plot = $.plot($("#placeholder"),
[ { data: linePoints} ], {
series: {
lines: { show: true }
},
crosshair: { mode: "x" },
grid: { hoverable: true, autoHighlight: false },
yaxis: { min: 0, max: 5 }
});
});
});
Now at a later moment in time, I want to update the crosshair of the plot. However, because it is embedded in so many functions, I don't know how to access it as I am not familiar with jQuery.
Within the script, I can run:
plot.setCrosshair({x: 100})
However, in another script, at another time, there is no object called plot. Is there a way to access it still?
Actually you have put your plot creation code in document ready function and your
plot.setCrosshair({x:100}) is executed just before your plot creation code. so A simple settimeout will do the trick.
just replace
plot.setCrosshair({x: 4})
with
setTimeout(function(){ plot.setCrosshair({x: 41})}, 3000);
and this will work fine. if you call your setCrosshair function after loading the complete dom then you will not need of setTimeout function. I hope this will help and if not then let me know.
Check it at http://plnkr.co/edit/3cMHmzWEIk6c39mblb0Z?p=preview