Jump to content

HighCharts Customization


Recommended Posts

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:

image.thumb.png.73ff724991efbc24b11be0b203238334.png

 

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...

Link to post
Share on other sites

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; ?>
		});

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.