I'm trying to show heatmap in Django templates using AnyChart and I'm stuck with problem when not all Y values are shown in heatmap.
As you can see on the screenshot, 3 out of 6 values are missing.
Here is code from the template:
...
<span>Mapped Dimensions</span>
<div id="mapped_dimensions_chart"></div>
<script>
anychart.onDocumentReady(function () {
chart = anychart.heatMap({{ map_dimensions_data_anychart | safe }});
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(["#CF7A78", "#E69645", "#69A231", "#4D7623"]);
chart.colorScale(customColorScale);
chart.container("mapped_dimensions_chart");
chart.draw();
});
</script>
...
Does anyone knows why this is happening?
The chart tends to avoid overlapping labels of the yAxis so it hides some of them. You can disable this behavior and force the chart to show all labels. To achieve that, add the following line to your code:
chart.yAxis().overlapMode('allow-overlap');
Related
I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/
I'm trying to configure a c3gauge chart but I would like to show the threshold values in the chart (outside labels with the color would be nice) just to realize how far the value is from the next level.
Any one can help me?
This is the gauge now:
This is what I expect:
There is no specific option in c3.js Gauge chart to draw thresholds lines and legends, so I thought to use d3.js to add them to chart on rendered event:
onrendered: function() {
drawThresholds(this, thresholdOpts, opts);
}
Check this jsfiddle for complete example: https://jsfiddle.net/beaver71/032tcczg/
Output obtained looks like below:
and:
I have implemented the chartjs. And used piechart. Currently tooltip shows on hover. Is there any way to show the tooltip by default?
As I can understand, you want to always show a tooltip for a given data segment
You can use following code snippet:
var pieChart = $("#chartContainer").dxPieChart({
dataSource: data,
series: {}
}).dxPieChart("instance");
pieChart.getSeries().getPointByArg("Second").showTooltip();
See working sample here
And demo here
Is it possible to achieve the same effect with the 'new' Google Charts API like in the deprecated Image Charts service where the labels are outside the chart and a line points to the right pie slice?
Important: I know how to create the pie chart, I just don't know how I can achieve the: labels outside the chart + lines layout.
How it should look (uses deprecated Image Charts):
EDIT: just to make sure you guys don't write down to much code, I am just searching for the right properties to achieve this. Thanks.
You can get a similar result by using the legend.position property and set its value to labeled.
Though the line points will be attached to the centers of the slices, it's not possible to reattach them to slice borders.
var options = {
legend: { position: 'labeled' }
};
// ...
chart.draw(data, options);
The picture of the chart:
I'm using nv.d3.js and d3.v3.js and working off this model example.
I want to remove the Y2 axis and have the bar and line chart work off the same data. So, they should be working off the same scale.
Note: I have seen this very related post and tried the solution given there. The below code was provided in that link. I implemented into my code and it didn't work, apparently because I am working with d3.v3 and not d3.v2.
chart.y2Axis.scale().domain(chart.y1Axis.scale().domain());
This line of code made some difference though. If I hover my mouse over the displayed points, they no longer enlarge. If I hover my mouse over the bottom of the x-axis the points enlarge. This seems to hint that the line chart points are being re-scaled but not redrawn.
Any help is appreciated! Thank you!
EDIT / UPDATE: If anyone is trying to do the same thing, I simply used d3.json() twice! See below:
d3.json("data.json",function(error,data) {
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
....
....
return chart;
});
});
d3.json("data2.json",function(error,data) {
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
....
....
return chart;
});
});