I am generating a graph for one div, and I want to display that exact same graph on another div?
I have:
var plot = $.jqplot (firstDiv , data,options)
And I want to plot this to another to another div, is that possible assuming i don't have data or options available to me? Would I be able to use the plot variable to draw to the secondDiv?
you can use the plot variable like this
$(document).ready(function(){
var plot = $.jqplot ('firstDiv', data,options);
$.jqplot ('anotherDiv', plot.data,plot.options);
});
Related
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');
Example: https://codepen.io/anon/pen/YedQog
If I comment out the line donut2.create(petData()); to only create one chart, it works fine. However, when that line is left in and I use the logic to create two distinct pie charts, the labels disappear for the first chart. I'm at a bit of a loss as to why.
Any help appreciated.
$(function() {
var donut1 = new DonutCharts('#money');
donut1.create(moneyData());
var donut2 = new DonutCharts('#pets');
// donut2.create(petData());
});
Instead of
var donuts = d3.selectAll('.donut');
do
var donuts = charts.selectAll('.donut');
Reason:
d3.selectAll('.donut');
will select the previous created chart and so the problem, that is the reason why the last graph text comes.
working code here
function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle
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 am attempting to replot a chart when the user selects the tab to display the chart(initially it is set to visibility:hidden). Once it plots the graphs again, I don't see any of the lines or bars in the graphs, I only see the legend. I want to see all of the data again. When I don't hide the element and just plot it, it works fine, but I need to hide the element so that data can be grouped together in a logical order.
Here is the code I use to plot the charts while it's hidden, jqPlots is an array which contains the variables used for plotting.
var plot = $.jqplot (DATA GOES IN HERE)
jqPlots.push(plot)
Then within the handler for displaying the div I have
for(var i = 0; i<jqPlots.length; i++)
{
jqPlots[i].replot();
}