A Web Charts library.

Published on by Yousfi Benameur

 
Web charts made with javascript in majority are very usefull.
in this demo i choosed the free charts of personal use of fusionChart XT.
its wysiwyg (what you see is what you get) with one add :the company logo.
I gathered 24 interesting charts (there is dozens) and show how to integrate them with vfp+vfp browser (ie olecontrol).
Data of each chart can be modified in code.can create cursors or even physical tables to set data to send to the chart.
All script parts are from fusionChart (can visit their site at http://www.fusioncharts.com/).
Charts are interactive with the user mouse events (tooltips,clear part,animation..).
I used the IE application as fullscreen mode and added buttons (print+close).The form used interact with the ie window(switch effect).
The advantage here is to link to the js libraries by the web (internet must be connected mandatory).
can download these js files (see in code for each case) and use them as local files to build charts (permit working offline).
note:this prg file is consistent (120 koctets)



Important:To avoid some problems with priveleges, run vfp9.exe as administrator

Click on code to select [then copy] -click outside to deselect


 publi yform
yform=newObject("ycharts")
yform.show
read events
retu
*
DEFINE CLASS ycharts AS form
    BorderStyle = 0
	Top = 0
	Left = 0
	Height = 54
	Width = 334
	ShowWindow = 2
	Caption = "yfusionCharts"
	MaxButton = .F.
	AlwaysOnTop = .T.
	BackColor = RGB(0,0,0)
	Name = "Form1"

	ADD OBJECT combo1 AS combobox WITH ;
		FontBold = .T., ;
		FontSize = 10, ;
		Height = 42, ;
		Left = 5, ;
		MousePointer = 15, ;
		Top = 6, ;
		Width = 319, ;
		ItemTips = .T., ;
		Name = "Combo1"
        
    Add Object timer1 As Timer With ;
    enabled=.F.,;
	interval=2000,;
	name="timer1"    

	PROCEDURE Load
		declare integer BringWindowToTop in user32 integer
		set safe off
        publi apie   && important for timer( form interact with ie)
	ENDPROC

	Procedure Init
Publi m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Thisform.timer1.Enabled=.T.
Endproc

Procedure timer1.Timer
Try
    If   apie.HWnd#0
		Thisform.WindowState=1
	Endi
Catch
	Thisform.WindowState=0
Endtry
endproc

	PROCEDURE Destroy
		clea events
	ENDPROC

	PROCEDURE combo1.Click
	   thisform.windowstate=1
		do ycharts_ with this.value
	ENDPROC

	PROCEDURE combo1.Init
		with this
 .additem("1-dognut3D   ")
.additem("2-Column3D")
.additem("3-mscolumn3dlinedy")
.additem("4-mscombidy2d")
.additem("5-msarea")
.additem("6-pie3d")
.additem("7-msstackedcolumn2d")
.additem("8-scrollline2d")
.additem("9-stackedcolumn3dlinedy")
.additem("10-angulargauge")
.additem("11-candlestick")
.additem("12-stackedbar3d")
.additem("13-pareto3d")
.additem("14-msline")
.additem("15-stackedbar3d")
.additem("16-msbar3d")
.additem("7-mssplinearea")
.additem("18-multiaxisline")
.additem("19-angulargauge1")
.additem("20-angulargauge2")
.additem("21-funnel")
.additem("22-area2d")
.additem("23-pie2d")
.additem("24-Map USA")
		.listindex=1
		.value=1
		.style=2
		endwith
	ENDPROC
ENDDEFINE
*
*-- EndDefine: ycharts
****************************
procedure ycharts_
lparameters i
local m.xx,m.myvar
text to m.xx noshow
<script>
function yprint() {
document.getElementById("yb1").style.visibility="hidden";
document.getElementById("yb2").style.visibility="hidden";
window.print();
document.getElementById("yb1").style.visibility="visible";
document.getElementById("yb2").style.visibility="visible";
}
</script>
<input type="button" id="yb2" value="X" style="background-color:lime;color:red;float:right;" onclick="window.close();">
<input type="button" id="yb1" value="Print" style="background-color:lime;color:red;float:right;" onclick="yprint();">   
<center><div id="chart-container">FusionCharts will render here</div></center>
endtext

local m.ysc
text to m.ysc noshow
<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/fusioncharts.charts.js"></script>
endtext
************
do case
case i=1
text to m.myvar textmerge noshow
<<m.ysc>>
<script>
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'doughnut3d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                "subCaption": "Last year",
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "310",
                "showLabels": "0",
                "showPercentValues": "1",
                "showLegend": "1",
                "legendShadow": "0",
                "legendBorderAlpha": "0",
                "decimals": "0",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
            },
            "data": [
                {
                    "label": "Food",
                    "value": "28504"
                },
                {
                    "label": "Apparels",
                    "value": "14633"
                },
                {
                    "label": "Electronics",
                    "value": "10507"
                },
                {
                    "label": "Household",
                    "value": "4910"
                }
            ]
        }
    }).render();
});
</script>
<<m.xx>>
endtext

******************************
case i=2
text to m.myvar textmerge noshow
<<m.ysc>>
<script>
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'column3d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Monthly revenue for last year",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Month",
                "yAxisName": "Revenues (In USD)",
                "paletteColors": "#0075c2",
                "valueFontColor": "#ffffff",
                "baseFont": "Helvetica Neue,Arial",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "placeValuesInside": "1",
                "rotateValues": "1",
                "showShadow": "0",
                "divlineColor": "#999999",
                "divLineIsDashed": "1",
                "divlineThickness": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "canvasBgColor": "#ffffff"
            },

            "data": [
                {
                    "label": "Jan",
                    "value": "420000"
                },
                {
                    "label": "Feb",
                    "value": "810000"
                },
                {
                    "label": "Mar",
                    "value": "720000"
                },
                {
                    "label": "Apr",
                    "value": "550000"
                },
                {
                    "label": "May",
                    "value": "910000"
                },
                {
                    "label": "Jun",
                    "value": "510000"
                },
                {
                    "label": "Jul",
                    "value": "680000"
                },
                {
                    "label": "Aug",
                    "value": "620000"
                },
                {
                    "label": "Sep",
                    "value": "610000"
                },
                {
                    "label": "Oct",
                    "value": "490000"
                },
                {
                    "label": "Nov",
                    "value": "900000"
                },
                {
                    "label": "Dec",
                    "value": "730000"
                }
            ]
        }
    });
    revenueChart.render();
});
</script>
<<m.xx>>
endtext
***********************************
case i=3
text to m.myvar textmerge noshow
<<m.ysc>>

<script>
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'mscolumn3dlinedy',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Product-wise Quarterly Revenue vs. Profit %",
                "subCaption": "Harry's SuperMart - Last Year",
                "xAxisname": "Quarter",
                "pYAxisName": "Sales",
                "sYAxisName": "Profit %",
                "numberPrefix": "$",
                "sNumberSuffix": "%",
                "sYAxisMaxValue": "25",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "showCanvasBorder": "0",
                "usePlotGradientColor": "0",
                "plotBorderAlpha": "10",
                "legendBorderAlpha": "0",
                "legendBgAlpha": "0",
                "legendShadow": "0",
                "showHoverEffect":"1",
                "valueFontColor": "#ffffff",
                "rotateValues": "1",
                "placeValuesInside": "1",
                "divlineColor": "#999999",
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "canvasBgColor": "#ffffff",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0"
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "Q1"
                        },
                        {
                            "label": "Q2"
                        },
                        {
                            "label": "Q3"
                        },
                        {
                            "label": "Q4"
                        }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Food Products",
                    "data": [
                        {
                            "value": "11000"
                        },
                        {
                            "value": "14000"
                        },
                        {
                            "value": "10500"
                        },
                        {
                            "value": "15000"
                        }
                    ]
                },
                {
                    "seriesname": "Non-Food Products",
                    "data": [
                        {
                            "value": "14400"
                        },
                        {
                            "value": "14800"
                        },
                        {
                            "value": "8300"
                        },
                        {
                            "value": "11800"
                        }
                    ]
                },
                {
                    "seriesname": "Profit %",
                    "renderAs": "line",
                    "parentYAxis": "S",
                    "showValues": "0",
                    "data": [
                        {
                            "value": "14"
                        },
                        {
                            "value": "16"
                        },
                        {
                            "value": "15"
                        },
                        {
                            "value": "17"
                        }
                    ]
                }
            ]
        }
    })
    .render();
});
</script>

