def chart(request):
# Load dial indicator values from simple string array
# e.g. dialValues = ["52", "10", "81", "95"]
dialValues = ["81"]
# widget data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.
dataSource = OrderedDict()
# The `widgetConfig` dict contains key-value pairs data for widget attribute
widgetConfig = OrderedDict()
widgetConfig[
"caption"] = "Nordstorm's Customer Satisfaction Score for 2017"
widgetConfig["lowerLimit"] = "0"
widgetConfig["upperLimit"] = "100"
widgetConfig["showValue"] = "1"
widgetConfig["numberSuffix"] = "%"
widgetConfig["theme"] = "fusion"
widgetConfig["showToolTip"] = "0"
# The `colorData` dict contains key-value pairs data for ColorRange of dial
colorRangeData = OrderedDict()
colorRangeData["color"] = [{
"minValue": "0",
"maxValue": "50",
"code": "#F2726F"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#FFC533"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#62B58F"
}]
# Convert the data in the `dialData` array into a format that can be consumed by FusionCharts.
dialData = OrderedDict()
dialData["dial"] = []
dataSource["chart"] = widgetConfig
dataSource["colorRange"] = colorRangeData
dataSource["dials"] = dialData
# Iterate through the data in `dialValues` and insert in to the `dialData["dial"]` list.
# The data for the `dial` should be in an array wherein each element of the array is a JSON object
# having the `value` as keys.
for i in range(len(dialValues)):
dialData["dial"].append({"value": dialValues[i]})
# Create an object for the angular-gauge using the FusionCharts class constructor
# The widget data is passed to the `dataSource` parameter.
angularChart = FusionCharts("angulargauge", "ex1", "100%", "200",
"chart-1", "json", dataSource)
# returning complete JavaScript and HTML code, which is used to generate widget in the browsers.
return render(request, 'index.html', {
'output': angularChart.render(),
'chartTitle': 'Simple Widget Using Array'
})
def chart(request):
data = requests.get('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/different-plot-type-for-each-variable-measure-data.json').text
schema = requests.get('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/different-plot-type-for-each-variable-measure-schema.json').text
fusionTable = FusionTable(schema, data)
timeSeries = TimeSeries(fusionTable)
timeSeries.AddAttribute("caption", """{
text: 'Sales Performance'
}""")
timeSeries.AddAttribute("yAxis", """[{
plot: {
value: 'Sale Amount',
type: 'area'
},
title: 'Sale Amount',
format: {
prefix: '$'
}
}, {
plot: {
value: 'Units Sold',
type: 'column'
},
title: 'Units Sold'
}]""")
# Create an object for the chart using the FusionCharts class constructor
fcChart = FusionCharts("timeseries", "ex1", 700, 450, "chart-1", "json", timeSeries)
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {'output' : fcChart.render(), 'chartTitle': "Different plot type for each variable (measure)"})
def chart(request):
data = requests.get('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json').text
schema = requests.get('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json').text
fusionTable = FusionTable(schema, data)
timeSeries = TimeSeries(fusionTable)
timeSeries.AddAttribute("caption", """{
text: 'Sales Analysis'
}""")
timeSeries.AddAttribute("subcaption", """{
text: 'Grocery & Footwear'
}""")
timeSeries.AddAttribute("series", "'Type'")
timeSeries.AddAttribute("yAxis", """[{
plot: 'Sales Value',
title: 'Sale Value',
format: {
prefix: '$'
}
}]""")
# Create an object for the chart using the FusionCharts class constructor
fcChart = FusionCharts("timeseries", "ex1", 700, 450, "chart-1", "json", timeSeries)
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {'output' : fcChart.render(), 'chartTitle': "Plotting multiple series on time axis"})
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor
column2d = FusionCharts(
"column2d",
"ex1",
'600',
'400',
"chart-1",
"xml",
# The chart data is passed as a string to the `dataSource` parameter.
"""
<chart caption='Harry's SuperMart'
subcaption='Monthly revenue for last year' xaxisname='Month'
yaxisname='Amount' numberprefix='¥' theme='fusion'
rotatevalues='1' exportenabled='1'>
<set label='Jan' value='420000' />
<set label='Feb' value='810000' />
<set label='Mar' value='720000' />
<set label='Apr' value='550000' />
<set label='May' value='910000' />
<set label='Jun' value='510000' />
<set label='Jul' value='680000' />
<set label='Aug' value='620000' />
<set label='Sep' value='610000' />
<set label='Oct' value='490000' />
<set label='Nov' value='900000' />
<set label='Dec' value='730000' />
</chart>
""")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'index.html', {
'output': column2d.render(),
'chartTitle': 'Chart using special character in XML data format'
})
def chart(request):
chartObj = FusionCharts(
'column3d', 'ex1', '600', '400', 'chart-1', 'json', """{
"chart": {
"caption": "Promos displayed",
"subcaption": "For Pepitos Pizza",
"yaxisname": "Number of views{br}(in thousands)",
"decimals": "1",
"theme": "fusion"
},
"data": [
{
"label": "TOPii Mobile",
"value": "14660"
},
{
"label": "TOPii Web",
"value": "11478"
},
{
"label": "Facebook",
"value": "5322"
},
{
"label": "Instagram",
"value": "3950"
},
{
"label": "Organic Web",
"value": "2502"
}
]
}""")
return render(request, 'index.html', {'output': chartObj.render()})
def chart(request):
chartObj = FusionCharts( 'pareto2d', 'ex1', '600', '400', 'chart-1', 'json', """{
"chart": {
"caption": " Top Hardware Defects Frequency",
"subcaption": "Last year - ACME Computers",
"theme": "fusion",
"yaxisname": "# reported instances",
"syaxisname": "% of total instances",
"decimals": "1",
"drawcrossline": "1"
},
"data": [
{
"label": "Hard-Disk",
"value": "40"
},
{
"label": "PCB",
"value": "22"
},
{
"label": "Printer",
"value": "12"
},
{
"label": "CDROM",
"value": "10"
},
{
"label": "Keyboard",
"value": "6"
}
]
}""")
return render(request, 'index.html', {'output': chartObj.render()})
def chart(request):
chartObj = FusionCharts(
'radar', 'ex1', '600', '400', 'chart-1', 'json', """{
"chart": {
"caption": "Business Analysis of Pepitos Pizza",
"subcaption": "Scale: 1 (low) to 5 (high)",
"theme": "fusion",
"showlegend": "0",
"showdivlinevalues": "0",
"showlimits": "0",
"showvalues": "1",
"plotfillalpha": "40",
"plottooltext": "Pepitos Pizza's <b>$label</b> skill is rated as <b>$value</b>"
},
"categories": [
{
"category": [
{
"label": "Shoppers preferences"
},
{
"label": "Shoppers trends"
},
{
"label": "Product demand"
},
{
"label": "Redemption volume"
},
{
"label": "View volume"
}
]
}
],
"dataset": [
{
"seriesname": "User Ratings",
"data": [
{
"value": "3"
},
{
"value": "3"
},
{
"value": "4"
},
{
"value": "3"
},
{
"value": "2"
}
]
}
]
}""")
return render(request, 'index.html', {'output': chartObj.render()})
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor and pass the
# json url datahandler in the `dataSource` as parameter.
column2d = FusionCharts("column2d", "ex1" , "600", "400", "chart-1", "jsonurl","/datahandler")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {'output' : column2d.render()})
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor
column2d = FusionCharts(
"column2d",
"ex1",
'700',
'400',
"chart-1",
"json",
# The chart data is passed as a string to the `dataSource` parameter.
"""{
"chart":
{
"caption": "Countries With Most Oil Reserves [2017-18]",
"subCaption": "In MMbbl = One Million barrels",
"xAxisName": "Country",
"yAxisName": "Reserves (MMbbl)",
"numberSuffix": "K",
"theme": "fusion"
},
"data": [{
"label": "Venezuela",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Canada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "30"
}, {
"label": "China",
"value": "30"
}]
}""")
# Attach event with method name, and the callee method defined in html page.
column2d.addEvent("dataLoaded", "onDataLoaded")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'product-life-cycle-event.html', {
'output': column2d.render(),
'chartTitle': 'Example of event(product life cycle event)'
})
def chart(request):
# Create an object for the hlineargauge chart using the FusionCharts class constructor
lineargauge = FusionCharts(
"hlineargauge",
"ex1",
'700',
'400',
"chart-1",
"json",
# The chart data is passed as a string to the `dataSource` parameter.
"""{
"chart": {
"caption": "Server CPU Utilization",
"subcaption": "food.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"valueAbovePointer": "0",
"editmode":"1"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#1aaf5d"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f2c500"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#c02d00"
} ]
},
"pointers":
{
"pointer": [{
"value": "72.5"
}]
}
}""")
# Attach event with method name, and the callee method defined in html page.
lineargauge.addEvent("realtimeUpdateComplete", "onUpdate")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'special-event.html', {
'output': lineargauge.render(),
'chartTitle': 'Example of event(interactive event)'
})
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor
column2d = FusionCharts("column2d", "ex1", "600", "400", "chart-1",
"jsonurl", "/static/data/data.json")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'index.html', {
'output': column2d.render(),
'chartTitle': 'Chart using data from JSON URL'
})
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor
column2d = FusionCharts(
"column2d",
"ex1",
600,
400,
"chart-1",
"json",
# The chart data is passed as a string to the `dataSource` parameter.
"""{
"chart":
{
"caption": "Countries With Most Oil Reserves [2017-18]",
"subcaption": "In MMbbl = One Million barrels",
"xaxisname": "Country",
"yaxisname": "Reserves (MMbbl)",
"numbersuffix": "K",
"theme": "fusion"
},
"data": [{
"label": "Venezuela",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Canada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "30"
}, {
"label": "China",
"value": "30"
}]
}""")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'chart-product-level-api.html', {
'output': column2d.render(),
'chartTitle': 'Updating chart properties at runtime'
})
def chart(request):
chartObj = FusionCharts(
'splinearea', 'ex1', '600', '400', 'chart-1', 'json', """{
"chart": {
"caption": "Yearly sales of iPhone",
"yaxisname": "Number of units sold",
"subcaption": "2007-2016",
"plottooltext": "<div><b>$dataValue</b> iPhones sold in $label</div>",
"theme": "fusion"
},
"data": [
{
"label": "2007",
"value": "1380000"
},
{
"label": "2008",
"value": "1450000"
},
{
"label": "2009",
"value": "1610000"
},
{
"label": "2010",
"value": "1540000"
},
{
"label": "2011",
"value": "1480000"
},
{
"label": "2012",
"value": "1573000"
},
{
"label": "2013",
"value": "2232000"
},
{
"label": "2014",
"value": "2476000"
},
{
"label": "2015",
"value": "2832000"
},
{
"label": "2016",
"value": "3808000"
}
]
}""")
return render(request, 'index.html', {'output': chartObj.render()})
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor
column2d = FusionCharts(
"column2d",
"ex1",
600,
400,
"chart-1",
"json",
# The chart data is passed as a string to the `dataSource` parameter.
"""{
"chart":
{
"caption":"Harry\'s SuperMart",
"subCaption":"Top 5 stores in last month by revenue",
"exportEnabled":"1",
"exportMode":"server",
"theme":"fusion"
},
"data":
[
{
"label":"Bakersfield Central",
"value":"880000"
},
{
"label":"Garden Groove harbour",
"value":"730000"
},
{
"label":"Los Angeles Topanga",
"value":"590000"
},
{
"label":"Compton-Rancho Dom",
"value":"520000"
},
{
"label":"Daly City Serramonte",
"value":"330000"
}
]
}""")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'index.html', {
'output': column2d.render(),
'chartTitle': 'Export Chart As Image (server-side)'
})
def chart(request):
# Create an object for the angualar gauge using the FusionCharts class constructor
angularGauge = FusionCharts(
"angulargauge",
"ex1",
"450",
"270",
"chart-1",
"json",
# The data is passed as a string in the `dataSource` as parameter.
"""{
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Los Angeles Topanga",
"plotToolText": "Current Score: $value",
"theme": "fint",
"chartBottomMargin": "50",
"showValue": "1"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
}, {
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "70",
"id": "dial1"
}]
}
}""")
# Alternatively, you can assign this string to a string variable in a separate JSON file
# and pass the URL of that file to the `dataSource` parameter.
return render(request, 'update-data-runtime.html', {
'output': angularGauge.render(),
'chartTitle': 'Update data at runtime'
})
def chart(request):
# Create an object for the angualar gauge using the FusionCharts class constructor
angularGauge = FusionCharts(
"angulargauge",
"ex1",
"450",
"270",
"chart-1",
"json",
# The data is passed as a string in the `dataSource` as parameter.
"""{
"chart": {
"caption": "Nordstorm's Customer Satisfaction Score for 2017",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"numberSuffix": "%",
"theme": "fusion",
"showToolTip": "0"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#F2726F"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#FFC533"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#62B58F"
}]
},
"dials": {
"dial": [{
"value": "81"
}]
}
}""")
# Alternatively, you can assign this string to a string variable in a separate JSON file
# and pass the URL of that file to the `dataSource` parameter.
return render(request, 'index.html', {
'output': angularGauge.render(),
'chartTitle': 'Angular Gauge'
})
def chart(request):
# Chart data is passed to the `dataSource` parameter, as dictionary in the form of key-value pairs.
dataSource = OrderedDict()
# The `chartConfig` dict contains key-value pairs data for chart attribute
chartConfig = OrderedDict()
chartConfig["caption"] = "Countries With Most Oil Reserves [2017-18]"
chartConfig["subCaption"] = "In MMbbl = One Million barrels"
chartConfig["xAxisName"] = "Country"
chartConfig["yAxisName"] = "Reserves (MMbbl)"
chartConfig["numberSuffix"] = "K"
chartConfig["theme"] = "fusion"
# The `chartData` dict contains key-value pairs data
chartData = OrderedDict()
chartData["Venezuela"] = 290
chartData["Saudi"] = 260
chartData["Canada"] = 180
chartData["Iran"] = 140
chartData["Russia"] = 115
chartData["UAE"] = 100
chartData["US"] = 30
chartData["China"] = 30
dataSource["chart"] = chartConfig
dataSource["data"] = []
# Convert the data in the `chartData` array into a format that can be consumed by FusionCharts.
# The data for the chart should be in an array wherein each element of the array is a JSON object
# having the `label` and `value` as keys.
# Iterate through the data in `chartData` and insert in to the `dataSource['data']` list.
for key, value in chartData.items():
data = {}
data["label"] = key
data["value"] = value
dataSource["data"].append(data)
# Create an object for the column 2D chart using the FusionCharts class constructor
# The chart data is passed to the `dataSource` parameter.
column2D = FusionCharts("column2d", "ex1", "600", "400", "chart-1", "json",
dataSource)
return render(request, 'index.html', {
'output': column2D.render(),
'chartTitle': 'Simple Chart Using Array'
})
def chart(request):
# Create an object for the pie2d chart using the FusionCharts class constructor
pie2d = FusionCharts(
"pie2d",
"ex1",
'700',
'400',
"chart-1",
"json",
# The chart data is passed as a string to the `dataSource` parameter.
"""{
"chart":
{
"caption": "Market Share of Web Servers",
"plottooltext": "<b>$percentValue</b> of web servers run on $label servers",
"showLegend": "0",
"enableMultiSlicing": "0",
"showPercentValues": "1",
"legendPosition": "bottom",
"useDataPlotColorForLabels": "1",
"theme": "fusion"
},
"data": [{
"label": "Apache",
"value": "32647479"
}, {
"label": "Microsoft",
"value": "22100932"
}, {
"label": "Zeus",
"value": "14376"
}, {
"label": "Other",
"value": "18674221"
}]
}""")
# Attach event with method name, and the callee method defined in html page.)
pie2d.addEvent("dataplotClick", "plotClickHandler")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'special-chart-type-api.html', {
'output': pie2d.render(),
'chartTitle': 'Special chart type API'
})
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor
column2d = FusionCharts(
"column2d",
"ex1",
'700',
'400',
"chart-1",
"json",
# The chart data is passed as a string to the `dataSource` parameter.
"""{
"chart":
{
"caption": "Countries With Most Oil Reserves [2017-18]",
"subCaption": "In MMbbl = One Million barrels",
"xAxisName": "Country",
"yAxisName": "Reserves (MMbbl)",
"numberSuffix": "K",
"theme": "fusion",
"exportEnabled":"1"
},
"data": [{
"label": "Venezuela",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Canada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "30"
}, {
"label": "China",
"value": "30"
}]
}""")
# Attach message with message string.
column2d.addMessage("loadMessage", "please wait data is being loaded")
column2d.addMessage("loadMessageFontSize", "18")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'index.html', {
'output': column2d.render(),
'chartTitle': 'Message related attributes and configuration'
})
def chart(request):
data = requests.get(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json'
).text
schema = requests.get(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-schema.json'
).text
fusionTable = FusionTable(schema, data)
timeSeries = TimeSeries(fusionTable)
timeSeries.AddAttribute(
"caption", """{
text: 'Web visits & downloads'
}""")
timeSeries.AddAttribute(
"subcaption", """{
text: 'since 2015'
}""")
timeSeries.AddAttribute(
"yAxis", """[{
plot: [{
value: 'Downloads',
type: 'column'
}, {
value: 'Web Visits',
type: 'line'
}]
}]""")
# Create an object for the chart using the FusionCharts class constructor
fcChart = FusionCharts("timeseries", "ex1", 700, 450, "chart-1", "json",
timeSeries)
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'index.html', {
'output': fcChart.render(),
'chartTitle': "Column and line combination on time axis"
})
def chart(request):
data = requests.get(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/candlestick-chart-data.json'
).text
schema = requests.get(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/candlestick-chart-schema.json'
).text
fusionTable = FusionTable(schema, data)
timeSeries = TimeSeries(fusionTable)
timeSeries.AddAttribute(
"caption", """{
text: 'Apple Inc. Stock Price'
}""")
timeSeries.AddAttribute(
"yAxis", """[{
plot: {
value: {
open: 'Open',
high: 'High',
low: 'Low',
close: 'Close'
},
type: 'candlestick'
},
format: {
prefix: '$'
},
title: 'Stock Value'
}]""")
# Create an object for the chart using the FusionCharts class constructor
fcChart = FusionCharts("timeseries", "ex1", 700, 450, "chart-1", "json",
timeSeries)
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {
'output': fcChart.render(),
'chartTitle': "Interactive candlestick chart"
})
def chart(request):
# Create an object for the pie3d chart using the FusionCharts class constructor
pie3d = FusionCharts(
"pie3d",
"ex2",
"100%",
"400",
"chart-1",
"json",
# The data is passed as a string in the `dataSource` as parameter.
"""{
"chart": {
"caption": "Recommended Portfolio Split",
"subCaption" : "For a net-worth of $1M",
"showValues":"1",
"showPercentInTooltip" : "0",
"numberPrefix" : "$",
"enableMultiSlicing":"1",
"theme": "fusion"
},
"data": [{
"label": "Equity",
"value": "300000"
}, {
"label": "Debt",
"value": "230000"
}, {
"label": "Bullion",
"value": "180000"
}, {
"label": "Real-estate",
"value": "270000"
}, {
"label": "Insurance",
"value": "20000"
}]
}""")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {
'output': pie3d.render(),
'chartTitle': 'Pie 3D Chart'
})
def chart(request):
data = requests.get(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-chart-with-time-axis-data.json'
).text
schema = requests.get(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-chart-with-time-axis-schema.json'
).text
fusionTable = FusionTable(schema, data)
timeSeries = TimeSeries(fusionTable)
timeSeries.AddAttribute("chart", """{
showLegend: 0
}""")
timeSeries.AddAttribute(
"caption", """{
text: 'Daily Visitors Count of a Website'
}""")
timeSeries.AddAttribute(
"yAxis", """[{
plot: {
value: 'Daily Visitors',
type: 'column'
},
title: 'Daily Visitors (in thousand)'
}]""")
# Create an object for the chart using the FusionCharts class constructor
fcChart = FusionCharts("timeseries", "ex1", 700, 450, "chart-1", "json",
timeSeries)
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {
'output': fcChart.render(),
'chartTitle': "Column chart with time axis"
})
def chart(request):
data = requests.get('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-two-variable-measures-data.json').text
schema = requests.get('https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-two-variable-measures-schema.json').text
fusionTable = FusionTable(schema, data)
timeSeries = TimeSeries(fusionTable)
timeSeries.AddAttribute("caption", """{
text: 'Cariaco Basin Sampling'
}""")
timeSeries.AddAttribute("subcaption", """{
text: 'Analysis of O₂ Concentration and Surface Temperature'
}""")
timeSeries.AddAttribute("yAxis", """[{
plot: [{
value: 'O2 concentration',
connectNullData: true
}],
min: '3',
max: '6',
title: 'O₂ Concentration (mg/L)'
}, {
plot: [{
value: 'Surface Temperature',
connectNullData: true
}],
min: '18',
max: '30',
title: 'Surface Temperature (°C)'
}]""");
# Create an object for the chart using the FusionCharts class constructor
fcChart = FusionCharts("timeseries", "ex1", 700, 450, "chart-1", "json", timeSeries)
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {'output' : fcChart.render(), 'chartTitle': "Plotting two variables (measures)"})
def chart(request):
data = requests.get(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/adding-a-reference-line-data.json'
).text
schema = requests.get(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/adding-a-reference-line-schema.json'
).text
fusionTable = FusionTable(schema, data)
timeSeries = TimeSeries(fusionTable)
timeSeries.AddAttribute(
"caption", """{
text: 'Temperature readings in Italy'
}""")
timeSeries.AddAttribute(
"yAxis", """[{
plot: 'Temperature',
title: 'Temperature',
format:{
suffix: '°C',
},
referenceLine: [{
label: 'Controlled Temperature',
value: '10'
}]
}]""")
# Create an object for the chart using the FusionCharts class constructor
fcChart = FusionCharts("timeseries", "ex1", 700, 450, "chart-1", "json",
timeSeries)
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(request, 'index.html', {
'output': fcChart.render(),
'chartTitle': "Adding a reference line"
})
def chart(request):
# Chart data is passed to the `dataSource` parameter, as dict, in the form of key-value pairs.
dataSource = {}
dataSource['chart'] = {
"caption" : "Top 10 Most Populous Countries",
"theme":"fusion"
}
# Convert the data in the `actualData` array into a format that can be consumed by FusionCharts.
# The data for the chart should be in an array wherein each element of the array is a JSON object
# having the `label` and `value` as keys.
dataSource['data'] = []
# Iterate through the data in `Country` model and insert in to the `dataSource['data']` list.
for key in SalesRecord.objects.raw("select 1 as id, Region, SUM([TotalSales]) as [TotalSales] from SalesRecord group by Region"):
data = {}
data['label'] = key.Region
data['value'] = key.TotalSales
dataSource['data'].append(data)
# Create an object for the Column 2D chart using the FusionCharts class constructor
column2D = FusionCharts("column2D", "ex1" , "600", "400", "chart-1", "json", dataSource)
return render(request, 'index.html', {'output': column2D.render(), 'chartTitle': 'Chart Using Database (SQLite3)'})
def chart(request):
# Create an object for the column2d chart using the FusionCharts class constructor
column2d = FusionCharts(
"column2d",
"ex1",
'600',
'400',
"chart-1",
"json",
# The chart data is passed as a string to the `dataSource` parameter.
"""{
"chart":
{
"caption": "Sales by Region",
"xaxisname": "Region",
"yaxisname": "Total Sales",
"numbersuffix": "K",
"theme": "fusion"
},
"data": [{
"label": "Europe",
"value": "827508",
"link": "j-updateChart-Europe"
}, {
"label": "North America",
"value": "342947",
"link": "j-updateChart-NA"
}, {
"label": "South America",
"value": "183881",
"link": "j-updateChart-SA"
}]
}""")
# Create an object for the column2d chart using the FusionCharts class constructor
secondColumn2d = FusionCharts(
"column2d",
"chartTwo",
'600',
'400',
"chart-2",
"json",
# The chart data is passed as a string to the `dataSource` parameter.
"""{
"chart": {
}
}""")
# returning complete JavaScript and HTML code, which is used to generate chart in the browsers.
return render(
request, 'chart-update-onclick.html', {
'output1': column2d.render(),
'output2': secondColumn2d.render(),
'chartTitle': 'Updating Different Chart'
})
def chart(request):
chartObj = FusionCharts(
'sankey', 'ex1', '600', '400', 'chart-1', 'json', """{
"chart": {
"caption": "Largest International migrations (In Millions)",
"subcaption": "A No-Node Sankey where the entities are just represented by the labels.",
"theme": "fusion",
"numbersuffix": " Million",
"nodewidth": 0,
"nodelinkpadding": 3,
"linkcolor": "blend",
"linkcurvature": 0.6,
"linkalpha": 40
},
"nodes": [
{
"label": "Mexico"
},
{
"label": "United States of America"
},
{
"label": "India"
},
{
"label": "United Arab Emirates"
},
{
"label": "Turkey"
},
{
"label": "Russian Federation"
},
{
"label": "Ukraine"
},
{
"label": "Syrian Arab Republic"
},
{
"label": "Bangladesh"
},
{
"label": "Kazakhstan"
},
{
"label": "China"
},
{
"label": "Hong Kong"
},
{
"label": "Afghanistan"
},
{
"label": "Iran"
},
{
"label": "Saudi Arabia"
},
{
"label": "Philippines"
},
{
"label": "State of Palestine"
},
{
"label": "Jordan"
}
],
"links": [
{
"from": "India",
"to": "United Arab Emirates",
"value": 3.3
},
{
"from": "Mexico",
"to": "United States of America",
"value": 2.7
},
{
"from": "Russian Federation",
"to": "Ukraine",
"value": 3.3
},
{
"from": "Syrian Arab Republic",
"to": "Turkey",
"value": 3.3
},
{
"from": "Bangladesh",
"to": "India",
"value": 3.1
},
{
"from": "Kazakhstan",
"to": "Russian Federation",
"value": 2.6
},
{
"from": "China",
"to": "United States of America",
"value": 2.4
},
{
"from": "China",
"to": "Hong Kong",
"value": 1.3
},
{
"from": "Afghanistan",
"to": "Iran",
"value": 2.3
},
{
"from": "Mexico",
"to": "United States",
"value": 12.7
},
{
"from": "India",
"to": "United States of America",
"value": 2.3
},
{
"from": "India",
"to": "Saudi Arabia",
"value": 2.3
},
{
"from": "Philippines",
"to": "United States of America",
"value": 2.1
},
{
"from": "State of Palestine",
"to": "Jordan",
"value": 2
}
]
}""")
return render(request, 'index.html', {'output': chartObj.render()})
def chart(request):
chartObj = FusionCharts(
'mscolumn2d', 'ex1', '600', '400', 'chart-1', 'json', """{
"chart": {
"caption": "Promo Share",
"subcaption": "Pepitos Pizza",
"xaxisname": "Months",
"yaxisname": "Total Promos Share",
"formatnumberscale": "1",
"plottooltext": "<b>$dataValue</b> shared promos on <b>$seriesName</b> in $label",
"theme": "fusion",
"drawcrossline": "1"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
}
]
}
],
"dataset": [
{
"seriesname": "Instagram",
"data": [
{
"value": "12500"
},
{
"value": "3000"
},
{
"value": "4800"
},
{
"value": "8000"
},
{
"value": "11000"
}
]
},
{
"seriesname": "Facebook",
"data": [
{
"value": "7000"
},
{
"value": "1500"
},
{
"value": "3500"
},
{
"value": "6000"
},
{
"value": "14000"
}
]
},
{
"seriesname": "Twitter",
"data": [
{
"value": "1000"
},
{
"value": "4502"
},
{
"value": "2390"
},
{
"value": "23500"
},
{
"value": "29000"
}
]
}
]
}""")
return render(request, 'index.html', {'output': chartObj.render()})
def chart(request):
chartObj = FusionCharts( 'stackedbar2d', 'ex1', '600', '400', 'chart-1', 'json', """{
"chart": {
"caption": "Top Finishers",
"subcaption": "2016-2017",
"yaxisname": "Open Play Goals",
"palettecolors": "#E64571, #88D786",
"plotgradientcolor": " ",
"theme": "fusion",
"yaxismaxvalue": "30",
"numdivlines": "2",
"showlegend": "1",
"interactivelegend": "0",
"showvalues": "0",
"showsum": "0"
},
"categories": [
{
"category": [
{
"label": "L.Suarez"
},
{
"label": "L.Messi"
},
{
"label": "G.Higuain"
},
{
"label": "Z.Ibrahimovic"
},
{
"label": "Diego Costa"
},
{
"label": "H.Kane"
},
{
"label": "D.Alli"
},
{
"label": "A.Griezmann"
},
{
"label": "Heung-Min Son"
},
{
"label": "S.Mane"
},
{
"label": "J.King"
},
{
"label": "O.Giroud"
},
{
"label": "R.Nainggolan"
},
{
"label": "A.Robben"
},
{
"label": "Pablo Sarabia"
},
{
"label": "Isco"
},
{
"label": "Rafinha"
},
{
"label": "F.Bernardeschi"
}
]
}
],
"dataset": [
{
"seriesname": "2016",
"data": [
{
"value": "25"
},
{
"value": "18"
},
{
"value": "17"
},
{
"value": "15"
},
{
"value": "16"
},
{
"value": "14"
},
{
"value": "13"
},
{
"value": "11"
},
{
"value": "9"
},
{
"value": "10"
},
{
"value": "10"
},
{
"value": "7"
},
{
"value": "8"
},
{
"value": "8"
},
{
"value": "7"
},
{
"value": "6"
},
{
"value": "6"
},
{
"value": "3"
}
]
},
{
"seriesname": "2017",
"data": [
{
"value": "5"
},
{
"value": "8"
},
{
"value": "6"
},
{
"value": "3"
},
{
"value": "2"
},
{
"value": "3"
},
{
"value": "3"
},
{
"value": "4"
},
{
"value": "5"
},
{
"value": "4"
},
{
"value": "3"
},
{
"value": "4"
},
{
"value": "2"
},
{
"value": "3"
},
{
"value": "3"
},
{
"value": "4"
},
{
"value": "2"
},
{
"value": "4"
}
]
}
],
"annotations": {
"groups": [
{
"id": "infobar",
"items": [
{
"id": "1",
"type": "line",
"x": "$dataset.1.set.1.endx+10",
"y": "$dataset.1.set.1.y",
"tox": "$dataset.1.set.1.endx+50",
"toy": "$dataset.1.set.1.y",
"color": "#2F9AC4",
"dashed": "0",
"thickness": "1"
},
{
"id": "2",
"type": "line",
"x": "$dataset.1.set.1.endx+50",
"y": "$dataset.1.set.1.y",
"tox": "$dataset.1.set.1.endx+50",
"toy": "$dataset.0.set.1.y+50",
"color": "#2F9AC4",
"dashed": "0",
"thickness": "1"
},
{
"id": "3",
"type": "line",
"x": "$dataset.1.set.17.endx+5",
"y": "$dataset.1.set.17.y",
"tox": "$dataset.1.set.17.endx+200",
"toy": "$dataset.0.set.17.y",
"color": "#2F9AC4",
"dashed": "0",
"thickness": "1"
},
{
"id": "4",
"type": "line",
"x": "$dataset.1.set.17.endx+200",
"y": "$dataset.0.set.17.y",
"tox": "$dataset.1.set.17.endx+200",
"toy": "$dataset.0.set.17.y-40",
"color": "#2F9AC4",
"dashed": "0",
"thickness": "1"
},
{
"id": "shape",
"type": "polygon",
"startangle": "180",
"sides": "3",
"radius": "6",
"color": "#2F9AC4",
"x": "$dataset.1.set.17.endx+10",
"y": "$dataset.1.set.17.y"
},
{
"id": "shape",
"type": "polygon",
"startangle": "180",
"sides": "3",
"radius": "6",
"color": "2F9AC4",
"x": "$dataset.1.set.1.endx+10",
"y": "$dataset.1.set.1.y"
},
{
"id": "label1",
"align": "RiGHT",
"type": "text",
"text": "Messi added{br}roughly 7 Goals from{br}his shot quality",
"fillcolor": "#2F9AC4",
"rotate": "90",
"x": "$dataset.1.set.1.endx+65",
"y": "$dataset.0.set.5.y"
},
{
"id": "label2",
"align": "CENTER",
"type": "text",
"text": "Bernardeschi{br}more than doubled{br}his chance quality{br}through shooting",
"fillcolor": "#2F9AC4",
"rotate": "90",
"x": "$dataset.1.set.17.endx+200",
"y": "$dataset.0.set.13.y"
}
]
}
]
}
}""")
return render(request, 'index.html', {'output': chartObj.render()})
