customizing tooltip

[rkor1984]

I have an issue in my code i want count to be as data for my line chart but i want count and sellcost both in the tooltip. here is my code for viewmodel, if you can help????

self.SimpleLineData = ko.observable({
    labels:  ko.observable(),
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            // tooltip: ko.observable(),
            data: ko.observable()
        }
    ]
});

$.getJSON("/ShopAndShip/DashBoard/Details", null, function (data) {
    console.log(data);
    self.SimpleLineData().labels(data.map(function (el) { return el.label; }));
    // self.SimpleLineData().datasets.map(function (e) { e.tooltip(data.map(function (el) { return el.sellCost; })) });
    self.SimpleLineData().datasets.map(function (e) { e.data(data.map(function (el) { return el.count; })) });
});

there are some links which may help http://www.chartjs.org/docs/ http://www.chartjs.org/docs/#getting-started-global-chart-configuration

[grofit]

not entirely sure, if chart.js exposes it then you should be able to do it, but unfortunately this is just a wrapper around chart.js so I would see if their library supports it and if so see how they do it, then see what needs to be pumped into the options to let it happen, if for some reason this library does not expose the right options then let me know and I can look at putting them in.

[rkor1984]

I am able to customize it using self.Options = { tooltipTemplate: "<%=label%> ponds <%= value %> shipments bookings"

        //  multiTooltipTemplate: '<%= value %> test text'
    };

but i want to convert it to multitooltip by adding one more row to it for sellcost?

still stuck in it

[grofit]

Not too sure how I can help, is multiTooltipTemplate something chartJS supports, if you can make a quick js fiddle showing a bare bones chartJS example (just raw JS without knockout) showing the desiring effect you want, I am sure I can find a way to get Knockout to feed the data to ChartJS but not entirely sure what functionality is missing etc without seeing a quick example of what you are after in raw ChartJS.

[rkor1984]

i came to know about customtooltip

External Tooltips You can enable custom tooltips in the global or chart configuration like so:

  <div class="highlight">

    var myPieChart = new Chart(ctx).Pie(data, {
customTooltips: function(tooltip) {

    // tooltip will be false if tooltip is not visible or should be hidden
    if (!tooltip) {
        return;
    }

    // Otherwise, tooltip will be an object with all tooltip properties like:

    // tooltip.caretHeight
    // tooltip.caretPadding
    // tooltip.chart
    // tooltip.cornerRadius
    // tooltip.fillColor
    // tooltip.font...
    // tooltip.text
    // tooltip.x
    // tooltip.y
    // etc...

              };
          });
        </div>

See files

sample/pie-customTooltips.html and

sample/line-customTooltips.html for examples on how to get started.

here is the link from where i got this code :http://www.chartjs.org/docs/#getting-started-global-chart-configuration

i had tried it for my problem but its not working:

                             customTooltips: function (tooltip) {
                                          //if (!tooltip) {
                                         // return;
                                         //}
                                         tooltip.text="RRR";
                                         //self.sellcostdataset().forEach(function(tooltip,e){
                                                      // if(e.label==tooltip.label)
                                                      // tooltip.text(e.sellCost);
                                                      //}
                                         // )

                            }

i have also tried

          tooltipTemplate: function () {

                // return self. sellDataset();
                        // }

this last one gives me every value of array selldataset in the tooltip i want only value coresponding to respective label

still confused about this problem

[grofit]

global chartjs args are outside of the scope of this binding, as you would set global chart configuration just like how they do it on the site:

https://raw.githubusercontent.com/nnnick/Chart.js/master/samples/pie-customTooltips.html

(You can view it at) http://rawgit.com/nnnick/Chart.js/master/samples/pie-customTooltips.html

He is setting that configuration globally for chartjs, which you can do irrespective of this knockout extension, the only tricky bit is getting your specific data into there.

Here is an example based upon the chartjs example: http://codepen.io/anon/pen/ZGdzQV

You can see I have 2 custom vars that I want in all tooltips, so I add it to the chartjs global config for custom tooltips.