<<m.xx>>
endtext
*************************************
case i=4
text to m.myvar textmerge noshow
<<m.ysc>>
<script>
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'mscombidy2d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Revenues and Profits",
                "subCaption": "For last year",
                "xAxisname": "Month",
                "pYAxisName": "Amount (In USD)",
                "sYAxisName": "Profit %",
                "numberPrefix": "$",
                "sNumberSuffix" : "%",
                "sYAxisMaxValue" : "50",

                //Cosmetics
                "paletteColors" : "#0075c2,#1aaf5d,#f2c500",
                "baseFontColor" : "#333333",
                "baseFont" : "Helvetica Neue,Arial",
                "captionFontSize" : "14",
                "subcaptionFontSize" : "14",
                "subcaptionFontBold" : "0",
                "showBorder" : "0",
                "bgColor" : "#ffffff",
                "showShadow" : "0",
                "canvasBgColor" : "#ffffff",
                "canvasBorderAlpha" : "0",
                "divlineAlpha" : "100",
                "divlineColor" : "#999999",
                "divlineThickness" : "1",
                "divLineIsDashed" : "1",
                "divLineDashLen" : "1",
                "divLineGapLen" : "1",
                "usePlotGradientColor" : "0",
                "showplotborder" : "0",
                "showXAxisLine" : "1",
                "xAxisLineThickness" : "1",
                "xAxisLineColor" : "#999999",
                "showAlternateHGridColor" : "0",
                "showAlternateVGridColor" : "0",
                "legendBgAlpha" : "0",
                "legendBorderAlpha" : "0",
                "legendShadow" : "0",
                "legendItemFontSize" : "10",
                "legendItemFontColor" : "#666666"
            },
            "categories": [{
                "category": [
                    { "label": "Jan" },
                    { "label": "Feb" },
                    { "label": "Mar" },
                    { "label": "Apr" },
                    { "label": "May" },
                    { "label": "Jun" },
                    { "label": "Jul" },
                    { "label": "Aug" },
                    { "label": "Sep" },
                    { "label": "Oct" },
                    { "label": "Nov" },
                    { "label": "Dec" }
                ]
            }
                          ],
            "dataset": [
                {
                    "seriesName": "Revenues",
                    "data": [
                        { "value" : "16000" },
                        { "value" : "20000" },
                        { "value" : "18000" },
                        { "value" : "19000" },
                        { "value" : "15000" },
                        { "value" : "21000" },
                        { "value" : "16000" },
                        { "value" : "20000" },
                        { "value" : "17000" },
                        { "value" : "22000" },
                        { "value" : "19000" },
                        { "value" : "23000" }
                    ]
                },
                {
                    "seriesName": "Profits",
                    "renderAs": "area",
                    "showValues": "0",
                    "data": [
                        { "value" : "4000" },
                        { "value" : "5000" },
                        { "value" : "3000" },
                        { "value" : "4000" },
                        { "value" : "1000" },
                        { "value" : "7000" },
                        { "value" : "1000" },
                        { "value" : "4000" },
                        { "value" : "1000" },
                        { "value" : "8000" },
                        { "value" : "2000" },
                        { "value" : "7000" }
                    ]
                },
                {
                    "seriesName": "Profit %",
                    "parentYAxis": "S",
                    "renderAs": "line",
                    "showValues": "0",
                    "data": [
                        { "value" : "25" },
                        { "value" : "25" },
                        { "value" : "16.66" },
                        { "value" : "21.05" },
                        { "value" : "6.66" },
                        { "value" : "33.33" },
                        { "value" : "6.25" },
                        { "value" : "25" },
                        { "value" : "5.88" },
                        { "value" : "36.36" },
                        { "value" : "10.52" },
                        { "value" : "30.43"}
                    ]
                }
            ]
        }
    });

    revenueChart.render();
});
</script>
<<m.xx>>
endtext
*******************************
case i=5
text to m.myvar textmerge noshow
<<m.ysc>>
<script>
FusionCharts.ready(function () {
    var salesChart = new FusionCharts({
        type: 'msarea',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Sales of milk",
                "subCaption": "Previous week vs current week",
                "xAxisName": "Day",
                "yAxisName": "Sales (In USD)",
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "showCanvasBorder": "0",
                "plotBorderAlpha": "10",
                "usePlotGradientColor": "0",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "plotFillAlpha": "60",
                "showXAxisLine": "1",
                "axisLineAlpha": "25",
                "showValues": "0",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "divlineColor": "#999999",
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "showAlternateHGridColor": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
            },

            "categories": [
                {
                    "category": [
                        {
                            "label": "Mon"
                        },
                        {
                            "label": "Tue"
                        },
                        {
                            "label": "Wed"
                        },
                        {
                            "label": "Thu"
                        },
                        {
                            "label": "Fri"
                        },
                        {
                            "label": "Sat"
                        },
                        {
                            "label": "Sun"
                        }
                    ]
                }
            ],

            "dataset": [
                {
                    "seriesname": "Previous Week",
                    "data": [
                        {
                            "value": "13000"
                        },
                        {
                            "value": "14500"
                        },
                        {
                            "value": "13500"
                        },
                        {
                            "value": "15000"
                        },
                        {
                            "value": "15500"
                        },
                        {
                            "value": "17650"
                        },
                        {
                            "value": "19500"
                        }
                    ]
                },
                {
                    "seriesname": "Current Week",
                    "data": [
                        {
                            "value": "8400"
                        },
                        {
                            "value": "9800"
                        },
                        {
                            "value": "11800"
                        },
                        {
                            "value": "14400"
                        },
                        {
                            "value": "18800"
                        },
                        {
                            "value": "24800"
                        },
                        {
                            "value": "30800"
                        }
                    ]
                }
            ]
        }
    })
    .render();
});
</script>
<<m.xx>>
endtext
********************************
case i=6
text to m.myvar textmerge noshow
<<m.ysc>>
<script>
FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        type: 'pie3d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Visitors by Age Group",
                "subCaption": "Last year",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "0",
                "showPercentValues": "1",
                "showPercentInTooltip": "0",
                "decimals": "1",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "showHoverEffect":"1",
                "showLegend": "1",
                "legendBgColor": "#ffffff",
                "legendBorderAlpha": '0',
                "legendShadow": '0',
                "legendItemFontSize": '10',
                "legendItemFontColor": '#666666'
            },
            "data": [
                {
                    "label": "Teenage",
                    "value": "1250400"
                },
                {
                    "label": "Adult",
                    "value": "1463300"
                },
                {
                    "label": "Mid-age",
                    "value": "1050700"
                },
                {
                    "label": "Senior",
                    "value": "491000"
                }
            ]
        }
    }).render();
});
</script>
<<m.xx>>
endtext
***********************************
case i=7
text to m.myvar textmerge noshow
<<m.ysc>>
<script>
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'msstackedcolumn2d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Product-wise break-up of quarterly revenue in last year",
                "subcaption": "Harry's SuperMart",
                "xaxisname": "Quarter",
                "yaxisname": "Sales (In USD)",
                "paletteColors": "#0075c2,#45AFF5,#2C8A56,#1aaf5d,#50DE90",
                "numberPrefix": "$",
                "numbersuffix": "M",
                "bgColor": "#ffffff",
                "borderAlpha": "20",
                "showCanvasBorder": "0",
                "usePlotGradientColor": "0",
                "plotBorderAlpha": "10",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "valueFontColor": "#ffffff",
                "showXAxisLine": "1",
                "xAxisLineColor": "#999999",
                "divlineColor": "#999999",
                "divLineIsDashed": "1",
                "showAlternateHGridColor": "0",
                "subcaptionFontBold": "0",
                "subcaptionFontSize": "14"
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "Q1"
                        },
                        {
                            "label": "Q2"
                        },
                        {
                            "label": "Q3"
                        },
                        {
                            "label": "Q4"
                        }
                    ]
                }
            ],
            "dataset": [
                {
                    "dataset": [
                        {
                            "seriesname": "Processed Food",
                            "data": [
                                {
                                    "value": "30"
                                },
                                {
                                    "value": "26"
                                },
                                {
                                    "value": "29"
                                },
                                {
                                    "value": "31"
                                }
                            ]
                        },
                        {
                            "seriesname": "Un-Processed Food",
                            "data": [
                                {
                                    "value": "21"
                                },
                                {
                                    "value": "28"
                                },
                                {
                                    "value": "39"
                                },
                                {
                                    "value": "41"
                                }
                            ]
                        }
                    ]
                },
                {
                    "dataset": [
                        {
                            "seriesname": "Electronics",
                            "data": [
                                {
                                    "value": "27"
                                },
                                {
                                    "value": "25"
                                },
                                {
                                    "value": "28"
                                },
                                {
                                    "value": "26"
                                }
                            ]
                        },
                        {
                            "seriesname": "Apparels",
                            "data": [
                                {
                                    "value": "17"
                                },
                                {
                                    "value": "15"
                                },
                                {
                                    "value": "18"
                                },
                                {
                                    "value": "16"
                                }
                            ]
                        },
                        {
                            "seriesname": "Others",
                            "data": [
                                {
                                    "value": "12"
                                },
                                {
                                    "value": "17"
                                },
                                {
                                    "value": "16"
                                },
                                {
                                    "value": "15"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    }).render();
});
</script>
<<m.xx>>
endtext
***********************************
case i=8
text to m.myvar textmerge noshow
<<m.ysc>>
<script>
FusionCharts.ready(function(){
    var salesChart = new FusionCharts({
        type: 'scrollline2d',
        dataFormat: 'json',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataSource: {
            "chart": {
                "caption": "Sales Trends",
                "subCaption": "(FY 2012 to FY 2013)",
                "xAxisName": "Month",
                "yAxisName": "Revenue",
                "showValues": "0",
                "numberPrefix": "$",
                "showBorder": "0",
                "showShadow": "0",
                "bgColor": "#ffffff",
                "paletteColors": "#008ee4",
                "showCanvasBorder": "0",
                "showAxisLines": "0",
                "showAlternateHGridColor": "0",
                "divlineAlpha": "100",
                "divlineThickness": "1",
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "lineThickness": "3",
                "flatScrollBars": "1",
                "scrollheight": "10",
                "numVisiblePlot": "12",
                "showHoverEffect":"1"
            },
            "categories": [
                {
                    "category": [
                        { "label": "Jan 2012" },
                        { "label": "Feb 2012" },
                        { "label": "Mar 2012" },
                        { "label": "Apr 2012" },
                        { "label": "May 2012" },
                        { "label": "Jun 2012" },
                        { "label": "Jul 2012" },
                        { "label": "Aug 2012" },
                        { "label": "Sep 2012" },
                        { "label": "Oct 2012" },
                        { "label": "Nov 2012" },
                        { "label": "Dec 2012" },
                        { "label": "Jan 2013" },
                        { "label": "Feb 2013" },
                        { "label": "Mar 2013" },
                        { "label": "Apr 2013" },
                        { "label": "May 2013" },
                        { "label": "Jun 2013" },
                        { "label": "Jul 2013" },
                        { "label": "Aug 2013" },
                        { "label": "Sep 2013" },
                        { "label": "Oct 2013" },
                        { "label": "Nov 2013" },
                        { "label": "Dec 2013" }
                    ]
                }
            ],
            "dataset": [
                {
                    "data": [
                        { "value": "27400" },
                        { "value": "29800" },
                        { "value": "25800" },
                        { "value": "26800" },
                        { "value": "29600" },
                        { "value": "32600" },
                        { "value": "31800" },
                        { "value": "36700" },
                        { "value": "29700" },
                        { "value": "31900" },
                        { "value": "34800" },
                        { "value": "24800" },
                        { "value": "26300" },
                        { "value": "31800" },
                        { "value": "30900" },
                        { "value": "33000" },
                        { "value": "36200" },
                        { "value": "32100" },
                        { "value": "37500" },
                        { "value": "38500" },
                        { "value": "35400" },
                        { "value": "38200" },
                        { "value": "33300" },
                        { "value": "38300" }
                    ]
                }
            ]
        }
    }).render();
});
</script>

<<m.xx>>
endtext
***********************************
case i=9
text to m.myvar textmerge noshow
<<m.ysc>>
<script>
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'stackedcolumn3dlinedy',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Product-wise Quarterly Revenue vs. Profit %",
                "subCaption": "Harry's SuperMart - Last Year",
                "xAxisname": "Quarter",
                "pYAxisName": "Sales",
                "sYAxisName": "Profit %",
                "numberPrefix": "$",
                "sNumberSuffix": "%",
                "sYAxisMaxValue": "25",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500",
                "bgColor": "#ffffff",
                "borderAlpha": "20",
                "showCanvasBorder": "0",
                "usePlotGradientColor": "0",
                "plotBorderAlpha": "10",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "legendBgAlpha": "0",
                "valueFontColor": "#ffffff",
                "showXAxisLine": "1",
                "xAxisLineColor": "#999999",
                "divlineColor": "#999999",
                "divLineIsDashed": "1",
                "showAlternateHGridColor": "0",
                "subcaptionFontBold": "0",
                "subcaptionFontSize": "14",
                "showHoverEffect": "1"
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "Q1"
                        },
                        {
                            "label": "Q2"
                        },
                        {
                            "label": "Q3"
                        },
                        {
                            "label": "Q4"
                        }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Food Products",
                    "data": [
                        {
                            "value": "11000"
                        },
                        {
                            "value": "15000"
                        },
                        {
                            "value": "13500"
                        },
                        {
                            "value": "15000"
                        }
                    ]
                },
                {
                    "seriesname": "Non-Food Products",
                    "data": [
                        {
                            "value": "11400"
                        },
                        {
                            "value": "14800"
                        },
                        {
                            "value": "8300"
                        },
                        {
                            "value": "11800"
                        }
                    ]
                },
                {
                    "seriesname": "Profit %",
                    "renderAs": "line",
                    "parentYAxis": "S",
                    "showValues": "0",
                    "data": [
                        {
                            "value": "14"
                        },
                        {
                            "value": "16"
                        },
                        {
                            "value": "15"
                        },
                        {
                            "value": "17"
                        }
                    ]
                }
            ]
        }
    }).render();
});
</script>
<<m.xx>>
endtext
***********************************
case i=10
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Gallery Example - Realtime Angular Gauge in JavaScript  - jsFiddle demo by fusioncharts</title>
 <<m.ysc>>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var speedometerChart = new FusionCharts({
        type: 'angulargauge',
        id : "myGauge",
        renderAt: 'chart-container',
        width: '700',
        height: '700',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption" : "Speedometer",
                "captionFont":"Arial",
                "captionFontColor" : "#333333",
                "manageresize": "1",
                "origw": "320",
                "origh": "320",
                "tickvaluedistance": "-10",
                "bgcolor": "#FFFFFF",
                "upperlimit": "240",
                "lowerlimit": "0",
                "basefontcolor": "#FFFFFF",
                "majortmnumber": "9",
                "majortmcolor": "#FFFFFF",
                "majortmheight": "8",
                "majortmthickness": "5",
                "minortmnumber": "5",
                "minortmcolor": "#FFFFFF",
                "minortmheight": "3",
                "minortmthickness": "2",
                "pivotradius": "10",
                "pivotbgcolor": "#000000",
                "pivotbordercolor": "#FFFFFF",
                "pivotborderthickness": "2",
                "tooltipbordercolor": "#FFFFFF",
                "tooltipbgcolor": "#333333",
                "gaugeouterradius": "115",
                "gaugestartangle": "240",
                "gaugeendangle": "-60",
                "gaugealpha": "0",
                "decimals": "0",
                "showcolorrange": "0",
                "placevaluesinside": "1",
                "pivotfillmix": "",
                "showpivotborder": "1",
                "annrenderdelay": "0",
                "gaugeoriginx": "160",
                "gaugeoriginy": "160",
                "showborder": "0"
            },
            "dials": {
                "dial": [
                    {
                        "value": "65",
                        "bgcolor": "000000",
                        "bordercolor": "#FFFFFF",
                        "borderalpha": "100",
                        "basewidth": "4",
                        "topwidth": "4",
                        "borderthickness": "2",
                        "valuey": "260"
                    }
                ]
            },
            "annotations": {
                "groups": [
                    {
                        "x": "160",
                        "y": "160",
                        "items": [
                            {
                                "type": "circle",
                                "radius": "130",
                                "fillasgradient": "1",
                                "fillcolor": "#4B4B4B,#AAAAAA",
                                "fillalpha": "100,100",
                                "fillratio": "95,5"
                            },
                            {
                                "type": "circle",
                                "x": "0",
                                "y": "0",
                                "radius": "120",
                                "showborder": "1",
                                "bordercolor": "cccccc",
                                "fillasgradient": "1",
                                "fillcolor": "#ffffff,#000000",
                                "fillalpha": "50,100",
                                "fillratio": "1,99"
                            }
                        ]
                    },
                    {
                        "x": "160",
                        "y": "160",
                        "showbelow": "0",
                        "scaletext": "1",
                        "items": [
                            {
                                "type": "text",
                                "y": "100",
                                "label": "KPH",
                                "fontcolor": "#FFFFFF",
                                "fontsize": "14",
                                "bold": "1"
                            }
                        ]
                    }
                ]
            }
        },
        "events": {
            "initialized" : function (evtObj, argObj){
                var scoreArray = [],
                    score,
                    speedScore,
                    flag,
                    diff,
                    resetInterval = setInterval(function () {
                        var i,
                            percent,
                            num = 30;
                        score = 40 +
                            parseInt(Math.floor(Math.random() * 170));
                        if(!speedScore){
                            speedScore = score;
                        }
                        diff = (score - speedScore);

                        for(i= 0; i < 5; i++){
                            percent = num - (i*5);
                            scoreArray [i] = diff * (percent/100);
                        }
                        flag = 0;

                    }, 1000),
                    changeInterval = setInterval(function(){
                        if(speedScore && diff){
                            speedScore +=   scoreArray[flag];
                            flag += 1;
                            FusionCharts.items["myGauge"].feedData( "value="+ speedScore );

                        }
                    }, 2000);
            }
        }
    });
    speedometerChart.render();
});
}//]]>

