A Web Charts library.
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
/image%2F1435407%2F20150223%2Fob_78d520_yfoxchart-4af0337yh.JPG)
yFoxChart using foxchart VFP class - Visual Foxpro codes
FoxChart a pure VFP chart class The original class of foxchart is in vfpx codeplex and can be downloaded from this site.The author of this admirable work is Cesar Schalom (Brazil). I worked on this
http://yousfi.over-blog.com/2015/02/yfoxchart-using-foxchart-vfp-class.html