Set axis intervals for scatterplot

rvwater · September 1, 2016

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

};

Ayan Bhadury · September 2, 2016

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/

rvwater · September 9, 2016

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

Edited September 9, 2016 by rvwater

Ayan Bhadury · September 9, 2016

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.

rvwater · September 26, 2016

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

Ayan Bhadury · September 27, 2016

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/

rvwater · October 2, 2016

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.

Ayan Bhadury · October 3, 2016

Hi,

Thanks for those kind words. I am happy that you got your solution. Please let me know if further information is required.

Ayan Bhadury · August 8, 2018

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.

Set axis intervals for scatterplot

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in