rvwater

Set axis intervals for scatterplot

Recommended Posts

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");
        };

post-70729-0-87101800-1472758093_thumb.jpg

Share this post


Link to post
Share on other sites

Hi,

 
The chart is rendering perfectly.
 
Since your x values precision is quite high, so the vertical lines for high precision values (like 0.0001, 0.001, 0.01 ) , these are getting placed very close to each other taking the scale of 0 to 10.
 
So it seems only one vertical line is placed there.

To see the different vertical lines are actually getting placed increase the chart width to very large size.

Please refer to this fiddle for further reference 
http://jsfiddle.net/bp8yavzp/3/

Share this post


Link to post
Share on other sites

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.

post-70729-0-94288400-1473388721_thumb.jpg

 

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");
Edited by rvwater

Share this post


Link to post
Share on other sites

Hi,

Thanks for replying back.

For any multi series chart, the number of data in the "catergories" object should be same as the number of data in the "dataset" object. So if you want to plot all your data's in the chart, please increase the number of data in the "category" object however you can set   "showlabel":"0",  "showverticalline": "0" for a particular "category" object to achieve your goal.

For further reference regarding this please check this link

http://jsfiddle.net/ayanbhaduryfc/1LLkc4x7/

But according to your mock image which you provided, it will be great if you go for multi-series spline chart.
You can find the example in this fiddle link
http://jsfiddle.net/ayanbhaduryfc/eqq4h/49/

Hope this helps.

Share this post


Link to post
Share on other sites

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");

post-70729-0-65039800-1474914115_thumb.jpg

JSON data log-chart scenarios.txt

Share this post


Link to post
Share on other sites

Hi,

 
Thanks for replying back.
 
I checked your query and found that fusioncharts.js is throwing error as it can not plot properly because the data which you provided has up to 18 decimal places, but fusioncharts only provide up to 10 decimal places, so its rounding off to log 0 as a result its throwing error in the console and not plotting properly. I have logged an improvement regarding this we will notify you once it is fixed.

But you can plot your all your data using msline or msspline chart.

Please refer to this fiddle link for further information 
http://jsfiddle.net/ayanbhaduryfc/oxLmc0ko/2/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hi,

Hope you are keeping well! Thank you for your continued patience.

 

For the issue reported, could you please upgrade your current version to the latest, i.e, FusionCharts Suite XT v3.13.0?

 

To avail the licensed release, you would need to re-download the entire package from the My Orders section of FusionCharts Product Update Center. PUC URL: https://puc.fusioncharts.com/

To download the Evaluation version of FusionCharts Suite XT v3.13.0, please visit the link: https://www.fusioncharts.com/download/fusioncharts-suite

 

Btw, we’ve just released a new version of FusionCharts & our new web, with lot more chart samples, dashboards & completely new data stories. 

 

We would love to have your feedback. If you need any further assistance, please revert back to us.

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