</script>
</head>
<body>
  <!--
    Sample for Realtime Angular Gauge.
    This sample is showing a speedometer and updates every second.

Note: Data is updated through feedData() method in setInterval.
-->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=11
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>PowerCharts - CandleStick Charts Attributes - jsFiddle demo by fusioncharts</title>
<<m.ysc>>
 <script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var stockChart = new FusionCharts({
        type: 'candlestick',
        renderAt: 'chart-container',
        id: 'myChart',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Daily Stock Price HRYS",
                "subCaption": "Last 2 months",
                "numberprefix":"$",
                "vNumberPrefix": " ",
                "pyaxisname":"Price",
                "vyaxisname":"Volume (In Millions)",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "canvasBgColor": "#ffffff",
                "showCanvasBorder": "0",
                "showAlternateHGridColor": "0",
                "baseFontColor": "#333333",
                "baseFont": "Helvetica Neue,Arial",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
                "divlineAlpha": "100",
                "divlineColor": "#999999",
                "divlineThickness": "1",
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
            },
            "categories":[{
              "category":[
                  {
                      "label":"2 month ago",
                      "x":"1"
                  },
                  {
                      "label":"1 month ago",
                      "x":"31"
                  },
                  {
                      "label":"Today",
                      "x":"60"
                  }
              ]
            }],
            "dataset": [{
                "data": [
                    {
                        "open":"18.74",
                        "high":"19.16",
                        "low":"18.67 ",
                        "close":"18.99",
                        "x":"1",
                        "volume":"4991285"
                    },
                    {
                        "open":"18.74",
                        "high":"19.06",
                        "low":"18.54",
                        "close":"18.82",
                        "x":"2",
                        "volume":"3615889"
                    },
                    {
                        "open":"19.21",
                        "high":"19.3",
                        "low":"18.59 ",
                        "close":"18.65",
                        "x":"3",
                        "volume":"4749586"
                    },
                    {
                        "open":"19.85",
                        "high":"19.86",
                        "low":"19.12",
                        "close":"19.4",
                        "x":"4",
                        "volume":"4366740"
                    },
                    {
                        "open":"20.19",
                        "high":"20.21",
                        "low":"19.57",
                        "close":"19.92",
                        "x":"5",
                        "volume":"3982709"
                    },
                    {
                        "open":"20.47",
                        "high":"20.64",
                        "low":"20.15",
                        "close":"20.16",
                        "x":"6",
                        "volume":"2289403"
                    },
                    {
                        "open":"20.36",
                        "high":"20.52",
                        "low":"20.29",
                        "close":"20.48",
                        "x":"7",
                        "volume":"1950919"
                    },
                    {
                        "open":"20.21",
                        "high":"20.25",
                        "low":"19.91",
                        "close":"20.15",
                        "x":"8",
                        "volume":"2391070"
                    },
                    {
                        "open":"19.46",
                        "high":"20.54",
                        "low":"19.46",
                        "close":"20.22",
                        "x":"9",
                        "volume":"4548422"
                    },
                    {
                        "open":"19.24",
                        "high":"19.5",
                        "low":"19.13",
                        "close":"19.44",
                        "x":"10",
                        "volume":"1889811"
                    },
                    {
                        "open":"19.25",
                        "high":"19.41",
                        "low":"18.99",
                        "close":"19.22",
                        "x":"11",
                        "volume":"2543355"
                    },
                    {
                        "open":"18.85",
                        "high":"19.45",
                        "low":"18.8",
                        "close":"19.24",
                        "x":"12",
                        "volume":"2134393"
                    },
                    {
                        "open":"18.97",
                        "high":"19.01",
                        "low":"18.68",
                        "close":"18.95",
                        "x":"13",
                        "volume":"1740852"
                    },
                    {
                        "open":"18.69",
                        "high":"19",
                        "low":"18.35",
                        "close":"18.97",
                        "x":"14",
                        "volume":"2701392"
                    },
                    {
                        "open":"19.02",
                        "high":"19.1",
                        "low":"18.68",
                        "close":"18.7",
                        "x":"15",
                        "volume":"2198755"
                    },
                    {
                        "open":"19.29",
                        "high":"19.38",
                        "low":"18.88",
                        "close":"19.05",
                        "x":"16",
                        "volume":"2464958"
                    },
                    {
                        "open":"18.64",
                        "high":"19.35",
                        "low":"18.53",
                        "close":"19.33",
                        "x":"17",
                        "volume":"2962994"
                    },
                    {
                        "open":"18.14",
                        "high":"18.58",
                        "low":"18.08",
                        "close":"18.52",
                        "x":"18",
                        "volume":"1964932"
                    },
                    {
                        "open":"18.49",
                        "high":"18.92",
                        "low":"18.19",
                        "close":"18.26",
                        "x":"19",
                        "volume":"3013102"
                    },
                    {
                        "open":"18.71",
                        "high":"18.84",
                        "low":"18",
                        "close":"18.51",
                        "x":"20",
                        "volume":"4435894"
                    },
                    {
                        "open":"19.17",
                        "high":"19.35",
                        "low":"18.61",
                        "close":"18.66",
                        "x":"21",
                        "volume":"3245851"
                    },
                    {
                        "open":"19.12",
                        "high":"19.41",
                        "low":"18.92",
                        "close":"19.2",
                        "x":"22",
                        "volume":"2259792"
                    },
                    {
                        "open":"19.43",
                        "high":"19.58",
                        "low":"19.16",
                        "close":"19.33",
                        "x":"23",
                        "volume":"3531327"
                    },
                    {
                        "open":"19.72",
                        "high":"19.81",
                        "low":"19.04",
                        "close":"19.27",
                        "x":"24",
                        "volume":"5834733"
                    },
                    {
                        "open":"19.7",
                        "high":"19.94",
                        "low":"19.49",
                        "close":"19.77",
                        "x":"25",
                        "volume":"2009987"
                    },
                    {
                        "open":"19.84",
                        "high":"19.98",
                        "low":"19.39",
                        "close":"19.88",
                        "x":"26",
                        "volume":"2767592"
                    },
                    {
                        "open":"20.71",
                        "high":"20.73",
                        "low":"19.16",
                        "close":"19.63",
                        "x":"27",
                        "volume":"673358"
                    },
                    {
                        "open":"21.14",
                        "high":"21.14",
                        "low":"20.55",
                        "close":"20.65",
                        "x":"28",
                        "volume":"3164006"
                    },
                    {
                        "open":"21.5",
                        "high":"21.86",
                        "low":"21.2",
                        "close":"21.33",
                        "x":"29",
                        "volume":"7986466"
                    },
                    {
                        "open":"20.45",
                        "high":"21.08",
                        "low":"20.1",
                        "close":"20.56",
                        "x":"30",
                        "volume":"5813040"
                    },
                    {
                        "open":"20.07",
                        "high":"20.69",
                        "low":"20.04",
                        "close":"20.36",
                        "x":"31",
                        "volume":"3440002"
                    },
                    {
                        "open":"19.88",
                        "high":"20.11",
                        "low":"19.51",
                        "close":"20.03",
                        "x":"32",
                        "volume":"2779171"
                    },
                    {
                        "open":"19.76",
                        "high":"20.13",
                        "low":"19.65",
                        "close":"19.88",
                        "x":"33",
                        "volume":"2918115"
                    },
                    {
                        "open":"19.77",
                        "high":"19.97",
                        "low":"19.27",
                        "close":"19.9",
                        "x":"34",
                        "volume":"3850357"
                    },
                    {
                        "open":"19.43",
                        "high":"19.72",
                        "low":"18.88",
                        "close":"19.5",
                        "x":"35",
                        "volume":"5047378"
                    },
                    {
                        "open":"19.69",
                        "high":"19.84",
                        "low":"19.17",
                        "close":"19.43",
                        "x":"36",
                        "volume":"3479017"
                    },
                    {
                        "open":"19.59",
                        "high":"20.02",
                        "low":"19.02",
                        "close":"19.41",
                        "x":"37",
                        "volume":"5749874"
                    },
                    {
                        "open":"20.95",
                        "high":"21.09",
                        "low":"19.64",
                        "close":"19.83",
                        "x":"38",
                        "volume":"6319111"
                    },
                    {
                        "open":"20.52",
                        "high":"21.03",
                        "low":"20.45",
                        "close":"21",
                        "x":"39",
                        "volume":"4412413"
                    },
                    {
                        "open":"20.36",
                        "high":"20.96",
                        "low":"20.2",
                        "close":"20.44",
                        "x":"40",
                        "volume":"5948318"
                    },
                    {
                        "open":"21.45",
                        "high":"21.48",
                        "low":"19.63",
                        "close":"20.3",
                        "x":"41",
                        "volume":"11935440"
                    },
                    {
                        "open":"23.49",
                        "high":"23.57",
                        "low":"21.12",
                        "close":"21.63",
                        "x":"42",
                        "volume":"10523910"
                    },
                    {
                        "open":"24.04",
                        "high":"24.21",
                        "low":"23.04",
                        "close":"23.28",
                        "x":"43",
                        "volume":"3843797"
                    },
                    {
                        "open":"23.6",
                        "high":"24.065",
                        "low":"23.51",
                        "close":"23.94",
                        "x":"44",
                        "volume":"3691404"
                    },
                    {
                        "open":"22.87",
                        "high":"23.49",
                        "low":"22.86",
                        "close":"23.48",
                        "x":"45",
                        "volume":"3387393"
                    },
                    {
                        "open":"22.35",
                        "high":"22.89",
                        "low":"22.35",
                        "close":"22.74",
                        "x":"46",
                        "volume":"3737330"
                    },
                    {
                        "open":"22.11",
                        "high":"22.5",
                        "low":"21.9",
                        "close":"22.24",
                        "x":"47",
                        "volume":"4630397"
                    },
                    {
                        "open":"22.58",
                        "high":"22.80",
                        "low":"22.25",
                        "close":"22.42",
                        "x":"48",
                        "volume":"3024711"
                    },
                    {
                        "open":"23.54",
                        "high":"23.76",
                        "low":"22.6",
                        "close":"22.68",
                        "x":"49",
                        "volume":"3984508"
                    },
                    {
                        "open":"23.66",
                        "high":"24.09",
                        "low":"23.09",
                        "close":"23.46",
                        "x":"50",
                        "volume":"3420204"
                    },
                    {
                        "open":"24.36",
                        "high":"24.42",
                        "low":"22.90",
                        "close":"23.6",
                        "x":"51",
                        "volume":"5151096"
                    },
                    {
                        "open":"24.34",
                        "high":"24.6",
                        "low":"23.73",
                        "close":"24.15",
                        "x":"52",
                        "volume":"5999654"
                    },
                    {
                        "open":"23.38",
                        "high":"24.8",
                        "low":"23.36",
                        "close":"24.1",
                        "x":"53",
                        "volume":"5382049"
                    },
                    {
                        "open":"23.76",
                        "high":"23.84",
                        "low":"23.23",
                        "close":"23.47",
                        "x":"54",
                        "volume":"3508510"
                    },
                    {
                        "open":"23.64",
                        "high":"23.94",
                        "low":"23.48",
                        "close":"23.76",
                        "x":"55",
                        "volume":"2718428"
                    },
                    {
                        "open":"23.99",
                        "high":"24.18",
                        "low":"23.59",
                        "close":"23.66",
                        "x":"56",
                        "volume":"2859391"
                    },
                    {
                        "open":"23.32",
                        "high":"24.26",
                        "low":"23.32",
                        "close":"23.79",
                        "x":"57",
                        "volume":"4138618"
                    },
                    {
                        "open":"24.08",
                        "high":"24.4",
                        "low":"23.26",
                        "close":"23.39",
                        "x":"58",
                        "volume":"4477478"
                    },
                    {
                        "open":"22.84",
                        "high":"23.96",
                        "low":"22.83",
                        "close":"23.88",
                        "x":"59",
                        "volume":"4822378"
                    },
                    {
                        "open":"23.38",
                        "high":"23.78",
                        "low":"22.94",
                        "close":"23.01",
                        "x":"60",
                        "volume":"4037312"
                    },
                    {
                        "open":"23.97",
                        "high":"23.99",
                        "low":"23.14",
                        "close":"23.32",
                        "x":"61",
                        "volume":"4879546"
                    }
                ]
            }]
        }
    }).render();
});
}//]]>

