Change axes limits in plotly heatmap - javascript

to visualize data I am using a heatmap from the plotly.js library. After rendering the heatmap I want to be able to dynamically change the axis limits. So far I manage to do that for the z-axis (color) but not for the x- or y-axes.
Here is what I try:
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
data[0].zmin=0;
data[0].zmax=10;
Plotly.redraw('myDiv');
Sadly only the z-axis works. You can check an example here: https://codepen.io/brockerdocker/pen/QWgvLGx
Here is what I get (only z-limits changed):
And here is what I would like to get (also x- and y- limts changed):
However this 2nd heatmap I can only achieve if I specify x- and y-ranges before I call Plotly.newPlot('myDiv', data, layout);. Once I generated the heatmap it seems that I can't change the ranges anymore.
So any idea how I could still change the ranges after having generated the heatmap would be great.

I just found the solution:
In order to being able to set a dedicated range for the x- and y-axes one first has to set 'autorange' to false:
layout.xaxis.autorange=false;
layout.yaxis.autorange=false;
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
Plotly.redraw('myDiv');
So that should work.

Related

Javascript / Adjusting colors

We are using this chart. I see there is no property available to customize the colors of the pie chart.
Is there a way to customize the colors ?
Also how can we enable legend for this (if we could display legend in the bottom of the graph, it could be great. i.e like this )? and display only percentage on the graph?
To make the graph exploded, i see we need to use ["pulled": true] in the dataProvider. Instead of providing it inside the dataProvider, is there a way to provide somewhere outside ?
There are two ways to customize colors
1) Use the colorField and define the colors directly for individual slices.
2) Set your own theme by modifying the colors array or create your own theme.
Legends are enabled by setting an empty legend object in the chart config. You can find further configuration properties in the documentation. You can even change the value label to use percentages by modifying the valueText property. There's also an example of a pie chart with the legend set up and a completely custom legend.
If you want to change the pie slices labels, change the labelText.
As for your last question, no - it's using pulledField to specify which slices are pulled out in your data. There isn't a setting to explode the entire chart without it.

how to synchronize multiple d3 charts when zoomed?

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

Y-axis scale uneven

When using Chart.js i cant find a way to evenly scale the Y axis. Overiding and using manual scaling( scaleOverride: true ) for every chart is not really an option since there are alot of them and they have different data. Some one have an idea how to fix the scaling of the data?
This is the scaling i want:
Sometimes the scaling gets uneven depending on the data.
You can set the options globally - this will apply to every chart instance. For instance
Chart.defaults.global.scaleOverride = true;
...

Jquery Graph to display Engine Status

I need to draw a graph to display engine status.That is i will be having time like 1-2,2-3,3-4 along axis and by using bar graph i need to display whether engine was on or off at these time.
That is from 1-2 if it is off it will how black and 2-4 if it is on it will show blue color and again if the status is changed it should show black from blue.Right now i have customised jquery high charts for displaying one bar,by removing some parameters.
I need to know how i implment this here or is it possible in this graph?
You can do this with a column range chart, with minimal fudging.
The main issue is making sure you set your data points correctly, and to set grouping:false in the plotOptions. The x value needs to be specified for each data as well, or else they will all be given a separate x value
Example:
http://jsfiddle.net/jlbriggs/o9ck2zLn/
This can easily be adapted to a time axis by supplying the timestamps as the y values.

How can I draw a custom horizontal line with jqplot?

The pink line is what I'd like to add, to emphazise a certain percentage value. Is it possible with jqplot and how would this be achieved?
You should use canvasOverlay for jqplot to draw custom lines or other objects on your graph.
Please follow the link and here you can learn about how to use canvasOverlay.
http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html

Categories

Resources