I want to import data in a highstock chart per csvURL and the chart works fine up to 250 rows: https://jsfiddle.net/Joh_Christ/qx6gad34/1/
data: {
csvURL: 'https://www.quandl.com/api/v3/datasets/FSE/VOW3_X.csv?api_key=FaKetdwzkQQPhX91Xrhx',
switchRowsAndColumns: false,
firstRowAsNames: true,
startRow: 0,
endRow: 250,
seriesMapping: [{
x: 0,
y: 4
},
{},
{},
{}]
}
When I increase the number of rows, nothing is displayed: https://jsfiddle.net/Joh_Christ/qx6gad34/4/
How can I show the total number of rows from the csv file?
In both charts you have Highcharts error #15:
Highcharts expects data to be sorted
This happens when creating a line
series or a stock chart where the data is not sorted in ascending X
order.
For performance reasons, Highcharts does not sort the data, instead it
requires that the implementer pre-sorts the data.
The difference is that in the second chart cropThreshold property is exceeded and that is why the series is not displayed.
API Reference: https://api.highcharts.com/highstock/series.line.cropThreshold
Related
I'm trying to show only a certain amount of yAxis Lines in my Apache ECharts Chart.
I tried the following:
yAxis: [
{
type: 'value',
min:0,
max:6000
}
],
yAxis: [
{
type: 'value',
scale:true,
splitNumber:4,
}
],
I need to dislpay it like this:
For your information: I need this to work on every Chart-Type, Line Chart, Bar Chart etc.
Thanks in advance :)
So, as I have not got any answer. I wanted to share with anyone who might need it in the future, how I solved it.
I looked and got the highest number of the data for the current Chart and looked if it is near 1000 I rounded it up to 1000, if it is over 1000 I rounded it up to the nearest 200.
For example a number 1059 becomes => 1200 or the number 1215 becomes 1400.
Than simply get this Number and divide it by 4(to have 4 Lines).
And give this number to the yAxis max. For the min set 0.
I'm attempting to Create a few charts out of a Sheet of data, but the charts are grabbing sort of specific data so I have found it advantageous to use the DataTableBuilder class. I am able to specify labels for the data more easily than I can from the original sheet. However, I cannot embed a Chart Class into a Sheet. Is it possible to either convert a Chart to an EmbeddedChart or use a DataTable to create an EmbeddedChart?I'm attempting to Create a few charts out of a Sheet of data, but the charts are grabbing sort of specific data so I have found it advantageous to use the DataTableBuilder class. I am able to specify labels for the data more easily than I can from the original sheet. However, I cannot embed a Chart Class into a Sheet. Is it possible to either convert a Chart to an EmbeddedChart or use a DataTable to create an EmbeddedChart?
This is the data below, and I need only the last column (5/11) and I don't need the total row. So its not a concise range, else I would just use the Embedded chart builder.
May 5/1 5/2 5/3 5/11
Critical 0 0 0 0
High 0 0 0 0
Call Immediate 4 11 4 3
Daytime Call 3 3 6 1
Totals 7 14 10 4
Below is the how I've built the Chart in which dailyTotals is a range of [0, 0, 3, 1]. This works fine, but I can't label anything.
var dailyChart = LOB.newChart()
.setChartType(Charts.ChartType.BAR)
.setOption('title', LOB.getName())
.addRange(dailyTotals)
.build();
LOB.insertChart(dailyChart);
Below is building the DataTable, this time daily totals is just an array. But this gives me labels.
dailyTable = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "Priority")
.addColumn(Charts.ColumnType.NUMBER, "Incidents")
.addRow('P1', dailyTotals[0])
.addRow('P2', dailyTotals[1])
.addRow('P3', dailyTotals[2])
.addRow('P4', dailyTotals[3])
.build();
How can I either use a DataTable to create an EmbeddedChart? or how can I turn a Chart into and Embedded chart?
I actually figured out a solution that worked for me before I got a response from anyone. It involves using a legend to determine which bar is which, rather than labels along the x-axis, but it totally covers my requirements and might help out some one else out.
var dailySeries = {
0:{color: 'blue', labelInLegend: 'P1'},
1:{color: 'red', labelInLegend: 'P2'},
2:{color: 'yellow', labelInLegend: 'P3'},
3:{color: 'green', labelInLegend: 'P4'}
}
var dailyChart = LOB.newChart()
.setPosition(8, 27, 0, 0)
.setChartType(Charts.ChartType.BAR)
.asColumnChart()
.setOption('title', LOB.getName())
.addRange(dailyTotals.getCell(1, 1))
.addRange(dailyTotals.getCell(2, 1))
.addRange(dailyTotals.getCell(3, 1))
.addRange(dailyTotals.getCell(4, 1))
.setOption('series', dailySeries)
.build();
LOB.insertChart(dailyChart);
You would need to re-create the below range somewhere else in the sheet and add that as range instead.
A B
P1 0
P2 0
P3 3
P4 1
The range [P1, P2, P3, P4] can also be somewhere else. Then you can add both ranges:
.addRange([P1 to P4 range])
.addRange(dailyTotals)
.setOption('useFirstColumnAsDomain','true')
I found the posibillity to use a callback function after reading the csv file in the highcharts . But my knowledge ist not good enough to get the first value per line and multiply by 1000. I am starting from the code out of an example found: (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/data/parsed/)
data: {
csv: document.getElementById('csv').innerHTML,
parsed: function (columns) {
// We want to keep the values since 1950 only
$.each(columns, function () {
// Keep the first item which is the series name, then remove the following 70
this.splice(1, 70);
});
}
},
I have to put my code instead of the "this.splice(1,70)" but no idea how.
My data look like:
Date,Temp,Press
1552417882, 25.54,980.23
1552417942, 25.60,980.19
1552418002, 25.60,980.17
1552418062, 25.58,980.14
1552418122, 25.53,980.12
1552418183, 25.48,980.06
1552418243, 25.48,980.06
1552418303, 25.47,980.04
1552418363, 25.47,980.02
And also the first line (description) should be unchanged.
Best regards
Albert
You should check the structure of the columns array and loop through the first inner array to recalculate the timestamp:
data: {
csv: document.getElementById('csv').innerHTML,
parsed: function(columns) {
columns[0].forEach(function(column, i) {
columns[0][i] *= 1000;
});
}
},
Live demo: https://jsfiddle.net/BlackLabel/zve9tsa8/
API Reference: https://api.highcharts.com/highcharts/data.parsed
I have a CSV file with following format:
<pre id="csv" style="display:none">
DATES,WHOLESALE,ECOMMERCE,RETAIL,LOANS,BONDISSUER
01/10/2018 00:00,25,16,13,1,0
01/10/2018 01:00,24,5,9,3,2
01/10/2018 02:00,28,6,17,0,6
The data range is 01/10/2018 00:00 - 31/10/2018 00:00
Interval is every hour.
I am using highstock stacked column with 5 categories: WHOLESALE,ECOMMERCE,RETAIL,LOANS,BONDISSUER.
My problem is, that the highstock navigator displays the data incorrectly. I think I have to customise property in range selector or navigator, but I can't find any documentation online. I tried inputDateParser, but it didn't work. Here is the jsfiddle
inputDateParser: function (value) {
value = value.split(/[:\.]/);
return Date.UTC(
1970,
0,
1,
parseInt(value[0], 10),
parseInt(value[1], 10),
parseInt(value[2], 10),
parseInt(value[3], 10)
);
}
How do I get the data range to be correct: month of October 2018 according to the dates in CSV?
I should not see a whole year in the navigator, when I only have data for October.
Thanks much appreciated
You would need to format the dates correctly, it can be done using the beforeParse callback function, like this:
data: {
csv: document.getElementById('csv').innerHTML,
beforeParse: function(e) {
let csv = e.split('\n'); //split by newline
let processedTable = []
processedTable.push(csv[0].split(','))
for (let i = 1; i < csv.length; i++) {
let row = csv[i].split(',');
if (row.length != 6) //skip empty rows or rows with more/less columns
continue;
let date = row[0].split(' ')[0].split('/')
let time = row[0].split(' ')[1].split(':')
processedTable.push(
[(new Date(date[2], date[1] - 1, date[0], time[0], time[1], 0)).getTime(), //get the timestamp for the date
parseInt(row[1]),
parseInt(row[2]),
parseInt(row[3]),
parseInt(row[4]),
parseInt(row[5])
].join(',')
)
}
return processedTable.join('\n') //join the array into a string again
},
},
Every row is parsed, by splitting it apart, the date is found, and milliseconds since 1970 is returned by getTime(). Then we join the cells into strings, and lastly the rows into a long string. The reason we convert this back into a string, is because highcharts is going to read it in from a string.
Working JSFiddle example: https://jsfiddle.net/ewolden/spmtgv3a/
API on beforeParse: https://api.highcharts.com/highcharts/data.beforeParse
I am using jqplot through Primefaces and Have input to Bar Chart like this:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: {"03-05-2015": 10, "06-05-2015": 3}
When I pass this data as BarChartModel, I got data wrongly drawn on the chart.
The data follows the first series, as the Series 2 is drawn after the Series 1 dates. I've to convert the data to be as follows in order to get the chart drawn fine:
Series 1:
label: "Company 1"
data: {"01-05-2015": 10, *"03-05-2015": 0*, "06-05-2015": 3}
Series 2:
label: "Company 2"
data: { *"01-05-2015": 0* , "03-05-2015": 10, "06-05-2015": 3}
Notice the data items between * and *.
Any advice here? (if using DateAxis helps?)
I had the same problem with LinearChartModel when I has not using DateAxis.
As a workaround, I filled my series with all possible data and then reordered the list. Urg!
Should work with BarChartModel too.
Using DateAxis you just need to add your date axis with the timestamp, like this:
serie.set(new Date().getTime(), new Double(123));
or this
serie.set("2015-09-08", new Double(123));
Put the DateAxis in your LineChartModel like this:
DateAxis axis = new DateAxis("Data da inspeção");
linearModel.setZoom(true);
linearModel.getAxes().put(AxisType.X, axis);
linearModel.setExtender("linhaSetor");
And format your date in the extender.js:
function linhaSetor() {
this.cfg.axes.xaxis.tickOptions = {
show : true,
angle : 45,
formatString : '%d/%m/%y %Hh'
};
}
You don't even need to put the data in order.