FusionCharts - Gallery Example - Line 2D Chart In Javascript
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<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>
<!--
Showcase of Line Chart
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var visitChart = new FusionCharts({
type: 'line',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "XBar chart of strength",
"xAxisName": "Sub group",
"yAxisName": "Mean",
"yAxisMinValue": "154",
"yAxisMaxValue": "157",
"labelStep": "2",
"decimals": "1",
"lineThickness": "2"
},
"data": [{
"label": "1",
"value": "155"
},
{
"label": "2",
"value": "155.4"
},
{
"label": "3",
"value": "156"
},
{
"label": "4",
"value": "154.1"
},
{
"label": "5",
"value": "154.5"
},
{
"label": "6",
"value": "156.3"
},
{
"label": "7",
"value": "155"
},
{
"label": "8",
"value": "155.4"
},
{
"label": "9",
"value": "156"
},
{
"label": "10",
"value": "154.1"
},
{
"label": "11",
"value": "154.5"
},
{
"label": "12",
"value": "156.3"
}
],
"trendlines": [{
"line": [{
"startvalue": "154.262",
"color": "#A55955",
"displayvalue": "LCL = 154.262",
"valueOnRight": "1",
"thickness": "2"
},
{
"startvalue": "155.561",
"color": "#6AA064",
"displayvalue": "X = 155.561",
"valueOnRight": "1",
"thickness": "2"
},
{
"startvalue": "156.860",
"color": "#A45854",
"displayvalue": "UCL = 156.860",
"valueOnRight": "1",
"thickness": "2"
}]
}]
}
});
...