Chart.js 2.6.0
Expected Output
I have a problem to solve, I needed to generate this chart out of data:
I somehow managed to generate this chart.
Problems
I am searching for best way to detect summit/peak of data-mountains so that I could put a point(arc) at the top.
Is there a way to put labels in x-axis like in the picture above? I mean there is label after every 21 seconds.
Code so far
Gist: https://gist.github.com/shivabhusal/efb48db79128ffd926cc25960a1d875c
I overrode the draw function of Chart.js and drew lines and points on my own.
Any help will be appreciated, thanks.
Note: My data is not guaranteed to be pointy at the summit; sometimes it can get plateau.
Necessary CodePen is https://codepen.io/shivabhusal/pen/LjWyMe?editors=0010
Related
[EDIT] - Resolved: See final chart in the end.
Infomation
Some background first. I have a line chart that plots power produced by a facility in a very simple line chart. This facility has 5 machines producing this power. Sometimes, these machines have some problem or errors.
I would like to show these errors and for how long they have persisted, per machine, along with the power production chart.
The errors chart
Reading the Highcharts docs I realized that the best way to show that would be in a columnrangechart, inverting it to be a horizontal columnrangechart.
Here is an example (jsfidle):
Obs: Consider the [-6 .. 9 ] axis as a datetime axis
This chart would be read like: Machine 0 had two errors: One from -6 to -1, and another one from 0 to 2, and so on.
Where Am I now?
So, now I tried to make this work together with a line chart. And this is where I can not make it work. My columnrangechart stays in the vertical and not in the horizontal and I can figure how to flip it.
Here is the current state: (jsfiddle)
Question
Is there any way I can plot these two charts together?
[EDIT] Answer
Using #jlbriggs comment's idea, I could come up with the right chart (jsfiddle):
I'm using the Parallel Coordinate Chart from the following link
http://mbostock.github.io/protovis/ex/cars-full.html
With identical cars-full.html, ex.css, cars.js and protovis-r3.2.js, the chart is displayed with missing lines. (see picture below)
Local version of Parallel Coordinate Chart
Anybody has any idea on what could possibly go wrong here?
This issue is resolved by rewriting it based on the code at github.com/mbostock/protovis/tree/master/examples/cars.
I couldn't find any jquery library that can plot 2 dimensional bar charts (if i name it true). I want to plot a graph like this;
As you can see there are 2 variable for each bar. Width and height. But i can only change height of the bar charts in every library i tried.
I want to give 2 interval for each variable and plot a rectangle.
Can you help me to find a library that can plot it or share some information about it?
Thank you.
I found the answer with luck. It is called Marimekko graphs and you can plot it with this javascript library.
http://www.mekkographics.com/free-trial/ or
http://www.fusioncharts.com/charts/marimekko_2/
It solves many problems to know its name. You can search for marimekko charts. Also there are lots of free codes in internet like;
http://bl.ocks.org/mbostock/1005090
https://gist.github.com/mbostock/1005090
d3.js how do I add text to Marimekko chart
http://www.jqplot.com/deploy/dist/examples/mekkoCharts.html
Using the sample line chart code for Chart.js (http://www.chartjs.org/docs/#line-chart-example-usage), I am able to create a perfect Line Chart in js fiddle or on a standalone page.
The problem is, that exact same configuration code, when inserted into my project and turned into a custom Knockout binding, doesn't show the data labels that should be on the left and bottom edges of the chart. Besides that it looks exactly the same as the sample, like it should.
My code is much too complex to include here, so what I'm looking for is just random spitball ideas of what, possibly, could be causing this to happen? Because Chartjs outputs a Canvas element I am finding it near impossible to diagnose this problem.
Thanks ahead of time for any suggestions!
What a silly problem. It turns out that the default color for the labels is #666, which is the same as my background color. I was using the wrong attribute name to change the color of the labels, the proper attribute to set the "data label" color is: scaleFontColor
I am using d3.js along with dc.js and Crossfilter. As seen on the below image, the chart should end on 12/31/2016 as there is no data after that but keeps on going. Probably stuck at the last value. This is only happening in line chart. When I use a bar chart it does not happen.
Is this a known bug? Not sure what else I can do? I copied the configuration exactly from the dc.js example page (composite chart) and applied my dataset.
Found the problem. My dimensions were based on dates and some records had a typo in them. Instead of 2013, it had 2103 which caused the problem.