Currently, the export-data module exports all the series data rather than processedXData and processedYData. However, I grouped the series with dataGrouping and I'd like to export only the processed data.
I'm aware that this question has been asked before (Highstock export csv based on data grouping), but it was in the context of the former export-cvs plugin.
How to modify the 'getDataRows' function in the export-data module for including only the processed data?
Example -> fiddle
Highcharts.getJSON("https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json",function (data) {
var chart = Highcharts.stockChart("container", {
series: [{
name: "The series",
data: data,
dataGrouping: {
force: true,
units: [["year", [1]]]
}
}
]
});
console.log(chart.getDataRows());
}
);
I have a couple of highcharts-react charts where the default zoom level should be 6 months (for the x-axis). There's a solution for using the default Highcharts library, but I don't understand how to do it using React.
This is how far I got:
// …
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import more from "highcharts/highcharts-more";
// …
if (typeof Highcharts === "object") {
more(Highcharts);
}
// …
<HighchartsReact
highcharts={Highcharts}
constructorType={"stockChart"}
options={{
credits: {
enabled: false
},
xAxis: {
events: {
setExtremes: () => {
// Is this right? What should be in this function?
}
}
},
series: [
{
type: "candlestick",
name: props.timeSeries.name,
data: openHighLowClose
}
]
}}
/>
I see that you are creating a stockChart, so in this case you can set the displaying range with using the rangeSelector feature.
Below is a demo where I set the selected button to 2, which is equal to 6 months by default. More information you can find in the API which I posted above.
Demo: https://codesandbox.io/s/highcharts-react-demo-yjtgj
Can I do this by using a Google API? Assume note is the variable of richtext
'repeatCell': {
'range': {
'sheetId': 0,
'startRowIndex': start_row,
'endRowIndex': end_row + 1,
'startColumnIndex': start_col,
'endColumnIndex': end_col + 1,
},
'cell': {
'note': note,
'userEnteredFormat': {
'backgroundColor': backgroundColor,
'numberFormat': numberFormat,
},
},
'fields': 'note,userEnteredFormat',
},
}
As #Tanaike said, Notes (and Comments) only accept plain-text. However, you can fill a Feature Request in Issue Tracker.
I am having multiple highchart charts of various types(Bar,Pie, Scatter type) in a single web page. Currently I am creating config object for each graph like,
{
chart : {},
blah blah,
}
And feeding them to a custom function which will just call HighCharts.chart(). But this results in duplication of code. I want to manage all this chart rendering logic centrally.
Any Idea on how to do this?
You can use jQuery.extend() and Highcharts.setOptions.
So first you'll make the first object which will be extended by all your charts, this object will contain your Highchart default functions.
You can do it using namespacing.
The following way is good when you have very different charts.
Default graphic:
var defaultChart = {
chartContent: null,
highchart: null,
defaults: {
chart: {
alignTicks: false,
borderColor: '#656565',
borderWidth: 1,
zoomType: 'x',
height: 400,
width: 800
},
series: []
},
// here you'll merge the defauls with the object options
init: function(options) {
this.highchart= jQuery.extend({}, this.defaults, options);
this.highchart.chart.renderTo = this.chartContent;
},
create: function() {
new Highcharts.Chart(this.highchart);
}
};
Now, if you want to make a column chart, you'll extend defaultChart
var columnChart = {
chartContent: '#yourChartContent',
options: {
// your chart options
}
};
columnChart = jQuery.extend(true, {}, defaultChart, columnChart);
// now columnChart has all defaultChart functions
// now you'll init the object with your chart options
columnChart.init(columnChart.options);
// when you want to create the chart you just call
columnChart.create();
If you have similar charts use Highcharts.setOptions which will apply the options for all created charts after this.
// `options` will be used by all charts
Highcharts.setOptions(options);
// only data options
var chart1 = Highcharts.Chart({
chart: {
renderTo: 'container1'
},
series: []
});
var chart2 = Highcharts.Chart({
chart: {
renderTo: 'container2'
},
series: []
});
Reference
http://api.highcharts.com/highcharts#Highcharts.setOptions%28%29
COMPLETE DEMO
I know this has already been answered, but I feel that it can be taken yet further. I'm still newish to JavaScript and jQuery, so if anyone finds anything wrong, or thinks that this approach breaks guidelines or rules-of-thumb of some kind, I'd be grateful for feedback.
Building on the principles described by Ricardo Lohmann, I've created a jQuery plugin, which (in my opinion) allows Highcharts to work more seamlessly with jQuery (i.e. the way that jQuery works with other HTML objects).
I've never liked the fact that you have to supply an object ID to Highcharts before it draws the chart. So with the plug-in, I can assign the chart to the standard jQuery selector object, without having to give the containing <div> an id value.
(function($){
var chartType = {
myArea : {
chart: { type: 'area' },
title: { text: 'Example Line Chart' },
xAxis: { /* xAxis settings... */ },
yAxis: { /* yAxis settings... */ },
/* etc. */
series: []
},
myColumn : {
chart: { type: 'column' },
title: { text: 'Example Column Chart' },
xAxis: { /* xAxis settings... */ },
yAxis: { /* yAxis settings... */ },
/* etc. */
series: []
}
};
var methods = {
init:
function (chartName, options) {
return this.each(function(i) {
optsThis = options[i];
chartType[chartName].chart.renderTo = this;
optsHighchart = $.extend (true, {}, chartType[chartName], optsThis);
new Highcharts.Chart (optsHighchart);
});
}
};
$.fn.cbhChart = function (action,objSettings) {
if ( chartType[action] ) {
return methods.init.apply( this, arguments );
} else if ( methods[action] ) {
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
} else if ( typeof action === 'object' || !action ) {
$.error( 'Invalid arguments to plugin: jQuery.cbhChart' );
} else {
$.error( 'Action "' + action + '" does not exist on jQuery.cbhChart' );
}
};
})(jQuery);
With this plug-in, I can now assign a chart as follows:
$('.columnChart').cbhChart('myColumn', optionsArray);
This is a simplistic example of course; for a real example, you'd have to create more complex chart-properties. But it's the principles that concern us here, and I find that this approach addresses the original question. It re-uses code, while still allowing for individual chart alterations to be applied progressively on top of each other.
In principle, it also allows you to group together multiple Ajax calls into one, pushing each graph's options and data into a single JavaScript array.
The obligatory jFiddle example is here: http://jsfiddle.net/3GYHg/1/
Criticism welcome!!
To add to #Ricardo's great answer, I have also done something very similar. In fact, I won't be wrong if i said I went a step further than this. Hence would like to share the approach.
I have created a wrapper over the highchart library. This gives multiple benefits, following being the main advantages that encouraged going in this path
Decoupling: Decouples your code from highcharts
Easy Upgrades: This wrapper will be the only code that will require modification in case of any breaking changes in highchart api after upgrades, or even if one decides to move to a differnt charting library altogether (even from highchart to highstock can be exhaustive if your application uses charts extensively)
Easy of use: The wrapper api is kept very simple, only things that may vary are exposed as options (That too whose values won't be as a deep js object like HC already has, mostly 1 level deep), each having a default value. So most of the time our chart creation is very short, with the constructor taking 1 options object with merely 4-5 properties whose defaults don't suit the chart under creation
Consistent UX: Consistent look & feel across the application. eg: tool tip format & position, colors, font family, colors, toolbar (exporting) buttons, etc
Avoid duplication: Of course as a valid answer of the asked question it has to avoid duplication, and it does to a huge extent
Here is what the options look like with their default values
defaults : {
chartType : "line",
startTime : 0,
interval : 1000,
chartData : [],
title : "Product Name",
navigator : true,
legends : true,
presetTimeRanges : [],
primaryToolbarButtons : true,
secondaryToolbarButtons : true,
zoomX : true,
zoomY : false,
height : null,
width : null,
panning : false,
reflow : false,
yDecimals : 2,
container : "container",
allowFullScreen : true,
credits : false,
showAll : false,
fontSize : "normal", // other option available is "small"
showBtnsInNewTab : false,
xAxisTitle : null,
yAxisTitle : null,
onLoad : null,
pointMarkers : false,
categories : []
}
As you can see, most of the times, its just chartData that changes. Even if you need to set some property, its mainly just true/false types, nothing like the horror that highchart constructor expects (not critizing them, the amount of options they provide is just amazing from customization Point of View, but for every developer in the team to understand & master it can take some time)
So creation of chart is as simple as
var chart=new myLib.Chart({
chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]]
});
i was trying to do a Cell Editing based on this documentation
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing
I have two questions:
How can i get the Index of my row posted to the server:
The information i'm getting posted is the following:
a) value of the cell
b) RowId
The thing is that the rowId doesn't help me. I need the actual Id of the information I'm displaying so i can do the server update with that Id.
colNames: ['Id', 'Codigo', 'Nombre'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'left', hidden: true },
{ name: 'Codigo', index: 'Codigo', width: 55, align: 'left', editable: true, editrules:
{ number: true} },
{ name: 'Nombre', index: 'Nombre', width: 200, align: 'left' }],
I need the value of the column 'Id' to do my update.
2.I don't understand in the documentation how to manage an error from the server, so I can display the error message.
Thank you very much!
Notes:
a) I've already asked in the forum of trirand, but no one reply it to me.
b) If anyone has done this, it would help if help me pasting the code.
c) I'm working on MVC 2 Asp.net
mostly one you inline editing or form editing and not cell editing. I recommend you to switch to one of the two modern form editing or you
The information RowId is already the value of the column 'Id'. getInd(rowid,false) method returns the index of the row in the grid table specified by id=rowid.
To be able to display error returns from server you needs know the format of data returned from server in the error case. If error returned from server have, for example, JSON format {"Detail":"error text"} (errors from WFC service) you can define loadError parameter of jqGrid like:
loadError: function(xhr, st, err) { alert(errorTextFormat(xhr)); }
where errorTextFormat function which decode the error message and can looks like
var errorTextFormat = function (data) {
var str = data.responseText.substr(0, 10);
if (str === '{"Detail":') {
var errorDetail = jQuery.parseJSON(data.responseText);
var s = "Error: '";
s += data.statusText;
s += "'. Details: ";
s += errorDetail.Detail;
return s;
} else {
var res = "Status: '";
res += data.statusText;
res += "'. Error code: ";
res += data.status;
return res;
}
};
The same function you can use to decode errors of row editing (at least inline editing or form editing). ASP.NET MVC returns mostly messages in HTML format so your error decoding function should be another. I don't use cell editing as the most other people do, so can not help you in the case or customizing of the error messages in cell editing.
Q1:
you can use Key:true , editable: true, in colModel
{ key:true, name: 'Id', index: 'Id', width: 50, align: 'left', editable: true, hidden:true}
Then in add/edit method ( add beforeShowForm method in add/edit method), you have to explicitly hide this field the field of id inside of beforeShowForm method
$('#tr_Id').hide();
i.e
beforeShowForm: function (e) {
$('#tr_Id').hide();
}
Q2:
add 'afterSubmit' method in add/edit/delete method , i'm using Web api Server ,
i.e
afterSubmit: function (response) {
if (response.statusText == 'Created') {
// alert("Create Successfully")
ShowMessage("Add Successfully", 'Success');
//reload the grid
$(this).jqGrid("setGridParam", { datatype: 'json' });
return [true];
}
else {
ShowMessage("Operation Failed", 'Error');
return [false];
}
},
I hope this will work for you. Still u Need Any kind of help please comment below