Menu
is it possible for this type of chart to be created by any means using the google charting api
347
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
