Mild Milly
Mild Milly

Reputation: 121

Show Fraction values in highchart

In high chart Y axis i want to show some fraction values like 100/50, 100/70 100/90

Is it possible? please help me how to show that values.

$.getJSON('1.php?ID=' + <?php echo $Id; ?>, function(json) {
		  $('#container').highcharts({
	            chart: {
	                renderTo: 'container',
	                type: 'spline',
					animation: Highcharts.svg,
	                marginRight: 130,
	                marginBottom: 25,
				
	            },
	            title: {
	                text: 'Lab',
	                x: -20 //center
	            },
	            subtitle: {
	                text: '',
	                x: -20
	            },
				xAxis: {
				    type: 'time',
					tickPixelInterval: 007
				},
	            yAxis: {
	                title: {
	                    text: 'Lab'
	                },
	                plotLines: [{
	                    value: 0,
	                    width: 1,
	                    color: '#808080'
	                }]
	            },
	            
	            legend: {
	                layout: 'vertical',
	                align: 'right',
	                verticalAlign: 'top',
	                x: -10,
	                y: 100,
	                borderWidth: 0
	            },
				exporting: {
					enabled: true
				},
	           series: [{
                                        name: 'Lab',
                                        data: json.data,
                                        datataLabels: {
                                             enabled: true,
                                             rotation: -90,
                                             color: '#FFFFFF',
                                            align: 'right',
                                            y: 10,
                                                  style: {
                                                       fontSize: '13px',
                                                       fontFamily: 'Verdana, sans-serif',
                                                       textShadow: '0 0 3px black',

                                                        }
                                                  }
                                              }]
	        });
	    });

1.php have just MySQL retrial query $sth = mysql_query("SELECT DateandTime,BP FROM table WHERE ID='".$Id."'");

Upvotes: 3

Views: 487

Answers (1)

Daniel Gray
Daniel Gray

Reputation: 61

You should be able to accomplish what I believe that you are indicating that you want by do a few things listed below.

First, you will need to restructure your JSON packet to include labels that Highcharts can use in a series, as follows:

var json = {
    data: [ ["100/50",(100/50)], ["100/60",(100/60)], ["100/75",(100/75)], ["100/30",(100/30)] ]
};

Then you will need to make a few adjustments to your chart js, so that you override the default tooltip by adding this block inside the highcharts config object (right after the xAxis block is a good place for it):

xAxis: {
    //some xAxis overrides here
},
tooltip: {
    pointFormat: ''
},

What that does is basically tell highcharts to make the tooltip data point '', so in essence it isn't rendered but the label still shows up on your mouseovers.

That having been done, your yAxis labels will still be decimal values representing the range steps of the fractions, so you will either want to suppress that or handle it otherwise.

Upvotes: 1

Related Questions