1

I am new to highcharts and I am working on a cricket app in which I have to display Run rate per over and number of wickets in an over. If there is a wicket(s) in the specific over I want to show a ball(s) to the point and on hover or click to that point it show the information about player and bowler etc. What I want is you can view from this Link Crichq Graphs I want the same think like in crichq graphs, but don't know how to do.

Please help me out of this issue.

Asad Fida
  • 216
  • 2
  • 6
  • will some one help me ???? – Asad Fida Dec 02 '14 at 08:06
  • 2
    You will normally get more help if you post an example of what you have tried so far, preferably on jsfiddle. An example of your data set would help. – SteveP Dec 02 '14 at 08:45
  • I would try to use separate series (scatter type) to show that extra markers. Or resign from extra markers and add extra info to the tooltip, like [in this question](http://stackoverflow.com/questions/8514457/set-additional-data-to-highcharts-series). Or combine both solutions. – Paweł Fus Dec 02 '14 at 11:48
  • 1
    @SteveP here is the link to fiddle [link]:http://jsfiddle.net/vg6wgzv3/2/ – Asad Fida Dec 02 '14 at 11:57

1 Answers1

0

You can use the point marker settings to indicate where the wickets fell. e.g. make it a different colour and size. http://api.highcharts.com/highcharts#series.data.marker

I would process the data as follows:

var ausData = [ { x:1, y:1 },
               { x:2, y:24, out:{num:2,names:['john','doe']} },
               { x:3, y:5 },
               { x:4, y:8 },
               { x:5, y:22 },
               { x:6, y:11 } ];
for (var p in ausData) {
    var point = ausData[p];
    if (point.out !== undefined) {
        point.marker = {fillColor:'red',radius:4*point.out.num};

    } else {
        point.marker = {radius:5};
    }
}

This start with the basic info, and then adds custom point markers depending on how the wickets fill.

The only other thing to do is customise the tooltip to give the names e.g.:

    tooltip: {
        formatter: function () {
            var text = 'Over: ' + this.x +
                ' Runs: ' + this.y;
            if (this.point.out !== undefined) {
                text = text + '<br>Out: ' + this.point.out.num;
                for (var n in this.point.out.names) {
                    text = text + ' ' + this.point.out.names[n];
                }
            }
            return text;
        }
    },

http://jsfiddle.net/d6fgwg14/

SteveP
  • 18,840
  • 9
  • 47
  • 60
  • I have created line chart and column chart here is the fiddle **http://jsfiddle.net/j86jkfvj/24/** .Balls display in line chart is fine. But in case of column chart balls are not right on to the top of that series(left/right to that bar.)I want to display ball on the top center of that bar. Please let me know how can I do this. thank in advance! – Asad Fida Dec 05 '14 at 12:02
  • Just make the x values slightly bigger/smaller: data: [ [1.85, 24.5], [1.85, 25.8] ], http://jsfiddle.net/wue1g87t/ – SteveP Dec 05 '14 at 13:06