</script>
</head>
<body>
  <!-- Candle Stick chart from PowerCharts.
    This sample plots stock prices of Harry's Supertmart(stock name HRYS) for the last 2 months on a daily time period in CandleStick chart.
    A candlestick chart is a style of bar-chart used primarily to describe price movements of a security, derivative, or currency for a designated span of time.
-->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=12
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Gallery Example - Stacked Bar 3D - jsFiddle demo by fusioncharts</title>
<<m.ysc>>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'stackedbar3d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Product-wise quarterly revenue in last year",
                    "subCaption": "Harry's SuperMart",
                    "xAxisname": "Quarter",
                    "yAxisName": "Revenue (In USD)",
                    "numberPrefix": "$",
                    "paletteColors": "#0075c2,#1aaf5d",
                    "bgColor": "#ffffff",
                    "borderAlpha": "20",
                    "showCanvasBorder": "0",
                    "usePlotGradientColor": "0",
                    "plotBorderAlpha": "10",
                    "legendBgColor": "#ffffff",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "valueFontColor": "#ffffff",
                    "xAxisLineColor": "#999999",
                    "divlineColor": "#999999",
                    "subcaptionFontBold": "0",
                    "subcaptionFontSize": "14"
            },
                "categories": [{
                "category": [{
                    "label": "Q1"
                }, {
                    "label": "Q2"
                }, {
                    "label": "Q3"
                }, {
                    "label": "Q4"
                }]
            }],
                "dataset": [{
                "seriesname": "Food Products",
                    "data": [{
                    "value": "121000"
                }, {
                    "value": "135000"
                }, {
                    "value": "123500"
                }, {
                    "value": "145000"
                }]
            }, {
                "seriesname": "Non-Food Products",
                    "data": [{
                    "value": "131400"
                }, {
                    "value": "154800"
                }, {
                    "value": "98300"
                }, {
                    "value": "131800"
                }]
            }]
        }
    }).render();
});
}//]]>
</script>
</head>
<body>
  <!-- Stacked Bar 3D chart showing product wise quarterly revenue for the current year. -->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=13
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Gallery Example - Pareto Chart 3D - jsFiddle demo by fusioncharts</title>
<<m.ysc>>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'pareto3d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Employee late arrivals by reported cause",
                "subCaption": "Last month",
                "paletteColors": "#0075c2",
                "lineColor": "#1aaf5d",
                "xAxisName": "Reported Cause",
                "pYAxisName": "No. of Occurrence",
                "sYAxisname": "Cumulative Percentage",
                "bgColor": "#ffffff",
                "borderAlpha": "20",
                "showCanvasBorder": "0",
                "usePlotGradientColor": "0",
                "plotBorderAlpha": "10",
                "showHoverEffect":"1",
                "showValues": "0",
                "showXAxisLine": "1",
                "xAxisLineColor": "#999999",
                "divlineColor": "#999999",
                "showAlternateHGridColor": "0",
                "subcaptionFontBold": "0",
                "subcaptionFontSize": "14"
            },
            "data": [
                {
                    "label": "Traffic",
                    "value": "5680"
                },
                {
                    "label": "Family Engagement",
                    "value": "1036"
                },
                {
                    "label": "Public Transport",
                    "value": "950"
                },
                {
                    "label": "Weather",
                    "value": "500"
                },
                {
                    "label": "Emergency",
                    "value": "140"
                },
                {
                    "label": "Others",
                    "value": "68"
                }
            ]
        }
    }).render();
});
}//]]>
</script>
</head>
<body>
  <!-- Pareto 3D chart showing employee late arrivals analysis in a pareto chart. -->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=14
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Gallery Example - Multi-series line 2D Chart  - jsFiddle demo by fusioncharts</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"></script>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        type: 'msline',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Number of visitors last week",
                "subCaption": "Bakersfield Central vs Los Angeles Topanga",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "paletteColors": "#0075c2,#1aaf5d",
                "bgcolor": "#ffffff",
                "showBorder": "0",
                "showShadow": "0",
                "showCanvasBorder": "0",
                "usePlotGradientColor": "0",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "showAxisLines": "0",
                "showAlternateHGridColor": "0",
                "divlineThickness": "1",
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "xAxisName": "Day",
                "showValues": "0"
            },
            "categories": [
                {
                    "category": [
                        { "label": "Mon" },
                        { "label": "Tue" },
                        { "label": "Wed" },
                        {
                            "vline": "true",
                            "lineposition": "0",
                            "color": "#6baa01",
                            "labelHAlign": "center",
                            "labelPosition": "0",
                            "label": "National holiday",
                            "dashed":"1"
                        },
                        { "label": "Thu" },
                        { "label": "Fri" },
                        { "label": "Sat" },
                        { "label": "Sun" }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Bakersfield Central",
                    "data": [
                        { "value": "15123" },
                        { "value": "14233" },
                        { "value": "25507" },
                        { "value": "9110" },
                        { "value": "15529" },
                        { "value": "20803" },
                        { "value": "19202" }
                    ]
                },
                {
                    "seriesname": "Los Angeles Topanga",
                    "data": [
                        { "value": "13400" },
                        { "value": "12800" },
                        { "value": "22800" },
                        { "value": "12400" },
                        { "value": "15800" },
                        { "value": "19800" },
                        { "value": "21800" }
                    ]
                }
            ],
            "trendlines": [
                {
                    "line": [
                        {
                            "startvalue": "17022",
                            "color": "#6baa01",
                            "valueOnRight": "1",
                            "displayvalue": "Average"
                        }
                    ]
                }
            ]
        }
    }).render();
});
}//]]>
</script>
</head>
<body>
  <!-- Multi-series line chart -->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=15
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Gallery Example - Stacked Bar 3D - jsFiddle demo by fusioncharts</title>
<<m.ysc>>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'stackedbar3d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Product-wise quarterly revenue in last year",
                    "subCaption": "Harry's SuperMart",
                    "xAxisname": "Quarter",
                    "yAxisName": "Revenue (In USD)",
                    "numberPrefix": "$",
                    "paletteColors": "#0075c2,#1aaf5d",
                    "bgColor": "#ffffff",
                    "borderAlpha": "20",
                    "showCanvasBorder": "0",
                    "usePlotGradientColor": "0",
                    "plotBorderAlpha": "10",
                    "legendBgColor": "#ffffff",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "valueFontColor": "#ffffff",
                    "xAxisLineColor": "#999999",
                    "divlineColor": "#999999",
                    "subcaptionFontBold": "0",
                    "subcaptionFontSize": "14"
            },
                "categories": [{
                "category": [{
                    "label": "Q1"
                }, {
                    "label": "Q2"
                }, {
                    "label": "Q3"
                }, {
                    "label": "Q4"
                }]
            }],
                "dataset": [{
                "seriesname": "Food Products",
                    "data": [{
                    "value": "121000"
                }, {
                    "value": "135000"
                }, {
                    "value": "123500"
                }, {
                    "value": "145000"
                }]
            }, {
                "seriesname": "Non-Food Products",
                    "data": [{
                    "value": "131400"
                }, {
                    "value": "154800"
                }, {
                    "value": "98300"
                }, {
                    "value": "131800"
                }]
            }]
        }
    }).render();
});
}//]]>
</script>
</head>
<body>
  <!-- Stacked Bar 3D chart showing product wise quarterly revenue for the current year. -->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=16
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Gallery Example - Multi-series Bar 3D Chart - jsFiddle demo by fusioncharts</title>
<<m.ysc>>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'msbar3d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Sales by Product Category",
                "subCaption": "In top 5 stores last month",
                "yAxisname": "Sales (In USD)",
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d",
                "bgColor": "#ffffff",
                "legendBorderAlpha": "0",
                "legendBgAlpha": "0",
                "legendShadow": "0",
                "placevaluesInside": "1",
                "valueFontColor": "#ffffff",
                "alignCaptionWithCanvas": "1",
                "showHoverEffect":"1",
                "canvasBgColor": "#ffffff",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "divlineColor": "#999999",
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "showAlternateHGridColor": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5"
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "Bakersfield Central"
                        },
                        {
                            "label": "Garden Groove harbour"
                        },
                        {
                            "label": "Los Angeles Topanga"
                        },
                        {
                            "label": "Compton-Rancho Dom"
                        },
                        {
                            "label": "Daly City Serramonte"
                        }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Food Products",
                    "data": [
                        {
                            "value": "17000"
                        },
                        {
                            "value": "19500"
                        },
                        {
                            "value": "12500"
                        },
                        {
                            "value": "14500"
                        },
                        {
                            "value": "17500"
                        }
                    ]
                },
                {
                    "seriesname": "Non-Food Products",
                    "data": [
                        {
                            "value": "25400"
                        },
                        {
                            "value": "29800"
                        },
                        {
                            "value": "21800"
                        },
                        {
                            "value": "19500"
                        },
                        {
                            "value": "11500"
                        }
                    ]
                }
            ]
        }
    })
    .render();
});
}//]]>
</script>
</head>
<body>
  <!-- Simple implementation of Multi Series Bar 3D chart -->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=17
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Gallery Example - Multi-series Spline Area 2D Chart in JavaScript  - jsFiddle demo by fusioncharts</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/fusioncharts.powercharts.js"></script>
 <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        type: 'mssplinearea',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Number of Footfalls Last Week",
                "subCaption": "Garden Groove harbour vs Crompton-Rancho Dom",
                "xAxisName": "Day",
                "yAxisName": "No. of Footfalls",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "baseFontColor" : "#333333",
                "baseFont" : "Helvetica Neue,Arial",
                "subcaptionFontBold": "0",
                "paletteColors" : "#6baa01,#008ee4",
                "usePlotGradientColor": "0",
                "bgColor" : "#ffffff",
                "showBorder" : "0",
                "showPlotBorder": "0",
                "showValues": "0",
                "showShadow" : "0",
                "showAlternateHGridColor" : "0",
                "showCanvasBorder": "0",
                "showXAxisLine": "1",
                "xAxisLineThickness": "1",
                "xAxisLineColor": "#999999",
                "canvasBgColor" : "#ffffff",
                "divlineAlpha" : "100",
                "divlineColor" : "#999999",
                "divlineThickness" : "1",
                "divLineIsDashed" : "1",
                "divLineDashLen" : "1",
                "divLineGapLen" : "1",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5"
            },

            "categories": [
                {
                    "category": [
                        { "label": "Mon" },
                        { "label": "Tue" },
                        { "label": "Wed" },
                        {
                            "vline": "true",
                            "lineposition": "0",
                            "color": "#6baa01",
                            "labelHAlign": "right",
                            "labelPosition": "0",
                            "label": "National holiday"
                        },
                        { "label": "Thu" },
                        { "label": "Fri" },
                        { "label": "Sat" },
                        { "label": "Sun" }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Garden Groove harbour",
                    "data": [
                        { "value": "15123" },
                        { "value": "14233" },
                        { "value": "21507" },
                        { "value": "9110" },
                        { "value": "14829" },
                        { "value": "17503" },
                        { "value": "20202" }
                    ]
                },
                {
                    "seriesname": "Crompton-Rancho Dom",
                    "data": [
                        { "value": "11400" },
                        { "value": "12800" },
                        { "value": "17800" },
                        { "value": "10400" },
                        { "value": "11800" },
                        { "value": "13100" },
                        { "value": "20800" }
                    ]
                }
            ]
        }
    }).render();
});
}//]]>

