Google Column Graph Single Date and value showing as multiple adjucent bars - charts

Data Table structure is as follows
{
"cols": [
{
"id": "",
"label": "Date",
"pattern": "",
"type": "date"
},
{
"id": "Col1",
"label": "Col1 Label",
"pattern": "",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Date(2017, 5, 27)"
},
{
"v": 213
}
]
}
]
}
H Axis options
hAxis: {
slantedText: true, slantedTextAngle: 35,
titleTextStyle: {bold: false, fontSize: 11, color: '#610B38'},
textStyle: {
bold: true, fontSize: 8, color: '#4d4d4d'
},
maxAlternation: 1,
showTextEvery: 1,
viewWindowMode : 'maximized',
gridlines:
{
count: 31
},
bar: { groupWidth: 40 }
}
But in the column graph it is displaying multiple adjacent bars looks like time instead of a single date
This issue happening only for single date.
I want to display the column chart as single bar instead of big rectangle.
Any feedback appreciated

recommend setting the min / max values on the viewWindow explicitly
keeping within a day should prevent "column overflow"
viewWindow: {
min: new Date(dateRange.min.getTime() - oneDay),
max: new Date(dateRange.max.getTime() + oneDay)
}
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).on('resize', drawChart);
},
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable({
"cols": [
{
"id": "",
"label": "Date",
"pattern": "",
"type": "date"
},
{
"id": "Col1",
"label": "Col1 Label",
"pattern": "",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Date(2017, 5, 27)"
},
{
"v": 213
}
]
}
]
});
var oneDay = (1000 * 60 * 60 * 24);
var dateRange = data.getColumnRange(0);
var chart = new google.visualization.ColumnChart($('.chart')[0]);
chart.draw(data, {
hAxis: {
slantedText: true,
slantedTextAngle: 35,
textStyle: {
bold: true,
fontSize: 8,
color: '#4d4d4d'
},
viewWindow: {
min: new Date(dateRange.min.getTime() - oneDay),
max: new Date(dateRange.max.getTime() + oneDay)
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart"></div>
not much you can do for the actual size of the column
the release notes from February, 23 2016 mention...
Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.
but none have ever worked for me when only one row of data...

Related

Echarts 4 graph plot: specify symbol per category

I am trying to create a graph plot in Echarts 4, where each node belongs to one of two categories: https://codepen.io/autarkie/pen/LqqZjM:
var nodes = [{
"id": 1,
"category": 1
}, {
"id": 2,
"category": 0
}, {
"id": 3,
"category": 1
}, {
"id": 4,
"category": 0
}];
var links = [{
"source": "3",
"target": "1"
}, {
"source": "3",
"target": "2"
}, {
"source": "1",
"target": "2"
}, {
"source": "2",
"target": "4"
}];
var myChart = echarts.init(document.getElementById('chart'));
var option = {
backgroundColor: new echarts.graphic.RadialGradient(0.4, 0.4, 0.7, [{
offset: 0,
color: '#162436'
}, {
offset: 1,
color: '#000'
}]),
legend: {
data: ["Type 1", "Type 2"],
textStyle: {
color: '#fff'
},
icon: 'circle',
type: 'scroll',
orient: 'vertical',
left: 10,
top: 20,
bottom: 20,
itemWidth: 10,
itemHeight: 10
},
animationDurationUpdate: 300,
animationEasingUpdate: 'quinticInOut',
series: [{
type: 'graph',
layout: 'force',
// symbol: 'rect',
//symbolSize: 10,
lineStyle: {
normal: {
curveness: 0.1
}
},
roam: true,
focusNodeAdjacency: true,
legendHoverLink: true,
draggable: true,
force: {
repulsion: 30,
gravity: 0.03,
edgeLength: 50,
layoutAnimation: true
},
data: nodes,
links: links,
categories: [{
name: 'Type 1',
symbol: 'diamond', // !!! DOES NOT WORK !!!
symbolSize: 30, // !!! DOES NOT WORK !!!
itemStyle: {
color: '#79d2a6'
}
},
{
name: 'Type 2',
symbol: "rect", // DOES NOT WORK
symbolSize: 20, // DOES NOT WORK
itemStyle: {
color: '#ff9900'
}
}
],
}]
};
myChart.setOption(option);
Each category should have its own symbol. I know it is possible to specify the symbol for each node separately, like so:
var node_shaped = [{
"id": 1,
"symbol": "rect",
"category": 1
}]
but it this is quite inelegant. Echarts documentation (https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.categories.symbol) specifies the option to include a symbol per category, like in the code above. However, that option has no effect whatsoever on the node shapes. Instead, the default circle shape is used. It is possible to change category color using a similar category-wide option, so I am at loss as to why the shape specification doesn't work. Thanks for taking a look.

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": []
}
}
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>

how to code sap.m.sample.ListGrouping by using js view in openui5

hi i need List grouping control by using js view.but openui5 provides code by using xml view.
https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.ListGrouping/preview
how to convert this code into js view and how to make ListGrouping able to selection for both element level and group level and change this as dropdown box
List.view.xml
<mvc:View
controllerName="sap.m.sample.ListGrouping.List"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<List
items="{
path: '/ProductCollection',
sorter: {
path: 'SupplierName',
descending: false,
group: true
},
groupHeaderFactory: '.getGroupHeader'
}"
headerText="Products" >
<StandardListItem
title="{Name}"
description="{ProductId}"
icon="{ProductPicUrl}"
iconDensityAware="false"
iconInset="false" />
</List>
</mvc:View>
List.controller.js
sap.ui.define([
'jquery.sap.global',
'sap/m/GroupHeaderListItem',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, GroupHeaderListItem, Controller, JSONModel) {
"use strict";
var ListController = Controller.extend("sap.m.sample.ListGrouping.List", {
onInit : function (evt) {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
getGroupHeader: function (oGroup){
return new GroupHeaderListItem( {
title: oGroup.key,
upperCase: false
} );
}
});
return ListController;
});
how to write the same code by using js view
I have tried like as follows, but i am getting Error: Missing template or factory function for aggregation items of Element sap.m.List#__list0 !
List.view.js
sap.ui.jsview("oui5mvc.List", {
getControllerName : function() {
return "oui5mvc.List";
},
createContent : function(oController) {
odbbshiftGlobalId = this.getId();
var oMyFlexbox = new sap.m.FlexBox({
items: [
oList = new sap.m.List({
width: '500px',
group: true,
groupHeaderFactory: '.getGroupHeader',
items: [
]
}),
]
});
oMyFlexbox.placeAt(this.getId()).addStyleClass("tes");
}
});
List.controller.js
sap.ui.controller("oui5mvc.List", {
onInit: function() {
var data = {
"ProductCollection": [
{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g",
"Price": 856.49,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 3,
"UoM": "PC",
"Width": 51,
"Depth": 42,
"Height": 18,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-6100.jpg"
},
{
"ProductId": "2212-121-828",
"Name": "Gladiator MX",
"Category": "Graphics Card",
"SupplierName": "Technocom",
"Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV",
"WeightMeasure": 321,
"WeightUnit": "g",
"Price": 81.7,
"CurrencyCode": "EUR",
"Status": "Discontinued",
"Quantity": 10,
"UoM": "PC",
"Width": 34,
"Depth": 14,
"Height": 2,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1071.jpg"
},
{
"ProductId": "K47322.1",
"Name": "Hurricane GX",
"Category": "Graphics Card",
"SupplierName": "Red Point Stores",
"Description": "Hurricane GX: DDR2 RoHS 512MB Supporting 1024MB Clock rate: 550 MHz Memory Clock: 933 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 64-bit Highlighted Features: DVI Out, TV-In, TV-Out, HDTV",
"WeightMeasure": 588,
"WeightUnit": "g",
"Price": 219,
"CurrencyCode": "EUR",
"Status": "Out of Stock",
"Quantity": 25,
"UoM": "PC",
"Width": 34,
"Depth": 14,
"Height": 2,
"DimUnit": "cm",
"ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1072.jpg"
},
],
"ProductCollectionStats": {
"Counts": {
"Total": 14,
"Weight": {
"Ok": 7,
"Heavy": 5,
"Overweight": 2
}
},
"Groups": {
"Category": {
"Projector": 1,
"Graphics Card": 2,
"Accessory": 4,
"Printer": 2,
"Monitor": 3,
"Laptop": 1,
"Keyboard": 1
},
"SupplierName": {
"Titanium": 3,
"Technocom": 3,
"Red Point Stores": 5,
"Very Best Screens": 3
}
},
"Filters": [
{
"type": "Category",
"values": [
{
"text": "Projector",
"data": 1
},
{
"text": "Graphics Card",
"data": 2
},
{
"text": "Accessory",
"data": 4
},
{
"text": "Printer",
"data": 2
},
{
"text": "Monitor",
"data": 3
},
{
"text": "Laptop",
"data": 1
},
{
"text": "Keyboard",
"data": 1
}
]
},
{
"type": "SupplierName",
"values": [
{
"text": "Titanium",
"data": 3
},
{
"text": "Technocom",
"data": 3
},
{
"text": "Red Point Stores",
"data": 5
},
{
"text": "Very Best Screens",
"data": 3
}
]
}
]
}
};
var oTemplate11 = new sap.m.StandardListItem({title : "{Name}"});
oList.setModel(new sap.ui.model.json.JSONModel(data));
oList.bindItems("/ProductCollection");
oList.placeAt('content');
},
getGroupHeader: function (oGroup){
return new sap.m.GroupHeaderListItem( {
title: oGroup.key,
upperCase: false
});
},
});
Your call to bind items to the list is not entirely correct.
The method takes an object with binding information as parameter instead of just the path to the model property. See the documentation for bindItems and bindAggregation in general.
In your case it should look like
oList.bindItems({
path: "/ProductCollection",
template: new sap.m.StandardListItem({
title: "{Name}",
description: "{ProductId}",
icon: "{ProductPicUrl}"
})
});

Highcharts Pie Chart dataLabel Options Don't Work With Object Initialization

Here is a jsfiddle example where I cannot get data label values or percentages to display when initializing the chart by passing it options when creating the chart object. Only the point.name is displayed in the label. Seems like you can only get these options to work when you create the entire object at run time using the plotOptions structure.
http://jsfiddle.net/nstvx7wc/7/
$(document).ready(function(){
var options = {
chart: {
renderTo: 'chartdiv',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
},
title: {
text: ''
},
};
options.series = [{"colorByPoint": "true", "data": [{"y": 0.36, "name": "series1"}, {"y": 0, "name": "series2"}, {"y": 0, "name": "series3"}, {"y": 0.03, "name": "series4"}, {"y": 0.04, "name": "series5"}, {"y": 0.07, "name": "series6"}]}];
options.title.text = "test pie";
options.pie.dataLabels.enabled = 'true';
chartObject = new Highcharts.Chart(options);
});
You 'pie' option was misconfigured. options.pie doesn't exist. It should be placed under series or the plotoptions property;
See this example; http://jsfiddle.net/nstvx7wc/21/
$(document).ready(function() {
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'test pie'
}
};
options.series = [{
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
"colorByPoint": "true",
"data": [{
"y": 0.36,
"name": "series1"
}, {
"y": 0,
"name": "series2"
}, {
"y": 0,
"name": "series3"
}, {
"y": 0.03,
"name": "series4"
}, {
"y": 0.04,
"name": "series5"
}, {
"y": 0.07,
"name": "series6"
}]
}];
Highcharts.chart('chartdiv', options);
});

