Topic: Questions about charts, labels and JS

diworm free asked 5 years ago


Hello there! Have some questions about charts: 1. How can I add labels to my chart from data variable? I see it like this: 2. How can I add clickable legend to my chart to show/hide graphs? Like here: http://www.highcharts.com/demo/line-basic Maybee devs have some plans to add native features about this? I will be very grateful for any information.

Marta Wierzbicka staff answered 5 years ago


Hi, yes, highcharts are awesome but we can't use them as a part of MDB, so I didn't delve into highcharts code. And I will repeat myself: if you want I check something in your code and help you with these labels, please send me files with your code to m.szymanska@mdbootstrap.com and I will check how to add these labels. Best, Marta

diworm free answered 5 years ago


Hello there! I stop tests with chartsjs and switched to highcharts (it's more simplest and responsive for me). But I test with charts, example code:
    //Statistics chart
    $(function () {
        var data = {
            labels: [<?=$data['timeline'];?>],
            datasets: [
                <?=$data['dataset'];?>
            ]
        };
        var option = {
            responsive: true,
            title: {
                display: true,
                text: 'Custom Chart Title'
            },
            legend: {
                display: true,
                position: 'top',
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            }
        };
        // Get the context of the canvas element we want to select
        var ctx = document.getElementById("statistics").getContext('2d');
        var myLineChart = new Chart(ctx).Line(data, option); //'Line' defines type of the chart.

    });
But no legend and no chart title for me with this code. Docs for legend: http://www.chartjs.org/docs/#chart-configuration-legend-configuration thinking out loud: Maybee I need to add labels in option.legend, but my logic down here, coz I add labels in 'dataset' and if I do this with another chart type all hints work normaly....

Marta Wierzbicka staff answered 5 years ago


Hi, 1. For the first issue, please send me files with your code to m.szymanska@mdbootstrap.com and I will check how to add these labels. If you want to check it by yourself you can always look at the documentation of chart.js http://www.chartjs.org/docs/, because on MDB we use chart.js for creating charts. 2. If you don't find this feature clickable legend in chart.js documentation http://www.chartjs.org/docs/, we will try to create such a feature. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No