How to make axis ticks clickable in d3.js/dimple.js - javascript

I'm very new to d3js. I wish to know how to make axis tick labels to clickable so that clicking on the labels I can load new charts( yes I need to get the axis value, ie month name here in my case)
Below is the code. X axis are months and once I click on a month, I need to load chart of that month, which is another HTML page.
d3.csv("data/data_1.CSV", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 70, 490, 320);
var x = myChart.addTimeAxis("x", "Month", "%d-%b-%Y %H:%M:%S", “%b-%Y");
var y = myChart.addMeasureAxis("y","Value");
x.overrideMin = new Date("2013-11-30");
var s = myChart.addSeries("Value type", dimple.plot.line);
s.lineMarkers = true;
myChart.addLegend(180, 30, 360, 20, "left");
myChart.draw();
});

I don't know anything about dimple.js, but in d3 you can just select all of the tick marks and attach a click handler to them.
svg.selectAll('.tick')
.on('click', function(d) { console.log(d); });
This will write the Date object that the tick represents to the console.

This will autoplay all months, and log x-Axis value on click.
d3.csv("data/data_1.CSV", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(90, 70, 490, 320);
var x = myChart.addTimeAxis("x", "Month", "%d-%b-%Y %H:%M:%S", "%b-%Y");
x.overrideMin = new Date("2013-01-01");
x.addOrderRule("Date");
var y = myChart.addMeasureAxis("y","Value");
var s = myChart.addSeries("Value type", dimple.plot.line);
s.lineMarkers = true;
myChart.addLegend(180, 30, 360, 20, "left");
s.addEventHandler("click", function (e) {
console.log(e.xValue);
});
var myStoryboard = myChart.setStoryboard("Month");
myStoryboard.frameDuration = 15000;
myStoryboard.autoplay = true;
myChart.draw();
});

Related

dimple.js scatterplot duplicating axis lables

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! :)

Representing 2 or more dimple.js charts

Im a noob and currently I'm practicing with dimple.js.
The problem I'm facing is that I can't represent 2 charts side by side on the same page, it just appears one chart. How can I fix this?
I named each div with two different ID and also considered this on the script.
<body>
<section>
<div id="chartContainer1" class="container">
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer1", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.line);
s.interpolation = "cardinal";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>
<div id="chartContainer2" class="container">
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer2", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
var s = myChart.addSeries("Channel", dimple.plot.line);
s.interpolation = "cardinal";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
</script>
</div>
</section>
EDIT: I cleaned up the code to help make it more maintainable for you going down the road.
http://jsfiddle.net/gv615hcL/
--
So the problem is in the variable naming. You're overriding your variables. In the second declaration you want to change the names of the new dimple svg, for example instead of naming it:
var svg = dimple.newSvg("#chartContainer2", 590, 400);
name it:
var svg2 = dimple.newSvg("#chartContainer2", 590, 400);
Also, make sure you continue to reference the variables properly.
I made a quick JsFiddle for you here: http://jsfiddle.net/fq4p7t2x/

Updating Nvd3 chart priodically

