I have a date data series with uneven periods between data points. I want to have a label for each data point in the series. Any ideas how to archieve it?
Fiddle link is here
Just to promote my comment to an answer, one way to accomplish your mission would be to employ d3 axis to more rigidly control the axis. I updated John's jsfiddle here to demonstrate how we can do this. The full standalone code is below and in this gist.
<div id="volumeReport">
<script>
var svg = dimple.newSvg("#volumeReport", 590, 500);
var data = [
{"Date": "22/7/2014", "Volume" : 0},
{"Date": "15/11/2014", "Volume" : 1000},
{"Date": "5/01/2015", "Volume" : 2000},
{"Date": "5/2/2015", "Volume" : 3000},
{"Date": "31/3/2015", "Volume" : 4000}
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addTimeAxis("x", "Date", "%d-%m-%Y %H:%M:%S:%L", "%d-%m-%Y");
x.addOrderRule("Date");
x.timeField = "Date";
x.dateParseFormat = "%d/%m/%Y";
myChart.addMeasureAxis("y", "Volume");
var s = myChart.addSeries(null, dimple.plot.area);
s.interpolation = "step";
s.lineWeight = 1;
s.lineMarkers = true;
myChart.draw();
myChart.axes[0].shapes.call(
d3.svg.axis()
.orient("bottom")
.scale(myChart.axes[0]._scale)
.tickValues(data.map(function(d,i){
return d3.time.format("%d/%m/%Y").parse(d.Date)
})
)
.tickFormat(d3.time.format("%d-%m-%Y"))
)
</script>
</html>
A category axis will evenly space the dates along the axis:
myChart.addCategoryAxis("Date");
It also looks like you were trying to use a step area chart which requires version 2.1 of dimple. I've updated the version in the fiddle:
http://jsfiddle.net/tf3Sk/1/
Related
I made a dual_stacked_column chart.
Unfortunately the chart shows 2 different y axis. What do I have to set so that the y-axis get the same value? (vizscale?)
I searched for a long time and found the solution. The maxValues are just an example, but the glossy effect is cool.
HTML:
vizProperties="{ plotArea : { drawingEffect : 'glossy',
primaryScale : { fixedRange : true, minValue : 0, maxValue : 6000 },
secondaryScale : { fixedRange : true, minValue : 0, maxValue : 6000 } } }"
JS:
// set the scales
var oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame1");
// get manual input
var oYAxis = this.getView().byId("idYAxis");
var sYAxisValue = oYAxis.getValue();
oVizFrame.setVizProperties({
plotArea: {
primaryScale: {fixedRange : true, minValue: 0, maxValue: sYAxisValue },
secondaryScale: {fixedRange : true, minValue: 0, maxValue: sYAxisValue }
}
});
I faced a similar problem wir a dual bar chart.
I dont know if you can apply the same logic but its worth a try.
Change the chart type to stacked column and give the measure deklaration both columns.
example:
<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="values1,values2" />
now they should render on the same scale.
Hope it helps!
I'm trying to show a some GeoJSON on my map, and it isn't working. I'm pulling complex multipolygons from the database, but for simplicity's sake, I tried constructing a basic polygon by hand. I can't get it to show either.
I tried creating a new pane with a zIndex of 10000 and adding the layer there to no avail. I tried swapping lat/long in case I somehow reversed them, and that didn't work either. I'm using a 10px weight to ensure there's no way it could be missed.
Here is the basic example where I'm just trying to add a polygon that bounds Manhattan to a map.
var mapDivId = 'map';
var leafletMap = L.map(mapDivId,
{'boxZoom': true,
'doubleClickZoom': false,
'scrollWheelZoom': true,
'touchZoom': true,
'zoomControl': true,
'dragging': true});
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
});
osm.addTo(leafletMap);
var districtOutlineStyle = {
"color": "black",
"weight": "10px",
"opacity": "0.5"
};
var overlaySimplePolygonAroundManhattan = function() {
xmin = 40.68291;
xmax = 40.87903;
ymin = -74.04772;
ymax = -73.90665;
geoJsonShape = {'type': "Polygon",
'coordinates': [[[xmin, ymin], [xmin, ymax], [xmax, ymax], [xmax, ymin], [xmin, ymin]]]};
districtsOverlay = L.geoJSON(geoJsonShape,
{style: districtOutlineStyle});
leafletMap.addLayer(districtsOverlay);
};
overlaySimplePolygonAroundManhattan();
Any idea why it won't display the polygon? This is Leaflet 1.1.0.
Thanks!
Two things should help:
Your xMin/Max are mixed up with you yMin/Max:
So if you are zoomed in to start, you won't find your polygon unless zooming out to Antarctica.
xmin = 40.68291; // 40 degrees north, not east
xmax = 40.87903;
ymin = -74.04772; // 74 degrees west, not south
ymax = -73.90665;
You don't need to specify pixels, leaflet is expecting a number when styling the polygon. Leaflet doesn't handle this error gracefully apparently, resulting in no visible polygon.
(I also set the initial zoom and centering location) Altogether, this gives a result like:
var mapDivId = 'map';
var leafletMap = L.map(mapDivId,
{'boxZoom': true,
'doubleClickZoom': false,
'scrollWheelZoom': true,
'touchZoom': true,
'zoomControl': true,
'dragging': true}).setView([40.75, -73.97], 10);
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
});
osm.addTo(leafletMap);
var districtOutlineStyle = {
"color": "black",
"weight": 10,
"opacity": "0.5"
};
var overlaySimplePolygonAroundManhattan = function() {
ymin = 40.68291;
ymax = 40.87903;
xmin = -74.04772;
xmax = -73.90665;
geoJsonShape = {"type": "Polygon",
"coordinates": [[[xmin, ymin],[xmax, ymin], [xmax, ymax], [xmin, ymax], [xmin, ymin]]]};
districtsOverlay = L.geoJSON(geoJsonShape, {style: districtOutlineStyle});
leafletMap.addLayer(districtsOverlay);
// Alternative approach:
//L.geoJSON(geoJsonShape,{style: districtOutlineStyle}).addTo(leafletMap);
};
overlaySimplePolygonAroundManhattan();
#map {
width: 600px;
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.css"/>
<div id="map"></div>
Andrew is right! It was because I specified pixels instead of just a number for the weight. It works great now.
I had tried swapping lat/long multiple times, so I knew it wasn't just that. And that was debugging code. I thought the code snippet I posted had them in the right order but apparently not. The real shapes I'm displaying are MultiPolygons pulled as GeoJSON from Postgres, so I was confident I had the proper lat/long ordering there, even if they were backwards in my debugging function. As soon as I removed 'px', my function to display the real shapes worked too.
Thank you!
I have made a Google column chart.
It displays ok. but the vertical axis label is showing an unit that I never set myself.
here is the screen shot.
I don't understand why it displays "1 td" instead of 1000 , "1,2 td" instead of 1200.
Here is my code:
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
….
….
]);
var options = {
title: 'My Test',
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
my code has nothing special part for the vertical axis and I used from google chart gallery. why it gets 'td' unit for vertical axis even I didn't set myself?
Is it Google column chart default option?
I try to manipulate the vertical axis value with vAxis:. but no luck.
Any advices?
Apparently, when using material bar charts, the y-axis (vAxis) default format is short, meaning showing td for thousands and so on. To reset this set format to '' :
var options = {
axes : {
y : {
all : {
format : {
pattern : ''
}
}
}
}
}
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
demo -> http://jsfiddle.net/sfc9aLd4/
But the material charts are still in beta, and a lot of the options are yet not documented or documented poorly. Luckily we can use the google visualization options object layout and convert it with convertOptions(options) :
var options = {
vAxis : {
format : '' //or #####
}
}
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
Will result in the same as above axes : { ... }
demo -> http://jsfiddle.net/3aq7gucd/
With material charts there seems to be some differences for format. 'none' is now ''. decimal should be changed to ####.## or likewise. scientific, currency and percent works as before.
I try to do something that should be super easy, I try to draw a chart with monthly data. I just whant to show the last 12 or 24 month in the past with it's data. I get the data from a MSSQL server so I can twist the date to meet highstock format (I tried the number of second from 1/1/1970 with no success).
data='[';
<cfloop query="maquery">
data = data + '#mois_annee#, #nb#,';
</cfloop>
data = data.slice(0, -1);
data = data + ']';
$(function() {
chart = new Highcharts.StockChart({
chart : {
renderTo : 'div_graph',
width : 600,
height : 300
},
series : [{
type : 'column',
name : 'Acheteurs Uniques',
data : eval(data),
tooltip: {
valueDecimals: 2
}
}],
rangeSelector: {
enabled: false
}
});
});
way simplier to explain with JSFIDDLE : http://jsfiddle.net/#&togetherjs=PIqVEj8qnp
Is there any way to show the y-value of every bar above the actual bar in a dojox columns-type chart? Here's my code (which I got from http://glenurban.me.uk/A55D03/Blog.nsf/dx/DojoChart.htm):
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
var series1 = [ 3, 2, 5, 3, 6, 4];
var xlabels = [
{value : 1, text : "a"},
{value : 2, text : "b"},
{value : 3, text : "c"},
{value : 4, text : "d"},
{value : 5, text : "e"},
{value : 6, text : "f"},
{value : 7, text : "g"}];
var chart1;
makeCharts = function() {
chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {
type : "Columns",
gap : 2
});
chart1.addAxis("x", {
labels : xlabels
});
chart1.addAxis("y", {
vertical : true,
min : 0
});
chart1.addSeries("Series1", series1);
chart1.render();
};
dojo.addOnLoad(makeCharts);
</script>
Unfortunately, it looks like this is a feature that still hasn't been included into the later versions of Dojo: see ticket, and this ticket (found from this mailing list.)
I've tried checking to see if there is a way to use Dojo GFX to get the values from your series of data... and then overlay that on to the chart. But, doing labels that way is going to be kludgy (and this all depends on if Dojo GFX's surface allows for a surface overlay on a SVG chart object already created.)
There's always the option to add this functionality in to the Dojo Chart2D library itself. But whenever you do that, unless you are able to get your patches changed with the main Dojo Chart2D branch, you'll want to be careful not to overwrite your custom-made library with a newer version of Chart2D in the future.
However, if you aren't stuck to Dojo for this particular need, have you considered using jQuery? There are many different chart/graph libraries out there, these days:
Highcharts (examples)
Flot (examples)
Tuftegraph (examples)
Also, Google Chart Tools is pretty nice, if jQuery isn't your thing.
Or... JavaScript InfoVis Toolkit is great, as well.
For information, it's now possible to have columns chart with label. For exemple :
addPlot("default", {type: "ClusteredColumns", labels: true,labelStyle:"outside" or "inside" })