rvwater

Hello - Have been using FusionChart eval version to play with the scatterplot to display a set of points. Everything works and looks great, chart visualization is very cool! Set the x-axis at particular intervals has been a challenge, i.e., want to display 0.0001, 0.001, 0.01, 0.1, 1 and 10 but displays only 0.0001, 1 and 10. Am using the 'categories' but doesn't seem to be working as expected, or I may have missed something. Could you please look at the function below and suggest any changes. As you can notice in the attached image, data coming from the JSON string has values spread across from 0.0001 through 4+. Thanks in advance. function buildScatterplot(scatterplotData) { console.log("building scatterplot") console.log(scatterplotData) var jsonData = JSON.parse(scatterplotData) var pchartData = document.getElementById('pscatterchartHidden').value; var percentileChart = new FusionCharts({ type: 'scatter', width: '640', height: '480', dataFormat: 'json', dataSource: { "chart": { "caption": "Percentile Distribution by Scenario", "subcaption": "", "showBorder": "0", "bgcolor": "#ffffff", "yaxisname": "Percentile (%)", "xaxisname": "PEC (µg/L)", "captionFontSize": "16", "baseFontColor": "#333333", "baseFont": "Trebuchet MS", "anchorBgColor": "#FF0000", "showHoverEffect": "1", "showaxislines": "1", "showXAxisLine": "1", "xaxisminvalue": "0", "xaxismaxvalue": "10", "yaxisminvalue": "0", "yaxismaxvalue": "100", "showDivLineValues": "1", "anchorradius": "2", "rotateYAxisName": "1", "decimals": "5", "plotTooltext": "<div id='valueDiv'>Percentile: $yDataValue, PEC: $xDataValue</div>" }, "categories": [{ "category": [{ "x": "0.0001", "label": "0.0001", "showverticalline": "1" }, { "x": "0.001", "label": "0.001", "showverticalline": "1" }, { "x": "0.01", "label": "0.01", "showverticalline": "1" }, { "x": "0.1", "label": "0.1", "showverticalline": "1" }, { "x": "1", "label": "1", "showverticalline": "1" }, { "x": "10", "label": "10", "showverticalline": "1" }] }], "dataset": [ { "color": "#D77D00", "anchorsides": "4", "anchorradius": "6", "anchorbgcolor": "#D77D00", "anchorbordercolor": "#D77D00", "decimals": "5", //"data": [<%= pDataChart%>] 'data': jsonData } ] } }); percentileChart.render("scatterplotContainer"); };

Hello Ayan, I appreciate your quick response with suggestions. 18 decimal places is indeed quite a lot to ask for, it is good to know the chart can handle up to 10 decimals. One workaround we have for the log chart is to round the input data to 10 decimals and use a default value for those that turn out as 0. Alternatively, I have prototypes running with msline and msspline charts you suggested which works well with our data. But with the number of data points and the values being so close to each other, the 'log' chart definitely displays the results much better than the msline or msspline charts. Will choose one of them shortly. Thanks again, RV.

