Invient Charts - how to show/hide series programatically?

Flow
1

Hello there-

I’m hoping to launch a chart with 7 series where only 4 are active on load but 3 remain grey in the legend.

I’ve tried to use series.hide() with no luck and I’m unaware of how to check for the current state of a series.

In addition, I’m wondering if anyone has successfully saved the state of the series when refreshing the chart with new data… eg: series 2 and 4 are active when search parameters are changed, only series 2 and 4 stay active when the chart is refreshed with new data.

Any help or experience would be appreciated.

Thank you,
Dave

2

Are you using 0.8.5 version? If so then series.hide() method should hide the series.

However, if you try to hide any series of a chart after the chart is loaded by means of a button click listener then the series is not hidden. It is an issue in the library.

3

Hi there-

I am using 0.8.5 – I’ve tried putting series.hide() in many places including right before adding the chart, right after, right after defining the series, and after the complete load. None seems to trigger the hide.

 InvientCharts chart = new InvientCharts(chartConfig);
         
        seriesTotalBilled.setYAxis(dollarsAxis1);
        chart.addSeries(seriesTotalBilled);
        seriesTotalBilled.hide();
        addChart(chart);
        seriesTotalBilled.hide();

Still nothing. Any ideas?

Thanks,
Dave

4

Hi Dave,

As per the code you have mentioned, hiding of a series must work. Here is a code which works perfectly fine.


private void showLine() {
        InvientChartsConfig chartConfig = new InvientChartsConfig();
        chartConfig.getGeneralChartConfig().setMargin(new Margin());
        chartConfig.getGeneralChartConfig().getMargin().setRight(130);
        chartConfig.getGeneralChartConfig().getMargin().setBottom(25);

        chartConfig.getTitle().setX(-20);
        chartConfig.getTitle().setText("Monthly Average Temperature");
        chartConfig.getSubtitle().setText("Source: WorldClimate.com");
        chartConfig.getTitle().setX(-20);

        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.setCategories(Arrays.asList("Jan", "Feb", "Mar", "Apr",
                "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"));
        LinkedHashSet<XAxis> xAxesSet = new LinkedHashSet<InvientChartsConfig.XAxis>();
        xAxesSet.add(categoryAxis);
        chartConfig.setXAxes(xAxesSet);

        NumberYAxis numberYAxis = new NumberYAxis();
        numberYAxis.setTitle(new AxisTitle("Temperature (°C)"));
        NumberPlotLine plotLine = new NumberPlotLine("TempAt0");
        plotLine.setValue(new NumberValue(0.0));
        plotLine.setWidth(1);
        plotLine.setZIndex(1);
        plotLine.setColor(new RGB(128, 128, 128));
        numberYAxis.addPlotLine(plotLine);
        LinkedHashSet<YAxis> yAxesSet = new LinkedHashSet<InvientChartsConfig.YAxis>();
        yAxesSet.add(numberYAxis);
        chartConfig.setYAxes(yAxesSet);

        Legend legend = new Legend();
        legend.setLayout(Layout.VERTICAL);
        Position legendPos = new Position();
        legendPos.setAlign(HorzAlign.RIGHT);
        legendPos.setVertAlign(VertAlign.TOP);
        legendPos.setX(-10);
        legendPos.setY(100);
        legend.setPosition(legendPos);
        legend.setBorderWidth(0);
        chartConfig.setLegend(legend);

        // Series data label formatter
        LineConfig lineCfg = new LineConfig();
        chartConfig.addSeriesConfig(lineCfg);
        // Tooltip formatter
        chartConfig
                .getTooltip()
                .setFormatterJsFunc(
                        "function() { "
                                + " return '<b>' + this.series.name + '</b><br/>' +  this.x + ': '+ this.y +'°C'"
                                + "}");

        final InvientCharts chart = new InvientCharts(chartConfig);

        lineCfg = new LineConfig();
        lineCfg.setVisible(false);
        XYSeries seriesData = new XYSeries("Tokyo", lineCfg);
        seriesData.setSeriesPoints(getPoints(seriesData, 7.0, 6.9, 9.5, 14.5,
                18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6));
        chart.addSeries(seriesData);

        seriesData = new XYSeries("New York");
        seriesData.setSeriesPoints(getPoints(seriesData, -0.2, 0.8, 5.7, 11.3,
                17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5));
        chart.addSeries(seriesData);

        seriesData = new XYSeries("Berlin");
        seriesData.setSeriesPoints(getPoints(seriesData, -0.9, 0.6, 3.5, 8.4,
                13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0));
        chart.addSeries(seriesData);

        seriesData = new XYSeries("London");
        seriesData.setSeriesPoints(getPoints(seriesData, 3.9, 4.2, 5.7, 8.5,
                11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8));
        chart.addSeries(seriesData);
        this.addComponent(chart);
        chart.getSeries("London").hide();
    }
5

Hi, Invient:

After trying, I have below conclusion.

  1. If your series are shown, you can’t hide series by directly calling series.hide() method.
  2. If your series are hidden in default when show on web page (legend is gray in hide status), if you call series.hide(), this series will be shown, that’s very strange behavior.
  3. You can hide a series by removing a series from chart → call series.hide() → chart.addSeries(series), then you got a hide series in gray.

Would you please make series.hide() more workable?
I just want to call series.hide() to hide even it is shown on web page.

Thank you.

6

Hi…

 I want use invient chart in my portlet...suggest me some steps...

Thank you…