I am trying to create a highmaps chart that contains two mapbubble series so that it will show two bubbles in each country rather than just one. I am however struggling to understand how I can manipulate the x coordinates of the series so that they are not drawn on top of each other.
You need to manipulate second serie's data and change x/y values, because points are printed according to these values.
Related
I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.
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.
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 trying to use Highcharts.js to create a chart made up of two types: a box plot and a column inside the same cartesian axis system.
I've got two y axes with different scales (the one for the box plot data on the left and the one for the columns on the right).
The series share the same categories on the x-axes.
Can I combine this two rapresentations in the same chart? The results should be something like this: Boxplot combined with Columns example.
You could use both series types without any problems. To set each point of boxplot series on left side of each column you could use pointPadding and pointGroupping for columns and pointPlacement for boxplot.
Example: http://jsfiddle.net/zyy2g6xs/
I'm trying to create a data visualization in d3.js that contains two charts: a parallel-axis plot, and horizontal colorbar chart (I just made up that name, but it's basically a series of colored rectangles). Each line in the parallel-axis plot is associated with a set of rectangles in the colorbar chart.
Right now, mousing over a given line highlights that line, and mousing over a given rectangle highlights that set of rectangles. My goal is to also highlight the associated line or set of rectangles on the opposite chart anytime the user mouses over either chart. This seems like it would be pretty straightforward if I generated both charts with the same function. However, it would be much neater (and more reusable) coding style to give each chart its own function and just connect them somehow. I tried having each within-chart mouseover function call a function defined at a higher level that affected both charts, but this didn't seem to have any effect on the chart that wasn't moused-over. Since I still don't feel like I fully understand how d3.js works on an underlying level, I'd really like to have confirmation that this is a viable way to set up my code. My code is long and complicated, and I really just want advice on the structure, so here is the basic outline:
function chart1(){
make chart
function mouseover(d,i){
do stuff
chart1_globalmouseover(d,i);
}
chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}
function chart2(){
make chart
function mouseover(d,i){
do stuff
chart2_globalmouseover(d,i);
}
chartElement.on("mouseover", function(d,i){mouseover(d,i)});
}
function chart1_globalmouseover(d,i){
do stuff in chart 2's mouseover function
}
function chart2_globalmouseover(d,i){
do stuff in chart 1's mouseover function
}
c1 = chart1();
c2 = chart2();
One way to link the two graphs independent of the code used to create them would be to assign IDs or classes to the elements you may want to select. That is, if graph 2 has an element with ID foo, then in a mouse handler for an element of graph 1, you could say d3.select("#foo").style("stroke", "red") for example. Similarly with classes.
This approach allows you to keep the code completely separate. Moreover, if you use classes, you can assign the same class to things you would want to highlight together (e.g. elements representing the same data). Then d3.selectAll(".class") would select and allow you to manipulate all of them. This would work for an arbitrary number of graphs, not just two -- what changes is simply the number of elements that will be selected.