</script>
</head>
<body>
  <!--
Multi-Series Spine-Area chart.
-->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=18
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - MultiAxisLine Chart - jsFiddle demo by fusioncharts</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"></script>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var hourlySalesChart = new FusionCharts({
        type: 'multiaxisline',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        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"
            },
            "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" }
                            ]
                        }
                    ]
                }
            ]
        }
    }).render();

});
}//]]>

</script>

</head>
<body>
  <!--
Usage of a Multi Axis Line chart :
A Revenue Analysis for last 12 weeks based on #Orders and average temperature of each week.
-->
<<m.xx>>
<center><div id="chart-container">FusionCharts will render here</div></center>
</body>
</html>
endtext
***********************************
case i=19
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Angular Gauge - Configuring gauge gradient fill  - jsFiddle demo by fusioncharts</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/fusioncharts.widgets.js"></script>
  <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var cSatScoreChart = new FusionCharts({
        type: 'angulargauge',
        renderAt: 'chart-container',
        width: '800',
        height: '500',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Customer Satisfaction Score",
                "subcaption": "Last week",
                "lowerLimit": "0",
                "upperLimit": "100",
                "gaugeFillMix": "{light-10},{light-20},{light-60},{dark-30},{dark-40}, {dark-40}",
                "gaugeFillRatio": "",
                "theme": "fint"
            },
            "colorRange": {
                "color": [
                    {
                        "minValue": "0",
                        "maxValue": "50",
                        "code": "#e44a00"
                    },
                    {
                        "minValue": "50",
                        "maxValue": "75",
                        "code": "#f8bd19"
                    },
                    {
                        "minValue": "75",
                        "maxValue": "100",
                        "code": "#6baa01"
                    }
                ]
            },
            "dials": {
                "dial": [{
                    "value": "67"
                }]
            }
        }
    }).render();
});
}//]]>
</script>
</head>
<body>
  <!-- AngularGauge - Configuring gauge gradient fill with fill ratio set to empty
