My problems is how to create multi scale chart using chartJS.
For example.
In one graph, the X-axis starts from 0 on the scale and advances by 10 steps, and then the scale reaches 70, it advances by 30 steps.
if you know Could you tell me.
enter image description here
You either have to write your own custom scale which achieves this (https://www.chartjs.org/docs/master/developers/axes.html) or use the logarithmic scale which comes the closest to this behaviour (https://www.chartjs.org/docs/master/samples/scales/log.html)
Related
In google cloud monitoring the graph's Y-axis range is dynamic.
In this graphs you can see the CPU y-axis starts from 0 while the memory Y-axis starts from 4GB. The lower bound keeps on changing. This is problematic from a monitoring perspective as on a quick glance it would give the perspective that approx. 50% is being used unless someone notices the Y-axis bounds. I would prefer having all graphs start from 0 (irrespective of units). I cannot find any option to do that. Am I missing something here or did google cloud not add this basic functionality yet?
When you're in a dashboard displaying chart, click on the three dots in the top-right corner and select "stats mode".
That will change the Y-axis to start from 0.
The title of this question isn't great at explaining what I want to do, so have this gif of the effect I want to emulate: https://i.imgur.com/zRqTSqf.gif (quality of the gif is shite, ik, please bear with me)
I think I need to use the LoopOut() expression for well, the loop, but I don't know how to animate the colors like that. Do I assign different colors in a shape? I'm fairly new to motion graphics, so I'm not familiar with technical terms and all that. Any help/guidance is appreciated!
I would recommend the following:
Create the square shape you are looking for, as a shape layer with a stroke and no fill
Duplicate the shape layer, for example, 4 times
Apply the Trim Paths effect to these layers and distribute it as you wish (for example, if using 4 layers first one from 0 to 25, second one from 25 to 50, third 50 to 75 and fourth one 75 to 100%.
Set a different color for each layer
Create a new Null Object and assign the Slider Control effect to it
Set the Trim Paths Offset property to be driven by the Slider property of the Slider Control (using the pick whip from each layer)
Animating the Slider property of the Slider control in the Null Object, driving the color of all the sides.
Use masks to fix the possible glitches on the vertices and to make it look nice
you can then alt-click on the stopwatch of the Slider property inside the Slider Control of the Null Object and type LoopOut(). Make sure that the first and last keyframes are correct so once the looping is activated the end is the same as the beginning and you should be good to go!
I think this should more or less point you in a possible way of solving it, let me know if you need more help!
In Illustrator, draw a square with a stroke, no fill, and rotate it 45 degrees. And on a separate layer, draw 6 triangles in the desired colours. Example below:
Save as an AI file. Import this artwork into After Effects, setting Import Kind to Composition.
Set the composition length to 4 seconds.
Set the track matte for the triangles layer to the Alpha Matte of the square layer. (#1 in the above)
Open the rotation property of triangles, set a key frame on frame 1, then go to 4 seconds, and set a key frame of 1 rotation. (#2 in the above)
Precompose these layers, then apply a CC Light Burst 2.5 effect for the glow.
Result is as below.
I am creating project with ChartJs, and I am fetching real time data from the server. Each second, I add extra data point. After some time, there is just too many points on the graph, to the point that you cannot see anything. I would like to know, if there is a way to scroll through the x-variables, and always have set distance between the points? As of know, the distance between points is shrinking, making the graph not readable.
Thanks!
I would like to know, if there is a way to scroll through the
x-variables,
You can use .removeData( ) to remove the (current) first set of points. This would keep only the same number of (latest) points visible on the graph.
...and always have set distance between the points?
Unless you remove points maintain a set distance while adding points would cause the graph width to increase - which is usually not what you want to do.
I want to use a menu image for short and long menus, when I scale the image the edges look bad. Is it possible to scale only middle part of a sprite or is there a way to do what I want?
Thanks for you help.
You need to use a technique called 9 Slice Scaling. It involves slicing the image into 9 slices so that only the middle part scales in both directions, where as the edges only scale up/down or left/right to preserve them.
There is an open source implementation on GitHub which I use and it works well.
I want Google chart to make better use of the vertical space available for this graph:
https://chart.googleapis.com/chart?chs=300x150&cht=bvs&chxt=x%2Cy&chd=t:7,8,5,6
QUESTION: How to make the vertical axis adapt to the range of values automatically?
For instance, 0→max value would be great.
Note: I could write a server-side algorithm to find the max value and use it as a parameter, but there is probably a better way to do this with Google Charts, right?
I ended up writing a server-side loop to check what is the maximum value, and then use it:
&chxr=1%2C0%2C" + max + "&chds=0," + max
Any better solution is welcome!