Hello Ayan, thank you again for your time and recommendations. The log-chart sample you provided along with the pointers you provided proved helpful and I was able to use the log-chart for the needs. The charts work flawlessly for the most part but have been running into issues where the y-axis values are very small or 0 (log of 0 will sure throw an error). Hence 0 (zero) values are being eliminated from the JSON, but very minute values on y-axis (in log-scale) is proving tricky to display. Please refer to the code below and attached graphic -- gages on top gives users an option to change inputs for the chart below. Graphic has the two scenarios -- the left is where it works great and chart on right which has an issue to display y-axis values. Also the attached text file has JSON values for both the scenarios. Could you please take a look and suggest a work around to display the results properly. Thanks again, RV. var percentileChart = new FusionCharts({ type: 'logmsline', width: '600', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": logchartCaption, "subCaption": "", "xAxisName": "Percentile (%)", "yAxisName": "PEC (µg/l)", "paletteColors": "#e44a00", "captionFontSize": "16", "baseFontColor": "#333333", "baseFont": "Trebuchet MS", "baseFontSize": "12", "bgAlpha": "0", "canvasBorderAlpha": "0", "LegendShadow": "0", "legendBorderAlpha": "0", "showXAxisLine": "1", "showValues": "0", "showBorder": "0", "decimals": "5", "labelDisplay": "none", "base": "10", "axisLineAlpha": "10", "divLineAlpha": "10", "yAxisValueDecimals": "5", "yAxisMinValue": "0", "showLegend": "0" }, "categories": [ { "category": [ { "label": "0", "showverticalline": "1" }, { "label": "1", "showlabel": "0", "showverticalline": "0" }, { "label": "2", "showlabel": "0", "showverticalline": "0" }, { "label": "3", "showlabel": "0", "showverticalline": "0" }, { "label": "4", "showlabel": "0", "showverticalline": "0" }, { "label": "5", "showlabel": "0", "showverticalline": "0" }, { "label": "6", "showlabel": "0", "showverticalline": "0" }, { "label": "7", "showlabel": "0", "showverticalline": "0" }, { "label": "8", "showlabel": "0", "showverticalline": "0" }, { "label": "9", "showlabel": "0", "showverticalline": "0" }, { "label": "10", "showlabel": "0", "showverticalline": "0" }, { "label": "11", "showlabel": "0", "showverticalline": "0" }, { "label": "12", "showlabel": "0", "showverticalline": "0" }, { "label": "13", "showlabel": "0", "showverticalline": "0" }, { "label": "14", "showlabel": "0", "showverticalline": "0" }, { "label": "15", "showlabel": "0", "showverticalline": "0" }, { "label": "16", "showlabel": "0", "showverticalline": "0" }, { "label": "17", "showlabel": "0", "showverticalline": "0" }, { "label": "18", "showlabel": "0", "showverticalline": "0" }, { "label": "19", "showlabel": "0", "showverticalline": "0" }, { "label": "20", "showlabel": "1", "showverticalline": "1" }, { "label": "21", "showlabel": "0", "showverticalline": "0" }, { "label": "22", "showlabel": "0", "showverticalline": "0" }, { "label": "23", "showlabel": "0", "showverticalline": "0" }, { "label": "24", "showlabel": "0", "showverticalline": "0" }, { "label": "25", "showlabel": "0", "showverticalline": "0" }, { "label": "26", "showlabel": "0", "showverticalline": "0" }, { "label": "27", "showlabel": "0", "showverticalline": "0" }, { "label": "28", "showlabel": "0", "showverticalline": "0" }, { "label": "29", "showlabel": "0", "showverticalline": "0" }, { "label": "30", "showlabel": "0", "showverticalline": "0" }, { "label": "31", "showlabel": "0", "showverticalline": "0" }, { "label": "32", "showlabel": "0", "showverticalline": "0" }, { "label": "33", "showlabel": "0", "showverticalline": "0" }, { "label": "34", "showlabel": "0", "showverticalline": "0" }, { "label": "35", "showlabel": "0", "showverticalline": "0" }, { "label": "36", "showlabel": "0", "showverticalline": "0" }, { "label": "37", "showlabel": "0", "showverticalline": "0" }, { "label": "38", "showlabel": "0", "showverticalline": "0" }, { "label": "39", "showlabel": "0", "showverticalline": "0" }, { "label": "40", "showlabel": "1", "showverticalline": "1" }, { "label": "41", "showlabel": "0", "showverticalline": "0" }, { "label": "42", "showlabel": "0", "showverticalline": "0" }, { "label": "43", "showlabel": "0", "showverticalline": "0" }, { "label": "44", "showlabel": "0", "showverticalline": "0" }, { "label": "45", "showlabel": "0", "showverticalline": "0" }, { "label": "46", "showlabel": "0", "showverticalline": "0" }, { "label": "47", "showlabel": "0", "showverticalline": "0" }, { "label": "48", "showlabel": "0", "showverticalline": "0" }, { "label": "49", "showlabel": "0", "showverticalline": "0" }, { "label": "50", "showlabel": "0", "showverticalline": "0" }, { "label": "51", "showlabel": "0", "showverticalline": "0" }, { "label": "52", "showlabel": "0", "showverticalline": "0" }, { "label": "53", "showlabel": "0", "showverticalline": "0" }, { "label": "54", "showlabel": "0", "showverticalline": "0" }, { "label": "55", "showlabel": "0", "showverticalline": "0" }, { "label": "56", "showlabel": "0", "showverticalline": "0" }, { "label": "57", "showlabel": "0", "showverticalline": "0" }, { "label": "58", "showlabel": "0", "showverticalline": "0" }, { "label": "59", "showlabel": "0", "showverticalline": "0" }, { "label": "60", "showlabel": "1", "showverticalline": "1" }, { "label": "61", "showlabel": "0", "showverticalline": "0" }, { "label": "62", "showlabel": "0", "showverticalline": "0" }, { "label": "63", "showlabel": "0", "showverticalline": "0" }, { "label": "64", "showlabel": "0", "showverticalline": "0" }, { "label": "65", "showlabel": "0", "showverticalline": "0" }, { "label": "66", "showlabel": "0", "showverticalline": "0" }, { "label": "67", "showlabel": "0", "showverticalline": "0" }, { "label": "68", "showlabel": "0", "showverticalline": "0" }, { "label": "69", "showlabel": "0", "showverticalline": "0" }, { "label": "70", "showlabel": "0", "showverticalline": "0" }, { "label": "71", "showlabel": "0", "showverticalline": "0" }, { "label": "72", "showlabel": "0", "showverticalline": "0" }, { "label": "73", "showlabel": "0", "showverticalline": "0" }, { "label": "74", "showlabel": "0", "showverticalline": "0" }, { "label": "75", "showlabel": "0", "showverticalline": "0" }, { "label": "76", "showlabel": "0", "showverticalline": "0" }, { "label": "77", "showlabel": "0", "showverticalline": "0" }, { "label": "78", "showlabel": "0", "showverticalline": "0" }, { "label": "79", "showlabel": "0", "showverticalline": "0" }, { "label": "80", "showlabel": "1", "showverticalline": "1" }, { "label": "81", "showlabel": "0", "showverticalline": "0" }, { "label": "82", "showlabel": "0", "showverticalline": "0" }, { "label": "83", "showlabel": "0", "showverticalline": "0" }, { "label": "84", "showlabel": "0", "showverticalline": "0" }, { "label": "85", "showlabel": "0", "showverticalline": "0" }, { "label": "86", "showlabel": "0", "showverticalline": "0" }, { "label": "87", "showlabel": "0", "showverticalline": "0" }, { "label": "88", "showlabel": "0", "showverticalline": "0" }, { "label": "89", "showlabel": "0", "showverticalline": "0" }, { "label": "90", "showlabel": "0", "showverticalline": "0" }, { "label": "91", "showlabel": "0", "showverticalline": "0" }, { "label": "92", "showlabel": "0", "showverticalline": "0" }, { "label": "93", "showlabel": "0", "showverticalline": "0" }, { "label": "94", "showlabel": "0", "showverticalline": "0" }, { "label": "95", "showlabel": "0", "showverticalline": "0" }, { "label": "96", "showlabel": "0", "showverticalline": "0" }, { "label": "97", "showlabel": "0", "showverticalline": "0" }, { "label": "98", "showlabel": "0", "showverticalline": "0" }, { "label": "99", "showlabel": "0", "showverticalline": "0" }, { "label": "100", "showlabel": "1", "showverticalline": "1" } ] } ], "annotations": { "groups": [ { "id": "anchor-highlight", "items": [ { "id": "high-star", "type": "circle", "x": "$dataset.0.set.50.x", "y": "$dataset.0.set.50.y", "radius": "12", "color": "#6baa01", "border": "2", "borderColor": "#f8bd19" }, { "id": "label", "type": "text", "text": "50th Percentile", "fillcolor": "#6baa01", "rotate": "90", "x": "$dataset.0.set.50.x+40", "y": "$dataset.0.set.50.y+20" }, { "id": "high-star", "type": "circle", "x": "$dataset.0.set.95.x", "y": "$dataset.0.set.95.y", "radius": "12", "color": "#6baa01", "border": "2", "borderColor": "#f8bd19" }, { "id": "label", "type": "text", "text": "95th Percentile", "fillcolor": "#6baa01", "rotate": "90", "x": "$dataset.0.set.95.x-55", "y": "$dataset.0.set.95.y-10" } ] } ] }, "dataset": [ { "seriesname": "PEC", 'data': jsonData } ] } }); percentileChart.render("scatterplotContainer"); JSON data log-chart scenarios.txt

Hello Ayan, thank you for your quick reply with suggestions and an example too! It was helpful to understand with a possible work around. All values are indeed there, good to know. But unfortunately, the width of the chart cannot be set very high. So I was toying around with a couple of options. In Excel the x-axis can be converted to "logarithmic" scale that alleviates my problem. Attached sheet has the values plotted two ways - first scatter plot is as per the current FusionCharts, but the desired chart is the second one. If you can suggest a way to change the x-axis to log scale (log(10)), that would solve my problem. Please take a look. Excel is not permitted for upload on this form, instead uploading a JPEG of the example. Alternatively, I was exploring log charts by FusionCharts and specifically the log line chart. This could be tweaked for my need here. But again ran into a challenge - only the first six values are displayed, i.e., values that are in sync with the x-axis categories only show up. All other values seem to be ignored. Please see code below, the dataset will eventually point to a JSON. Regards, RV. var percentileChart = new FusionCharts({ type: 'logmsline', width: '500', height: '300', dataFormat: 'json', dataSource: { "chart": { "caption": "Results by Scenario", "subCaption": "", "xAxisName": "Percentile", "yAxisName": "PEC", "paletteColors": "#008ee4,#6baa01,#e44a00", "bgAlpha": "0", "borderAlpha": "20", "canvasBorderAlpha": "0", "LegendShadow": "0", "legendBorderAlpha": "0", "showXAxisLine": "1", "showValues": "0", "showBorder": "0", "showAlternateHgridColor": "0", "base": "10", "axisLineAlpha": "10", "divLineAlpha": "10", "yAxisMinValue": "0.0001", "yAxisValueDecimals": "5", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5" }, "categories": [ { "category": [ { "label": "0", "showverticalline": "1" }, { "label": "20", "showverticalline": "1" }, { "label": "40", "showverticalline": "1" }, { "label": "60", "showverticalline": "1" }, { "label": "80", "showverticalline": "1" }, { "label": "100", "showverticalline": "1" } ] } ], "dataset": [ { "seriesname": "PEC", "data": [ { "value": "0.00021" }, { "value": "0.00671" }, { "value": "0.01947" }, { "value": "0.15751" }, { "value": "0.38780" }, { "value": "0.67123" }, { "value": "0.99999" }, { "value": "1.02610" }, { "value": "2.65819" }, { "value": "4.82109" } ] } ] } }); percentileChart.render("scatterplotContainer");