Kendo ui Column Chart Labels - javascript

With the Kendo UI column chart, is there a possible way to show a series default label with a value of 0? The labels work for pie charts and line charts.
Here is my javascript and I don't see any configuration options
http://jsfiddle.net/8YnKv/30/
Thanks.

It's a hack solution, but if you are not concerned about decimal values, you could always set your 0 value values to something like .00001 and then use the kendo.format to round it to the nearest whole number, which is 0. Example jsFiddle:
http://jsfiddle.net/8YnKv/31/
Now, if you need to preserve decimal values, then this solution will not work for you. I hope that Telerik comes up with a solution soon.

Related

aligning zero line in echarts

normally I would have some full-blwn code to post with my questions but this is a very generic question... I have create a chart with two y-axis on echarts through yAxis: [{name:'abc', type:'value'},{name:'xyz',type:'value'}]. both axes might have data that goes to negative, but the second axis doesn't always have negative numbers. I would like both axes' 0 value line to align at the same level at all times. As the range of both axes individually might vary greatly depending on the dataset supplied, I wouldn't want to manually set the ranges for them and would like to rely on echarts built-in capability to decide on an appropriate range as long as the zero line is aligned. is this possible at all? thanks in advance

Grouping of the bubble chart

This is the working fiddle of the bubble chart - fiddle
I want to perform grouping into 5 classes based on the "size" values in flare.json file given in the fiddle.Example -
100-5000 //all the size values between 100-5000 should be in this range
5000-10000
10000-15000
15000-20000
20000-25000
I have tried finding and displayed the maximum and minimum values in console.log but I am unable to understand how to perform grouping and display for bubble charts.
I would graciously appreciate if anyone can spare some time and provide me a help.

Sparkline charts are misleading

I am using sparklines charts from omnipotent.net to display statistical information. The problem is that the lowest value in a data series, is always shown on the charts as if it's zero.
For instance, if I have a bar chart with 3 bars, and they have the values 4, 2 and 5, the lowest value (2) would look like it's zero on the bar chart (look at the picture to see what I mean).
I know that it's possible to set the "chartRangeMin" option in order to avoid the problem, but I am not using javascript to make the chart, but rather HTML.
Here is my code:
<div class='sparkline' data-type='bar' data-bar-color='#338ce8' data-bar-width='42' data-height='22'>1.37, 1.55, 1.66</div><ul class='list-inline text-muted axis'><li>2007</li><li>2008</li><li>2009</li></ul>
The question if, how do I use Javascript to set the "chartRangeMin" to another value than zero?
From the jQuery Sparklines documentation, on Line Graphs you can set the chartRangeMinX. This will allow you to set a minimum value for the X axis.
http://omnipotent.net/jquery.sparkline/#syntax

Use a jquery type slider to iterate through a csv and display one bar at a time in a d3.js bar chart

So I'm generating bar chart in D3.js with a csv file a la the basic columns example. What I want to do is show just one bar at a time for each row of data. A JQuery-like slider will iterate over the csv rows and update the chart. For the user, it'll just look like the single bar's height is changing but the x axis should update with the date as well.
Here's an example of the data that I'll be feeding into it:
DATE,INFLOW (CF),OUTFLOW (CF),STORAGE (CF)
20120101,950400,28857600,11084277600
20120102,60912000,28771200,11099959200
20120103,56505600,28857600,11130451200
20120104,55900800,28771200,11158765200
20120105,55987200,28771200,11189692800
20120106,56419200,28771200,11220620400
20120107,55123200,28684800,11246756400
The only thing I actually want to show is DATE and STORAGE (CF). So I'll probably have to do some parsing of the CSV somewhere to get it in the best shape.
I've attempted this and would post some code but all of my attempts are a mess. I can generate a plausible bar chart with all of the rows at once, but when I attempt to show a single one, everything breaks. Here are the challenges that I could use some guidance one:
How to splice or filter my csv with a slider so that only a single row is selected
Best way to generate a bar chart that only has a single bar from a single row in a csv (every time I try to do this I have trouble with axes and accessing the array values correctly)
Best way to update the bar, changing only height but also updating the x axis ticks
Also any examples would be very helpful! Have been googling like mad but am mostly finding sliders that affect range and scale
There are many pieces to this...parsing and slicing the data, setting up the x axis, etc. Here is one segment of the code.
d3.select("#slider")
.on("input", function() {update(+this.value);});
function update(row) {
viewdata = data.slice((row-1), row);
redraw();
}
Here is a complete PLUNK with the solution. NOTE: I have placed comments in several parts of the code, for orientation. I strongly suggest you fork this plunk so that it will not be lost if I inadvertently delete it.

highchart - scatter : set decimals of x-axis and y-axis

Part I
I want to fix decimals of the x-axis and y-axis elements in the scatter-plot (highcharts).
I've searched documentation in highcharts about properties of scatter-plot. But, I've found nothing. I want to set 2 decimals of elements in x-axis and y-axis because I have a very large number with 8 decimals o more.
Part II
Well, It works the decimals. However, the element of x-axis and y-axis have the same value now. Is it possible to fix this?. I would like the difference between each element of axis equals 0.1. I mean 34.66, 34.67, 34.68, 34.69
Part II -This is the new problem now
Part I - You can see the picture. This is the problem
Use a formatter function with .toFixed(2). Example jsFiddle.

Categories

Resources