CODEWITHSUNDEEP
javascriptangularjschartsionic-framework
esastincy
esastincy

Reputation: 1627

Chart with time in y-axis

I need a chart for an ionic app that use time in the y-axis, something like this: enter image description here

The only thing I have been able to find that works like this is googles timeline chart: https://developers.google.com/chart/interactive/docs/gallery/timeline. Problem with that is, they do not allow offline use and that is something I must have. Has anyone seen anything that will work for this? I have been working with amCharts, but they only allow parseDates to be used on the category(x) axis.

Upvotes: 1

Views: 399

Answers (2)

Jailbot
Jailbot

Reputation: 2608

ZingChart might be of interest to you. The y-axis on top is as simple as creating a scale-y-2 object (and you can set the original scale-y axis to visible: 0).

The overlapping bars are achieved with a normal multi-series bar chart with bars-overlap set to 100% inside the plot object, and one of the series bar-widths set to 80% (or any percentage you'd like to use). Check out the included snippet for the code and chart.

As for using time for your y-axis values, the library provides the transform object that will transform Unix timestamps into various date/time formats. You can read more about it in the docs.

I'm on the ZingChart team, so if you have any questions about implementation, just give us a holler!

var myChart = {
    "type":"hbar",
	"plotarea":{

	},
    "scale-y-2":{
        "values":["3pm","4pm","5pm","6pm","7pm"]
    },
    "scale-y":{
        "visible":false
    },
	"plot":{
        "bars-overlap":"100%"
	},
	"series":[
		{
			 "values":[20,5,3,4]
		},
        {
            "values":[18,8,4,5],
            "bar-width":"80%"
        }
	]
};

zingchart.render({
  data: myChart,
  id: "myChart",
  width: "100%"
 
});
#myChart {
  width: 100%;  
}
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>

Upvotes: 1

dan
dan

Reputation: 1984

Take a look at HighCharts

They're pretty customizable and will work offline.

Edit

JSFiddle

chart: {
    type: 'bar'
},
yAxis: {
    type: 'datetime',
    opposite: true
}

Upvotes: 0

Related Questions