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();
});
Related
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.
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();
});
I'm trying to make a dashboard using dc.js. It has a few charts and a choroplethChart. It all worked fine, but I needed to add leaflet to the map. I've followed this sample and used dc.leaflet.js library, but instead of choroplethChart it returns Markers (see picture)
(this is how it looked before using leaflet)
The code is below and this is where geojson resides:
var usChart = dc_leaflet.choroplethChart("#us-chart");
usChart.width(1000)
.height(450)
.dimension(stateDim)
.group(totalDemandByStation)
.center([ 51.4963, -0.143 ])
.zoom(11)
.geojson(statesJson)
.colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])
.colorDomain([0, max_state])
.colors(['#fff7ec','#fee8c8','#fdd49e','#fdbb84','#fc8d59','#ef6548','#d7301f','#b30000','#7f0000'])
.colorAccessor(function(d,i) {
return d.value;
})
.featureKeyAccessor(function(feature) {
return feature.properties.name;
})
.renderPopup(true)
.popup(function(d,feature) {
return feature.properties.name+" : "+d.value;
})
.legend(dc_leaflet.legend().position('bottomright'));
//https://github.com/dc-js/dc.js/issues/419
usChart.on("preRender", function(chart) {
chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
})
usChart.on("preRedraw", function(chart) {
chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
})
I'm not an expert here, but the choropleth is expecting map data rather than point data. The features in your geojson are points:
{
"crs": {
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
},
"type": "name"
},
"features": [
{
"geometry": {
"coordinates": [
-0.013071299999987,
51.510716
],
"type": "Point"
},
"properties": {
"id": "940GZZDLALL",
"labelX": 30,
"lines": [
{
"name": "DLR"
}
],
"name": "All Saints",
"tfl_intid": 850
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
0.061052699999989,
51.51427850000001
],
"type": "Point"
},
"properties": {
"id": "940GZZDLBEC",
"labelX": -30,
"lines": [
{
"name": "DLR"
}
],
"name": "Beckton",
"tfl_intid": 895
},
"type": "Feature"
},
...
To draw a choropleth, Leaflet will need features whose types are Polygon.
So my guess is that Leaflet is punting and drawing markers
I want to show the outline of a circle on an interactive map (no fill) however, the paint options in mapbox-gl-js seem limited to fill only.
https://www.mapbox.com/mapbox-gl-style-spec/#layers-circle
var styles = [{
"id": 'points',
"interactive": true,
"type": "circle",
"source": "geojson",
"paint": {
"circle-radius": 5,
"circle-color": "#000
},
"filter": ["in", "$type", "Point"]
}, {
"type": "line",
"source": "geojson",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#000",
"line-width": 2.5
},
"filter": ["in", "$type", "LineString"]
}];
Am i missing something or is this just not possible?
This is now possible, with circle-opacity.
E.g.:
"paint": {
"circle-opacity": 0,
"circle-stroke-width": 1,
"circle-stroke-color": #000
}
Not currently possible. Current top workaround appears to be layering two circles of slightly different sizes.
https://github.com/mapbox/mapbox-gl-js/issues/1713
https://github.com/mapbox/mapbox-gl-style-spec/issues/379
I'm having trouble running custom color 'match' and having opacity controls running simultaneously.
I can get both working, but not at the same time. See code below.
var coorAddresses = [ [ -75.7040473, 45.418067,"Medium" ], [-75.7040473, 45.418067, "Medium"], [-79.32930440000001, 43.7730495, "Unknown"]]
$.getJSON(coodAddresses, function(data) {
for(var itemIndex in data) {
// push new feature to the collection
featureCollection.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [data[itemIndex][0], data[itemIndex][1]]
},
"properties": {
"size_by": data[itemIndex][2],
"color_by": data[itemIndex][2]
},
});
}
});
map.on('load', function () {
map.addLayer({
"id": "points",
"type": "circle",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": featureCollection
}
},
"paint": {
"circle-color": [
'match',
['get', 'size_by'],
'Easy',
'#e4f400',
'Medium',
'#f48a00',
'Unknown',
'#6af400',
/* other */ '#00e4f4'
],
"circle-radius": [
'match',
['get', 'size_by'],
'Easy',
4,
'Medium',
7,
'Unknown',
2,
/* other */ 1000
],
// "circle-opacity": 0, // color does not show if i uncomment these lines
// "circle-stroke-width": 1, // do not get desired 'hollow' circle unless these lines run
}});
Trying to troubleshoot.
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.