I have been trying to spread the pie chart I have to cover most of the 'card' I on the page, but no matter how much margin I cut, it either start disappearing behind another border within the card. I noticed that amcharts lib creates a bunch of layers that the developer doesn't have much control over. Anyway, this is what I'm talking about:
Here is the generated HTML code snippet:
Here is my javascript:
am4core.ready(function () {
//Themes
var chartType = am4charts.PieChart3D;
var seriesType = new am4charts.PieSeries3D();
//Create Chart and Series
var chart = createChart(thisWidget.id, chartType);
var pieSeries = chart.series.push(seriesType); // 3D Pie Chart
//Set properties
chart.hiddenState.properties.opacity = 0; // 3D Pie Chart: this creates initial fade-in
pieSeries.slices.template.cornerRadius = 6; //Pie Chart with varying Radius + 3D
pieSeries.colors.step = 3; //Pie Chart with varying Radius + 3D
pieSeries.angle = 45;
//color
if (colorTheme) {
pieSeries.colors.list = getAmchartCustomTheme(colorTheme);
}
//data types
pieSeries.dataFields.value = "count";
pieSeries.dataFields.category = "tag";
chart.paddingTop = 0;
chart.marginTop = 0;
// Put a thick white border around each Slice
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template
// change the cursor on hover to make it apparent the object can be interacted with
.cursorOverStyle = [
{
"property": "cursor",
"value": "pointer"
}
];
//Make the slice move on hover
var slice = pieSeries.slices.template;
slice.states.getKey("active").properties.shiftRadius = 0;
slice.states.getKey("hover").properties.scale = 1;
slice.states.getKey("hover").properties.shiftRadius = 0.2;
//increase size of Chart
chart.svgContainer.htmlElement.style.height = targetHeight;
chart.svgContainer.autoresize = true;
//disable Ticks and labels to save space
pieSeries.labels.template.disabled = true;
//registering events
pieSeries.slices.template.events.on("hit", function (ev) {
var category = ev.target.slice._dataItem.properties.category;
addInput(category);
});
pieSeries.alignLabels = false;
// Create a base filter effect (as if it's not there) for the hover to return to
var shadow = pieSeries.slices.template.filters.push(new am4core.DropShadowFilter);
shadow.opacity = 0;
// Create hover state
var hoverState = pieSeries.slices.template.states.getKey("hover"); // normally we have to create the hover state, in this case it already exists
// Slightly shift the shadow and make it more prominent on hover
var hoverShadow = hoverState.filters.push(new am4core.DropShadowFilter);
hoverShadow.opacity = 0.7;
hoverShadow.blur = 5;
//Add Data
chart.data = displayItems;
})
strokeOpacity = 0 or strokeWidth = 0 should do the trick.
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 have an svg component on my page to which I have appended my dimple chart. I want the chart to be sized responsively.
I have referred to this example in the documentation.
But when I use it in a similar fashion in my line chart, it does not seem to work. My code for a line chart is as follows:
var xpoints = chartData["xdata"];//Populated Dynamically
var ypoints = chartData["ydata"];//Populated Dynamically
var dataset = [];
var line1;
for (var i = 0; i < xpoints.length; i++) {
dataset.push({
x : xpoints[i],
y1 : parseFloat(ypoints[i])
});
}
var svg = dimple.newSvg("#" + mychart, "100%", "100%");
var x, y;
var myChart = new dimple.chart(svg, dataset);
myChart.setMargins("60px", "30px", "110px", "70px");
y = myChart.addMeasureAxis("y", "y1");
x = myChart.addCategoryAxis("x", "x");
line1 = myChart.addSeries("First", dimple.plot.line, [ x, y ]);
line1.lineMarkers = true;
var l = myChart.addLegend(65, 10, 510, 20, "right");
myChart.draw(1500);
window.onresize = function () {
myChart.draw(0, true);
};
Is it that I cannot do this in the same window itself and it is absolutely necessary for me to create a new window, as in the example?
The console does not show any errors, the chart is rendered correctly. It's just that the resize function does not work!
Okay, I found my mistake!
Turns out there is no need to create a new window.
It's just that, I had explicitly defined the height and width of the div (#mychart) to which I was appending my svg and these dimensions were in pixels. So the size of the svg remained the same even on window resize - because it was always 100% of a constant pixel value. So the function was actually firing earlier as well, but was ending up with the same dimensions.
I changed the dimensions of my div to percentage values and everything works fine :D
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 been wrestling with this problem for quite a while now. I want to create an x-axis, so I used the following code:
var w = 1024,
h = 1024,
padding = 20,
fill = d3.scale.category20();
var vis = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
d3.json("force.json", function(json) {
//Create array of dates for the x-axis
var dates = json.nodes.map(function(d) {
return Date.parse(d.date);
});
console.log(dates)
// Create scale from the array of dates
var scale = d3.time.scale()
.domain(dates)
.range([padding, w - padding]);
console.log(scale(dates));
var axis = d3.svg.axis();
//more code below, but error gets called at the line above this comment.
}
However, I get the following error returned consistently:
Uncaught TypeError: Object #<Object> has no method 'axis'
This is very perplexing, as I was simply following the d3 API at https://github.com/mbostock/d3/wiki/SVG-Axes.
Would somebody kindly point out where I'm going wrong?
(for reference, force.json is the data I am working with)