CODEWITHSUNDEEP
chartsgoogle-visualization
Buddhi741
Buddhi741

Reputation: 375

Is this possible in google charts or is there an alternitive or hack

is it possible for this type of chart to be created by any means using the google charting api

enter image description here

Upvotes: 5

Views: 82

Answers (1)

mike-schultz
mike-schultz

Reputation: 2364

Your example can be achieved by using an alternative charting library called ZingChart. You can use the chart type "range" and the rules feature to set min and max color areas depending on a certain value range. The horizontal red and blue lines can be achieved by using the scale-x markers.

See the example below for how you would utilize ZingChart to achieve what you are looking for. I'm on the ZingChart team so feel free to reach out to us if you need any further help.

var myConfig = {
  type:"range",
  backgroundColor : "white",
  scaleX:{
      maxItems:8,
      zooming:1,
  },
  scaleY:{
      minValue:"auto",
      markers : [
        {
          type : "line",
          range : [70],
          lineColor : "red"
        },
        {
          type : "line",
          range : [30],
          lineColor : "blue"
        }
      ]
  },
  "series":[
      {
          lineWidth:2,
          lineColor:"#8100a4",
          marker:{
            type:"none"
          },
          values : [[60,60],[70,70],[78,70],[75,70],[70,70],[50,50],[60,60],[60,60],[60,60],[34,34],[35,35],[35,35],[35,35],[30,30],[24,30],[26,30],[25,30],[28,30],[30,30],[32,32]],
          backgroundColor:"#1049c4",
          rules:[
            {
              rule:"%node-max-value < %node-min-value",
              backgroundColor:"#c00"
            }
          ],
          minLine:{
            lineColor:"#8100a4",
          },
          maxLine:{
            lineColor:"#8100a4"
          }
      }
  ]
};
 
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 300, 
	width: 500 
});
<html>
	<head>
		<script src= "https://cdn.zingchart.com/2.1.4/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/2.1.4/modules/";</script></head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

Upvotes: 8

Related Questions