Attributes:
    1. gaugeFillMix : To set a gradient mix formula for the color scale, pivot etc.
    2. gaugeFillRatio : To specify the ratio of each color in the mix. (Set to empty for this sample)
-->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=20
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Angular Gauge - Setting edit mode true for specific dial - jsFiddle demo by fusioncharts</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/fusioncharts.widgets.js"></script>
  <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var cSatScoreChart = new FusionCharts({
        type: 'angulargauge',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Average Customer Satisfaction Score",
                "subcaption": "Actual vs Expected",
                "lowerLimit": "0",
                "upperLimit": "100",
                "theme": "fint",
                "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
                "gaugeFillRatio": "15",
                "chartBottomMargin": "25",
                "valueFontSize": "18",
                "valueFontColor": "#ffffff"
            },
            "colorRange": {
                "color": [
                    {
                        "minValue": "0",
                        "maxValue": "50",
                        "code": "#e44a00"
                    },
                    {
                        "minValue": "50",
                        "maxValue": "75",
                        "code": "#f8bd19"
                    },
                    {
                        "minValue": "75",
                        "maxValue": "100",
                        "code": "#6baa01"
                    }
                ]
            },
            "dials": {
                "dial": [
                    {
                        "editMode": "1",
                        "value": "85",
                        "showValue": "1",
                        "valueX": "250",
                        "valueY": "240",
                        "bgColor": "#0075c2",
                        "tooltext": "Expected : $value",
                        "rearExtension": "15"
                    },
                    {
                        "value": "68",
                        "showValue": "1",
                        "valueX": "150",
                        "valueY": "240",
                        "bgColor": "#1aaf5d",
                        "tooltext": "Actual : $value",
                        "rearExtension": "15"
                    }
                ]
            },
            "annotations": {
                "origw": "400",
                "origh": "300",
                "autoscale": "1",
                "groups": [
                    {
                        "id": "valueBG",
                        "items": [
                            {
                                "id": "food-val-bg",
                                "type": "rectangle",
                                "x" : "220",
                                "y": "275",
                                "tox": "290",
                                "toy": "300",
                                "fillcolor": "#0075c2"
                            },
                            {
                                "id": "cloth-val-bg",
                                "type": "rectangle",
                                "x" : "120",
                                "y": "275",
                                "tox": "190",
                                "toy": "300",
                                "fillcolor": "#1aaf5d"
                            }
                        ]
                    }
                ]
            }
        }
    }).render();
});
}//]]>
</script>
</head>
<body>
  <!-- AngularGauge - Setting edit mode true for specific dial
