I'm fairly new in js and I'm using chartjs to plot information of database.
Until now, I have managed to plot all my work. But there is one thing I don't know how to do.
I have a nested dict like this :
{
"tech_1": {
"cert_1": 1,
"cert_2": 3
},
"tech_2": {
"cert_3": 10,
"cert_4": 5
}
}
How can I plot this dict in chartJS to have something like this :
Thanks for your help.
Chart.js doesn't support nested label.
https://github.com/chartjs/Chart.js/issues/4946
In discussion above, unofficial plugin is recommeded. This may realize your needs.
https://github.com/sgratzl/chartjs-plugin-hierarchical
Related
In my application, I can view multiple charts at the same time. Those charts can be either displayed seperated or overlayed. Overlayed means, that those charts all are in the same chart-div, like this:
The problem is: if i want to add the data, i need to build an array out of all those datapoints, looking like this:
let data=[
{
date:...,
data1:...,
data2:...,
.....
},
{
....
}
]
But when i load it from the server, I have seperate data arrays which i have to merge. That means, I have to look at every single datapoint and create a new one in the "merged-array" if there is no datapoint at the given date.
Doing this with thousands of datapoints uses way too much resources. My question is: is it possible to supply multiple data arrays instead of only 1?
Using series.data instead of chart.data solved the problem for me!
I'm new to chartjs and couldn't find any example on this...
Is there a way to stack these charts vertically (same x-axis) with one long y-axis instead of 3 scales/y-axes ?
From this:
To something like this : (just an example)
here an example:
https://jsfiddle.net/Developer2011/ogjewLuz/34/
Thanks
Soo I did some research about it and there is a lot of people with this problem.
The solution that I'm giving to you will have some problems interacting with the final user but if it's just for display maybe this is what you want.
Right here is the example where you can ofcourse add your own format and specifications:
https://jsfiddle.net/4th6rbcw/3/
Hi all,
I'm looking forward to create a chart like below attached. I'm googling to find out which chart have the option to create like this type of chart, no exactly similar like the text text inside each arc, but with empty.
Primarily i was looking in chartjs, since i'm new to use any chart library, i'm yet to understand the options in it, mean while if any one has suggestions, it will be help to me.
Thanks all
If you want to use another library d3.js. You should look into this:
https://github.com/amanjain325/angular-d3-charts/tree/master/src/app/doughnut-chart
Edit the radius value as per your requirement.
let pie = d3.layout.pie()
.startAngle(Math.PI / 2)
.endAngle(Math.PI * 2 + Math.PI / 2)
.value((d) => {
return d.value;
}).sort(null);
let arc = d3.svg.arc()
.outerRadius(150)
.innerRadius(70);
let g = svg.selectAll('.arc')
.data(pie(piedata))
.enter().append('g')
.attr('class', 'arc');
You can use ECharts. There is also a vue version for this. They have exactly this type of chart.
Another possibility would be to create a chartjs plugin for this kind of chart.
This question already has answers here:
How to add data labels to a bar chart in Bokeh?
(2 answers)
Closed 3 years ago.
I am currently using this example to create bar chart with Bokeh: http://docs.bokeh.org/en/0.11.0/docs/gallery/stacked_bar_chart.html
Everything works so far, however I couldn't find a way to add data value to each bar like this chart:
http://docs.bokeh.org/en/latest/docs/gallery/elements.html
The Bokeh.Charts.Bar class does not have the .text() function like Bokeh.Plotting.Figure. Is there anyway for me to add in the data like the elements chart to the bar chart? I have tried digging around all the codes below the classes and could not find any solution. Help is really appreciated. Thanks in advance.
A few comments:
First, in the near future (possibly in 0.12 but not certainly) the Chart class will be made a subclass of Figure so that all of the "glyph methods" like Figure.text will also work on charts as well.
Regardless of that, Chart is always a subclass of Plot which means that you can use "low level" glyph objects and Plot.add_glyph anytime. This looks basically like:
from bokeh.models.glyphs import Text
text_glyph = Text(x="x", y="y", x_offset=10, text="foo")
text_renderer = plot.add_glyph(data_source, text_glyph)
A complete example (from version 0.11.1) using the Text glyph can be seen here.
Finally, just today a new PR was merged to add a proper Label annotation to Bokeh, that will make this kind of thing even easier. You can see the PR here:
https://github.com/bokeh/bokeh/pull/4106
This work will be part of the 0.12 release.
I have date and 3 other elements of each job, that python reed them from a txt. and now I want to use these information to create a diagram with Bokeh.
how can I use date format(x-axies.start and end time of each job) and string formats(y-axies.3 elements for each job) in bokeh?
***Does anyone know of a working example for the Step Line chart type which exemplifies how to build the necessary data structure?
EDIT: the original answer below is obsolete, as the ggplot compat layer was removed from Bokeh many years ago. However, Bokeh now has its own built-in Step glyph:
https://docs.bokeh.org/en/latest/docs/user_guide/plotting.html#step-lines
OBSOLETE ANSWER:
I'm not sure if this is what you are asking for or not, but you can
use ggplot.py to generate a step-chart and then output to Bokeh:
http://docs.bokeh.org/docs/gallery/step.html
There will probably be a native step chart in Bokeh.charts later this
year (or sooner, if an outside contributor pitches in).
You would need to add your own data to this part:
df = pd.DataFrame({
"x": range(100),
"y": np.random.choice([-1, 1], 100)
})