How to create magento2 knockout chart

Published On: 20 August 2018.By vipin garg.

Digital Engineering
Ecommerce
General

How to create magento2 knockout chart

You can download complete working example from below url

https://github.com/mukdam/magento2-knockout-chart

See below how it will work.

Create a phtml file

<div  data-bind="scope: 'chartscope'"> 
<!-- ko template: getTemplate() --><!-- /ko -->

1 2	<div data-bind="scope: 'chartscope'"> <!-- ko template: getTemplate() --><!-- /ko -->

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "chartscope": {
                        "component": "Pulsestorm_KnockoutTutorial/js/chart"
                    }
                }
            }
        }
    }
</script>

{

"*": {

"Magento_Ui/js/core/app": {

"components": {

"chartscope": {

"component": "Pulsestorm_KnockoutTutorial/js/chart"

}

</script>

Create a .html file

<div id="line-example">
<h2>Simple Line Chart Example</h2>
<!-- <pre data-bind="text: ko.toJSON(SimpleLineData, null, 2)"></pre> -->
<canvas id="some-simple-line-chart"
        data-bind="chart: { type: 'line', data: SimpleLineData }"></canvas>
<p>The above chart is generated using the data in the view model and rendered into the canvas</p>

<h2>Simple Line Chart Example</h2>

<canvas id="some-simple-line-chart"

data-bind="chart: { type: 'line', data: SimpleLineData }"></canvas>

<p>The above chart is generated using the data in the view model and rendered into the canvas</p>

And add a js

define(
    [ 'jquery', 'uiComponent', 'ko','libChart'],
    function($, Component, ko) {

        'use strict';


        ko.observableGroup = function(observables) {
            var observableManager = {};
            var throttle = 0;
            var throttleTimeout;

            observableManager.throttle = function(duration) {
                throttle = duration;
                return observableManager;
            };

            observableManager.subscribe = function(handler) {
                function throttledHandler(val) {
                    if(throttle > 0) {
                        if(!throttleTimeout) {
                            throttleTimeout = setTimeout(function() {
                                throttleTimeout = undefined;
                                handler(val);
                            }, throttle);
                        }
                    }
                    else
                    { handler(val); }
                }

                for(var i = 0; i < observables.length; i++)
                { observables[i].subscribe(throttledHandler); }

                return observableManager;
            };

            return observableManager;
        };

        var getType = function(obj) {
            if ((obj) && (typeof (obj) === "object") && (obj.constructor == (new Date).constructor)) return "date";
            return typeof obj;
        };

        var getSubscribables = function(model) {
            var subscribables = [];
            scanForObservablesIn(model, subscribables);
            return subscribables;
        };

        var scanForObservablesIn = function(model, subscribables){
            for (var parameter in model)
            {
                var typeOfData = getType(model[parameter]);
                switch(typeOfData)
                {
                    case "object": { scanForObservablesIn(model[parameter], subscribables); } break;
                    case "array":
                    {
                        var underlyingArray = model[parameter]();
                        underlyingArray.forEach(function(entry, index){ scanForObservablesIn(underlyingArray[index], subscribables); });
                    }
                    break;

                    default:
                    {
                        if(ko.isComputed(model[parameter]) || ko.isObservable(model[parameter]))
                        { subscribables.push(model[parameter]); }
                    }
                    break;
                }
            }
        };

        ko.bindingHandlers.chart = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var allBindings = allBindingsAccessor();
                var chartBinding = allBindings.chart;
                var activeChart;
                var chartData;

                var createChart = function() {
                    var chartType = ko.unwrap(chartBinding.type);
                    var data = ko.toJS(chartBinding.data);
                    var options = ko.toJS(chartBinding.options);

                    chartData = {
                        type: chartType,
                        data: data,
                        options: options
                    };

                    activeChart = new Chart(element, chartData);
                };

                var refreshChart = function() {
                    chartData.data = ko.toJS(chartBinding.data);
                    activeChart.update();
                    activeChart.resize();
                };

                var subscribeToChanges = function() {
                    var throttleAmount = ko.unwrap(chartBinding.options.throttle) || 100;
                    var dataSubscribables = getSubscribables(chartBinding.data);
                    console.log("found obs", dataSubscribables);

                    ko.observableGroup(dataSubscribables)
                        .throttle(throttleAmount)
                        .subscribe(refreshChart);
                };

                createChart();

                if(chartBinding.options && chartBinding.options.observeChanges)
                { subscribeToChanges(); }
            }
        };


        return Component
                .extend({
                    defaults : {
                        template : 'Pulsestorm_KnockoutTutorial/chart'
                    },

                    initialize : function() {
                        this._super();
                        this.SimpleLineData = {
                                labels: ["January", "February", "March", "April", "May", "June", "July"],
                                datasets: [
                                    {
                                        label: "Healthy People",
                                        backgroundColor: "rgba(220,220,220,0.2)",
                                        borderColor: "rgba(220,220,220,1)",
                                        pointColor: "rgba(220,220,220,1)",
                                        pointStrokeColor: "#fff",
                                        pointHighlightFill: "#fff",
                                        pointHighlightStroke: "rgba(220,220,220,1)",
                                        data: [65, 59, 80, 81, 56, 55, 40]
                                    },
                                    {
                                        label: "Ill People",
                                        backgroundColor: "rgba(151,187,205,0.2)",
                                        borderColor: "rgba(151,187,205,1)",
                                        pointColor: "rgba(151,187,205,1)",
                                        pointStrokeColor: "#fff",
                                        pointHighlightFill: "#fff",
                                        pointHighlightStroke: "rgba(151,187,205,1)",
                                        data: [28, 48, 40, 19, 86, 27, 90]
                                    }
                                ]
                            };

                        /* Doughnut and Pie */
                        this.RedValue = ko.observable(300);
                        this.GreenValue = ko.observable(50);
                        this.YellowValue = ko.observable(100);
                        this.DynamicDoughnutData = {
                            labels: ["Red", "Green", "Yellow" ],
                            datasets: [
                                {
                                    data: [this.RedValue, this.GreenValue, this.YellowValue],
                                    backgroundColor: [
                                        "#FF6384",
                                        "#36A2EB",
                                        "#FFCE56"
                                    ],
                                    hoverBackgroundColor: [
                                        "#FF6384",
                                        "#36A2EB",
                                        "#FFCE56"
                                    ]
                                }]
                        };
                    }
                });
    });

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

define(

[ 'jquery', 'uiComponent', 'ko','libChart'],

function($, Component, ko) {

'use strict';

ko.observableGroup = function(observables) {

var observableManager = {};

var throttle = 0;

var throttleTimeout;

observableManager.throttle = function(duration) {

throttle = duration;

return observableManager;

};

observableManager.subscribe = function(handler) {

function throttledHandler(val) {

if(throttle > 0) {

if(!throttleTimeout) {

throttleTimeout = setTimeout(function() {

throttleTimeout = undefined;

handler(val);

}, throttle);

}

else

{ handler(val); }

}

for(var i = 0; i < observables.length; i++)

{ observables[i].subscribe(throttledHandler); }

return observableManager;

};

return observableManager;

};

var getType = function(obj) {

if ((obj) && (typeof (obj) === "object") && (obj.constructor == (new Date).constructor)) return "date";

return typeof obj;

};

var getSubscribables = function(model) {

var subscribables = [];

scanForObservablesIn(model, subscribables);

return subscribables;

};

var scanForObservablesIn = function(model, subscribables){

for (var parameter in model)

{

var typeOfData = getType(model[parameter]);

switch(typeOfData)

{

case "object": { scanForObservablesIn(model[parameter], subscribables); } break;

case "array":

{

var underlyingArray = model[parameter]();

underlyingArray.forEach(function(entry, index){ scanForObservablesIn(underlyingArray[index], subscribables); });

}

break;

default:

{

if(ko.isComputed(model[parameter]) || ko.isObservable(model[parameter]))

{ subscribables.push(model[parameter]); }

}

break;

}

};

ko.bindingHandlers.chart = {

init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

var allBindings = allBindingsAccessor();

var chartBinding = allBindings.chart;

var activeChart;

var chartData;

var createChart = function() {

var chartType = ko.unwrap(chartBinding.type);

var data = ko.toJS(chartBinding.data);

var options = ko.toJS(chartBinding.options);

chartData = {

type: chartType,

data: data,

options: options

};

activeChart = new Chart(element, chartData);

};

var refreshChart = function() {

chartData.data = ko.toJS(chartBinding.data);

activeChart.update();

activeChart.resize();

};

var subscribeToChanges = function() {

var throttleAmount = ko.unwrap(chartBinding.options.throttle) || 100;

var dataSubscribables = getSubscribables(chartBinding.data);

console.log("found obs", dataSubscribables);

ko.observableGroup(dataSubscribables)

.throttle(throttleAmount)

.subscribe(refreshChart);

};

createChart();

if(chartBinding.options && chartBinding.options.observeChanges)

{ subscribeToChanges(); }

}

};

return Component

.extend({

defaults : {

template : 'Pulsestorm_KnockoutTutorial/chart'

initialize : function() {

this._super();

this.SimpleLineData = {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [

{

label: "Healthy People",

backgroundColor: "rgba(220,220,220,0.2)",

borderColor: "rgba(220,220,220,1)",

pointColor: "rgba(220,220,220,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(220,220,220,1)",

data: [65, 59, 80, 81, 56, 55, 40]

{

label: "Ill People",

backgroundColor: "rgba(151,187,205,0.2)",

borderColor: "rgba(151,187,205,1)",

pointColor: "rgba(151,187,205,1)",

pointStrokeColor: "#fff",

pointHighlightFill: "#fff",

pointHighlightStroke: "rgba(151,187,205,1)",

data: [28, 48, 40, 19, 86, 27, 90]

}

]

};

/* Doughnut and Pie */

this.RedValue = ko.observable(300);

this.GreenValue = ko.observable(50);

this.YellowValue = ko.observable(100);

this.DynamicDoughnutData = {

labels: ["Red", "Green", "Yellow" ],

datasets: [

{

data: [this.RedValue, this.GreenValue, this.YellowValue],

backgroundColor: [

"#FF6384",

"#36A2EB",

"#FFCE56"

hoverBackgroundColor: [

"#FF6384",

"#36A2EB",

"#FFCE56"

]

}]

};

}

});

You can draw more type graph look more example http://www.chartjs.org/docs/latest/charts/

That’s all for this blog

Discover More

How to create magento2 knockout chart

How to create magento2 knockout chart

Related content

That’s all for this blog