Element:
    Dial
Attributes:
    # editMode - Whether to render the gauge in edit mode? In edit mode, user can drag and rotate the dial to new values

-->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=21
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Funnel 3D Chart with filled funnel slices - jsFiddle demo by fusioncharts</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/fusioncharts.widgets.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var conversionChart = new FusionCharts({
        type: 'funnel',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Website visits",
                "subcaption": "Purchase - Conversion analysis for last year",
                "decimals": "1",

                //Filled Funnel Slices
                "isHollow": "0",

                "isSliced" : "1",
                "labelDistance": "15",
                "plotTooltext": "Success : $percentOfPrevValue",
                "theme" : "fint"
            },
            "data": [
                {
                    "label": "Unique Website Visits",
                    "value": "1460000"
                },
                {
                    "label": "Programme Details Section Visits",
                    "value": "930000"
                },
                {
                    "label": "Attempts to Register",
                    "value": "540000"
                },
                {
                    "label": "Successful Registrations",
                    "value": "210000"
                },
                {
                    "label": "Logged In",
                    "value": "190000"
                },
                {
                    "label": "Purchased on Introductory Offers",
                    "value": "120000"
                }
            ]
        }
    });

    conversionChart.render();
});
}//]]>

</script>

</head>
<body>
  <!--
    A simple Funnel 3D Chart with filled funnel slices.
    Attribute:
        # isHollow - Set to 0
-->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=22
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Configuring Charts  - Configuring gradient properties in charts - jsFiddle demo by fusioncharts</title>
<<m.ysc>>
  <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>

  <style type='text/css'>
    body
{
    margin: 10;
    padding: 10;
    font-family: 'Helvetica Neue', Arial;
}
h2{
    font-size: 18px;
    font-weight: strong;
    padding-left: 20px;
}
  </style>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var salesData = [
            {
                "label": "Mon",
                "value": "4123"
            },
            {
                "label": "Tue",
                "value": "4633"
            },
            {
                "label": "Wed",
                "value": "5507"
            },
            {
                "label": "Thu",
                "value": "4910"
            },
            {
                "label": "Fri",
                "value": "5529"
            },
            {
                "label": "Sat",
                "value": "5803"
            },
            {
                "label": "Sun",
                "value": "6202"
            }
        ],
        salesChart = new FusionCharts({
            type: 'area2d',
            renderAt: 'chart-container1',
            width: '500',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Sales of milk",
                    "subCaption": "Last week",
                    "xAxisName": "Day",
                    "yAxisName": "Sales (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "usePlotGradientColor": "1",
                    "plotGradientColor": "#f2c500",
                    "plotFillRatio": "1:100",
                    "plotFillAngle":"270"	
                },

                "data": salesData
            }
        }).render(),

        salesChart2 = new FusionCharts({
            type: 'column2d',
            renderAt: 'chart-container2',
            width: '500',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Sales of milk",
                    "subCaption": "Last week",
                    "xAxisName": "Day",
                    "yAxisName": "Sales (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "usePlotGradientColor": "1",
                    "plotGradientColor": "#f2c500",
                    "plotFillRatio": "1:100",
                    "plotFillAngle":"270"	
                },

                "data": salesData
            }
        }).render(),

        salesChart3 = new FusionCharts({
            type: 'area2d',
            renderAt: 'chart-container3',
            width: '800',
            height: '600',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Sales of milk",
                    "subCaption": "Last week",
                    "xAxisName": "Day",
                    "yAxisName": "Sales (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "usePlotGradientColor": "1",
                    "plotGradientColor": "#1aaf5d",
                    "plotFillRatio": "1:100",
                    "plotFillAngle":"0"	
                },

                "data": salesData
            }
        }).render(),

        salesChart4 = new FusionCharts({
            type: 'column2d',
            renderAt: 'chart-container4',
            width: '500',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Sales of milk",
                    "subCaption": "Last week",
                    "xAxisName": "Day",
                    "yAxisName": "Sales (In USD)",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "usePlotGradientColor": "1",
                    "plotGradientColor": "#1aaf5d",
                    "plotFillRatio": "1:100",
                    "plotFillAngle":"0"	
                },

                "data": salesData
            }
        }).render();
});
}//]]>

</script>
</head>
<body>
  <!--
Showcasing customized gradient fill properties in area and column charts.
 Configuring gradient properties using:
    # usePlotGradientColor - Set to 1 to use gradient fill
    # plotGradientColor - The other color to form gradient with
    # plotFillRatio - Ratio of distribution of colors
    # plotFillAngle - Angle for the fill
-->
<center><div id="chart-container1">FusionCharts will render here</div></center>
<center><div id="chart-container2">FusionCharts will render here</div></center>
<center><div><h2>With a different gradient fill color and angle below:</h2></div></center>
<center><div id="chart-container3">FusionCharts will render here</div></center>
<center><div id="chart-container4">FusionCharts will render here</div></center>
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=23
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Customizing Charts - Customizing Legend Scroll bar cosmetics. - jsFiddle demo by fusioncharts</title>
<<m.ysc>>
 <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Letters Used in a Novel",
                "formatnumberscale": "0",
                "showBorder": "0",
                "showLegend": "1",
                "theme" : "fint",
                "showPercentValues":"1",
                "showPercentInToolTip":"0",
                //Setting legend to appear on right side
                "legendPosition" : "right",
                //Caption for legend
                "legendCaption" : "Alphabet Used: ",
                //Customization for legend scroll bar cosmetics
                "legendScrollBgColor": "#cccccc",
                "legendScrollBarColor": "#999999"
            },
                "data": [{
                    "label": "A",
                    "value": "91852"
                },{
                "label": "B",
                    "value": "51852"
            }, {
                "label": "C",
                    "value": "88168"
            }, {
                "label": "D",
                    "value": "73897"
            }, {
                "label": "E",
                    "value": "93933"
            }, {
                "label": "F",
                    "value": "19289"
            }, {
                "label": "G",
                    "value": "79623"
            }, {
                "label": "H",
                    "value": "48262"
            }, {
                "label": "I",
                    "value": "29162"
            }, {
                "label": "J",
                    "value": "96878"
            }, {
                "label": "K",
                    "value": "81241"
            }, {
                "label": "L",
                    "value": "40652",
                    "issliced": "1"
            }, {
                "label": "M",
                    "value": "37581",
                    "issliced": "1"
            }, {
                "label": "N",
                    "value": "2882"
            }, {
                "label": "O",
                    "value": "746"
            }, {
                "label": "P",
                    "value": "7155"
            }, {
                "label": "Q",
                    "value": "12072"
            }, {
                "label": "R",
                    "value": "45608"
            }, {
                "label": "S",
                    "value": "72570"
            }, {
                "label": "T",
                    "value": "44799"
            }, {
                "label": "U",
                    "value": "71887"
            }, {
                "label": "V",
                    "value": "78170"
            }, {
                "label": "W",
                    "value": "94345"
            }, {
                "label": "X",
                    "value": "5434"
            }, {
                "label": "Y",
                    "value": "34355"
            }, {
                "label": "Z",
                    "value": "2323"
            }]
        }
    });

    revenueChart.render();
});
}//]]>

