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
I am rendering an Graph with CanvasJS.
It´s generated dynamically.
After I stop the generation (or after an specified time) I generate from that an image.
Now I want to load that image AND take the generation of the Graph. So... I am again generating the same data, but this time with the complete (mostly scaled) picture of the data. - This shall work as an fast Overview.
That´s how I am doing it basiclly: (the dynamic data)
<script type="text/javascript">
window.onload = function ()
{
var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer",{
zoomEnabled:true,
title :{
text: "Live Random Data"
},
data: [{
type: "stackedColumn",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 100;
var dataLength = 500; // number of dataPoints visible at any point
var arr = [];
var updateChart = function (count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: xVal,
y: yVal
});
arr.push({
x: xVal,
y: yVal
});
xVal++;
};
if (dps.length > dataLength)
{
dps.shift();
}
chart.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
var d= setInterval(function(){updateChart()}, updateInterval);
$("#test").click(function () {
console.log("baa");
clearInterval(d);
});
$("#show").click(function () {
console.log("baa");
dps=[];
dps.push(arr);
chart.render();
});
}
</script>
http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/dynamic/realtime_line/
Now, if I am zooming or panning the "Live Data" or on the Image:
I want an synchronization between those two. If I am zooming or panning on the Image I only want to see an opaque rect and the dynamic data has to be really zoomed.
An sync. Example is here http://jsfiddle.net/canvasjs/m5jgk5sg/, but how do I do that with an Image?
Does anyone of you has an idea or how to make an workaround?
If I have the following code from the example at http://nvd3.org/examples/scatter.html, can I add a label to the plotted points? Not a tooltip, but have one of the values in my data render as a label which is always attached to the point? Obviously doing that in this specific example would be way too crowded, but in a less sparsely populated chart, it would be great to label if each point has a name. Thank you!
nv.addGraph(function() {
var chart = nv.models.scatterChart()
.showDistX(true) //showDist, when true, will display those little distribution lines on the axis.
.showDistY(true)
.transitionDuration(350)
.color(d3.scale.category10().range());
//Configure how the tooltip looks.
chart.tooltipContent(function(key) {
return '<h3>' + key + '</h3>';
});
//Axis settings
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
//We want to show shapes other than circles.
chart.scatter.onlyCircles(false);
var myData = randomData(4,40);
d3.select('#chart svg')
.datum(myData)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
/**************************************
* Simple test data generator
*/
function randomData(groups, points) { //# groups,# points per group
var data = [],
shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
random = d3.random.normal();
for (i = 0; i < groups; i++) {
data.push({
key: 'Group ' + i,
values: []
});
for (j = 0; j < points; j++) {
data[i].values.push({
x: random()
, y: random()
, size: Math.random() //Configure the size of each scatter point
, shape: (Math.random() > 0.95) ? shapes[j % 6] : "circle" //Configure the shape of each scatter point.
});
}
}
return data;
}
You could just add labels. This is pretty cheesy, but gives an idea:
var svg = d3.select('svg');
svg.selectAll('path')
.each(function(scatterpoint) {
svg.append('text')
.x(scatterpoint.x)
.y(scatterpoint.y)
.text(scatterpoint.maybe_you_have_text_here);
})
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 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();
});