chartsgoogle-visualizationbubble-charticcube-reporting
How to display Formatted value in bubble chart using iccube reporting v6?
Using V6 reporting, I created a bubble chart with simple percentage values. I'm able to format the axis values using it's "format" property. But in the Bubble tooltip, the value is still raw value... Is there a way to show the Formatted value instead of the value ?
Here is the code of the report based on "Sales" schema to reproduce easily:
{
"classID": "ic3.ReportGuts",
"guts_": {
"schemaName": "Sales",
"cubeName": "Sales",
"themeId": "ic3-elegant",
"ic3Rev": 4015,
"layout": {
"classID": "ic3.FixedLayout",
"guts_": {
"grid": 10,
"boxes": [
{
"classID": "ic3.FixedLayoutBox",
"guts_": {
"behaviour": "Fixed Box",
"position": {
"top": 10,
"left": 10,
"width": 930,
"height": 460
},
"advanced": {
"zIndex": 15
},
"header": "@{bubbleTitle}",
"boxStyle": "zoneRequired",
"ic3_uid": "ic3-5",
"widgetAdapterUid": "w1"
}
}
]
}
},
"widgetMgr": {
"classID": "ic3.WidgetAdapterContainerMgr",
"guts_": {
"items": [
{
"classID": "ic3.GoogleChartsAdapter",
"guts_": {
"configState": 3,
"navigationGuts": {
"classID": "ic3.NavigationStrategy",
"guts_": {
"menuVisibility": {
"back": false,
"reset": false
},
"maxAxisMemberCount": 25
}
},
"dataRenderOptions": {
"chartType": {
"label": "Bubble",
"id": "bubble-google-chart",
"proto": {
"options": {
"width": "100%",
"height": "100%",
"bubble": {
"textStyle": {
"fontSize": 10
}
}
},
"chartType": "BubbleChart"
}
},
"axesConfiguration": null,
"graphsConfiguration": null,
"advanced": {
"hAxis": {
"format": "\"##.##%\""
},
"vAxis": {
"format": null
},
"legend": {
"position": "none"
},
"colorAxis": {
"colors": [
"#1F77B4",
"#FF7F0E",
"#2CA02C",
"#D62728",
"#9467BD",
"#8C564B",
"#E377C2",
"#7F7F7F",
"#BCBD22",
"#17BECF"
],
"legend": {
"position": "none"
}
},
"explorer": {},
"sizeAxis": {
"minSize": 7
},
"tooltip": {
"format": null
}
}
},
"ic3_name": "widget-12",
"ic3_eventMapper": {
"classID": "ic3.EventWidgetMapper",
"guts_": {
"__ic3_widgetEventsDescription": {}
}
},
"navigationOptions": {
"menuVisibility": {
"back": false,
"reset": false
}
},
"hooks": {
"beforeData": "/**\n * Return data object\n */\nfunction(context, data, $box) {\n //bubble on data received\n debugger\n\treturn data;\n}",
"beforeRender": "/**\n * Return patched \n * options object.\n */\nfunction(context, options) {\n //bubble before render\n\treturn options;\n}"
},
"ic3_uid": "w1",
"ic3_mdxBuilderUid": "m1"
}
}
]
}
},
"constantMgr": {
"classID": "ic3.ConstantsMgr",
"guts_": {}
},
"cssMgr": {
"classID": "ic3.CssMgr",
"guts_": {}
},
"javascriptMgr": {
"classID": "ic3.ReportJavascriptMgr",
"guts_": {
"js": "/** \n * A function called each time an event is generated. \n * \n * @param context the same object is passed between consumeEvent calls. \n * Can be used to store information. \n * { \n * $report : jQuery context of the report container \n * fireEvent : a function( name, value ) triggering an event \n * } \n * \n * @param event the event information \n * \n { \n * name : as specified in the 'Events' tab \n * value : (optional) actual event value \n * type : (optional) e.g., ic3selection \n * } \n * \n * Check the 'Report Event Names' menu for the list of available events. \n */ \n/* \nfunction consumeEvent( context, event ) { \n if (event.name == 'ic3-report-init') { \n // add your code here \n } \n} \n*/ \n"
}
},
"calcMeasureMgr": {
"classID": "ic3.CalcMeasureMgr",
"guts_": {
"measures": []
}
},
"mdxQueriesMgr": {
"classID": "ic3.MdxQueriesContainerMgr",
"guts_": {
"mdxQueries": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": [
{
"classID": "ic3.QueryBuilderWidget",
"guts_": {
"mode": "MDX",
"options": {
"WIZARD": {
"cubeName": null,
"measures": [],
"rows": [],
"rowsNonEmpty": false,
"columns": [],
"columnsNonEmpty": false,
"filter": []
},
"MDX": {
"statement": "with\nmember [PDM Sejours] as 0.5072 ,format_string=\"percent\"\nmember [Evo PDM] as 0.00291 ,format_string=\"percent\"\nmember [Activité Etablissements] as 8113 ,format_string=\"#,###\"\nselect \n NON EMPTY {[Measures].[PDM Sejours], [Measures].[Evo PDM] , [Measures].[Activité Etablissements]} ON COLUMNS, \nNON EMPTY {[Product].[Product].[Company].[icCube]} on ROWS \nfrom [Sales]\n"
}
},
"ic3_name": "mdx Query-0",
"ic3_uid": "m1",
"schemaSettings": {}
}
}
]
}
},
"mdxFilter": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": []
}
},
"actionBuilders": {
"classID": "ic3.BaseContainerMgr",
"guts_": {
"items": []
}
}
}
},
"customLocalizations": []
}
}
Solution
formatting the data for the chart, should flow through to the tooltip
not familiar with iccube, however, when loading the data, you can use google's object notation
to provide both the value (v:) and the formatted value (f:)
for example, instead of loading the following data row...
['Sub-Saharan Africa', 80, 1.023],
use object notation...
[{v: 'Sub-Saharan Africa'}, {v: 80, f: 'test 80'}, {v: 1.023, f: 'test 1.023000000'}],
the tooltip should display the value for f:
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'ID', type: 'string'},
{label: 'X', type: 'number'},
{label: 'Y', type: 'number'}
],
rows: [
{c:[{v: 'Sub-Saharan Africa'}, {v: 80, f: 'test 80'}, {v: 1.023, f: 'test 1.023000000'}]},
{c:[{v: 'Arab States'}, {v: 80, f: 'test 80'}, {v: 1.022, f: 'test 1.0220000000'}]},
{c:[{v: 'East Asia and the Pacific'}, {v: 80, f: 'test 80'}, {v: 1.21, f: 'test 1.2100000000'}]}
]
});
var container = document.getElementById('chart_div');
var chart = new google.visualization.BubbleChart(container);
chart.draw(data);
},
packages: ['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>- Sort program not working, not sure why
- Fast & accurate atan/arctan approximation algorithm
- What's the difference between strtok_r and strtok_s in C?
- How memory address for pointer to arrays is same as an element in 2D array?
- Which is the best way to suppress "unused variable" warning
- How to use ellipsis in c's case statement?
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- Fast ceiling of an integer division in C / C++
- Is there an invalid pthread_t id?
- How to Implement Universal Setter/Getter Functions for Interrupt-Driven Variables in Embedded C?
- How does SIMD (avx) processing work? for example, if I want 10 32 bit floats how do i fit in a 256 bit avx vector?
- FDCAN problems on STM32G4
- How does the call macro enable mutual recursion between functions f and g in this Hanoi Tower implementation?
- Running test on Rocket core CPU - global variable initialized to 0 is unsuccessful, output wrong value instead
- Interacting with C arrays without knowing the size
- Combination of two strings
- Avoiding strcpy overflow destination warning
- carriage return by fgets
- How to use special characters in C?
- Why does 1.0/100.0 == 0.1/10.0 give True?
- Is it correct to compare pointers in C?
- Force free() to return malloc memory back to OS
- How can I print to standard error in C with 'printf'?
- What is the standard behavior of fread in C on Windows?
- How is strtok removing lines it shouldn't have access to?
- Using array as smart point in C
- Assigning string to malloced 2d char array not working as intended
- How to refactor repetition inside a Makefile?
- Why does an empty preprocessor command still evaluate to something?
- How to implement variable sized array within C struct