HighCharts Customization

[mongoose00318]

Hello Everyone,

I've started using HighCharts JS library to make dynamic charts and so far it is pretty impressive.

Here is a screenshot of my chart that I'd like to make a custom behavior for:

 

Basically what I would like to do is when a user clicks on a point in a series within a certain category (for example on category 2021-02-15 the user clicks the series with a total of 35 line items) a box would pop out to the side of the series point the user has clicked on and would be populated with an ajax request. Here is my code so far:

        const chart = Highcharts.chart('container', {
		    chart: {
		        type: 'column'
		    },
		    title: {
		        text: '3 Week Forecast'
		    },
		    xAxis: {
		        categories: <?php echo $formatted_dates; ?>
		    },
		    yAxis: {
		        min: 0,
		        title: {
		            text: 'Total Line Items Due To Ship'
		        },
		        stackLabels: {
		            enabled: true,
		            style: {
		                fontWeight: 'bold',
		                color: ( // theme
		                    Highcharts.defaultOptions.title.style &&
		                    Highcharts.defaultOptions.title.style.color
		                ) || 'gray'
		            }
		        }
		    },
		    legend: {
		        align: 'right',
		        x: -30,
		        verticalAlign: 'top',
		        y: 25,
		        floating: true,
		        backgroundColor:
		            Highcharts.defaultOptions.legend.backgroundColor || 'white',
		        borderColor: '#CCC',
		        borderWidth: 1,
		        shadow: false
		    },
		    tooltip: {
		        headerFormat: '<b>{point.x}</b><br/>',
		        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
		    },
		    plotOptions: {
		        column: {
		            stacking: 'normal',
		            dataLabels: {
		                enabled: true
		            }
		        },
		        series: {
		        	cursor: 'pointer',
		        	events: {
		        		click: function ( event ) {
							//this.name is the enterprise the user has clicked and even.point.category is the date
                          	//  this are the only two parameters I need to retrieve the necessary data from the database to populate the 'popout box'
		        			alert(
		        				'Enterprise: ' + this.name + ' for ' + event.point.category + ' clicked'
		        			);
		        		}
		        	}
		        }
		    },
		    series: <?php echo $json; ?>
		});

 

At the bottom of the code where 'series: { ' starts I've put some comments in. I am already getting the data I need from the click event; the only thing I'm stumped on is how to make some type of box popout when the user clicks it; the position of the box would have to be relative to the position of where the user clicked I would think...

[mongoose00318]

Well I think I've found a solution. I knew there was a built in tooltip for HighCharts but I wasn't sure it would do exactly what I was trying to do with it. After researching more of it's settings I think I have it doing what I want but I am getting a JS error on my returned JSON.

'Uncaught SyntaxError: Unexpected token u in JSON at position 0'

Here is a sample of my returned JSON:

0: {id: 14671, job_number: 22094872}
1: {id: 14739, job_number: 22102672}
2: {id: 14740, job_number: 22102682}
3: {id: 14673, job_number: 22102712}
4: {id: 14675, job_number: 22102722}
5: {id: 14678, job_number: 22102742}
6: {id: 14683, job_number: 22102782}
7: {id: 14686, job_number: 22102902}
8: {id: 14689, job_number: 22102912}
9: {id: 14746, job_number: 22102922}
10: {id: 14837, job_number: 22111742}

And here is my updated code:

const chart = Highcharts.chart('container', {
		    chart: {
		        type: 'column'
		    },
		    title: {
		        text: '3 Week Forecast'
		    },
		    xAxis: {
		        categories: <?php echo $formatted_dates; ?>
		    },
		    yAxis: {
		        min: 0,
		        title: {
		            text: 'Total Line Items Due To Ship'
		        },
		        stackLabels: {
		            enabled: true,
		            style: {
		                fontWeight: 'bold',
		                color: ( // theme
		                    Highcharts.defaultOptions.title.style &&
		                    Highcharts.defaultOptions.title.style.color
		                ) || 'gray'
		            }
		        }
		    },
		    legend: {
		        align: 'right',
		        x: -30,
		        verticalAlign: 'top',
		        y: 25,
		        floating: true,
		        backgroundColor:
		            Highcharts.defaultOptions.legend.backgroundColor || 'white',
		        borderColor: '#CCC',
		        borderWidth: 1,
		        shadow: false
		    },
		    tooltip: {
		        useHTML: true,
		        formatter: function() {
		        	var json = $.getJSON('scripts/order_status.php?action=highchart_tooltip&date=' + this.point.category + '&enterprise=' + this.series.name);

		        	$.each(json, function(i, item) {
		        		console.log(item.job_number);
		        	});
		        },
		        style: {
		        	pointerEvents: 'auto'
		        }
		    },
		    plotOptions: {
		        column: {
		            stacking: 'normal',
		            dataLabels: {
		                enabled: true
		            }
		        }
		    },
		    series: <?php echo $json; ?>
		});