I'm working with Nvd3 charts from the examples from their official website. Now I want a line chart to update periodically based on data sent from server but I couldn't found any useful Example for this on internet.
I have created a function which re-draws the chart when new data is arrived but i want to append every new point to the existing chart (like we can do in highcharts) but i'm stuck.
Here is the code I'm using for Updating the chart.
var data = [{
"key" : "Long",
"values" : getData()
}];
var chart;
function redraw() {
nv.addGraph(function() {
var chart = nv.models.lineChart().margin({
left : 100
})
//Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true);
//Show the x-axis
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis.tickFormat(d3.format(',.1%'));
d3.select('#chart svg').datum(data)
//.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
function getData() {
var arr = [];
var theDate = new Date(2012, 01, 01, 0, 0, 0, 0);
for (var x = 0; x < 30; x++) {
arr.push({
x : new Date(theDate.getTime()),
y : Math.random() * 100
});
theDate.setDate(theDate.getDate() + 1);
}
return arr;
}
setInterval(function() {
var long = data[0].values;
var next = new Date(long[long.length - 1].x);
next.setDate(next.getDate() + 1)
long.shift();
long.push({
x : next.getTime(),
y : Math.random() * 100
});
redraw();
}, 1500);

dimple js straight line y-axis over bar chart

I am trying to draw Average, High and Low value straight line on a dimple js bar chart. I have no clue how they can be drawn on y-axis (cost) as straight line that will cut through the bars. Here is the fiddle that has high, low and average values saved into corresponding variable that needed to be drawnon the chart. Any solution? jsfiddle link: http://jsfiddle.net/Ra2xS/14/
var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];
//y- axis (cost) values to plot as straight line over bar chart in different colours
var avg = "11.65";
var high= "12.71";
var low = "10.82";
function barplot(id,dim,data)
{
keys = Object.keys(data[0]);
var xcord = keys[0];
var ycord = keys[1];
var svg = dimple.newSvg(id, dim.width, dim.height);
var myChart = new dimple.chart(svg,data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", xcord);
x.addOrderRule(xcord);
x.showGridlines = true;
var y = myChart.addMeasureAxis("y", ycord);
y.showGridlines = true;
y.tickFormat = ',.1f';
var s = myChart.addSeries(null, dimple.plot.bar);
var s1 = myChart.addSeries(null, dimple.plot.line);
s1.lineWeight = 3;
s1.lineMarkers = true;
myChart.draw(1500);
}
barplot("body",dim,data);
You can do it by adding a separate series with it's own data, unfortunately there's a bug with multiple line series in version 1.1.5 which means line markers go haywire (so I've removed them from the code below). The good news is I've just finished rewriting all the line chart code and this problem will be fixed in the next version (coming in a week or so), also the line will animate properly by rising from the x axis instead of fading in from black.
var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];
function barplot(id,dim,data)
{
keys = Object.keys(data[0]);
var xcord = keys[0];
var ycord = keys[1];
var svg = dimple.newSvg(id, dim.width, dim.height);
var parser = d3.time.format("%d-%m-%Y")
var dateReader = function (d) { return parser.parse(d[xcord]); }
var start = d3.time.month.offset(d3.min(data, dateReader), -1);
var end = d3.time.month.offset(d3.max(data, dateReader), 1);
var myChart = new dimple.chart(svg,data);
myChart.setBounds(60, 30, 505, 305);
//var x = myChart.addCategoryAxis("x", xcord);
var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y","%b %Y");
x.overrideMin = start;
x.overrideMax = end;
x.addOrderRule(xcord);
x.showGridlines = true;
x.timePeriod = d3.time.months;
x.floatingBarWidth = 100;
var y = myChart.addMeasureAxis("y", ycord);
y.showGridlines = true;
y.tickFormat = ',.1f';
var s1 = myChart.addSeries(null, dimple.plot.bar);
var s2 = myChart.addSeries(null, dimple.plot.line);
s2.lineWeight = 3;
var s3 = myChart.addSeries("Price Break", dimple.plot.line);
s3.data = [
{ "Price Break" : "high", "cost" : 12.71, "date" : parser(start) },
{ "Price Break" : "high", "cost" : 12.71, "date" : parser(end) },
{ "Price Break" : "avg", "cost" : 11.65, "date" : parser(start) },
{ "Price Break" : "avg", "cost" : 11.65, "date" : parser(end) },
{ "Price Break" : "low", "cost" : 10.82, "date" : parser(start) },
{ "Price Break" : "low", "cost" : 10.82, "date" : parser(end) }
];
myChart.draw(1500);
}
barplot("body",dim,data);
http://jsfiddle.net/Ra2xS/28/

dimple js x-axis date issue with bar chart

My bar chart bars on x-axis is adding to the right positions but the x-axis ticks are duplicating month and year in the dimple js. How can I adjust the x-axis as I have only three values in this data? Here is the jfiddle: http://jsfiddle.net/Ra2xS/17/
Any suggestions?
var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];
function barplot(id,dim,data)
{
keys = Object.keys(data[0]);
var xcord = keys[0];
var ycord = keys[1];
var svg = dimple.newSvg(id, dim.width, dim.height);
var myChart = new dimple.chart(svg,data);
myChart.setBounds(60, 30, 505, 305);
//var x = myChart.addCategoryAxis("x", xcord);
var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y","%b %Y");
x.addOrderRule(xcord);
x.showGridlines = true;
var y = myChart.addMeasureAxis("y", ycord);
y.showGridlines = true;
y.tickFormat = ',.1f';
var s = myChart.addSeries(null, dimple.plot.bar);
var s1 = myChart.addSeries(null, dimple.plot.line);
s1.lineWeight = 3;
s1.lineMarkers = true;
myChart.draw(1500);
}
barplot("body",dim,data);
You can prevent the excess ticks/labels by setting the time period for the axis to months:
x.timePeriod = d3.time.months;
Complete demo here.

Categories