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();
});
Related
How can one change mark properties (not field encodings or values) with vega-lite selections ?
For example, to highlight selected bars with a layer mark {type: bar, fill: none, stroke, black}.
I think I found an answer in the interactive bar select highlight example
It may not be directly possible to change mark properties via selection but one can conditionally set fillOpacity and strockWidth encodings channel with a selection.
Releveant piece of code is :
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"test": {
"and": [
{"selection": "select"},
"length(data(\"select_store\"))"
]
},
"value": 2
},
{"selection": "highlight", "value": 1}
],
"value": 0
}
We are trying to add new Alternate Id to a current Stock Item, when pushing the service body we receive the point back without any error. However, it does not add the additional Cross Reference Item.
{
"InventoryID": {
"value": "APR000195XXX"
},
"CrossReferences": [
{
"AlternateID": {
"value": "19405"
},
"AlternateType": {
"value": "Global"
},
"Description": {
"value": "XXXPUL0001"
},
"Subitem": {
"value": "000000"
},
"VendorOrCustomer": {},
"custom": {},
"files": []
}
]
}
the issue came down to screen rights on roles that were not set
If you want add line Cross-Reference to existing stock Item your request should work.
Just check that you use correct type - "PUT" and correct endpoint:
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();
});
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();
});