</script>

</head>
<body>
  <!-- If the legend has a large number of keys to display, it shows a scroll bar for easy navigation. You can customize the cosmetics of the scroll bar using these attributes:
Attributes:
    # legendScrollBgColor
    # legendScrollBarColor
-->
<<m.xx>>
</body>
</html>
endtext
***********************************
case i=24
text to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>FusionCharts - Dynamic Tooltips using Macros in maps - jsFiddle demo by fusioncharts</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/fusioncharts.maps.js"></script>
   <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.usa.js"></script>
   <script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
 <script type='text/javascript'>//<![CDATA[
window.onload=function(){
FusionCharts.ready(function () {
    var salesMap = new FusionCharts({
        type: 'usa',
        renderAt: 'chart-container',
        width: '800',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Annual Sales by State",
                "subcaption": "Last year",
                "numberPrefix": "$",
                "markerFillColor": "#ffffff",
                "markerBorderAlpha": "0",
                "showMarkerLabels": "0",

                //Macros used to build dynamic tool-tips
                "entityToolText": "$lName: Total Sales $dataValue",
                "markerToolText": "Region Head: $label",
                "theme": "fint",
                "showLabels": "1",
                "entityFillHoverColor": "#cccccc"
            },
            "colorrange": {
                "minvalue": "0",
                "startlabel": "Low",
                "endlabel": "High",
                "code": "#e44a00",
                "gradient": "1",
                "color": [
                    {
                        "maxvalue": "56580000",
                        "displayvalue": "Average",
                        "code": "#f8bd19"
                    },
                    {
                        "maxvalue": "97400000",
                        "code": "#6baa01"
                    }
                ]
            },
            "data": [
                {
                    "id": "HI",
                    "value": "3189000"
                },
                {
                    "id": "DC",
                    "value": "2879000"
                },
                {
                    "id": "MD",
                    "value": "33592000"
                },
                {
                    "id": "DE",
                    "value": "4607000"
                },
                {
                    "id": "RI",
                    "value": "4890000"
                },
                {
                    "id": "WA",
                    "value": "34927000"
                },
                {
                    "id": "OR",
                    "value": "65798000"
                },
                {
                    "id": "CA",
                    "value": "61861000"
                },
                {
                    "id": "AK",
                    "value": "58911000"
                },
                {
                    "id": "ID",
                    "value": "42662000"
                },
                {
                    "id": "NV",
                    "value": "78041000"
                },
                {
                    "id": "AZ",
                    "value": "41558000"
                },
                {
                    "id": "MT",
                    "value": "62942000"
                },
                {
                    "id": "WY",
                    "value": "78834000"
                },
                {
                    "id": "UT",
                    "value": "50512000"
                },
                {
                    "id": "CO",
                    "value": "73026000"
                },
                {
                    "id": "NM",
                    "value": "78865000"
                },
                {
                    "id": "ND",
                    "value": "50554000"
                },
                {
                    "id": "SD",
                    "value": "35922000"
                },
                {
                    "id": "NE",
                    "value": "43736000"
                },
                {
                    "id": "KS",
                    "value": "32681000"
                },
                {
                    "id": "OK",
                    "value": "79038000"
                },
                {
                    "id": "TX",
                     "value": "97344000",
                    "fillHoverColor": "#2d8701",
                    "fontBold": "1",
                    "tooltext": "Highest sale for last year. Texas $97.34M"
                },
                {
                    "id": "MN",
                    "value": "43485000"
                },
                {
                    "id": "IA",
                    "value": "46515000"
                },
                {
                    "id": "MO",
                    "value": "63715000"
                },
                {
                    "id": "AR",
                    "value": "34497000"
                },
                {
                    "id": "LA",
                    "value": "70706000"
                },
                {
                    "id": "WI",
                    "value": "42382000"
                },
                {
                    "id": "IL",
                    "value": "73202000"
                },
                {
                    "id": "KY",
                    "value": "79118000"
                },
                {
                    "id": "TN",
                    "value": "44657000"
                },
                {
                    "id": "MS",
                    "value": "66205000"
                },
                {
                    "id": "AL",
                    "value": "75873000"
                },
                {
                    "id": "GA",
                    "value": "76895000"
                },
                {
                    "id": "MI",
                    "value": "67695000"
                },
                {
                    "id": "IN",
                    "value": "920000",
                    "fillHoverColor": "#cc0000",
                    "fontBold": "1",
                    "tooltext": "Lowest sale for last year. Indiana $920K"
                },
                {
                    "id": "OH",
                    "value": "32960000"
                },
                {
                    "id": "PA",
                    "value": "54346000"
                },
                {
                    "id": "NY",
                    "value": "42828000"
                },
                {
                    "id": "VT",
                    "value": "77411000"
                },
                {
                    "id": "NH",
                    "value": "51403000"
                },
                {
                    "id": "ME",
                    "value": "64636000"
                },
                {
                    "id": "MA",
                    "value": "51767000"
                },
                {
                    "id": "CT",
                    "value": "57353000"
                },
                {
                    "id": "NJ",
                    "value": "80788000"
                },
                {
                    "id": "WV",
                    "value": "95890000"
                },
                {
                    "id": "VA",
                    "value": "83140000"
                },
                {
                    "id": "NC",
                    "value": "75425000"
                },
                {
                    "id": "SC",
                    "value": "88234000"
                },
                {
                    "id": "FL",
                    "value": "88234000"
                }
            ],
            "markers": {
                "application": [
                    {
                        "id": "low-state-origin",
                        "shapeId": "circle",
                        "radius": "5"
                    },
                    {
                        "id": "low-state-triangle",
                        "shapeId": "low-triangle"
                    },
                    {
                        "id": "high-state-origin",
                        "shapeId": "circle",
                        "radius": "5"
                    },
                    {
                        "id": "high-state-triangle",
                        "shapeId": "high-triangle"
                    }
                ],
                "definition": [
                    {
                        "id": "low-state-origin",
                        "x": "495",
                        "y": "152",
                        "label": "Harry Douglas"
                    },
                    {
                        "id": "high-state-origin",
                        "x": "340",
                        "y": "325",
                        "label": "Jeorge White"
                    },
                    {
                        "id": "low-state-triangle",
                        "x": "495",
                        "y": "160",
                        "label": "Harry Douglas"
                    },
                    {
                        "id": "high-state-triangle",
                       "x": "340",
                        "y": "333",
                        "label": "Jeorge White"
                    }
                ],
                "shapes": [
                    {
                        "id": "low-triangle",
                        "type": "polygon",
                        "sides": "3",
                        "radius": "5",
                        "startAngle": "90"
                    },
                    {
                        "id": "high-triangle",
                        "type": "polygon",
                        "sides": "3",
                        "radius": "5",
                        "startAngle": "45"
                    }
                ]
            }
        }
    }).render();
});
}//]]>

</script>

</head>
<body>
  <!--
Dynamic tool-tips on entities and markers using macros.

    Attributes:
        1. entityToolText
        2. markerToolText
    Macros Used :
        1. $lName
        2. $dataValue
        3. $label
-->
<<m.xx>>
</body>
</html>
endtext
endcase
****************************************
local m.lcdest
m.lcdest=addbs(sys(2023))+"ychart.html"
strtofile(m.myvar,m.lcdest)
try
apie=null
catch
endtry
apie=newObject("internetexplorer.application")
with apie
.fullscreen=1
.navigate(m.lcdest)
bringwindowtotop(.hwnd)
.visible=.t.
endwith
endproc
return


A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
A Web Charts library.
To be informed of the latest articles, subscribe:
Comment on this post
S
Hi Yousfi, thanks for the lessons. Not long ago I found out about your blog, but you have already helped me a lot .. Keep on good work!<br /> But, I do not understand how this program works. The fact is that I have ready-made DBF files and I cannot use this program and receive graphs. Could you use for example 1 DBF and get graphs
Reply
S
Hi Yousfi, thanks for the lessons. Not long ago I found out about your blog, but you have already helped me a lot .. Keep on good work!<br /> But, I do not understand how this program works. The fact is that I have ready-made DBF files and I cannot use this program and receive graphs. Could you use for example 1 DBF and get graphs.
Reply