I am trying to make a heat map highcart. I am graphing all purchases in a certain amount of time. I have an array of data point arrays[[timestamp,purchase amount],[timestamp,purchase amount]]. I want my graph to have a y-axis that shows the amount of the purchase and an x-axis that shows the time of day the purchase was made (all are between 8am - 6pm). It is not relevant what date a purchase is made, only the time. I have had to cheat and make the x-axis time linear and make the time a float like 10.55 (10:55). This is obviously not a good solution as it leaves gaps (.6-.99) in the graph. Any attempt I've done other than linear give me an x-axis showing a few minutes from midnight. Here is my current code with poor work around.
function scatterChartTimeMapper(timestamp){
var ourDate = new Date(timestamp*1000);
var hour = (ourDate.getHours()+1).toString();
var mins = ourDate.getMinutes();
if(mins<10)
mins = "0" + mins;
if(mins%10===0)
mins = mins.toString();
var time = hour + "." + mins;
return parseFloat(time);
}
for(i=0;i<data.length;i++)
{
var timePoint = scatterChartTimeMapper(parseFloat(data[i].trim()));
var segmentArray = [timePoint,parseFloat(data[i+1].trim())];
newArray.push(segmentArray);
i++;
}
My JSON for the graph is: data :
{
chart: {
type: 'scatter',
backgroundColor : 'transparent',
zoomType: 'xy'
},
title: {
text: bundle.action_fields_full.chart_title
},
subtitle: {
text: bundle.action_fields_full.sub_title
},
xAxis: {
title: {
enabled: true,
text: 'Time Of Day'
},
type : 'linear',
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Tranaction Amount'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 55,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Time {point.x} , €{point.y} '
}
}
},
series: [{
name: 'Transactions',
color: 'rgba(223, 83, 83, .5)',
data: newArray
}]
} };