Line chart chart, highchart or char-google

Question

Line chart chart, highchart or char-google

Navigation

#1 by (2 votes)

0

I'm new here in the forum, but I had a problem, I wanted to know if it's possible to develop a line chart, but it marks certain areas, just like the normal distribution chart ,IalreadytriedwiththechartsbutIonlymanagedtoarriveataresultalittlebitlikethis,ifyoucanhelpwithitalready.yHwy2.png">

<!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><scriptsrc="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

asked by anonymous 14.06.2017 / 03:57

1 answer

Send POST file with php using the file_get_contents function Creating a regex for vowels in C

score 2 · Answer 1

With HighCharts you can graph two series: one row and one row. To get the result you want, just put null in the intersection values of the two graphs, 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 will start from 0.1 and goes to the value 5, where the area chart starts and goes to the value 2, then back to the line graph.

I've set the graph to see how it looks: link

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

I hope I have helped:)