Munmun

Unable to create a fusion multiseries chart with scrollbar

Recommended Posts

I am plotting a multiseries chart using data from database in java . The Chart attributes that I put are as follows:  I have around 2880 points to plot.(Atleast 1000 minimum) for which i need scrollbars. currently the poits are all clustered and not visible.

            chartConfig.put("theme", "fusion");
            chartConfig.put("caption", "Countries With Most Oil Reserves [2017-18]");
            chartConfig.put("subCaption", "In MMbbl = One Million barrels");
            chartConfig.put("xAxisName", "Country");
            chartConfig.put("yAxisName", "Reserves (MMbbl)");
            chartConfig.put("linethickness", "3");
            chartConfig.put("flatScrollBars", "1");
            chartConfig.put("scrollheight", "10");
            chartConfig.put("numVisiblePlot", "12");
            chartConfig.put("showHoverEffect", "1"); chartobj.put("paletteColors", "#0075c2,#1aaf5d");
         chartobj.put("bgcolor", "#ffffff");
         chartobj.put("showBorder", "1");

 

 

categories.add(buildCategories("datetime", rs,  gson));
 dataset.add(buildDataset("Y_actual","y_actual", rs1, gson));
dataset.add(buildDataset("Y_hat", "y_predicted", rs2, gson));

dataMap.put("chart", gson.toJson(chartobj));
          dataMap.put("categories", gson.toJson(categories));
          dataMap.put("dataset", gson.toJson(dataset));
          
      FusionCharts mslineChart= new FusionCharts(
            "msline",// chartType      
                        "chart1",// chartId
                        "700","400",// chartWidth, chartHeight
                        "chart",// chartContainer
                        "json",// dataFormat
                        gson.toJson(dataMap) //dataSource
                    );

Scrollbar is not getting implemented in the chart . kindly suggest.           

 

 

Share this post


Link to post
Share on other sites

Hi Munmun,

 

The chart type that you are using is "msline" which does not support the scroll feature on the chart.

You need to use the "scrollline2d" as the chart type in the FusionCharts constructor method. Please refer to the documentation for Scroll line char type details :

https://www.fusioncharts.com/dev/chart-guide/standard-charts/scroll-charts

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Dear Team,

This is a sample scrollline2d chart code written in java referenced from one of your examples . On executing this I do not get the scrollline and displays "No data is visisble " in the browser. kindly verifythe code sample

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@page import="java.util.*" %>
<%@page import="com.FusionCharts" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>FusionCharts | My First Chart</title>

  
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>

 
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
        <div id="chart"></div>
        <%
            // store chart config name-config value pair
                       Map<String, String> chartConfig = new HashMap<String, String>();
            chartConfig.put("theme", "fusion");
            chartConfig.put("caption", "Dates [2017-18]");
            chartConfig.put("subCaption", "In MMbbl = One Million barrels");
            chartConfig.put("xAxisName", "Dates");
            chartConfig.put("yAxisName", "values");
            chartConfig.put("linethickness", "3");
            chartConfig.put("flatScrollBars", "1");
            chartConfig.put("scrollheight", "10");
            chartConfig.put("numVisiblePlot", "12");
            chartConfig.put("showHoverEffect", "1");

            //             chartConfig.put("numberSuffix", "k");

            //store label-value pair
            Map<String, Integer> dataValuePair = new HashMap<String, Integer>();
            dataValuePair.put("1994", 15622);
            dataValuePair.put("1995", 10612);
            dataValuePair.put("1996", 15820);
            dataValuePair.put("1997", 26723);
            dataValuePair.put("1998", 35415);
            dataValuePair.put("1999", 25555);
            dataValuePair.put("2000", 81803);
            dataValuePair.put("2001", 47950);
            dataValuePair.put("2002", 19435);
            dataValuePair.put("2003", 9780);
            dataValuePair.put("2004", 23243);
            dataValuePair.put("2005", 28619);
            dataValuePair.put("2006", 8477);
            dataValuePair.put("2007", 3503);
            dataValuePair.put("2008", 14278);
            dataValuePair.put("2009", 30522);
            dataValuePair.put("2010", 61518);
            dataValuePair.put("2011", 24819);
            dataValuePair.put("2012", 16437);
            dataValuePair.put("2013", 21171);
            dataValuePair.put("2014", 1690);
            dataValuePair.put("2015", 2418);
            dataValuePair.put("2016", 11253);
            dataValuePair.put("2017", 11260);

            StringBuilder jsonData = new StringBuilder();
            StringBuilder data = new StringBuilder();

            // json data to use as chart data source
            jsonData.append("{'chart':{");
            for (Map.Entry conf : chartConfig.entrySet()) {
                jsonData.append("'" + conf.getKey() + "':'" + conf.getValue() + "',");
            }

            jsonData.replace(jsonData.length() - 1, jsonData.length(), "},");

            // build  data object from label-value pair
            data.append("'data':[");

            for (Map.Entry pair : dataValuePair.entrySet()) {
                data.append("{'label':'" + pair.getKey() + "','value':'" + pair.getValue() + "'},");
            }
            data.replace(data.length() - 1, data.length(), "]");

            jsonData.append(data.toString());
            jsonData.append("}");

            // Create chart instance
            // charttype, chartID, width, height,containerid, data format, data
            FusionCharts firstChart = new FusionCharts("scrollline2d", "first_chart", "700", "400", "chart", "json",
                    jsonData.toString());
        %>
        <%= firstChart.render() %>
    </body>
</html>

Share this post


Link to post
Share on other sites

Hi Munmun,

 

The dataSource structure(in your code provided) that you are generating for scrollline2d chart type is a structure supported by a single-series chart like line or column2d. Hence you are getting the chart message "No data to display" displayed on the chart.

Example : data: [{"label": "Q1", "value": "1234"}, {"label": "Q2", "value": "2222"}]

 

But you need to generate the structure like below for scrollline2d chart which is a multi-series type.

Correct structure example :

"categories": [{ "category": [{"label": "Q1"}. {"label": "Q2"}] }]

"dataset": [{ "seriesName": "Actual", "data": [{"value": "1234" }, { "value": "2222"}] }, { "seriesName": "Predicted", "data": [{ "value":: "1111" }, { "value": "4444" }] }]

 

Please check the documentation below for the details of the structure of Scroll charts(similar to multi-series charts) : https://www.fusioncharts.com/dev/chart-guide/standard-charts/scroll-charts

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Thanks Akash . Yes I did notice that change , but I thought there might be some other alternate to it.
So As you mentioned earlier multiseries charts cannot have a scroll. 

Please let me know if there are many points in a multiseries chart , what can be done as an alternate to view all the points in a page ,as tbere are 2880 points to be plotted for the multiseries. 

Your help would greatly be appreciated.

Share this post


Link to post
Share on other sites

Hi Munmun,

 

The multi-series line chart(msline) does not have scroll feature.
But the scroll line chart(scrollline2d) supports scroll feature, and also it is multi-series in nature. So the dataSource structure of msline and scrollline2d is same.

For your scenario, when you have a pretty big dataset and you are using msline chart type, the plots on the chart are getting clustered and apparently not clearly visible.
Sample fiddle(msline) : http://jsfiddle.net/Lp4sywe3/4/

So, to avoid this you could simply change the chart type to "scrollline2d" instead of "msline" to get the same chart rendered with scroll bar without changing the dataSource(as the both chart types have same dataSource structure).
Sample fiddle(scrollline2d) : http://jsfiddle.net/Lp4sywe3/5/

To configure the number of visible plots in the scrolled view, you can set "numVisiblePlots" at the chart-level dataSource.

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now