it is possible export Json data form highcharts,
It is possible include the option Download like JSON
Thanks in advance!
You can add this
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>
DEMO
You can define custom items for the exporting menu and attach onclick callback to them.
exporting: {
buttons: {
contextButton: {
menuItems: Highcharts.defaultOptions.exporting.buttons.contextButton.menuItems.concat([{
text: 'custom-text',
onclick: function() {
// custom callback
}
}])
}
}
},
example with json downloading: http://jsfiddle.net/wLergka5/
Related
I need to attach a click event to the column chart crosshair, and have found the black label "customEvents.js" module:
https://github.com/blacklabel/custom_events
As a beginner I just can't seem to figure out how to get this working. I would be grateful if someone could modify the demo fiddle to show me how it's done! I've tried placing the "crosshair" tag inside "plotOptions", inside "xAxis", and on its own, but without success.
https://jsfiddle.net/BlackLabel/Utx8g/
crosshair: {
enabled: true,
events: {
dblclick: function () {
$('#report').html('dbclick on xAxis label');
},
click: function () {
$('#report').html('click on xAxis label');
},
contextmenu: function () {
$('#report').html('context menu on xAxis label');
}
}
}
The issue looks like a regression, so I reported it on the plugin github: https://github.com/blacklabel/custom_events/issues/133
As a workaround, you can add pointerEvents: 'auto' style.
(function(H) {
H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (this.cross) {
this.cross.css({
pointerEvents: 'auto'
});
}
});
})(Highcharts);
Live demo: http://jsfiddle.net/BlackLabel/pfkmg39x/
Docs: https://www.highcharts.com/docs/extending-highcharts
I have loaded a csv file into a High Charts column chart: it works. However, I cannot figure out how to customize the chart. All the customizing options refer to hard-coded examples where the 'series' and 'categories' are right there in the code. Whereas mine is coming from a csv. How to use the customizing options? My x-axis is "Days" and y-axis is "Total Gallons"This is my code:
<script>
$.get('mergeHighChartsTotal.csv', function(csv) {
$('#map2').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Water Usage - September'
},
yAxis: {
title: {
text: 'gallons'
}
}
});
});
</script>
You can prepare a json dynamically, based on CSV. You need to load file and prepare custom parsing or use our data module. More infromation you can find here: http://www.highcharts.com/docs/working-with-data/custom-preprocessing
I'm using Jquery Select2 for my project. I want to keep a default value in a single input field when the page is loaded. I tried this by setting initSelection while I'm initiating the select2 component like this.
$(document).ready(function() {
allowClear: true,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
dataType: 'json',
url: "public/data.php",
data: function (term, page) {
return {
q: term, // search term
component: "map",
all_selected: $("#map-all").hasClass("active"),
parent_value: $("#city").val(),
child_value: ""
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
},
initSelection: function(element, callback) {
return $.getJSON("public/data.php?q="+element.val()+"&component=map&all_selected=false&parent_value=&child_value=", null, function(data) {
if ($.isFunction(callback)) {
return callback(data);
}
});
},
formatSelection: format,
formatResult: format,
});
However this does not work as it is should be.
But, when I make multiple: true, as a select2 option, this works perfectly. How do I do this for single hidden field?
Thanks & Regards!
Okay, I solved this by changing the callback from return callback(data); to return callback(data[0]);. I think the reason behind this is since the field is not a multiple field, it only accepts a single object to the callback function.
I've got a remote source which does not return id and value or label. How can I use it as a source for jquery's autocomplete plugin?
You should pass source a function that makes the AJAX request manually, and then performs some post-processing on the returned data:
source: function(request, response) {
$.ajax({
url: url,
data: request,
dataType: "json",
success: function(data) {
var processedData = $.map(data, function(item) {
return {
value: item._your_property, // Property you want to use for "value"
label: item._another_property // Property you want to use for "label"
}
});
response(processedData);
},
error: function() {
response([]);
}
});
}
Basically, use $.map to turn the array you get back into an array of objects that the autocomplete widget supports.
For a working example, check out the JSONP example on jQueryUI's demo page.
Why is my autocomplete not doing the selectFirst and mustMatch? Do I need a work around for this?
I'm using version 1.8.9 of jQuery.
Here is my setup code:
$(function () {
$("#SelectedSchool").focus().autocomplete({
source: function (request, response) {
$.ajax({
url: "/School/FindShools",
type: "POST", dataType: "json",
data: {
searchText: request.term,
maxResults: 10,
autofill: true,
selectFirst: true,
highlight: true
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.SchoolName,
value: item.SchoolName,
id: item.SchoolId
}
}))
}
})
},
select: function (event, ui) {
SchoolID = ui.item.id.toString();
$("#SelectedSchoolID").val(ui.item.id.toString());
}
});
});
The selectFirst and mustMatch options are gone in the jQuery UI autocomplete plugin. They were available in de bassistance.de autocomplete plugin, which has been deprecated.
Here's a migration guide to the new jQuery UI autocomplete.
Quoted from that guide:
selectFirst: Similar to autoFill (at the top of this list), this option is gone and has now immediate replacement, nor a need for one. The behaviour for selecting values is solid enough to make this option redundant.
mustMatch: Gone, but easy to implement with the select event. Once more, the combobox provides an example for that.
UPDATE
The link to the migration guide isn't working today (2011-04-09). I could fortunately open the site from cache, so I've saved it, zipped it and put it up for anyone to download.
Hope this helps
(2011-04-10: The Migration guide link works again)