I am using sparkline charts in jquery. This may be a bug or a property but when we pass only one single value to charts
the line does not form. Only after receiving more than 1 values it is formed.
Here is the jsfiddle.
This is my code
var values = [5,7];
// Draw a sparkline for the sparkline line chart element element
$('#line').sparkline(values, {
type: "line",
// Make the tooltip say "NA" for values of -1
tooltipFormat: "{{y:val}}",
tooltipValueLookups: {"val": {"-1": "N/A"}}
});
How can I change the code so that on receiving only one value also it should draw a line chart?
Related
I'm trying out react-nvd3.js, and I have no problem rendering a line chart with a single series. However, I am not sure on how to render with multiple series on the same chart (same axis).
I know that my data is in the correct format since the chart will render one series (the first series). The option to show/hide the two series does appear correctly. I am guessing adjusting the y="value_1" should do the trick, but have so far not been successful.
my data:
datum = [
{
values: series_1,
key: 'value_1',
},{
values: series_2,
key: 'value_2',
}
];
and my rendering:
<NVD3Chart id="lineWithFocusChart" type="lineWithFocusChart" datum={datum} x="label" y="value_1"/>,
It seems you have a problem with how you are referencing the dataset to the x and y axis.
Try changing your attributes to
x='key' and y='values'
<NVD3Chart id="lineWithFocusChart" type="lineWithFocusChart" datum={datum} x="key" y="values"/>
I am new to Chart.js and JavaScript. Currently working with a line chart, and now I want to add custom data points to a mouse click event (when I press somewhere on the data set, it takes the current value of the Y axis and using that value it creates a data point in that place). I took the code from http://www.chartjs.org/samples/latest/charts/line/basic.html and trying to modify it. Here is a link to my current chart:
https://i.stack.imgur.com/M9MF1.jpg
I am using the basic chart.bundle.js library, and used D3.js libraries for making data points draggable.
Trying to implement the creation of points per mouse click using the following code, but it seems that it's not good so far.
document.getElementById('canvas').onclick = function(e){
//getting value by pressing on dataset
value = chartInstance.scales[scale].getValueForPixel(e.clientY)
//trying to create dataPoint
myLineChart.points.push(new this.PointClass({
y: value;
strokeColor: this.datasets[datasetIndex].pointStrokeColor,
fillColor: this.datasets[datasetIndex].pointColor
}));
//after all updating my chart
chartInstance.Update(0)
};
Maybe anyone could explain more about this library and how it creates data points?
Every new point in the chart is data, so you need to add that point in the data (chartData.data.dataset[]) array. Instead of adding to the, myLineChart.points which i'm not sure why you have used you should add the data-point in the data array and the UI decorations such as colors are supposed to be specified in the chartOptions.scales.yAxes[] array. Therefore in order to add the point in the chart use:
// here i is the corresponding parameter for which you want to add the new point
chartInstance.data.datasets[i].push(value);
chartInstance.update();
I have a Highcharts plot which looks something like this
representing time series data for several different series. The thing is, sometimes the data for a particular series is "unavailable" (as you can see with the purple series above), and so the data values are NaN.
I want to have some way of "capping" each series wherever there are NaN values - my ideas was to use plotBands for the corresponding color of each series between all NaN values. However, I cannot seem to figure out if this is even possible. I have done plenty of research and found demos which treat "area with missing points" by simply not displaying anything (as my current chart does), such as this demo with this image:
but I'm imagining a treatment of NaN values that looks something like this instead (I apologize for my lack of artistry)
Is this possible with Highcharts?
You have to use load events in chat to add plot band
Fiddle
chart: {
type: 'area',
spacingBottom: 30,
events: {
load: function () {
var series_data=this.series[1].data;//this is second series data
for(var i=0;i<series_data.length;i++){
if(series_data[i].y==null){
//adds plot band
this.xAxis[0].addPlotBand({
from: i-1, //point back
to: i+1, //point after
color: '#0066ff',
});
}
}
}
}
},
I am uisng tickPositioner to plot certain dates on X Axis.
xAxis: {
......
tickPositioner: function(min, max) {
// custom function which returns dates array.
return getDatesBetweenRange(min, max);
},
.....
}
using Highstock v1.2.5.
I also have Show/Hide series option in the Legend. It works fine no issues till here.
Now, When I hide any series from the chart.
I do not want to show those dates on x Axis who have no data as the series is hidden.
I was looking into source code at "getOffset:" method where Label is being created for each
Tick.
Is there any relation in API which returns all series points for this Tick ?
Or
Is there any relation in API that says that this tick pos (e.g. date) has no data visible ?
As I know, you can use a little different solution:
In tickPositioner you have access to all series for specific axis via this.series. Now, each of these series have xData which contains all x-values. All you need to do now is check if series is visible, and then compare your tick values (generated by getDatesBetweenrange()) with values in xData arrays - and return only these values which could be find there.
I've already drawn a flot graph using some data:
var plot = $.plot($("#placeholder"),
[{
data: data,
}], {
series: {
points: {
show: true
}
},
grid: {
hoverable: true,
}
});
Now I'd like to highlight a single point on the graph, when a user hovers over an item elsewhere on the page.
I found this question, which explains how to totally redraw the series from scratch, but is there a way to highlight a single point?
Or add a new point in a different colour, which would have the effect of a highlight?
NB: when the user hovers over the relevant item elsewhere on the page, I will have the x and y coordinates of the related point, but not the pixel coordinates on the graph.
The API provides the following methods:
The Plot object returned from the plot function has some methods you
can call:
highlight(series, datapoint)
Highlight a specific datapoint in the data series. You can either
specify the actual objects, e.g. if you got them from a
"plotclick" event, or you can specify the indices, e.g.
highlight(1, 3) to highlight the fourth point in the second series
(remember, zero-based indexing).
unhighlight(series, datapoint) or unhighlight()
Remove the highlighting of the point, same parameters as
highlight.
If you call unhighlight with no parameters, e.g. as
plot.unhighlight(), all current highlights are removed.