Menu

Comparing Series

Gavy
2012-11-12
2013-01-10
  • Gavy

    Gavy - 2012-11-12

    In the offical API of highchart, there is an option i can set to compare data series.

    plotOptions: {
    series: {
    compare: 'percent'
    }
    },

    Once that set, i can access the percentage change through the variable "{point.change}"

    I am wondering how do i get access of the variable "{point.change}" through the ToolTipFormatter. (may be in the ToolTipData object?)

    Many thanks!

     
  • Gavy

    Gavy - 2012-11-14

    any news?

     
  • Gavy

    Gavy - 2012-11-22

    any update?

     
  • Shawn Quinn

    Shawn Quinn - 2012-12-04

    You should be able to follow the same model with something like:

    final Chart chart = new Chart()
        .setToolTip(new ToolTip()
            .setPointFormat("<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>")
        );
    

    Note that if you want to do something more advanced you can also get access to the native point instance within a custom ToolTipFormatter like so: toolTipData.getPoint().getNativePoint()

     
  • Gavy

    Gavy - 2012-12-07

    thanks for the reply. However when i tried using the following:

    chart.setToolTip(
        new ToolTip().setPointFormat("<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>")
    );
    

    it still doesn't work and i get JS error whenever i hover on the chart.

     
  • Shawn Quinn

    Shawn Quinn - 2013-01-09

    Not sure what error you're seeing, so if you can post more details or a code example I may be able to help more. But, in the meantime, I coded up a quick example that shows the series comparison option and "setPointFormat" method in use which works for me. So, you can potentially reference this example as something to compare to your scenario:

    final Chart chart = new Chart()
        .setType(Series.Type.LINE)
        .setSeriesPlotOptions(new SeriesPlotOptions()
            .setOption("compare", "percent")
        )
        .setToolTip(new ToolTip()
            .setShared(true)
            .setCrosshairs(true)
            .setPointFormat("<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>")
        );
    
    chart.getXAxis()
        .setCategories(
            "Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        );
    
    chart.addSeries(chart.createSeries()
        .setName("Tokyo")
        .setPoints(new Point[]{
            new Point(163).setName("A"),
            new Point(203).setName("B"),
            new Point(276).setName("C"),
            new Point(408).setName("D"),
            new Point(547).setName("E"),
            new Point(729).setName("F"),
            new Point(628).setName("G")
        })
    );
    chart.addSeries(chart.createSeries()
        .setName("New York")
        .setPoints(new Point[]{
            new Point(263).setName("A"),
            new Point(303).setName("B"),
            new Point(176).setName("C"),
            new Point(308).setName("D"),
            new Point(347).setName("E"),
            new Point(629).setName("F"),
            new Point(528).setName("G")
        })
    );
    

    Hope that helps,

     -Shawn
    
     
  • Shawn Quinn

    Shawn Quinn - 2013-01-10

    One more thought on this: in helping diagnose a different issue, it got me to thinking that the error you're experiencing could be the same as that issue (at least if you're using a fairly recent highcharts version.) If so, check out this thread for a potential fix:

    https://sourceforge.net/p/gwt-highcharts/discussion/general/thread/ef263126/

     

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.