Related
var svg = dimple.newSvg("#chartContainer", 990, 400);
d3.json("http://localhost:8082/charts/dashboard/index", function (data) {
data = dimple.filterData(data, "monthYear", [
"Jan-2015", "Feb-2015", "Mar-2015", "Apr-2015", "May-2015", "Jun-2015",
"Jul-2015", "Aug-2015", "Sep-2015", "Oct-2015", "Nov-2015", "Dec-2015"
]);
//console.log(data);
//Create the indicator chart on the right of the main chart
var indicator = new dimple.chart(svg, data);
//Pick blue as the default and orange for the selected month
var defaultColor = indicator.defaultColors[0];
var indicatorColor = indicator.defaultColors[2];
//The frame duration for the animation in milliseconds
var frame = 2000;
var firstTick = true;
//Place the indicator bar chart to the right
indicator.setBounds(800, 49, 153, 311);
//Add dates along the y axis
var y = indicator.addCategoryAxis("y", "monthYear");
y.addOrderRule("Date", "Asc");
// Use sales for bar size and hide the axis
var x = indicator.addMeasureAxis("x", "energyConsumption");
x.hidden = true;
//Add the bars to the indicator and add event handlers
var s = indicator.addSeries(null, dimple.plot.bar);
s.addEventHandler("click", onClick);
// Draw the side chart
indicator.draw();
//Remove the title from the y axis
y.titleShape.remove();
// Remove the lines from the y axis
y.shapes.selectAll("line,path").remove();
// Move the y axis text inside the plot area
y.shapes.selectAll("text")
.style("text-anchor", "start")
.style("font-size", "11px")
.attr("transform", "translate(18, 0.5)");
// Manually set the bar colors
s.shapes
.attr("rx", 10)
.attr("ry", 10)
.style("fill", function (d) { return (d.y === 'Jan-2015' ? indicatorColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.y === 'Jan-2015' ? indicatorColor.stroke : defaultColor.stroke) })
.style("opacity", 0.4);
//draw the main chart
//this is the main chart for dual axis.
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
// Add your x axis - nothing unusual here
var x = chart.addMeasureAxis("x", "Date");
// First y axis is the combination axis for revenue and profit
var y1 = chart.addMeasureAxis("y", "Temperature");
// Second is the units only
var y2 = chart.addMeasureAxis("y", "Energy Consumption");
var bars = chart.addSeries("Energy Comsuption", dimple.plot.bar, [x,y2]);
var lines = chart.addSeries("Weather Report", dimple.plot.line, [x,y1]);
bars.barGap = 0.5;
// Colour the bars manually so they don't overwhelm the lines
chart.assignColor("Energy Comsuption", "black", "black", 0.15);
var story = chart.setStoryboard("monthYear", onTick);
//Change the frame duration
story.frameDuration = frame;
// Order the storyboard by date
story.addOrderRule("Date");
//x.dateParseFormat = "%m/%Y";
//x.addOrderRule("Date");
// Here's how you add a legend for just one series. Excluding the last parameter
// will include every series or an array of series can be passed to select more than
// one
//chart.addLegend(60, 5, 680, 10, "right", lines);
chart.draw();
//Orphan the legends as they are consistent but by default they
// will refresh on tick
chart.legends = [];
// Remove the storyboard label because the chart will indicate the
// current month instead of the label
story.storyLabel.remove();
// On click of the side chart
function onClick(e) {
// Pause the animation
story.pauseAnimation();
// If it is already selected resume the animation
// otherwise pause and move to the selected month
if (e.yValue === story.getFrameValue()) {
story.startAnimation();
} else {
story.goToFrame(e.yValue);
story.pauseAnimation();
}
}
// On tick of the main charts storyboard
function onTick(e) {
if (!firstTick) {
// Color all shapes the same
s.shapes
.transition()
.duration(frame / 2)
.style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
}
firstTick = false;
}
});
...................
My data is somewhat like this:-
[{"country":"Australia","state":"New south wales","region":"Sydney",
"suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/01/2015",
"energyConsumption":0.141,"monthYear":"Jan-2015"},
{"country":"Australia","state":"New south wales","region":"Sydney","suburbs":"Canterbury-Bankstown",
"temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/02/2015",
"energyConsumption":0.088,"monthYear":"Jan-2015"},
{"country":"Australia","state":"New south wales","region":"Sydney","suburbs":"Canterbury-Bankstown",
"temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/03/2015",
"energyConsumption":0.078,"monthYear":"Jan-2015"},{"country":"Australia","state":"New south wales","region":"Sydney","suburbs":"Canterbury-Bankstown",
"temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/04/2015",
"energyConsumption":0.151,"monthYear":"Jan-2015"},{"country":"Australia","state":"New south wales","region":"Sydney",
"suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/05/2015",
"energyConsumption":0.146,"monthYear":"Jan-2015"},
{"country":"Australia","state":"New south wales","region":"Sydney",
"suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/06/2015",
"energyConsumption":0.077,"monthYear":"Jan-2015"},{"country":"Australia","state":"New south wales","region":"Sydney",
"suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,"precipitation":11.0,
"date":"Jan/07/2015","energyConsumption":0.052,"monthYear":"Jan-2015"},
{"country":"Australia","state":"New south wales","region":"Sydney","suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,
"precipitation":11.0,"date":"Jan/08/2015","energyConsumption":0.055,"monthYear":"Jan-2015"}
JSBIN Example
Please take a look at the dual y-axis I created with your data.
There is few things your doing wrong.
var x = chart.addMeasureAxis("x", "Date");
// First y axis is the combination axis for revenue and profit
var y1 = chart.addMeasureAxis("y", "Temperature");
// Second is the units only
var y2 = chart.addMeasureAxis("y", "Energy Consumption");
var bars = chart.addSeries("Energy Comsuption", dimple.plot.bar, [x,y2]);
var lines = chart.addSeries("Weather Report", dimple.plot.line, [x,y1]);
Date, Temperature, Energy Consumption, Weather Report. All of this is not valid, because that not how its define on your data. You have to give exact name as appears on your data.
I only create dual axis for you, I think you can add all the other details starting from there. If you have any other question feel free to post
Using dimple.js, I am rendering a scatter plot with the code below. This works fine, but when i hover the mouse over any point, the x and y values are shown twice, once as decimal and below that as percentage. How can i simply keep the percentage x,y values in the hover-popup? Also, is there a way to display additional items in the hover-popup?
Here is the fiddle demonstarting the issue: http://jsfiddle.net/dizzy0ny/ch2187dd/52/
var svg = dimple.newSvg("#chartContainer", 600,600);
var myChart = new dimple.chart(svg);
myChart.setBounds(90, 35, 480, 400)
xAxis = myChart.addMeasureAxis("x", "x");
yAxis = myChart.addMeasureAxis("y", "y");
xAxis.showGridlines = true;
xAxis.tickFormat = '.1%'
yAxis.tickFormat = '.1%'
s1 = myChart.addSeries(["x","y","group"], dimple.plot.bubble, [xAxis, yAxis]);
s1.data = data_scatter
s2 = myChart.addSeries(["y","group"], dimple.plot.line, [xAxis, yAxis]);
s2.data = data_ser1
myChart.addLegend(90, 480, 330, 20, "left");
myChart.draw();
As per the docs here: http://dimplejs.org/adhoc_viewer.html?id=adhoc_bar_custom_tooltips
You can change the default tooltip like so:
s1.getTooltipText = function (e) {
return [
"This is a custom tooltip!",
"X value: %" + (e.aggField[0]*100).toFixed(2),
"Y value: %" + (e.aggField[1]*100).toFixed(2),
"Group: " + e.aggField[2]
];
};
Check out your updated fiddle here: http://jsfiddle.net/ch2187dd/55/
Also, try not to forget those semi-colons! :)
I've built a line-graph in dimple.js that can be found here. http://jsfiddle.net/lukehtravis/0twgc2uL/
You'll notice on the y-axis, there is a little "m" that is automatically generated by dimple and placed next to the numbers as a quantity label.
I combed through the documentation, but couldn't find anything about that little m.
Anyone know how to remove it? Here's the code
// Create the canvas to draw on
var svg = d3.select("#charty")
.append("svg")
.attr("width", 800)
.attr("height", 500);
// Create the chart object | contents of data visible in fiddle link above
var chart = new dimple.chart(svg, data);
//Create the x axis
var x = chart.addCategoryAxis("x", "Day");
x.showGridlines = true;
// Create the y axis
var y = chart.addMeasureAxis("y", "Volume");
y.title = "Volume (AF)";
y.overrideMin = 300000;
y.overrideMax = 1450000;
y.showGridlines = true;
// Add location as data series
var series = chart.addSeries("Location", dimple.plot.line);
// Decorate the lines in the graph
series.lineWeight = 2;
series.lineMarkers = true;
// Create the legend
chart.addLegend(100, 50, 200, 200);
// Draw the chart
chart.draw(3100);
Small m is not but conversion of units into million..
0.3million is your value 300000 .. Its pretty normal and not an error ..
If you dont want that then just add this line y.tickFormat = "1f"; after
y.showGridlines = true;
I'm building the next chart:
var myChart = new dimple.chart(svg, data);
//chart.setBounds(100, 100, "70%", "80%");
var x = myChart.addCategoryAxis("x", ["time","channel"]);//["time", "channel"]);
var y1 = myChart.addMeasureAxis("y", "Produccion");
//var y2 = chart.addMeasureAxis("y", "Produccion");
myChart.addSeries("Energy", dimple.plot.bar);//, [x,y1]);
myChart.addLegend(65, 10, 510, 20, "right");
myChart.draw(5000);
but I can't put in a different colour the bar that represent the value of each element of the group.
The series dimension determines the colouring of the bars. In your example you have used "Energy" which is not in your data meaning every bar gets labelled Energy and therefore coloured the same. If you want to colour them differently you need to add the dimension you intend to colour by in the series:
myChart.addSeries("channel", dimple.plot.bar);
Here's the corrected fiddle:
http://jsfiddle.net/B7xk8/
using assignColor will now allow you to specify certain colours for each value.
I am tinkering with a multi-series chart in dimplejs and got a bit stuck with the multi axis logic.
With the following data:
var data = [
{"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4},
{"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3},
{"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5},
{"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1},
{"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4}
]
I try to get a chart showing, by months, my revenue and my profit on the same y axis and my units on a secondary y axis.
With the code below, I could manage to display the 3 series. But the Profit series isn't really on the same axis as the Revenue one, and the whole thing seems more like a hack than a proper solution.
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
var x = chart.addCategoryAxis("x", "Month");
var y1 = chart.addMeasureAxis("y", "Revenue");
chart.addSeries("null", dimple.plot.line, [x,y1]);
var y2 = chart.addMeasureAxis("y", "Units");
chart.addSeries("null", dimple.plot.bar, [x,y2]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.line, [x,y3]);
I guess my logic might be wrong with how to rightly play with series. Any help would be great.
Thanks a lot,
Xavier
Full code:
var svg = dimple.newSvg("body", 800, 400);
var data = [
{"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4},
{"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3},
{"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5},
{"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1},
{"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4}
]
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
var x = chart.addCategoryAxis("x", "Month");
var y1 = chart.addMeasureAxis("y", "Revenue");
chart.addSeries("null", dimple.plot.line, [x,y1]);
var y2 = chart.addMeasureAxis("y", "Units");
chart.addSeries("null", dimple.plot.bar, [x,y2]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.line, [x,y3]);
x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");
chart.draw();
EDIT:
This is no longer required since version 2. You can now use composite axes.
ORIGINAL:
I see the problem here, the issue isn't with multiple axes, it is with trying to draw multiple measures against a single axis which Dimple doesn't really support yet. I'm afraid the best I can do for now is a bit of a data hack:
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 800, 400);
// Data hack required to get revenue and profit on the same axis, units are
// arbitrarily allocated to revenue but the values will be summed by date
var data = [
{"Month":"01/2013", "Metric":"Revenue", "Revenue/Profit":2000, "Units":4},
{"Month":"02/2013", "Metric":"Revenue", "Revenue/Profit":3201, "Units":3},
{"Month":"03/2013", "Metric":"Revenue", "Revenue/Profit":1940, "Units":5},
{"Month":"04/2013", "Metric":"Revenue", "Revenue/Profit":2500, "Units":1},
{"Month":"05/2013", "Metric":"Revenue", "Revenue/Profit":800, "Units":4},
{"Month":"01/2013", "Metric":"Profit", "Revenue/Profit":2000, "Units":0},
{"Month":"02/2013", "Metric":"Profit", "Revenue/Profit":2000, "Units":0},
{"Month":"03/2013", "Metric":"Profit", "Revenue/Profit":14000, "Units":0},
{"Month":"04/2013", "Metric":"Profit", "Revenue/Profit":3200, "Units":0},
{"Month":"05/2013", "Metric":"Profit", "Revenue/Profit":1200, "Units":0}
];
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
// Add your x axis - nothing unusual here
var x = chart.addCategoryAxis("x", "Month");
// First y axis is the combination axis for revenue and profit
var y1 = chart.addMeasureAxis("y", "Revenue/Profit");
// Second is the units only
var y2 = chart.addMeasureAxis("y", "Units");
// Plot the bars first - the order of series determines their dom position
// from back to front, this means bars are at the back. It's important
// to note that the string here "Unit Sales" is NOT in the data. Any string
// not in the data is just used to apply a label which can be used for colouring
// as it is here and will also appear in tool tips
var bars = chart.addSeries("Unit Sales", dimple.plot.bar, [x,y2]);
// Use a simple line by metric for the other measures
var lines = chart.addSeries("Metric", dimple.plot.line, [x,y1]);
// Do a bit of styling to make it look nicer
lines.lineMarkers = true;
bars.barGap = 0.5;
// Colour the bars manually so they don't overwhelm the lines
chart.assignColor("Unit Sales", "black", "black", 0.15);
x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");
// Here's how you add a legend for just one series. Excluding the last parameter
// will include every series or an array of series can be passed to select more than
// one
chart.addLegend(60, 5, 680, 10, "right", lines);
chart.draw();
// Once Draw is called, this just changes the number format in the tooltips which for these particular
// numbers is a little too heavily rounded. I assume your real data isn't like this
// so you probably won't want this line, but it's a useful tip anyway!
y1.tickFormat = ",d";
</script>
</div>
This is currently a bit of a limitation but I've just had an idea for a really good implementation I can do to add proper support for composite axes like this. Hopefully that will be possible in the not too distant future.
Good luck
John