All geek questions in one place

Is it possible in google charts or is there an alternative or hack

Is it possible for this type of chart to be created by any means using google api graphic display

enter image description here

+5
source share
1 answer

Your example can be achieved with an alternative chart library called ZingChart . You can use the range and rules chart type to set the min and max colors depending on a specific range of values. Horizontal red and blue lines can be achieved using scale-x markers.

See the example below on how to use ZingChart to achieve what you are looking for. I am on the ZingChart team, so feel free to contact us if you need further assistance.

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>
+8
source

Source: https://habr.com/ru/post/1233972/

More articles:


All Articles