How to show overlapping in various columns of highcharts column range graph - javascript

I have a requirement to display an event based calendar. However, there are almost no functionalities related to calendar and its just a graphical representation of events throughout a year. Hence I have planned to use HighCharts columnrange graph. This saves me a lot of boilerplate for event listening.
However, when I get several overlapping events, its hard for me to show them as distinct.
How can I use highcharts existing features to accomplish this.
I have looked for style properties in events. But couldn't found anything helpful.
I tried searching if highcharts provides any form of gradient's implementation, but I didn't get much help there either.
I tried giving color with an opacity as rgb(r,g,b, 0.2) but somehow this gets turn to black.
Here is my working demo. In this chart event8 and event7 are overlapping. There exact time duration is similar to event 9 and event 10 respectively.
I found a similar question here, but this question talks of vertical overlapping while I need to distinguish horizontal overlapping (as shown in demo). Also I tried the answer given here, which had no affect.
Can someone suggest the way to achieve it ?

I think that good idea is to use partially-transparent colors for your columns. To use transparent colors you should use rgba, not rgb parameter.
Here you can find code that may help you:
data: [{
name: 'event7',
x: 1,
low: 36,
high: 43,
color: "red"
}, {
name: 'event8',
x: 1,
low: 25,
high: 38,
color: "rgba(100,100,100,0.6)"
}]
And here you can find live example how it can work:
http://jsfiddle.net/ay1Lk2yw/4/

Related

Chartjs - tooltip - different corner radius

As in documentation, to change cornerRadius of tooltips
tooltips: {
cornerRadius: 10
}
But i need to change one corner in different way than the others ( like in css -> border-top-left-radius: 10px )
example image
Is it even possible ?
ChartJS (actual version 3.5.0) doesn't offer a way to specify a different cornerRadius for every corners. For setting different values for border radius of a tooltip you can enable external tooltips in the global or chart configuration and use your custom CSS code for that purpose. Speaking about the native ChartJS code, I recently filed an issue on their GitHub repository to discuss the implementation of this new feature. There you will find the code that allows the kind of functionality you are asking for. It involves changing just a few lines of code in a single function. Hope to have been of help for the community and for ChartJS users like you that need a cornerRadius object
{topLeft: 50, topRight: 50, bottomLeft: 0, bottomRight: 0}
instead of a single value to customize the chart tooltip.

What is correct syntax to draw a closed irregular polygon with matter.js and/or phaser.js?

n00b here so please excuse my lack of terminology,
How do I make an irregular polygon with this style of code?
this.matter.add.rectangle(100, 300, 30, 400);
this.matter.add.circle(125, 200, 40);
this.matter.add.polygon(150, 10, 5, 30);
Those are examples of some working closed shapes in my page.
I tried adding pairs of x,y coordinates but the page fails, I’m not even sure if .polygon is the element name I need, I tried .points but I’m such a n00b, I could have gotten the element type, bracket types, or commas wrong etc? Here is my page so far:
https://www.rhgrafix.com/SlicePhysics.htm which has these externals:
https://www.rhgrafix.com/js/game.js
https://www.rhgrafix.com/js/phaser.js
https://www.rhgrafix.com/js/polyk.js
I see that the elements get set up in phaser.js, but the code syntax is confusing, all the tutorials have a different syntax style than what I have.
My page based on this demo by Emanuele Feronato https://www.emanueleferonato.com/wp-content/uploads/2019/03/slice/
My goal is to draw a simple outline of an anvil and slice it up, and hopefully learn how to color each shape outline a different color and fill them with color and hope it still slices up .I have a feeling that it may have to be made from primitive shapes in a group, as long as it doesn’t fall apart and can be sliced with polyk.js I’m happy. Thanks much!
R.L. Hamm

Highcharts move xAxis down / off of chart

I am working on legacy code from a previous developer and they used highcharts.js (v3.0.1). The xAxis is landing within the graph (screenshot) and I can't sort out why this is. I tried to recreate this in jsfiddle but I can't get that axis to move. I thought that maybe it was a bug in the version but I can't get it to replicate so I'm thinking that is has to be something within the sites own CSS that is manipulating it, however, it's built with g, rect, and text tags which I don't see in any of the custom CSS files.
I've looked through other Highchart.js posts on here but I haven't seen this issue posted yet. Does anyone know what I'm missing?
EDIT: I forgot to mention this but all the usernames are centered text-center
Check exactly how xAxis labels are aligned. As I can see they are rotated vertically so it is important to set appropriate labels align property:
xAxis: {
categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
labels: {
align: 'left',
rotation: 90
}
}
Demo:
- labels align center: https://jsfiddle.net/wchmiel/29b4qejc/
- labels align left: https://jsfiddle.net/wchmiel/56evyrxj/
Api reference:
https://api.highcharts.com/highcharts/xAxis.labels.align
are you use the labels padding ?
https://api.highcharts.com/highcharts/xAxis.labels.padding
Be sure that the number is greater than 0.

How to have smooth (horizontal) transition on a c3js dynamic chart

I started playing with c3js hoping to get a good looking dynamic chart. While testing it I noticed that the transition between each load functions seems to happen without any sort of transition. I also tried to use the flow function but got to the same result. I couldn't find anything on this topic only but basically is there a way to change this behavior and have a smooth transition when a new data point comes in?
You can see my example here:
transition: {
duration: 0
},
https://jsfiddle.net/g4cq6pg0/1/
When I actually enable transition it works well (horizontally), until I start removing some data to add new metrics, then things go south. Instead of just transitioning horizontally it also transition vertically which makes things very hard to look at (350 is the default value):
transition: {
duration: 350
},
https://jsfiddle.net/g4cq6pg0/2/
How can I force a smooth horizontal transition only?? Here is an examples (using D3 only) of what I mean:
http://bl.ocks.org/simenbrekken/6634070
Yeah, the line's moving, but the points are just bobbing up and down vertically to fit the current values, not moving with the line...
Have a look at the question here --> Dynamic timeseries C3js chart
The flow api lets you do what you ask but has a significant bug (see my answer there), so adjusting the questioner's own answer may be your best bet for the smooth horizontal transition
PS. If you also want to stop the y axis auto-sizing, you'll need this in the chart declaration:
axis: {
y: {
max: 1 // translates to 100% on the y axis
}
}
c3js has a .flow method specifically for this: http://c3js.org/samples/api_flow.html
Be aware it starts to freeze if you switch to other tab and return after a while.

Is it possible to rezise the graph dots in the jquery library flot when being hovered?

when working with the jquery library flot (like this), you might want increase precision when hovering over he dots, so my question is if there is any way of making this area of whitin a dot is hovarable bigger?
Use the radius property of the series hash you pass to the $.plot function to set the radius of the clickable data point on the chart. So instead of this as it is now:
points: { show: true }
change it to, say, this:
points: { show: true, radius: 6 }
The measurement is in pixels and the default radius is 3 pixels. Personally speaking I wouldn't go much above that if the data points are close together like in the example chart: you run into the opposite problem where all the points overlap and run into each other.

Categories

Resources