FusionCharts - Vertical Zero Plane in charts with numeric x-axis
Showing only specific data values of a chart
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!--
In charts with numeric x-axis (XY Plot or Scatter, Bubble), you can display Vertical Zero Plane in a chart.
Attributes:
# showVZeroPlane
# vZeroPlaneColor
# vZeroPlaneAlpha
# vZeroPlaneThickness
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var profitChart = new FusionCharts({
type: 'zoomscatter',
renderAt: 'chart-container',
id: 'myChart',
width: '640',
height: '480',
dataFormat: 'json',
dataSource: {
chart: {
caption: 'Data for October 2016',
xaxisminvalue: '0',
xaxismaxvalue: '5',
yaxisminvalue: '0',
yaxismaxvalue: '5',
showLabels:'0',
showYAxisValues:'0',
//xaxisname: 'X Axis',
//yaxisname: 'Y Axis',
trendValueFontSize:'15',
trendValueAlpha:"0",
plotTooltext: '<div id="valueDiv"><b>$seriesName</b><br/> Y: <b>$yDataValue</b> <br/>X:<b>$xDataValue</b> <br/> Distance: $data.distance <br/> Time: $data.time</div>',
linethickness: 3,
showaxislines: 1,
showLegend: 0,
anchorradius: 10,
anchorSides: 0,
divLineDashed: 0,
showalternatehgridcolor: 0,
valuePadding: 50,
},
dataset: [
{
seriesname: '503',
anchorBgColor: '#6baa01',
anchorBorderColor: '#6baa01',
data: [{ x: 0, y: 0, distance: 18, time: 98,tooltext:'Vehicle:503, x:0, y:0, distance:18, time:98' }]
},
{
seriesname: '504A',
anchorBgColor: '#6baa01',
anchorBorderColor: '#6baa01',
data: [{ x: 3, y: 3, distance: 18, time: 98,toolText:'Vehicle:504A, x:3 y:3 distance:18, time:98'}]
},
{
seriesname: '504B',
anchorBgColor: '#6baa01',
anchorBorderColor: '#6baa01',
anchorRadius:'10',
...