I am trying to display a scatterplot from a variable called data.
data should contain the x and y values for the scatterplot. The method below is what I am attempting to do to insert the x and y values, however the graph is showing up blank.
let data = []
for(var i = 0; i < sixth_x.length; ++i){
data.push({xField: sixth_x[i], yField: sixth_y[i]})
}
x is a string, and y is a number.
This is my method to display the graph
<ChartSeriesItem type="scatter" data={data} xField="sixth_x"
yField="sixth_y"/>
</ChartSeries>
ChartSeriesItem xField and yField expect property name of source array object. In your case source array object is {xField: <some string>, yField: <some number>}.
So you should pass these property names (xField, yField) to your props.
<ChartSeriesItem type="scatter" data={data} xField="xField" yField="yField"/></ChartSeries>
which looks strange.
I recommend rename properties to identify what exactly your chart about, ex. price growing per year chart, so you will do something like this
data.push({price: sixth_x[i], year: sixth_y[i]})
and <ChartSeriesItem type="scatter" data={data} xField="price" yField="year"/></ChartSeries>
I think you get the idea.
Related
I'm working on a project to brush up on my JS, and I'm finding Highcharts rather challenging. What I've done is set up project that pulls in current JSON data from an API, and displays results on a map. When you click on a state, you can view the historical data for that state. if you shift click, you can view more than one state.
My x-axis is formatted with dates from each state, as not each state began tracking data at the same time. When multiple states are selected, the information is incorrect because even though they all have the same date for the most recent data point (today), the first data point in the date array varies. For instance, if you click New York, their first data point starts on 3/04, but if you click Connecticut, the first data point starts on 3/07.
Is there a way I can reconcile this? Can I have my categories start from the most recent data point and work backwards, so the data points for today are concurrent?
Here's my pen: https://codepen.io/maxpalmer/pen/rNVRzVX?editors=0010
Stackoverflow is requiring I post some code, so here is the function I wrote that reassembles the api data into an array for each state for the area chart:
for (i = 0; i < stateAbbrevs.length; i++){
var values = new Array(), categories = new Array();
// var categories = new Array();
var state = stateAbbrevs[i];
var stateObj = jsonData.filter(obj => obj.state == state);
for (x = 0; x < stateObj.length; x++) {
var value = stateObj[x].positive;
var date = formatDate(stateObj[x].date);
var name = stateNames[i];
values.push(value);
categories.push(date);
}
values.reverse();
categories.reverse();
historicData[state] = {
name: name,
data: values,
categories: categories
};
}
}```
Ah, found it in the myriad Highcharts documentation. Comes down to reversing my data array, and then reversing it in the highcharts x-axis options.
https://api.highcharts.com/highcharts/xAxis.reversed
I'm feeding two daily statistics datasets into my chart. As you can see, each element represents the value for a particular day.
"data":[[{"y":"1", "x":"2018-04-01T04:00:00Z"},
{"y":"14", "x":"2018-04-02T04:00:00Z"},
{"y":"5", "x":"2018-04-03T04:00:00Z"},
{"y":"7", "x":"2018-04-04T04:00:00Z"},
...
The x axis is defined as follows:
xAxes: [{
type: 'time',
distribution: 'series',
time: {
unit: 'month'
}
}]
I (naively?) thought that the chart would be rolling up (summing) the day values into the appropriate month buckets but that's not what I got. Instead, I got monthly tick marks along the x-axis but data points are plotted within the chart at daily precision. (See screenshot.)
Before I go ahead and reprocess my dataset to manually roll up days into their respective month buckets, I'd like to hear whether the chart can in fact do this for me but I'm just setting this up wrong, or whether I do in fact need to take care of this summarization myself, before supplying the dataset to the chart for plotting.
Thanks for your advice!
I solved this by doing the rollup myself during the assembly of the underlying dataset which is then supplied to the chart.
var dayDate = new Date($scope.insights.locationMetrics[lm].metricValues[metric].dimensionalValues[dim].timeDimension.timeRange.startTime);
var monthDate = dayDate.getFullYear() + "-" + (dayDate.getMonth() + 1);
var hitCount = {
y: $scope.safeNumber($scope.insights.locationMetrics[lm].metricValues[metric].dimensionalValues[dim].value),
x: monthDate
}
var alreadyRecorded = hits[labelIdx].findIndex(obj => obj.x == hitCount.x)
if (alreadyRecorded > -1) {
hits[labelIdx][alreadyRecorded].y += Number(hitCount.y);
}
else {
hits[labelIdx].push(hitCount);
}
Extract the date from the underlying data source
Extract yyyy-mm from the date
Create the hitCount object
Check if the hitCount object is already in the array
If the object is already in the array then increment the hitCount (y) within the array.
Otherwise, push the object into the array.
I am trying to use my own data in a nvD3 stacked area chart. The sample data format from the Angular nvD3 site has a format like this:
[{
"key":"Series 1",
"values":[[1025409600000,0],[1028088000000,-6.3382185140371]]
},
{
"key":"Series 2",
"values":[[1025409600000,0],[1028088000000,0]]
}]
I have data coming from my database in this format:
[{
"Loc_Cnt":6,"Num_Cars":552,"Num_Employees":34,"active_month":"2017-10-01T00:00:00"
},
{
"Loc_Cnt":4,"Num_Cars":252,"Num_Employees":14,"active_month":"2017-11-01T00:00:00"
}]
I am trying to graph from my data, three series (Series 1: Flt_Cnt, Series 2: Num_Cars, Series 3: Num_Employees). For each series, the X axis value being the active_month date, and the Y axis value being the series value.
How can I either A) convert my data to look like the sample data easily, or B) use my data as is in the AngularJs nvd3 chart? I feel a .forEach on the array would not be efficient for larger data sets, and not as easy to read. I tried to use d3.nest in some way, but haven't been able to get a correct format. Thanks for your help!
It's not elegant, but I brute forced a way to my solution. If there are any better solutions, please do let me know.
var Loc_Cnt = [];
var Num_Cars = [];
var Num_Employees = [];
var obj = {};
//arr is the array of values in my format
arr.forEach(function (element) {
//need the date in milisecond format
var date = new Date(element.active_month);
var time = date.getTime();
//load corresponding arrays
Loc_Cnt.push([time, element.Loc_Cnt]);
Num_Cars.push([time, element.Num_Cars]);
Num_Employees.push([time, element.Num_Employees]);
});
//load each key/values pair into new object
obj["Loc_Cnt"] = Loc_Cnt;
obj["Num_Cars"] = Num_Cars;
obj["Num_Employees"] = Num_Employees;
//d3.entries creates an object of key/VALUEs
arrRollup = d3.entries(obj);
//change the key word values to value
var i;
for (i = 0; i < arrRollup.length; i++) {
arrRollup[i].values = arrRollup[i]['value'];
delete arrRollup[i].value;
}
I am trying to create something like this resizable HighChart.
The difference is that i am loading my data from a blob.
This is the graph that i receive:
This is part of the received data, from the console.log(lines);:
[{ date: '7/13/2016 8:35:00 AM', value: 60 },{ date: '7/13/2016
8:36:00 AM', value: 45 },...]
This is my code: https://jsfiddle.net/end5xc7m/
series: [{
turboThreshold: 20000,
type: 'area',
name: 'Values to date',
data: data}
I believe this is where i am getting the problem from, in the function visitorData.
I am not having the data projected onto the graph.
As jlbriggs noted, this is due to a formatting issue. Unless you you're using categories to plot your axes, Highcharts visualizations will not draw if data are input as strings.
I've updated your fiddle with a few fixes: https://jsfiddle.net/brightmatrix/end5xc7m/2/
function processData(allText) {
var allTextLines = allText.split(/\r?\n/);
var lines = [];
for (var i = 0; i < allTextLines.length - 1; i++) {
var currentLine = allTextLines[i].split(',');
var thisLineValue = [Date.parse(currentLine[0]),parseInt(currentLine[1])];
lines.push(thisLineValue);
}
return lines;
}
Here's what I changed:
What you want to pass along to your chart is a set of arrays like [x,y], where these variables are either dates or numbers. Building the values using curly braces and + concatenation operators turns these into strings. So, instead, I created a temporary array called thisLineValue and pushed that to your lines array.
Next, within that temporary array, I used Date.parse() to turn your date values into timestamps. This is happily understood by Highcharts for datetime axes, as you set with your x-axis.
For your y-axis value, I used parseInt() to avoid those values being turned into strings as well.
Finally, I removed the toString() function when you return the lines array to the chart. Again, this keeps the values in the format the chart is expecting (dates and numbers).
I hope this is helpful for you!
We had to make a variant of a drillable chart not using the drilldown.js plugin due to other issues with having a stacking bar chart. I can get the drill down and the drill up working correctly except for the issue of the series.name for our initial 2 series not being reset. On drill we use this code (taken from Fusher's answer here):
function setChart(name, categories, data, color, level, type) {
chartMainLoc.xAxis[0].setCategories(categories);
var dataLen = data.length;
chartMainLoc.series[0].remove();
if (dataLen === 1) {
chartMainLoc.series[0].remove();
}
for (var i = 0; i < dataLen; i++) {
chartMainLoc.addSeries({
type: type,
name: name,
color: colors[i],
data: data[i],
level: level
});
}
}
On drill down this works. On drill up I am left with Series 1 - xxx in the tooltip. What am I missing to make this set the series name correctly back to the original?
Using HC 3.0.10. Live demo.
You are using the same name variable for both options. I guess there should be dataName and dataName2. Something like this: http://jsfiddle.net/8XqMp/15/
So in short:
set name param to be an array when you call setChart()
in setChart() loop over name variable