Is it possible to do the formatting of negative Y-Axis in fusioncharts as shown in attached image?
Fusionchart Sample Image
Regards,
Tud.
Yes of course,
You can use the labelFontColor propertie to set the label's data color.
The problem is that was introduced since the 3.5.0 version (Source).
Here is a JSFIDDLE example.
FusionCharts.ready(function () {
var topStores = new FusionCharts({
type: 'bar2d',
renderAt: 'chart-container',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Positive/negative label data costumising",
"yAxisName": "Sample",
},
"data": [
{
"labelfontcolor": "FF0000",
"label": "This is a negative value",
"value": "-200"
},
{
"label": "A positive value",
"value": "200"
},
{
"label": "Another positive value",
"value": "100"
}
]
}
})
.render();
});
Related
What I want to do is define a schema in my openAPI spec and have the schema be a return so that the request can send an array of schemas back that are predefined. So, for example, here are the schemas:
"components" : {
"schemas": {
"weight_kg": {
"type": "number",
"description": "The weight of the animal in kilograms (kg)",
"minimum": 0,
"maximum": 11000,
"example": 3.9
},
"length_m": {
"type": "number",
"description": "The length of the animal in meters (m)",
"minimum": 0,
"maximum": 20,
"example": 0.78
},
"height_m": {
"type": "number",
"description": "The height of the animal in meters (m)",
"minimum": 0,
"maximum": 6,
"example": 0.25
}
}
}
Now trying to use those schemas:
"paths": {
"/required_info": {
"get": {
"description": "Request required animal info to operate",
"responses": {
"200": {
"description": "The required animal info to operate",
"content": {
"application/json": {
"schema": {
"type": "array",
"description": "Array of required animal info field schemas to operate",
"items": {
"type": "schema",
"description": "A schema to collect information against",
"enum": [
"#/components/schemas/weight_kg",
"#/components/schemas/length_m",
"#/components/schemas/height_m"
},
"example": [
"length_m": {
"type": "number",
"description": "The length of the animal in meters (m)",
"minimum": 0,
"maximum": 20,
"example": 0.78
},
"height_m": {
"type": "number",
"description": "The height of the animal in meters (m)",
"minimum": 0,
"maximum": 6,
"example": 0.25
}
]
}
}
}
}
}
}
}
}
So of course my openAPI above is wrong, but I'm just trying to show what I wish was possible but I'm pretty sure isn't. The example is what I want to come back as a response. Any ideas on how to address this kind of functionality are appreciated. I've searched a pretty good amount but I can't seem to find a solution.
The example is what I want to come back as a response
The simplest thing you can do is replacing "example" with "const" in your schema. By doing that, you define a schema which matches exactly 1 value. You can (but don't have to) also delete the "type" and "items" from your schema, since the "const" explains everything on its own.
I am trying to pass a dynamic input to the fusion chart on a JSP page. I am actually trying to render a bar chart for which I am not sure about the number of columns. In the below snippet, in the data part, I need to pass the number of variables dynamically. Is it possible? Can someone help
data: [
{
"label": "Inprogress",
"value": "<%=cummulativeInprogress%>"
},
{
"label": "Completed",
"value": "<%=cummulativeCompleted%>"
},
{
"label": "Aborted",
"value": "<%=cummulativeAborted%>"
},
{
"label": "Failed",
"value": "<%=cummulativeFailed%>"
},
{
"label": "Cancelled",
"value": "<%=cummulativeCancelled%>"
},
{
"label": "Amending",
"value": "<%=cummulativeAmending%>"
}
]
}
}).render();
})
You need to pass a json object to the fusioncharts engine to render the chart. Then in case you need to change the data plot, you can make another ajax call to get a new json object and refresh the chart display.
Anyone knows how to adjust the y axis in a line chart in scriptcase?
The image below shows the problem:
Instead of starting at 0 and finishing at 1k, I would like Scriptcase to auto adjust the Y axis scale - perhaps going from 840 to 1k.
I have looked for this option but can not find any answer to it.
thanks,
You can explicitly set y-axis min and max value using yAxisMinValue and yAxisMaxValue attribute at the chart object level for example :
"chart": {
"yAxisMinValue":"840",
"yAxisMaxValue":"1000"
}
For details please check this snippet -
FusionCharts.ready(function() {
var visitChart = new FusionCharts({
type: 'line',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"yAxisMinValue":"840",
"yAxisMaxValue":"1000"
},
"data": [{
"label": "Mon",
"value": "899"
},
{
"label": "Tue",
"value": "952"
},
{
"label": "Wed",
"value": "963"
},
{
"label": "Thu",
"value": "874"
},
{
"label": "Fri",
"value": "862"
},
{
"label": "Sat",
"value": "906"
},
{
"label": "Sun",
"value": "999"
}
]
}
});
visitChart.render();
});
I am new to SAPUI5, I am trying to get multiple dimensions in Bar chart using VizFrame. I need chart to be displayed like the below image:
Please check my code.
I think you are looking for Bar graph to show the Amount vs Days.
Here is the working link.
I have updated _setupChart methods as below.
_setupChart: function() {
var oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setModel(new JSONModel('./data.json'));
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Days",
value: "{Days}"
}],
measures: [{
name: "Amount",
value: "{Amount}"
}],
data: {
path: "/dueDays"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setVizType('bar');
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "valueAxis",
"type": "Measure",
"values": ["Amount"]
});
var feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "categoryAxis",
"type": "Dimension",
"values": ["Days"]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
}
And also i have updated the data json as below
{
"dueDays": [{
"Days": "Current",
"Amount": "44334.00"
}, {
"Days": "1 to 30",
"Amount": "53454.00"
}, {
"Days": "31 to 60",
"Amount": "34443.65"
}, {
"Days": "61 to 90",
"Amount": "65554.43"
}, {
"Days": "91 to 120",
"Amount": "43524.00"
},{
"Days": "121 to 150",
"Amount": "54554.00"
}, {
"Days": "151 to 180",
"Amount": "43324.00"
}, {
"Days": "Above 180",
"Amount": "54355"
}]
}
Thanks for your work & time !! .. I have made it using setVizProperties > plotArea > dataPointStyle > rules .. This is the updated link.
I am using Fusion Chart version 3.1.1 and using column 2d graph in IOS which is working fine.
I am also using link event in this like given below
<set label="1" value="14000" color="bbdaf3" link="JavaScript:myJS1('+Salary+')"/>\n\
So whenever I click on this particular bar myJS1 function is getting called and give the result as expected.
When i click on particular bar , it shows its associated value which 14000 on it which default chart (Hover) functionality . Instead of Can i change the particular bar color when i click on it for highlighting it.
It is possible to change the color of particular bar while clicking on it ( with latest version of FusionCharts ). You have to modify the underlying raphael object. An example can be found in this fiddle. http://jsfiddle.net/subramaniashiva/KmTZ9/6/ Let me know if this helps.
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
id: 'myChart',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue ",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"valueHoverAlpha": "100",
"plotHoverEffect": "0",
"theme": "fint"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
},
events: {
"dataPlotClick": function (evtObj, argObj) {
// Modifying the underlying Raphael object
var i, plotItems = evtObj.sender.jsVars.hcObj.elements.plots[0].items,
plotLength = plotItems.length;
for (i = 0; i < plotLength; i++) {
plotItems[i].graphic.attr("fill-opacity", 0.2);
}
plotItems[argObj.dataIndex].graphic.attr("fill-opacity", 1);
}
}
}).render();
});