Not able to display data in heat map coming from JSON. Only X and Y axis are shown.
var data1=[
["2016-01-01", 0, 20.0],
["2016-01-01", 1, 9.0],
["2016-01-01", 2, 10.0]
]
[Fidlele link][1]
http://jsfiddle.net/nxgzeo34/2/
Please advise
Related
Here is what i am doing!
chart.highlightValue(x: timeStampValue, dataSetIndex: totalCount)
==> In the above line,
timeStampValue is x axis value which i have set while filling up the array.
totalCount is total count of array of data which i am displaying in chart.
What i need to achieve is
When chart screen comes up, i need to display marker by default and for that, i am using "highlightValue" method of chart which is not working.
Please let me know the solution to show marker by default programatically.
NOTE: I am using marker whose UI is custom which is working fine when i tap manually at point in chart:
let marker = CustomMarkerView.viewFromXib()!
marker.chartView = chart
chart.marker = marker
chart.drawMarkers = true
Library used : https://github.com/danielgindi/Charts
Chart Data set :
let data = CombinedChartData()
data.lineData = LineChartData(dataSets:[viewModel.lineChartDataSet, viewModel.emptylineChartDataSet])
data.lineData.highlightEnabled = true
viewModel.lineChartDataSet.highlightColor = AssetsColor.highlightedColor.color
viewModel.lineChartDataSet.drawHorizontalHighlightIndicatorEnabled = false
viewModel.lineChartDataSet.highlightLineDashPhase = 2
viewModel.lineChartDataSet.highlightLineDashLengths = [5, 2.5]
you are using the wrong value for dataSetIndex param
based on your code, the datasets only contains 2 data
data.lineData = LineChartData(dataSets:[viewModel.lineChartDataSet, viewModel.emptylineChartDataSet])
dataSetIndex is not data count, in linechart dataset represent a line that has many data (x,y), so dataSetIndex is more like which line
so your code should be something like this
chart.highlightValue(x: timeStampValue, dataSetIndex: 0)
chart.highlightValue(x: timeStampValue, dataSetIndex: 0, dataIndex: 0)
When i added 1 more parameter which is dataIndex as 0 and it worked.
Here, dataSetIndex is set to 0 because it is CombinedChartView where i have merged 2 data set.
How could we plot graphical representation using High Charts where one x-axis value have multiple y-axis value
and for each x-axis value number of y-axis value differs.
I have date on x-axis and on y-axis the readings.
Now, i have data for each date, but the number of reading may differ for different dates. Like for today i have 5 readings and yesterday it was 10 readings.
So i have the data Date vise. and i want to plot it on graph with positive and negative values. I do some RnD for high charts for this, but highcharts dont show the reading receptive with this scenario, or may be i didnt get it. Can anybody help me in this.
Data I have:
1) Date: 1/8/2017
Values:[12,56,-14,35,8]
2) Date: 2/8/2017
Values:[3,9,-4]
3) Date: 3/8/2017
Values:[8,-6,45]
Thank you for the help
You can use the scatter series: https://www.highcharts.com/docs/chart-and-series-types/scatter-chart
Live demo adjusted to your problem: http://jsfiddle.net/kkulig/c6w79bd0/
If you have data composed similarly to this:
var data = [{
date: Date.UTC(2017, 0, 1),
values: [4, 5, 6, -2]
}, {
date: Date.UTC(2017, 0, 2),
values: [3, -7]
}, {
date: Date.UTC(2017, 0, 3),
values: [0, 11]
}];
You can prepare it this way:
var series = {
data: []
};
data.forEach(function(day) {
day.values.forEach(function (value){
series.data.push([day.date, value]);
});
});
When the highstock chart data set has multiple points on the same axis ex:
data: [[0,0], [0, 100], [1, 100], [1,200], [4, 100], [4, 200]]
the point doesn't always choose the highest number by default. It looks like it randomly selects one of the numbers on the same axis.
Here's my fiddler example: http://jsfiddle.net/ceo1y97m/
As you can see when you hover over the different points, it's not always displaying the highest point's Y value. How do I get this to show only the highest point's value?
Edit: Here is the reason that I have multiple x values that are the same:
Let's say the line represents the amount of money you deposit into an account over time. In the line's legend I want to display the amount you've deposited over the period that you're viewing. This would be the furthest point right's Y value minus the furthest point left's Y value. If I don't include the duplicate Y values, this calculation is incorrect.
See updated fiddler to show this error on the legend value (zoom in and out to change the legend values): https://jsfiddle.net/LS384/822/
The two data sets look identical, but the legend values are different, because both points on the same axis aren't displayed.
I'm not sure that this is how the step chart was intended to be used, you should have just 1 value per axis point.
What you could do is filter your data to just keep the highest value for each point
data: [[0,0], [0, 100], [1, 100], [1,200], [4, 100], [4, 200]]
for (var i in data) {
if (filteredData[data[i][0]] == undefined) {
filteredData[data[i][0]] = data[i]
} else {
if (filteredData[data[i][0]][1] < data[i][1]) {
filteredData[data[i][0]] = data[i];
}
}
}
here is your edited filter with the chart looking the same and you desired behaviour http://jsfiddle.net/ceo1y97m/4/
Edit:
I made a workaround, i hid the unfiltered data, used the filtered data for display and gave it the same color as the unfiltered one, and in the function that calculates the difference i use the unfiltered data(ch.series[0].data])
Here is the fiddle with your expected behaviour https://jsfiddle.net/LS384/826/
I would process the data, so you have one point per x value with additional information - multiple values. I treat { x, y } as the information about how the point should be visualised plus add the array with all additional values which allow to make the proper calculations.
This:
[
[0, 0],
[0, 100],
[1, 100],
[1, 200],
[1, 300],
becomes this:
[{
x: 0,
y: 100,
values: [0, 100]
}, {
x: 1,
y: 300,
values: [100, 200, 300]
}]
With points defined as the above, you can access the values via point.options.values and calculate the difference.
example: http://jsfiddle.net/jqdh79vv/
hello I want to create line chart similar to healthkit. For example i have on X axis (Jul 14, 15, 16, 17), Y axis (0, 50, 100) and data set in (x,y) format is ((jul 15, 30),(jul 17, 80))
I try following libraries
https://github.com/Boris-Em/BEMSimpleLineGraph/tree/master/Sample%20Project/SimpleLineChart
https://github.com/core-plot/core-plot
but all populate x axis based on data set. i.e all library only take parameter for data set based on that x axis and y axis labels are populated. Can you please suggest any other library through which I can achieve similar as explain above line chart. Thanks in advance.
Finally i solved my problem using
https://github.com/Boris-Em/BEMSimpleLineGraph/tree/master/Sample%20Project/SimpleLineChart
when there is no value i put (jul 15, BEMNullGraphValue).
Even this you could do it in your existing graph
Consider below example.
- {[0,5],[1,5],[3,5],[4,5]}
See there is no value for 2, so line chart will draw 0-5 to 1-5 then gap then 3-5 to 4-5.
I hope now you could figure out.
Still if you wish then get below graph library.
Do it with https://github.com/danielgindi/Charts
There are many properties like clip, scale, min, max etc for line chart.
Using though properties you could achieve.
https://github.com/danielgindi/Charts/issues/533
Edited answer
After doing some work around, i found the way.
Download sample code
let months = ["July 14", "15", "16", "17", "18", "19", "20"]
let unitsSold = [0.0, 0.0, 0.0, 100.0, 25.0, 50.0, 75.0]
for i in 0..<dataPoints.count {
if !values[i].isZero {
let dataEntry = ChartDataEntry(value: Double(values[i]), xIndex: i)
dataEntries.append(dataEntry)
}
}
Refer attached screen shot
In PNChart create one array of indexes which you want to skip the value. Put condition drawdot funtion on start of for loop of data array if array contain index value then continue.
In Highcharts 2, it was easy to add a point using series.addPoint(p) where the x value of that point fell between the x-values of two existing points.
Example: Let's say you wanted to create a chart with one series containing two points:
var p1 = {x: 100, y: 50};
var p2 = {x: 200, y: 40};
var data = [];
data.push(p1);
data.push(p1);
var c = new Highcharts.Chart({
...//code omitted
type: 'line',
data: data,
...//code omitted
});
In version two you could call add a point between those two by going:
var p3 = {x: 150, y: 60};
c.series[0].addPoint(p3, true);
For 'line' charts, highcharts 2 would automatically determine that the x value of p3 falls between the x values of p1 and p2 and so the line would be plotted through the points in the order: p1, p3, p2.
We are finding that in highcharts 3, the line gets plotted through the points in the order p1, p2, p3 - which implies that it "turns back on itself".
I have prepared the following jsFiddle examples, which add 50 points to an existing series with randomized x and y value.:
Highcharts 2.1.9: http://jsfiddle.net/HdNh2/4/
Highcharts 3.0.0: http://jsfiddle.net/HdNh2/5/
Is this something that could be fixed or do we need to try and circumvent the issue?
Thanks in advance...
H
So just to close this issue: Highcharts has confirmed that the logic changed since 2.2.x.
In our case it was simple enough to just re-render the entire chart, but I suspect series.setData() would also have been an option.
Here's a workaround. This will sort points on their x-values as they're added manually. This events object is in the chart object options block.
events: {
click: function(e) {
// find the clicked values and the series
var series = this.series[DIA.currentSeriesIndex],
x = parseFloat(e.xAxis[0].value),
y = parseFloat(e.yAxis[0].value);
// Add it
series.addPoint([x, y]);
if ( series.data.length > 1) {
// grab last point object in array
var point = series.data[series.data.length-1];
// sort the point objects on their x values
series.data.sort(function (a, b)
{
//Compare "a" and "b" and return -1, 0, or 1
return (a.x - b.x);
});
// force a redraw
point.update();
}
}
}