Munmun Report post Posted July 23, 2019 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
Akash Biswas Report post Posted July 23, 2019 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
Munmun Report post Posted July 23, 2019 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
Akash Biswas Report post Posted July 23, 2019 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
Munmun Report post Posted July 23, 2019 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
Akash Biswas Report post Posted July 24, 2019 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
