Reputation: 25

Multiple highstock charts on one page

I’m trying to make the page display a dynamic number of charts, I looked at this method from another library, but in view of the lack of knowledge js and html, I can’t convert to highcharts

I want to get the following: https://www.chartjs.org/samples/latest/charts/line/point-styles.html

       <html>
        <div class="container"></div>
    </html>

<script>
     window.onload = function() {
           var container = document.querySelector('.container');
           somedata.forEach(function(snapshot) {
                var div = document.createElement('div');
                div.classList.add('chart-container');
                container.appendChild(div);
                var config = createConfig(snapshot);

               new Highcharts.stockChart(container, config);


               });
        };
</script>

Upvotes: 1

Answers (3)

Sebastian Wędzel

Reputation: 11633

From the Highcharts site, there are a few ways to render multiple charts dynamically.

Please get familiar with this demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/

And I think that in case of creating the multiple charts Highcharts.merge feature could be useful like it is used here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-solid/

API: https://api.highcharts.com/class-reference/Highcharts#.merge%3CT%3E

And here is a really simple demo with creating charts using simple loop.

Demo: https://jsfiddle.net/BlackLabel/qaydxnph/

var mainOptions = {
  chart: {
    backgroundColor: 'green'
  }
}

var data = [];


for (var i = 0; i < 5; i++) {
//create div dynamically
  var iDiv = document.createElement('div');
  iDiv.id = 'container' + i;
  document.getElementsByTagName('body')[0].appendChild(iDiv);

  data.push(Math.random() * i)

//create charts
  Highcharts.stockChart(iDiv.id, Highcharts.merge(mainOptions, {
    series: [{
      data: data
    }]
  }))
}

Upvotes: 2

Василий Пупкин

Reputation: 25

I don’t know how adequate this is, but it worked for me

function createConfig(snapshot) {

        let profitInUSDT = snapshot.profitInUSDT,
            profitInBTC = snapshot.profitInBTC,
            xAxisDate = snapshot.date;


        profitInUSDT = profitInUSDT.map((val, i) => [xAxisDate[i], val])
        profitInBTC = profitInBTC.map((val, i) => [xAxisDate[i], val])


        return {

            title: {
                useHTML: true,
                text:   '<a href="/tracker/' + snapshot.name + '"> ' + snapshot.name + ' </a>'
            },
            navigator: {
                enabled: false
            },



            rangeSelector: {
                selected: 6,
                enabled: false,

                },

            scrollbar: {
                enabled: false
            },
            yAxis: {
                opposite:false,
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';
                    },
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },
            legend: {
                enabled: true,

            },
            tooltip: {
                pointFormat: '{series.name} <b>{point.y}%</b>',

                valueDecimals: 2,
                split: true
            },
            series: [{
                name: 'profit in USDT',
                data: profitInUSDT,
                color: '#21a27c',
                tooltip: {
                    valueDecimals: 2
                }
            },
                {
                    name: 'profit in BTC',
                    data: profitInBTC,
                    color: '#f79413',
                    tooltip: {
                        valueDecimals: 2
                    }
                }
            ]

        };
    }



    window.onload = function() {
    	var cont = document.querySelector('.container');
 
        [{"name":"test","description":"test","date":[1577203210000,1577206808000,1577210408000],"profitInBTC":[0.0,-0.79,0.87],"profitInUSDT":[0.0,-0.51,0.36]},{"name":"puz","description":"futures","date":[1582665302212,1582668005727,1582671603990],"profitInBTC":[0.0,-0.5,14.72],"profitInUSDT":[15.4,15.41,15.41]}].forEach(function(snapshot) {

            var container = document.createElement('div');
            container.className = 'chart-container';
            cont.append(container);
						
            document.body.append(cont);

            var config = createConfig(snapshot);

            Highcharts.stockChart(container, config);


        });

    };

.chart-container {
            width: 80%;
            margin-left: 40px;
            margin-right: 40px;
            margin-bottom: 40px;
        }
.container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

<script src="https://code.highcharts.com/stock/highstock.js"></script>


<div class="container">
	</div>

Upvotes: 1

Bernardo Marques

Reputation: 1055

I found a similar solution using php, maybe you can convert this code to your needs (Original post).

The code is below:

        <script>
        titles = <?php echo json_encode($graphTitles)?>;
        //Loop through the graphs
        for (var graphNO = 0; graphNO < titles.length; graphNO++)
        {                               
           //CREATE NEW CONTAINER
            var container = document.createElement('div'); 
            document.body.appendChild(container);er);

            dates = <?php echo json_encode($recivedDates);?>[titles[graphNO]];
            //I EXTRACT A FEW  MORE ARRAYS THE SAME METHOD
              $(container).highcharts({
                  title: {
                      text: titles[graphNO]
                  },
                  xAxis: {
                      categories: dates
                  },
                  series: [{
                      type: 'column',
                      color: 'gold',
                      name: 'Created Issues',
                      data: createdIssues.map(Number)
                  }, 
                   //MORE COLUMN'S AND SOME SPLINES. IT ALL WORKS AS EXPECTED
              });
            });
    </script>

Upvotes: 0

Multiple highstock charts on one page

Answers (3)

Related Questions