0

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
                }]
            } };
Ciaran G
  • 1
  • first solution would be to use the actual decimal value - rather than 10.55, 10:55 would be 10.91666, etc... second solution would be to use a base date, and for each date, extract only the time portion and append it to the base date, and stick with a datetime axis type. – jlbriggs Aug 25 '15 at 16:13
  • I had thought to use decimal values, and that is a true representation of the data but the problem comes when the user hovers over the data point, it shows time of 10.83 which is not ideal. I have just tried your idea of using a base day, something I hadn't thought of, it works well except for that same problem of when a data point is hovered over it show time as timestamp which again is not ideal. Is there a way to change what is displayed on hover without effecting the graph? – Ciaran G Aug 26 '15 at 09:16
  • Why you cannot a datime type of xAxis ? – Sebastian Bochan Aug 26 '15 at 12:33
  • Hi Sebastian, I did change the x-axis type to datetime.The problem now is I'm stuck with the time displaying as a timestamp when the data point is hovered over. Ideally i would like 'Time 10:30' not 'Time 1457854584' – Ciaran G Aug 26 '15 at 12:41
  • " Is there a way to change what is displayed on hover without effecting the graph?" --> Yes - the tooltip formatter function, or the headerFormat property can eliminate the date portion of the display, or format the number properly | http://api.highcharts.com/highcharts#tooltip.formatter | http://api.highcharts.com/highcharts#tooltip.headerFormat – jlbriggs Aug 26 '15 at 16:25
  • If you can set up a fiddle example, it will be easier to provide more detailed help – jlbriggs Aug 26 '15 at 16:26

0 Answers0