I am building a bubble chart in AM-Charts but facing issues in plotting String values on X-axis

I am new to AM-charts, I am building a bubble chart in AM-charts http://www.amcharts.com/demos/bubble-chart/.
I want to plot following data in bubble chart where name should be appear on X-axis and job should be on Y-axis.
[{"name":"abc","jobs":15, "value":63500},{{"name":"pqr","jobs":15, "value":33000}}]
My bubble chart configuration is as follows-
{
"type": "xy",
"theme": "light",
"titles": [
{
"text": title,
"size": 16
}
],
"balloon": {
"fixedPosition": true,
},
"dataProvider": [{"name":"abc","job":15, "value":63500},{{"name":"pqr","job":15, "value":33000}}],
"valueAxes": [
{
"position": "bottom",
"axisAlpha": 0
},
{
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}
],
"startDuration": 1.5,
"graphs": [
{
"balloonText": "Name: <b>[[name]]</b> Jobs: <b>[[job]]</b><br>value: <b>[[value]]</b>",
"bullet": "round",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "name",
"yField": "job",
"maxBulletSize": 50,
"minBulletSize": 20
}
],
"marginLeft": 46,
"marginBottom": 35,
"export": {
"enabled": true
},
"chartScrollbar": {
"offset": 15,
"scrollbarHeight": 5
}
}
I am not able to see bubble chart with this configuration. No error or warning in console.
Can anyone please suggest me some solution to fix this issue?
Thanks in advance.