So I have the following chart :
As you can See I have little images(annotations) in the chart and am using the built-in function to export the chart to PDF(As I cant find code to allow me to do it via the controller or via iTextSharp) - This works great though, as it gives a number of choices to export to(PDF,PNG,JPG etc.) - However, the little images as you see are not displayed when exported to PDF for example.
Is there a property that needs to be set such as the one to allow the exporting to be done : exportenabled='1' ?
Thank in advance.
#AxleWack
Try this code -
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=82"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=82"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"exportEnabled": "1",
"canvasBgAlpha": "50",
"bgImageVAlign": "middle",
"bgImageHAlign": "middle",
"bgImageScale": "120",
"bgImage": "http://localhost:8888/Sample/fc.png",
"theme": "fint"
},
"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>
</head>
<body>
<center><div id="chartContainer">FusionCharts XT will load here!</div></center>
</body>
</html>
Put this HTML in the root directory of your localhost under folder name Sample (i.e., rootDir -> Sample -> index.html).
Here, the image name is 'fc.png'. Put an image in the Sample folder (i.e., rootDir -> Sample -> fc.png).
Make sure if you use localhost in the domain name to access the HTML page through browser (eg. http://localhost:8888/Sample/index.html), give value for bgImage attribute as http://localhost:8888/Sample/fc.png, else if you use IP address in domain name to access the HTML page through browser, for eg. http://192.168.0.160:8888/Sample/index.html, the value for bgImage atrribute will be like - http://192.168.0.160:8888/Sample/fc.png.
The domain name should be same for both the image and html.
The above is the solution for local setup. You may also use FusionCharts exporter handlers for various technologies like ASP .Net, php, Ruby On Rails, Java EE.
Now try exporting the chart, it will be exported with the images.
Thank You! Hope I have been able to explain you properly. :)
Related
I am trying to develope a simple messagaging extension app for Microsoft Teams. With the use of Task Modules I can load a simple Adative Card. Works as designed. The only problem I have with it, is that my Adaptive Card has a color issue withing Microsoft Teams in Dark Mode.
Take a look at the image below. 1 shows a very simple Adaptive Card designed via https://adaptivecards.io/designer/ (preview mode). 2 the very same Adaptive Card but now an actual snippet from Microsoft Teams. As you can see the card below has some color issues which makes the input hard to see.
Here is the code I've used:
public async handleTeamsMessagingExtensionFetchTask(
context: TurnContext,
action: any
): Promise<any> {
const adaptiveCard = CardFactory.adaptiveCard({
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${title}"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
});
return {
task: {
type: 'continue',
value: {
card: adaptiveCard,
height: 535,
title: '${title}',
url: null,
width: 500
}
}
};
}
There's not much that can be done about the input box itself in this case, but maybe try changing the colour of the label above it, something like this (I've changed some of your property names as well, as they were invalid case - things like "medium" instead of "Medium":
"size": "medium",
"weight": "bolder",
"text": "${title}",
"color": "good"
Color allows the following values:
"default"
"dark"
"light"
"accent"
"good"
"warning"
"attention"
If you nest your Text input into a Container, you are able change the Container's style to provide a coloured background upon which the Text input sits.
It's not necessarily right for your use case, but it could be a workaround of interest
Container Style colour options
{
"type": "Container",
"style": "emphasis",
"bleed": true,
"items": [
{
"type": "TextBlock",
"text": "Request New Ticket",
"wrap": true,
"fontType": "Default",
"style": "heading",
"size": "Large",
"color": "Good",
"weight": "Bolder",
"horizontalAlignment": "Center"
}
]
}
I'm trying to plot some data, that data is in a pandas dataframe cdfs:
alt.Chart(cdfs).mark_line().encode(
x = alt.X('latency:Q', scale=alt.Scale(type='log'), axis=alt.Axis(format="", title='Response_time (ms)')),
y = alt.Y('percentile:Q', axis=alt.Axis(format="", title='Cumulative Fraction')),
color='write_size:N',
)
The issue is that when viewing the source of the resultant plot there is just a url to a json file. That json file can't be found and hence the plots are appearing to be blank (no data).
{
"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}},
"data": {
"url": "altair-data-78b044f23db74f7d4408fba9f31b9ea9.json",
"format": {"type": "json"}
},
"mark": "line",
"encoding": {
"color": {"type": "nominal", "field": "write_size"},
"x": {
"type": "quantitative",
"axis": {"format": "", "title": "Response_time (ms)"},
"field": "latency",
"scale": {"type": "log"}
},
"y": {
"type": "quantitative",
"axis": {"format": "", "title": "Cumulative Fraction"},
"field": "percentile"
}
},
"$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json"
}
This code was previously working (displaying the data on the chart) however I restarted the jupyterlab server its running on between now and then.
Hence I'm wondering why the data is getting embedded via a url rather than directly all of a sudden?
At some point in your session, you must have run
alt.data_transformers.enable('json')
If you want to restore the default data transformer which embeds data directly into the chart, run
alt.data_transformers.enable('default')
i want to display a Azure GUI element in solution offer only if the deployment is being done in certain region. I know there is a "visible" field for createUIdefinition elements. But Can i use location function with it.
I tried below, it seems to not work though. what am i missing:
{
"name": "MyDropdown",
"type": "Microsoft.Common.DropDown",
"label": "Only show in EastUS",
"defaultValue": "blah",
"toolTip": "select from below",
"constraints": {
"allowedValues": [
{
"label": "yes",
"value": "yes"
},
{
"label": "no",
"value": "no"
},
]
},
"visible": "[ equals(location(), 'eastus') ]"
}
Looks like above example not working for createUIdefinition's basics section. Though , it works for steps section.
I have a HTML table that I am trying to post to Slack via webhook.
Is there a way to post the HTML table to Slack?
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
I have opened a ticket to Slack support asking if Slack's Incoming Webhook message supports table of any form (HTML or Markdown).
The official answer is that Slack messages do not support tables.
They suggest to generate a table and post it as an image.
They also said that they will add it to their backlog.
No, I don't believe there's any way to draw a table in a Slack message.
Here are other available options for formatting Slack messages: https://api.slack.com/docs/formatting.
You can now do simple two column tables in slack using the "fields" layout block.
You can do two column table:
[
{
"type": "section",
"fields": [
{
"type": "mrkdwn",
"text": "*Name*"
},
{
"type": "mrkdwn",
"text": "*Email*"
},
{
"type": "plain_text",
"text": "Jeff Henderson",
"emoji": true
},
{
"type": "mrkdwn",
"text": "jh#geemail.com"
},
{
"type": "plain_text",
"text": "Anne Polin",
"emoji": true
},
{
"type": "mrkdwn",
"text": "ap#geemail.com"
}
]
}
]
Giving you:
Or go field style:
[
{
"type": "section",
"fields": [
{
"type": "plain_text",
"text": "Name",
"emoji": true
},
{
"type": "mrkdwn",
"text": "*Jeff Henderson*"
},
{
"type": "plain_text",
"text": "Email",
"emoji": true
},
{
"type": "mrkdwn",
"text": "jh#geemail.com"
},
{
"type": "plain_text",
"text": "Mobile Phone",
"emoji": true
},
{
"type": "mrkdwn",
"text": "0451000000"
},
{
"type": "plain_text",
"text": "Work Phone",
"emoji": true
},
{
"type": "mrkdwn",
"text": "94550000"
}
]
}
]
Will yield:
Not a html table specifically, but you may use a package like console.table to print your table's data into a string variable. Then use triple backticks to add your table in your slack message's text field. For example:
const cTable = require('console.table');
const table = cTable.getTable([
{
name: 'foo',
age: 10
}, {
name: 'bar',
age: 20
}
]);
and then as part of your slack message's attachment:
const attachmentList = {
"title": "YOUR TITLE",
"text": 'HERE IS YOUR TABLE: : \n ```'+table+'```',
}
Unfortunately, it seems tables are a Markdown standard that Slack does not currently support.
A crude workaround would be to use box-drawing characters within a literal block of text (preceded and followed by three backticks/inverted commas, i.e. ```, on separate lines).
I occasionally use tablesgenerator.com to generate them on the fly.
╔══════╤══════╤══════════╗
║ Dog │ Cat │ Bird ║
╠══════╪══════╪══════════╣
║ Woof │ Meow │ Tweet ║
╟──────┼──────┼──────────╢
║ Fur │ Fur │ Feathers ║
╚══════╧══════╧══════════╝
They're certainly not pretty, but unlike the pasted images that Slack apparently recommends, their content can be searched, and, at least for some of my colleagues, work somewhat with assistive technology.
Slack API limits blocks to only 10 elements but what you can do is to add one long text with breaks to make it look like a table. Here is an example
[
{
"type": "section",
"text": {
"text": "Conference Standings:",
"type": "mrkdwn"
},
"fields": [
{
"type": "mrkdwn",
"text": "*Team*"
},
{
"type": "mrkdwn",
"text": "*W-L*"
},
{
"type": "plain_text",
"text": "Team1\nTeam2\nTeam3\nTeam4\nTeam5\n"
},
{
"type": "plain_text",
"text": "1\n2\n3\n4\n5\n"
}
]
}
]
Here is the result
This is sort of a mixture of different answers given here. I can also only suggest sending a formatted string as it supports more than two columns.
However, the thing is that Slack does not give every character an equal amount of space, as code would usually do. This means that the rows won't be aligned properly. Therefore, I suggest using code blocks, which require ticks (```).
Python example using formatted strings:
monthly_numbers_str = f"```"
monthly_numbers_str += f"{"Month".ljust(7)}{"Users".ljust(7)}\n"
monthly_numbers_str += f"{"Jan".ljust(7)}{"15".ljust(7)}\n"
monthly_numbers_str += f"{"Feb".ljust(7)}{"19".ljust(7)}\n"
monthly_numbers_str += f"{"Mar".ljust(7)}{"30".ljust(7)}\n"
monthly_numbers_str += f"```"
Output (as code):
Month Users
Jan 15
Feb 19
Mar 30
I started using old school Console app tables in my slackbot.
See examples here: https://github.com/Robert-McGinley/TableParser
Just send the raw text inside the ``` 3 tick marks to the SlackAPI
A similar answer using the code block, in case you wish to use hyperlinks in markdown:
first_row = ["asdasfasf", "12341433124"]
second_row = ["asda", "123124"]
mes = "--------------\n"
for fr in first_row:
mes += ("[`"+fr.center(20,".")+"`](https://www.google.com)")
mes += "\n\n"
for sr in second_row:
mes += ("[`"+sr.center(20,".")+"`](https://www.google.com)")
mes+="\n---------------"
data = {
"title": "Example message",
"message": mes,
}
headers = {'Content-type': 'application/json', 'Accept': 'text/plain'}
r = requests.post(uri, data=json.dumps(data), headers=headers)
The output shall look more or less like this
I am attempting to load fusion charts into an xPage. Following this tutorial http://docs.fusioncharts.com/tutorial-getting-started-your-first-charts-building-your-first-chart.html
The chart is not loading and is showing chart loading. At the bottom of the page I get a few error messages in the js console.
Here is the code I am using for the page. (url changed from actual url)
<xp:this.resources>
<xp:script src="https://URL/Field/fplan.nsf/fusioncharts/js/fusioncharts.js"
clientSide="true">
</xp:script>
<xp:script
src="https://URL/Field/fplan.nsf/fusioncharts/js/themes/fusioncharts.theme.fint.js"
clientSide="true">
</xp:script>
</xp:this.resources>
<xp:scriptBlock type="text/javascript">
<xp:this.value><![CDATA[
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"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();
})]]></xp:this.value>
</xp:scriptBlock>
<div id="chartContainer">FusionCharts XT will load here!</div>
Uncaught TypeError: Cannot set property 'desc' of undefined fusioncharts.js:436(anonymous function) fusioncharts.js:436v.core fusioncharts.js:20v.registrars.module fusioncharts.js:19v.extend.register fusioncharts.js:22(anonymous function) fusioncharts.js:236
Uncaught TypeError: Cannot read property 'fn' of undefined fusioncharts.js:437(anonymous function) fusioncharts.js:437v.core fusioncharts.js:20v.registrars.module fusioncharts.js:19v.extend.register fusioncharts.js:22(anonymous function) fusioncharts.js:437
Uncaught TypeError: undefined is not a function fusioncharts.js:129(anonymous function) fusioncharts.js:129c fusioncharts.js:32H fusioncharts.js:32b.triggerEvent fusioncharts.js:36d.raiseEvent fusioncharts.js:36d.extend.render fusioncharts.js:70(anonymous function) chart.xsp:88(anonymous function)
If I drop an HTML file into the NSF as a file in the webcontent folder I am able to load the chart so at least I know the fusionchart files are sound.
Any assistance in how to implement this would be appreciated.
I guess I would start by moving the chart initialization code into a client side script library and adding that as a resource to see if that makes a difference.
Try loading the script in the following way:
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value=
"https://URL/Field/fplan.nsf/fusioncharts/js/fusioncharts.js" />
</xp:this.attributes>
</xp:headTag>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value=
"https://URL/Field/fplan.nsf/fusioncharts/js/themes/fusioncharts.theme.fint.js" />
</xp:this.attributes>
</xp:headTag>
</xp:this.resources>