Line chart on Chart, highchart or char-google

Asked

Viewed 470 times

0

I am new here in the forum, but I came across a problem, I wanted to know if it is possible to develop a line chart, but mark certain areas, equal to the graph of the normal distributiongráfico Distribuição Normal, I have tried with Charts but I only managed to arrive at a similar result, if you can help from now thank you.grafico consegui

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<style type="text/css">

		</style>
	</head>
	<body>
<script src="javascript/highcharts.js"></script>
<script src="javascript/exporting.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>



		<script type="text/javascript">
        const CHART = document.getElementById('myChart').getContext('2d');
        var data = [1,2,3,4,5,6];      
        console.log(CHART);
        let lineChart = new Chart(CHART, {
            type:'line',
            data:  {
                //nomes
                labels:["","","","","desvioPadrao1","media","desviopadrao2","","","",""],
                datasets:[{
                    label:"meu grafico",
                    fill:false,
                    backgroundColor:"rgba(72,192,192,0.4)",
                    borderColor:"rgba(93,95,92,1)",
                    borderCapStyle:'butt',
                    borderDash:[],
                    borderDashOffset:0.0,
                    borderJoinStyle:'miter',
                    fill:1,
                   
                   
                    data:[0.1,0.5,1,2,5,10,5,2,1,0.5,0.1],
                },
                {
                    label:"meu grafico",
                 
                    backgroundColor:"rgba(00,02,192,0.4)",
                    borderColor:"rgba(93,95,92,1)",
                    
                    
                    
                    data:[0,0,0,0,5,10,5,2,0,0,0],
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            max: 10+2
                        }
                    }],
                    xAxes:[{
                        ticks:{
                            scaleLabel: {
                                display:true
                            }
                            
                        }
                    }]
                    
                }
            }

        });
		</script>
	</body>
</html>

google-charts highcharts chart

1 answer

2


With Highcharts you can make a chart with two series: one in line and one in area. To get the result you want, just put null in the intersection values of the two charts, in your case:

series: [{
        type: 'spline',
        name: 'Line',
        data: [0.1,0.5,1,2,5,null,null,2,1,0.5,0.1]
    }, {
        type: 'areaspline',
        name: 'Area',
        data: [null,null,null,null,5,10,5,2,null,null,null]
    }]

The line starts from 0.1 and goes to value 5, where the area chart starts and goes to value 2, then back to line chart.

I set the chart so you can see how it looks: http://jsfiddle.net/2kj4k66w/1/

Ps.: If you want the chart type to be the reverse, just change the types of each series.

I hope I’ve helped :)

Browser other questions tagged google-charts highcharts chart

You are not signed in. Login or sign up in order to post.