Toolbar
FusionCharts Suite XT introduces the toolbar starting version 3.11.0. The advantage of having a toolbar is that it manages all the UI action elements (context menus, checkboxes, buttons) centrally, providing a uniform and clean look and a better meaningful and logical grouping.
Introducing the toolbar has resulted in changes in the way certain chart elements are implemented. The table below summarizes the changes in implementation:
| Chart Type | Component | Previous Implementation | Current Implementation |
|---|---|---|---|
Multi-axis line chart |
Checkboxes to show/hide axes lines |
HTML checkboxes |
Pure SVG exportable checkboxes |
Drag-able column, line, and area charts |
Menu to change y-axis limits |
Menu placed at the bottom-left side of the chart |
Context menu |
Drag-node chart |
Menu to add/edit/delete nodes, labels, and connectors |
Menu placed at the bottom-left side of the chart |
Context menu |
Real-time charts |
Message logger |
Menu placed at the bottom-left side of the chart |
Context menu |
Real-time charts |
Real-time menu |
Menu placed at the bottom-left side of the chart |
Context menu |
The samples shown below showcase the difference between the current and the previous implementations of the toolbar.
The drag-node chart below shows the current implementation of the toolbar:
{
"chart": {
"caption": "Store Plannogram",
"subcaption": "Bakersfield Central",
"showcanvasborder": "1",
"canvasborderAlpha": "50",
"canvasborderthickness": "0.4",
"showlegend": "1",
"viewmode": "0",
"showXAxisLine": "0",
"xaxismaxvalue": "100",
"yaxismaxvalue": "100",
"theme": "fint"
},
"dataset": [
{
"seriesname": "Entry",
"color": "#008ee4",
"data": [
{
"x": "5",
"y": "50",
"width": "45",
"height": "100",
"name": "Entry",
"id": "1",
"allowdrag": "1",
"shape": "rectangle"
}
]
},
{
"seriesname": "Retail Sections",
"color": "#6baa01",
"data": [
{
"x": "38",
"y": "85",
"width": "100",
"height": "35",
"name": "Daily{br}Consummables",
"id": "2",
"allowdrag": "1",
"shape": "rectangle"
},
{
"x": "38",
"y": "67",
"width": "100",
"height": "35",
"name": "Personal{br}care",
"id": "3",
"allowdrag": "1",
"shape": "rectangle"
},
{
"x": "38",
"y": "49",
"width": "100",
"height": "35",
"name": "Baby{br}care",
"id": "4",
"allowdrag": "1",
"shape": "rectangle"
},
{
"x": "38",
"y": "31",
"width": "100",
"height": "35",
"name": "Fruits &{br}Vegetables",
"id": "5",
"allowdrag": "1",
"shape": "rectangle"
},
{
"x": "38",
"y": "13",
"width": "100",
"height": "35",
"name": "Furnishing",
"id": "6",
"allowdrag": "1",
"shape": "rectangle"
}
]
},
{
"seriesname": "Items",
"color": "#f8bd19",
"data": [
{
"x": "56",
"y": "94",
"name": "Bread",
"width": "45",
"height": "25",
"id": "7",
"allowdrag": "1",
"shape": "Rectangle"
},
{
"x": "66",
"y": "94",
"name": "Egg",
"width": "45",
"height": "25",
"id": "8",
"allowdrag": "1",
"shape": "Rectangle"
},
{
"x": "76",
"y": "94",
"name": "Meat",
"width": "45",
"height": "25",
"id": "9",
"allowdrag": "1",
"shape": "Rectangle"
},
{
"x": "86",
"y": "94",
"name": "Grain",
"id": "10",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "96",
"y": "88",
"name": "Fish",
"id": "11",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "54",
"y": "76",
"name": "Soap",
"id": "12",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "64",
"y": "76",
"name": "Moisturizer",
"id": "13",
"allowdrag": "1",
"width": "48",
"height": "25",
"shape": "Rectangle"
},
{
"x": "74",
"y": "76",
"name": "Shampoo",
"id": "14",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "84",
"y": "76",
"name": "Toiletry kit",
"id": "15",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "95",
"y": "70",
"name": "Deodorant",
"id": "16",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "54",
"y": "58",
"name": "Diaper",
"id": "17",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "64",
"y": "58",
"name": "Soap",
"id": "18",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "74",
"y": "58",
"name": "Shampoo",
"id": "19",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "84",
"y": "58",
"name": "Wipe",
"id": "20",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "94",
"y": "52",
"name": "Toy",
"id": "21",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "54",
"y": "40",
"name": "Carrot",
"id": "22",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "64",
"y": "40",
"name": "Spinach",
"id": "23",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "74",
"y": "40",
"name": "Strawberry",
"id": "24",
"allowdrag": "1",
"width": "50",
"height": "25",
"shape": "Rectangle"
},
{
"x": "84",
"y": "40",
"name": "Apple",
"id": "25",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "94",
"y": "34",
"name": "Grape",
"id": "26",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "54",
"y": "22",
"name": "Bed Linen",
"id": "27",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "64",
"y": "22",
"name": "Carpet",
"id": "28",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "74",
"y": "22",
"name": "Rug",
"id": "29",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "84",
"y": "22",
"name": "Curtain",
"id": "30",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "94",
"y": "16",
"name": "Cushion",
"id": "31",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
}
]
}
],
"connectors": [
{
"color": "#33bdda",
"stdthickness": "5",
"connector": [
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "2",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "3",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "4",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "5",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "6",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "1",
"to": "2",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "2",
"to": "3",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "3",
"to": "4",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "3",
"to": "5",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "5",
"to": "6",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "2",
"to": "7",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "2",
"to": "8",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "2",
"to": "9",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "2",
"to": "10",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "2",
"to": "11",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "3",
"to": "12",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "3",
"to": "13",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "3",
"to": "14",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "3",
"to": "15",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "3",
"to": "16",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "4",
"to": "17",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "4",
"to": "18",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "4",
"to": "19",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "4",
"to": "20",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "4",
"to": "21",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "5",
"to": "22",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "5",
"to": "23",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "5",
"to": "24",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "5",
"to": "25",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "5",
"to": "26",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "6",
"to": "27",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "6",
"to": "28",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "6",
"to": "29",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "6",
"to": "30",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "6",
"to": "31",
"arrowatstart": "0",
"arrowatend": "1"
}
]
}
]
}<chart caption="Store Plannogram" subcaption="Bakersfield Central" showcanvasborder="1" canvasborderalpha="50" canvasborderthickness="0.4" showlegend="1" viewmode="0" showxaxisline="0" xaxismaxvalue="100" yaxismaxvalue="100" theme="fint">
<dataset seriesname="Entry" color="#008ee4">
<set x="5" y="50" width="45" height="100" name="Entry" id="1" allowdrag="1" shape="rectangle" />
</dataset>
<dataset seriesname="Retail Sections" color="#6baa01">
<set x="38" y="85" width="100" height="35" name="Daily{br}Consummables" id="2" allowdrag="1" shape="rectangle" />
<set x="38" y="67" width="100" height="35" name="Personal{br}care" id="3" allowdrag="1" shape="rectangle" />
<set x="38" y="49" width="100" height="35" name="Baby{br}care" id="4" allowdrag="1" shape="rectangle" />
<set x="38" y="31" width="100" height="35" name="Fruits &{br}Vegetables" id="5" allowdrag="1" shape="rectangle" />
<set x="38" y="13" width="100" height="35" name="Furnishing" id="6" allowdrag="1" shape="rectangle" />
</dataset>
<dataset seriesname="Items" color="#f8bd19">
<set x="56" y="94" name="Bread" width="45" height="25" id="7" allowdrag="1" shape="Rectangle" />
<set x="66" y="94" name="Egg" width="45" height="25" id="8" allowdrag="1" shape="Rectangle" />
<set x="76" y="94" name="Meat" width="45" height="25" id="9" allowdrag="1" shape="Rectangle" />
<set x="86" y="94" name="Grain" id="10" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="96" y="88" name="Fish" id="11" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="54" y="76" name="Soap" id="12" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="64" y="76" name="Moisturizer" id="13" allowdrag="1" width="48" height="25" shape="Rectangle" />
<set x="74" y="76" name="Shampoo" id="14" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="84" y="76" name="Toiletry kit" id="15" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="95" y="70" name="Deodorant" id="16" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="54" y="58" name="Diaper" id="17" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="64" y="58" name="Soap" id="18" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="74" y="58" name="Shampoo" id="19" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="84" y="58" name="Wipe" id="20" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="94" y="52" name="Toy" id="21" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="54" y="40" name="Carrot" id="22" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="64" y="40" name="Spinach" id="23" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="74" y="40" name="Strawberry" id="24" allowdrag="1" width="50" height="25" shape="Rectangle" />
<set x="84" y="40" name="Apple" id="25" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="94" y="34" name="Grape" id="26" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="54" y="22" name="Bed Linen" id="27" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="64" y="22" name="Carpet" id="28" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="74" y="22" name="Rug" id="29" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="84" y="22" name="Curtain" id="30" allowdrag="1" width="45" height="25" shape="Rectangle" />
<set x="94" y="16" name="Cushion" id="31" allowdrag="1" width="45" height="25" shape="Rectangle" />
</dataset>
<connectors color="#33bdda" stdthickness="5">
<connector strength="0.5" label="Section" from="1" to="2" arrowatstart="0" arrowatend="1" />
<connector strength="0.5" label="Section" from="1" to="3" arrowatstart="0" arrowatend="1" />
<connector strength="0.5" label="Section" from="1" to="4" arrowatstart="0" arrowatend="1" />
<connector strength="0.5" label="Section" from="1" to="5" arrowatstart="0" arrowatend="1" />
<connector strength="0.5" label="Section" from="1" to="6" arrowatstart="0" arrowatend="1" />
<connector strength="0.5" label="" from="1" to="2" arrowatstart="1" arrowatend="1" />
<connector strength="0.5" label="" from="2" to="3" arrowatstart="1" arrowatend="1" />
<connector strength="0.5" label="" from="3" to="4" arrowatstart="1" arrowatend="1" />
<connector strength="0.5" label="" from="3" to="5" arrowatstart="1" arrowatend="1" />
<connector strength="0.5" label="" from="5" to="6" arrowatstart="1" arrowatend="1" />
<connector strength="0.25" label="" from="2" to="7" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="2" to="8" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="2" to="9" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="2" to="10" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="Product" from="2" to="11" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="3" to="12" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="3" to="13" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="3" to="14" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="3" to="15" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="Product" from="3" to="16" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="4" to="17" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="4" to="18" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="4" to="19" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="4" to="20" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="Product" from="4" to="21" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="5" to="22" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="5" to="23" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="5" to="24" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="5" to="25" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="Product" from="5" to="26" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="6" to="27" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="6" to="28" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="6" to="29" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="" from="6" to="30" arrowatstart="0" arrowatend="1" />
<connector strength="0.25" label="Product" from="6" to="31" arrowatstart="0" arrowatend="1" />
</connectors>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts( {
type: 'dragnode',
renderAt: 'chart-container',
width: '600',
height: '600',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Store Plannogram",
"subcaption": "Bakersfield Central",
"showcanvasborder": "1",
"canvasborderAlpha": "50",
"canvasborderthickness": "0.4",
"showlegend": "1",
"viewmode": "0",
"showXAxisLine" : "0",
"xaxismaxvalue": "100",
"yaxismaxvalue": "100",
//Theme
"theme" : "fint"
},
"dataset": [
{
"seriesname": "Entry",
"color": "#008ee4",
"data": [
{
"x": "5",
"y": "50",
"width": "45",
"height": "100",
"name": "Entry",
"id": "1",
"allowdrag": "1",
"shape": "rectangle"
}
]
},
{
"seriesname": "Retail Sections",
"color": "#6baa01",
"data": [
{
"x": "38",
"y": "85",
"width": "100",
"height": "35",
"name": "Daily{br}Consummables",
"id": "2",
"allowdrag": "1",
"shape": "rectangle"
},
{
"x": "38",
"y": "67",
"width": "100",
"height": "35",
"name": "Personal{br}care",
"id": "3",
"allowdrag": "1",
"shape": "rectangle"
},
{
"x": "38",
"y": "49",
"width": "100",
"height": "35",
"name": "Baby{br}care",
"id": "4",
"allowdrag": "1",
"shape": "rectangle"
},
{
"x": "38",
"y": "31",
"width": "100",
"height": "35",
"name": "Fruits &{br}Vegetables",
"id": "5",
"allowdrag": "1",
"shape": "rectangle"
},
{
"x": "38",
"y": "13",
"width": "100",
"height": "35",
"name": "Furnishing",
"id": "6",
"allowdrag": "1",
"shape": "rectangle"
}
]
},
{
"seriesname": "Items",
"color": "#f8bd19",
"data": [
{
"x": "56",
"y": "94",
"name": "Bread",
"width": "45",
"height": "25",
"id": "7",
"allowdrag": "1",
"shape": "Rectangle",
//"radius": "25"
},
{
"x": "66",
"y": "94",
"name": "Egg",
"width": "45",
"height": "25",
"id": "8",
"allowdrag": "1",
"shape": "Rectangle"
},
{
"x": "76",
"y": "94",
"name": "Meat",
"width": "45",
"height": "25",
"id": "9",
"allowdrag": "1",
"shape": "Rectangle"
},
{
"x": "86",
"y": "94",
"name": "Grain",
"id": "10",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "96",
"y": "88",
"name": "Fish",
"id": "11",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "54",
"y": "76",
"name": "Soap",
"id": "12",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "64",
"y": "76",
"name": "Moisturizer",
"id": "13",
"allowdrag": "1",
"width": "48",
"height": "25",
"shape": "Rectangle"
},
{
"x": "74",
"y": "76",
"name": "Shampoo",
"id": "14",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "84",
"y": "76",
"name": "Toiletry kit",
"id": "15",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "95",
"y": "70",
"name": "Deodorant",
"id": "16",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "54",
"y": "58",
"name": "Diaper",
"id": "17",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "64",
"y": "58",
"name": "Soap",
"id": "18",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "74",
"y": "58",
"name": "Shampoo",
"id": "19",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "84",
"y": "58",
"name": "Wipe",
"id": "20",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "94",
"y": "52",
"name": "Toy",
"id": "21",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "54",
"y": "40",
"name": "Carrot",
"id": "22",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "64",
"y": "40",
"name": "Spinach",
"id": "23",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "74",
"y": "40",
"name": "Strawberry",
"id": "24",
"allowdrag": "1",
"width": "50",
"height": "25",
"shape": "Rectangle"
},
{
"x": "84",
"y": "40",
"name": "Apple",
"id": "25",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "94",
"y": "34",
"name": "Grape",
"id": "26",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "54",
"y": "22",
"name": "Bed Linen",
"id": "27",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "64",
"y": "22",
"name": "Carpet",
"id": "28",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "74",
"y": "22",
"name": "Rug",
"id": "29",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "84",
"y": "22",
"name": "Curtain",
"id": "30",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
},
{
"x": "94",
"y": "16",
"name": "Cushion",
"id": "31",
"allowdrag": "1",
"width": "45",
"height": "25",
"shape": "Rectangle"
}
]
}
],
"connectors": [
{
"color": "#33bdda",
"stdthickness": "5",
"connector": [
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "2",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "3",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "4",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "5",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "Section",
"from": "1",
"to": "6",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "1",
"to": "2",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "2",
"to": "3",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "3",
"to": "4",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "3",
"to": "5",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.5",
"label": "",
"from": "5",
"to": "6",
"arrowatstart": "1",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "2",
"to": "7",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "2",
"to": "8",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "2",
"to": "9",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "2",
"to": "10",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "2",
"to": "11",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "3",
"to": "12",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "3",
"to": "13",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "3",
"to": "14",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "3",
"to": "15",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "3",
"to": "16",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "4",
"to": "17",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "4",
"to": "18",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "4",
"to": "19",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "4",
"to": "20",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "4",
"to": "21",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "5",
"to": "22",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "5",
"to": "23",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "5",
"to": "24",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "5",
"to": "25",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "5",
"to": "26",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "6",
"to": "27",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "6",
"to": "28",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "6",
"to": "29",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "",
"from": "6",
"to": "30",
"arrowatstart": "0",
"arrowatend": "1"
},
{
"strength": "0.25",
"label": "Product",
"from": "6",
"to": "31",
"arrowatstart": "0",
"arrowatend": "1"
}
]
}
]
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The image below shows the previous implementation:
The multi-axis line chart below shows the current implementation of the checkboxes used to show/hide the axes lines. This implementation uses pure SVG exportable checkboxes; the previous implementation used HTML checkboxes.
{
"chart": {
"caption": "Revenue Analysis",
"subcaption": "Last 12 weeks",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"xaxisname": "Week of Year",
"showvalues": "0",
"numvdivlines": "2",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"captionFontSize": "13",
"subcaptionFontSize": "13",
"subcaptionFontBold": "0",
"showBorder": "0",
"showPlotBorder": "0",
"showXAxisLine": "1",
"showShadow": "0",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"showalternatevgridcolor": "1",
"usePlotGradientColor": "0",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"legendBorderAlpha": "0",
"legendShadow": "0",
"alignCaptionWithCanvas": "0",
"checkBoxColor": "#3333cc"
},
"categories": [
{
"category": [
{
"label": "1"
},
{
"label": "2"
},
{
"label": "3"
},
{
"label": "4"
},
{
"label": "5"
},
{
"label": "6"
},
{
"label": "7"
},
{
"label": "8"
},
{
"label": "9"
},
{
"label": "10"
},
{
"label": "11"
},
{
"label": "12"
}
]
}
],
"axis": [
{
"title": "Revenue",
"titlepos": "left",
"tickwidth": "10",
"numberPrefix": "$",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Revenue",
"lineThickness": "3",
"data": [
{
"value": "137500"
},
{
"value": "124350"
},
{
"value": "156700"
},
{
"value": "131450"
},
{
"value": "208300"
},
{
"value": "219900"
},
{
"value": "227500"
},
{
"value": "254300"
},
{
"value": "155900"
},
{
"value": "105650"
},
{
"value": "120950"
},
{
"value": "127500"
}
]
}
]
},
{
"title": "Orders",
"axisOnLeft": "0",
"titlePos": "right",
"numDivlines": "8",
"tickWidth": "10",
"divlineIsDashed": "1",
"dataset": [
{
"seriesname": "Orders",
"data": [
{
"value": "22567"
},
{
"value": "21348"
},
{
"value": "24846"
},
{
"value": "19237"
},
{
"value": "20672"
},
{
"value": "23403"
},
{
"value": "30278"
},
{
"value": "26719"
},
{
"value": "21940"
},
{
"value": "24396"
},
{
"value": "22340"
},
{
"value": "25439"
}
]
}
]
},
{
"title": "Footfalls",
"titlePos": "right",
"axisOnLeft": "0",
"numDivlines": "5",
"tickWidth": "10",
"numberSuffix": "",
"divlineIsDashed": "1",
"dataset": [
{
"seriesname": "Footfalls",
"data": [
{
"value": "68473"
},
{
"value": "57934"
},
{
"value": "78925"
},
{
"value": "69213"
},
{
"value": "74892"
},
{
"value": "81123"
},
{
"value": "90086"
},
{
"value": "91174"
},
{
"value": "68934"
},
{
"value": "80934"
},
{
"value": "73634"
},
{
"value": "84453"
}
]
}
]
}
]
}<chart caption="Revenue Analysis" subcaption="Last 12 weeks" basefontcolor="#333333" basefont="Helvetica Neue,Arial" xaxisname="Week of Year" showvalues="0" numvdivlines="2" palettecolors="#0075c2,#1aaf5d,#f2c500,#f45b00" bgcolor="#ffffff" canvasbgcolor="#ffffff" captionfontsize="13" subcaptionfontsize="13" subcaptionfontbold="0" showborder="0" showplotborder="0" showxaxisline="1" showshadow="0" showcanvasborder="0" showalternatehgridcolor="0" showalternatevgridcolor="1" useplotgradientcolor="0" divlinecolor="#999999" divlinethickness="1" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1" xaxislinethickness="1" xaxislinecolor="#999999" legendborderalpha="0" legendshadow="0" aligncaptionwithcanvas="0" checkboxcolor="#3333cc">
<categories>
<category label="1" />
<category label="2" />
<category label="3" />
<category label="4" />
<category label="5" />
<category label="6" />
<category label="7" />
<category label="8" />
<category label="9" />
<category label="10" />
<category label="11" />
<category label="12" />
</categories>
<axis title="Revenue" titlepos="left" tickwidth="10" numberprefix="$" divlineisdashed="1">
<dataset seriesname="Revenue" linethickness="3">
<set value="137500" />
<set value="124350" />
<set value="156700" />
<set value="131450" />
<set value="208300" />
<set value="219900" />
<set value="227500" />
<set value="254300" />
<set value="155900" />
<set value="105650" />
<set value="120950" />
<set value="127500" />
</dataset>
</axis>
<axis title="Orders" axisonleft="0" titlepos="right" numdivlines="8" tickwidth="10" divlineisdashed="1">
<dataset seriesname="Orders">
<set value="22567" />
<set value="21348" />
<set value="24846" />
<set value="19237" />
<set value="20672" />
<set value="23403" />
<set value="30278" />
<set value="26719" />
<set value="21940" />
<set value="24396" />
<set value="22340" />
<set value="25439" />
</dataset>
</axis>
<axis title="Footfalls" titlepos="right" axisonleft="0" numdivlines="5" tickwidth="10" numbersuffix="" divlineisdashed="1">
<dataset seriesname="Footfalls">
<set value="68473" />
<set value="57934" />
<set value="78925" />
<set value="69213" />
<set value="74892" />
<set value="81123" />
<set value="90086" />
<set value="91174" />
<set value="68934" />
<set value="80934" />
<set value="73634" />
<set value="84453" />
</dataset>
</axis>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'multiaxisline',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue Analysis",
"subcaption": "Last 12 weeks",
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"xaxisname": "Week of Year",
"showvalues": "0",
"numvdivlines": "2",
"paletteColors" : "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor" : "#ffffff",
"canvasBgColor" : "#ffffff",
"captionFontSize" : "13",
"subcaptionFontSize" : "13",
"subcaptionFontBold" : "0",
"showBorder" : "0",
"showPlotBorder": "0",
"showXAxisLine" : "1",
"showShadow" : "0",
"showCanvasBorder" : "0",
"showAlternateHGridColor" : "0",
"showalternatevgridcolor": "1",
"usePlotGradientColor" :"0",
"divlineColor" : "#999999",
"divlineThickness" : "1",
"divLineIsDashed" : "1",
"divLineDashLen" : "1",
"divLineGapLen" : "1",
"xAxisLineThickness" : "1",
"xAxisLineColor" : "#999999",
"legendBorderAlpha": "0",
"legendShadow": "0",
"alignCaptionWithCanvas": "0",
"checkBoxColor": "#3333cc"
},
"categories": [{
"category": [{
"label": "1"
}, {
"label": "2"
}, {
"label": "3"
}, {
"label": "4"
}, {
"label": "5"
}, {
"label": "6"
}, {
"label": "7"
}, {
"label": "8"
}, {
"label": "9"
}, {
"label": "10"
}, {
"label": "11"
}, {
"label": "12"
}]
}],
"axis": [{
"title": "Revenue",
"titlepos": "left",
"tickwidth": "10",
"numberPrefix": "$",
"divlineisdashed": "1",
"dataset": [{
"seriesname": "Revenue",
"lineThickness": "3",
"data": [{
"value": "137500"
}, {
"value": "124350"
}, {
"value": "156700"
}, {
"value": "131450"
}, {
"value": "208300"
}, {
"value": "219900"
}, {
"value": "227500"
}, {
"value": "254300"
}, {
"value": "155900"
}, {
"value": "105650"
}, {
"value": "120950"
}, {
"value": "127500"
}]
}]
}, {
"title": "Orders",
"axisOnLeft": "0",
"titlePos": "right",
"numDivlines": "8",
"tickWidth": "10",
"divlineIsDashed": "1",
"dataset": [{
"seriesname": "Orders",
"data": [{
"value": "22567"
}, {
"value": "21348"
}, {
"value": "24846"
}, {
"value": "19237"
}, {
"value": "20672"
}, {
"value": "23403"
}, {
"value": "30278"
}, {
"value": "26719"
}, {
"value": "21940"
}, {
"value": "24396"
}, {
"value": "22340"
}, {
"value": "25439"
}]
}]
}, {
"title": "Footfalls",
"titlePos": "right",
"axisOnLeft": "0",
"numDivlines": "5",
"tickWidth": "10",
"numberSuffix": "",
"divlineIsDashed": "1",
"dataset": [{
"seriesname": "Footfalls",
"data": [{
"value": "68473"
}, {
"value": "57934"
}, {
"value": "78925"
}, {
"value": "69213"
}, {
"value": "74892"
}, {
"value": "81123"
}, {
"value": "90086"
}, {
"value": "91174"
}, {
"value": "68934"
}, {
"value": "80934"
}, {
"value": "73634"
}, {
"value": "84453"
}]
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The image below shows the previous implementation:
The difference between the current and previous implementation of the checkboxes, in the multi-axis line chart, is that the present checkboxes can be configured to set a custom checkbox color.
Given below is a brief description of the attribute used for this customization:
| Attribute Name | Decription |
|---|---|
checkBoxColor |
Set the hex color code for the checkbox border and the checkmark |